revert - bug

parcoursup/components/map-view.riot

@@ -1,53 +1,120 @@
 <map-view>
   <div class="map-box">
     <h3>Carte des formations</h3>
-    <div id="map"></div>
+    <div class="map" ref="carte"></div>
   </div>
 
   <script>
     export default {
+
       onMounted() {
-        this.map = L.map(this.root.querySelector('#map')).setView([46.8, 2.5], 6)
+        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.map)
+        }).addTo(this.carte);
 
-        this.markersLayer = L.layerGroup().addTo(this.map)
-        this.refreshMarkers()
+        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.refreshMarkers()
+        this.afficherMarqueurs();
+
+        var composant = this;
+
+        if (this.carte) {
+          setTimeout(function() {
+            composant.carte.invalidateSize();
+          }, 100);
+
+          setTimeout(function() {
+            composant.carte.invalidateSize();
+          }, 300);
+        }
       },
 
-      refreshMarkers() {
-        if (!this.map || !this.markersLayer) {
-          return
+      onBeforeUnmount() {
+        if (this.carte) {
+          this.carte.remove();
+          this.carte = null;
+        }
+        window.mapFocus = null;
+      },
+
+      afficherMarqueurs() {
+        if (!this.carte || !this.groupeMarqueurs) {
+          return;
         }
 
-        this.markersLayer.clearLayers()
+        this.groupeMarqueurs.clearLayers();
+        this.marqueursIndex = {};
 
-        const points = []
+        var coordonnees = [];
+        var formations  = this.props.results || [];
 
-        for (let i = 0; i < this.props.results.length; i++) {
-          const f = this.props.results[i]
+        for (var i = 0; i < formations.length; i++) {
+          var f = formations[i];
 
-          if (f.latitude && f.longitude) {
-            const marker = L.marker([f.latitude, f.longitude])
-            marker.bindPopup(`<b>${f.nom}</b><br>${f.ville}`)
-            marker.addTo(this.markersLayer)
+          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);
 
-            points.push([f.latitude, f.longitude])
+            this.marqueursIndex[f.id] = marqueur;
+            coordonnees.push([f.latitude, f.longitude]);
           }
         }
 
-        if (points.length > 0) {
-          this.map.fitBounds(points, { padding: [20, 20] })
+        if (coordonnees.length > 0) {
+          this.carte.fitBounds(coordonnees, { padding: [20, 20] });
         } else {
-          this.map.setView([46.8, 2.5], 6)
+          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>
+
+</map-view>