Reglage des prblms de la carte

parcoursup/components/map-view.riot

@@ -1,13 +1,15 @@
 <map-view>
   <div class="map-box">
     <h3>Carte des formations</h3>
-    <div id="map"></div>
+    <div class="map" ref="map"></div>
   </div>
 
   <script>
     export default {
       onMounted() {
-        this.map = L.map(this.root.querySelector('#map')).setView([46.8, 2.5], 6)
+        const 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'
@@ -15,10 +17,28 @@
 
         this.markersLayer = L.layerGroup().addTo(this.map)
         this.refreshMarkers()
+
+        // important : Leaflet calcule parfois mal la taille au montage
+        setTimeout(() => {
+          this.map.invalidateSize()
+        }, 100)
       },
 
       onUpdated() {
         this.refreshMarkers()
+
+        if (this.map) {
+          setTimeout(() => {
+            this.map.invalidateSize()
+          }, 50)
+        }
+      },
+
+      onBeforeUnmount() {
+        if (this.map) {
+          this.map.remove()
+          this.map = null
+        }
       },
 
       refreshMarkers() {
@@ -29,11 +49,12 @@
         this.markersLayer.clearLayers()
 
         const points = []
+        const results = this.props.results || []
 
-        for (let i = 0; i < this.props.results.length; i++) {
-          const f = this.props.results[i]
+        for (let i = 0; i < results.length; i++) {
+          const f = results[i]
 
-          if (f.latitude && f.longitude) {
+          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)