public-html2/parcoursup/components/map-view.riot

<map-view>
  <div class="map-box">
    <h3>Carte des formations</h3>
    <div class="map" ref="map"></div>
  </div>

  <script>
    export default {
      onMounted() {
        var mapElement = this.$('div[ref="map"]')

        this.map = L.map(mapElement).setView([46.8, 2.5], 6)

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '&copy; OpenStreetMap contributors'
        }).addTo(this.map)

        this.markersLayer = L.layerGroup().addTo(this.map)
        this.markersById = {}
        this.refreshMarkers()

        var self = this

        setTimeout(function() {
          if (self.map) self.map.invalidateSize()
        }, 200)

        setTimeout(function() {
          if (self.map) self.map.invalidateSize()
        }, 500)

        window.mapFocus = function(id) {
          self.focusFormation(id)
        }
      },

      onUpdated() {
        this.refreshMarkers()

        var self = this

        if (this.map) {
          setTimeout(function() {
            self.map.invalidateSize()
          }, 100)

          setTimeout(function() {
            self.map.invalidateSize()
          }, 300)
        }
      },

      onBeforeUnmount() {
        if (this.map) {
          this.map.remove()
          this.map = null
        }
        window.mapFocus = null
      },

      refreshMarkers() {
        if (!this.map || !this.markersLayer) {
          return
        }

        this.markersLayer.clearLayers()
        this.markersById = {}

        var points = []
        var results = this.props.results || []

        for (var i = 0; i < results.length; i++) {
          var f = results[i]

          if (f.latitude != null && f.longitude != null) {
            var marker = L.marker([f.latitude, f.longitude])
            marker.bindPopup('<b>' + f.nom + '</b><br>' + f.ville)
            marker.addTo(this.markersLayer)

            this.markersById[f.id] = marker
            points.push([f.latitude, f.longitude])
          }
        }

        if (points.length > 0) {
          this.map.fitBounds(points, { padding: [20, 20] })
        } else {
          this.map.setView([46.8, 2.5], 6)
        }
      },

      focusFormation(id) {
        var marker = this.markersById[id]

        if (marker && this.map) {
          var mapEl = this.$('div[ref="map"]')
          if (mapEl) {
            mapEl.scrollIntoView({ behavior: 'smooth', block: 'center' })
          }

          var self = this

          setTimeout(function() {
            self.map.invalidateSize()
            self.map.setView(marker.getLatLng(), 13, { animate: true })
            marker.openPopup()
          }, 400)
        }
      }
    }
  </script>
</map-view>