carte et marqueurs. C'etait INTERMINABLE !!!

parcoursup-app/src/components/carte-formations.riot

@@ -1,33 +1,85 @@
 <carte-formations>
-  <div id="carte" style="height: 500px; width: 100%;"></div>
+
+  <div id="carte" style="height: 500px; width: 600px;"></div>
+
+
 
   <script>
-    import L from 'leaflet'
 
-    export default {
-      onMounted() {
+    import L from 'leaflet'
+    import 'leaflet/dist/leaflet.css'
+    import markerIcon from 'leaflet/dist/images/marker-icon.png'
+    import markerShadow from 'leaflet/dist/images/marker-shadow.png'
+
+
+
+    export default 
+    {
+
+      onMounted() 
+      {
+
         this.carte = L.map('carte').setView([46.603354, 1.888334], 6)
 
-        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-          attribution: '© OpenStreetMap'
-        }).addTo(this.carte)
+        L.tileLayer
+        (
+          'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
+          {
+            attribution: '© OpenStreetMap'
+          }
+        ).addTo(this.carte)
+
+        
+        delete L.Icon.Default.prototype._getIconUrl
+
+        L.Icon.Default.mergeOptions
+        (
+          {
+            iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
+            shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
+            iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',
+          }
+        )
+      
+
+        
       },
 
-      ajouterMarqueurs(formations) {
-        formations.forEach(f => {
-          const lat = f.g_olocalisation_des_formations?.lat
-          const lon = f.g_olocalisation_des_formations?.lon
+      onUpdated() 
+      {
 
-          if (lat && lon) {
-            L.marker([lat, lon])
-              .addTo(this.carte)
-              .bindPopup(`
+
+        this.carte.eachLayer
+        (
+          layer => 
+          {
+            if (layer instanceof L.Marker) 
+            {
+              this.carte.removeLayer(layer)
+            }
+          }
+        )
+
+        this.props.formations?.forEach
+        (
+          f => 
+          {
+            const lat = f.g_olocalisation_des_formations?.lat
+            const lon = f.g_olocalisation_des_formations?.lon
+            
+            if (lat && lon) 
+            {
+              L.marker([lat, lon]).addTo(this.carte).bindPopup
+              (
+                `
                 <b>${f.fil_lib_voe_acc}</b><br>
                 ${f.g_ea_lib_vx}<br>
                 ${f.ville_etab}
-              `)
+                `
+              )
+            }
           }
-        })
+        )
       }
     }
   </script>