Maj

parcoursup/components/map-view.riot

@@ -1,100 +1,120 @@
 <map-view>
   <div class="map-box">
     <h3>Carte des formations</h3>
-    <div class="map" ref="map"></div>
+    <div class="map" ref="carte"></div>
   </div>
 
   <script>
     export default {
-      onMounted() {
-        const mapElement = this.$('div[ref="map"]')
 
-        this.map = L.map(mapElement).setView([46.8, 2.5], 6)
+      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.map)
+        }).addTo(this.carte)
 
-        this.markersLayer = L.layerGroup().addTo(this.map)
-        this.markersById = {}
-        this.refreshMarkers()
+        this.afficherMarqueurs()
 
-        setTimeout(() => {
-          this.map.invalidateSize()
-        }, 100)
+        var composant = this
 
-        // Exposer globalement pour que result-list puisse appeler
-        window.mapFocus = (id) => {
-          this.focusFormation(id)
+        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()
 
-        if (this.map) {
-          setTimeout(() => {
-            this.map.invalidateSize()
-          }, 50)
+        var composant = this
+
+        if (this.carte) {
+          setTimeout(function() {
+            composant.carte.invalidateSize()
+          }, 100)
+
+          setTimeout(function() {
+            composant.carte.invalidateSize()
+          }, 300)
         }
       },
 
       onBeforeUnmount() {
-        if (this.map) {
-          this.map.remove()
-          this.map = null
+        if (this.carte) {
+          this.carte.remove()
+          this.carte = null
         }
         window.mapFocus = null
       },
 
-      refreshMarkers() {
-        if (!this.map || !this.markersLayer) {
+      afficherMarqueurs() {
+        if (!this.carte || !this.groupeMarqueurs) {
           return
         }
 
-        this.markersLayer.clearLayers()
-        this.markersById = {}
+        this.groupeMarqueurs.clearLayers()
+        this.marqueursIndex = {}
 
-        const points = []
-        const results = this.props.results || []
+        var coordonnees = []
+        var formations  = this.props.results || []
 
-        for (let i = 0; i < results.length; i++) {
-          const f = results[i]
+        for (var i = 0; i < formations.length; i++) {
+          var f = formations[i]
 
           if (f.latitude != null && f.longitude != null) {
-            const marker = L.marker([f.latitude, f.longitude])
-            marker.bindPopup('<b>' + f.nom + '</b><br>' + f.ville)
-            marker.addTo(this.markersLayer)
+            var marqueur = L.marker([f.latitude, f.longitude])
+            marqueur.bindPopup('<b>' + f.nom + '</b><br>' + f.ville)
+            marqueur.addTo(this.groupeMarqueurs)
 
-            this.markersById[f.id] = marker
-            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)
         }
       },
 
-      focusFormation(id) {
-        var marker = this.markersById[id]
+      centrerSurFormation(id) {
+        var marqueur = this.marqueursIndex[id]
 
-        if (marker && this.map) {
-          // Scroll vers la carte
-          var mapEl = this.$('div[ref="map"]')
-          if (mapEl) {
-            mapEl.scrollIntoView({ behavior: 'smooth', block: 'center' })
+        if (marqueur && this.carte) {
+          var divCarte = this.$('div[ref="carte"]')
+
+          if (divCarte) {
+            divCarte.scrollIntoView({ behavior: 'smooth', block: 'center' })
           }
 
-          // Zoom sur le marqueur et ouvrir le popup
-          setTimeout(() => {
-            this.map.setView(marker.getLatLng(), 13, { animate: true })
-            marker.openPopup()
+          var composant = this
+
+          setTimeout(function() {
+            composant.carte.invalidateSize()
+            composant.carte.setView(marqueur.getLatLng(), 13, { animate: true })
+            marqueur.openPopup()
           }, 400)
         }
       }
+
     }
   </script>
+
 </map-view>