larlet-fr-david/david/2024/_sources/2024-03-26 - GPX Viewer.html

<gpx-viewer data-height="500px" data-width="800px">
  <p>
    Vous devriez voir s’afficher une carte de mon « Grand Tour de la forêt de Ouareau »,
    qui contient <a data-gpx href="/static/david/2024/grand_tour_de_la_foret_de_ouareau.gpx">cette trace GPX</a>,
    centrée sur <span data-latitude>46.2117</span>, <span data-longitude>-73.9335</span>
    avec un zoom de <span data-zoom>12</span>.
    Il est probable que cela ne s’exécute pas dans un agrégateur par exemple.
  </p>
</gpx-viewer>

<script type="module">
  import * as L from '/static/david/2024/leaflet.1.9.4/leaflet.1.9.4.js'
  window.L = L // Hack for leaflet-gpx, youpi.
</script>
<script type="module" nonce="oembed-web-component">
  class GPXViewer extends HTMLElement {
    static tagName = 'gpx-viewer'

    static register(tagName, registry) {
      if(!registry && ('customElements' in globalThis)) {
        registry = globalThis.customElements
      }
      registry?.define(tagName || this.tagName, this)
    }

    #attachCSS(path) {
      const linkElement = document.createElement('link')
      linkElement.setAttribute('rel', 'stylesheet')
      linkElement.setAttribute('href', path)
      this.shadowRoot.appendChild(linkElement)
    }

    #computeDimensions(mapContainer) {
      // There has to be a better way but I feel lazy tonight.
      let height = this.dataset.height
      let width = this.dataset.width
      // Size is in px so we strip these chars and convert to int.
      const heightValue = Number(height.slice(0, -2))
      const widthValue = Number(width.slice(0, -2))
      const mediaQueryMiddle = window.matchMedia(`(max-width: ${widthValue}px)`)
      const mediaQuerySmall = window.matchMedia(`(max-width: ${widthValue / 2}px)`)
      if (mediaQueryMiddle.matches) {
        height = `${heightValue / 2}px`
        width = `${widthValue / 2}px`
      }
      if (mediaQuerySmall.matches) {
        height = `${heightValue / 3}px`
        width = `${widthValue / 3}px`
      }
      mapContainer.style.height = height
      mapContainer.style.width = width
    }

    #createMapContainer() {
      const mapContainer = document.createElement('div')
      this.#computeDimensions(mapContainer)
      this.shadowRoot.appendChild(mapContainer)
      return mapContainer
    }

    #createMap(mapContainer) {
      const map = L.map(mapContainer).setView(
        [
          this.querySelector('[data-latitude]').textContent,
          this.querySelector('[data-longitude]').textContent,
        ],
        this.querySelector('[data-zoom]').textContent
      )
      L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution:
          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      }).addTo(map)
      return map
    }

    #attachGPX(map) {
      const gpxUrl = this.querySelector('[data-gpx]').href
      new GPX(gpxUrl, {
        async: true,
        marker_options: {
          startIconUrl: '/static/david/2024/leaflet-gpx.1.7.0-custom/pin-icon-start.png',
          endIconUrl: '/static/david/2024/leaflet-gpx.1.7.0-custom/pin-icon-end.png',
          shadowUrl: '/static/david/2024/leaflet-gpx.1.7.0-custom/pin-shadow.png'
        }
      }).on('loaded', (e) => {
        map.fitBounds(e.target.getBounds())
      }).addTo(map)
    }

    constructor() {
      super()
      this.attachShadow({ mode: 'open' })
    }

    async connectedCallback() {
      this.#attachCSS('/static/david/2024/leaflet.1.9.4/leaflet.css')
      const mapContainer = this.#createMapContainer()
      const map = this.#createMap(mapContainer)
      this.#attachGPX(map)
    }

  }

  import GPX from '/static/david/2024/leaflet-gpx.1.7.0-custom/gpx.1.7.0-custom.js'

  GPXViewer.register()
</script>