carte commencée mais quelle galere npm install leaflet!

2026-03-27 15:03:17 +01:00
parent 8c8e6a613a
commit 4cb0b46b40
4 changed files with 79 additions and 31 deletions
@@ -0,0 +1,34 @@
+<carte-formations>
+  <div id="carte" style="height: 500px; width: 100%;"></div>
+
+  <script>
+    import L from 'leaflet'
+
+    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)
+      },
+
+      ajouterMarqueurs(formations) {
+        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>
+</carte-formations>