ajout des elements

parcoursup/components/map-view.riot

@@ -7,7 +7,7 @@
   <script>
     export default {
       onMounted() {
-        const mapElement = this.$('div[ref="map"]')
+        var mapElement = this.$('div[ref="map"]')
 
         this.map = L.map(mapElement).setView([46.8, 2.5], 6)
 
@@ -16,21 +16,37 @@
         }).addTo(this.map)
 
         this.markersLayer = L.layerGroup().addTo(this.map)
+        this.markersById = {}
         this.refreshMarkers()
 
-        // important : Leaflet calcule parfois mal la taille au montage
-        setTimeout(() => {
-          this.map.invalidateSize()
-        }, 100)
+        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(() => {
-            this.map.invalidateSize()
-          }, 50)
+          setTimeout(function() {
+            self.map.invalidateSize()
+          }, 100)
+
+          setTimeout(function() {
+            self.map.invalidateSize()
+          }, 300)
         }
       },
 
@@ -39,6 +55,7 @@
           this.map.remove()
           this.map = null
         }
+        window.mapFocus = null
       },
 
       refreshMarkers() {
@@ -47,18 +64,20 @@
         }
 
         this.markersLayer.clearLayers()
+        this.markersById = {}
 
-        const points = []
-        const results = this.props.results || []
+        var points = []
+        var results = this.props.results || []
 
-        for (let i = 0; i < results.length; i++) {
-          const f = results[i]
+        for (var i = 0; i < results.length; i++) {
+          var f = results[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}`)
+            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])
           }
         }
@@ -68,7 +87,26 @@
         } 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>
+</map-view>