Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

2024-03-26 - GPX Viewer.html 3.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. <gpx-viewer data-height="500px" data-width="800px">
  2. <p>
  3. Vous devriez voir s’afficher une carte de mon « Grand Tour de la forêt de Ouareau »,
  4. qui contient <a data-gpx href="/static/david/2024/grand_tour_de_la_foret_de_ouareau.gpx">cette trace GPX</a>,
  5. centrée sur <span data-latitude>46.2117</span>, <span data-longitude>-73.9335</span>
  6. avec un zoom de <span data-zoom>12</span>.
  7. Il est probable que cela ne s’exécute pas dans un agrégateur par exemple.
  8. </p>
  9. </gpx-viewer>
  10. <script type="module">
  11. import * as L from '/static/david/2024/leaflet.1.9.4/leaflet.1.9.4.js'
  12. window.L = L // Hack for leaflet-gpx, youpi.
  13. </script>
  14. <script type="module" nonce="oembed-web-component">
  15. class GPXViewer extends HTMLElement {
  16. static tagName = 'gpx-viewer'
  17. static register(tagName, registry) {
  18. if(!registry && ('customElements' in globalThis)) {
  19. registry = globalThis.customElements
  20. }
  21. registry?.define(tagName || this.tagName, this)
  22. }
  23. #attachCSS(path) {
  24. const linkElement = document.createElement('link')
  25. linkElement.setAttribute('rel', 'stylesheet')
  26. linkElement.setAttribute('href', path)
  27. this.shadowRoot.appendChild(linkElement)
  28. }
  29. #computeDimensions(mapContainer) {
  30. // There has to be a better way but I feel lazy tonight.
  31. let height = this.dataset.height
  32. let width = this.dataset.width
  33. // Size is in px so we strip these chars and convert to int.
  34. const heightValue = Number(height.slice(0, -2))
  35. const widthValue = Number(width.slice(0, -2))
  36. const mediaQueryMiddle = window.matchMedia(`(max-width: ${widthValue}px)`)
  37. const mediaQuerySmall = window.matchMedia(`(max-width: ${widthValue / 2}px)`)
  38. if (mediaQueryMiddle.matches) {
  39. height = `${heightValue / 2}px`
  40. width = `${widthValue / 2}px`
  41. }
  42. if (mediaQuerySmall.matches) {
  43. height = `${heightValue / 3}px`
  44. width = `${widthValue / 3}px`
  45. }
  46. mapContainer.style.height = height
  47. mapContainer.style.width = width
  48. }
  49. #createMapContainer() {
  50. const mapContainer = document.createElement('div')
  51. this.#computeDimensions(mapContainer)
  52. this.shadowRoot.appendChild(mapContainer)
  53. return mapContainer
  54. }
  55. #createMap(mapContainer) {
  56. const map = L.map(mapContainer).setView(
  57. [
  58. this.querySelector('[data-latitude]').textContent,
  59. this.querySelector('[data-longitude]').textContent,
  60. ],
  61. this.querySelector('[data-zoom]').textContent
  62. )
  63. L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  64. attribution:
  65. '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  66. }).addTo(map)
  67. return map
  68. }
  69. #attachGPX(map) {
  70. const gpxUrl = this.querySelector('[data-gpx]').href
  71. new GPX(gpxUrl, {
  72. async: true,
  73. marker_options: {
  74. startIconUrl: '/static/david/2024/leaflet-gpx.1.7.0-custom/pin-icon-start.png',
  75. endIconUrl: '/static/david/2024/leaflet-gpx.1.7.0-custom/pin-icon-end.png',
  76. shadowUrl: '/static/david/2024/leaflet-gpx.1.7.0-custom/pin-shadow.png'
  77. }
  78. }).on('loaded', (e) => {
  79. map.fitBounds(e.target.getBounds())
  80. }).addTo(map)
  81. }
  82. constructor() {
  83. super()
  84. this.attachShadow({ mode: 'open' })
  85. }
  86. async connectedCallback() {
  87. this.#attachCSS('/static/david/2024/leaflet.1.9.4/leaflet.css')
  88. const mapContainer = this.#createMapContainer()
  89. const map = this.#createMap(mapContainer)
  90. this.#attachGPX(map)
  91. }
  92. }
  93. import GPX from '/static/david/2024/leaflet-gpx.1.7.0-custom/gpx.1.7.0-custom.js'
  94. GPXViewer.register()
  95. </script>