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

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

  <script>
    export default {

      onMounted() {
        var divCarte = this.$('div[ref="carte"]');

        this.carte           = L.map(divCarte).setView([46.8, 2.5], 6);
        this.groupeMarqueurs = L.layerGroup().addTo(this.carte);
        this.marqueursIndex  = {};

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

        this.afficherMarqueurs();

        var composant = this;

        setTimeout(function() {
          if (composant.carte) {
            composant.carte.invalidateSize();
          }
        }, 200);

        setTimeout(function() {
          if (composant.carte) {
            composant.carte.invalidateSize();
          }
        }, 500);

        window.mapFocus = function(id) {
          composant.centrerSurFormation(id);
        };
      },

      onUpdated() {
        this.afficherMarqueurs();

        var composant = this;

        if (this.carte) {
          setTimeout(function() {
            composant.carte.invalidateSize();
          }, 100);

          setTimeout(function() {
            composant.carte.invalidateSize();
          }, 300);
        }
      },

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

      afficherMarqueurs() {
        if (!this.carte || !this.groupeMarqueurs) {
          return;
        }

        this.groupeMarqueurs.clearLayers();
        this.marqueursIndex = {};

        var coordonnees = [];
        var formations  = this.props.results || [];

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

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

            this.marqueursIndex[f.id] = marqueur;
            coordonnees.push([f.latitude, f.longitude]);
          }
        }

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

      centrerSurFormation(id) {
        var marqueur = this.marqueursIndex[id];

        if (marqueur && this.carte) {
          var divCarte = this.$('div[ref="carte"]');

          if (divCarte) {
            divCarte.scrollIntoView({ behavior: 'smooth', block: 'center' });
          }

          var composant = this;

          setTimeout(function() {
            composant.carte.invalidateSize();
            composant.carte.setView(marqueur.getLatLng(), 13, { animate: true });
            marqueur.openPopup();
          }, 400);
        }
      }

    };
  </script>

</map-view>