ajout du style global et de la carte leaflet

2026-03-18 13:21:19 +01:00
parent 43d0cf4abe
commit c97bda935e
7 changed files with 196 additions and 34 deletions
@@ -0,0 +1,53 @@
+<map-view>
+  <div class="map-box">
+    <h3>Carte des formations</h3>
+    <div id="map"></div>
+  </div>
+
+  <script>
+    export default {
+      onMounted() {
+        this.map = L.map(this.root.querySelector('#map')).setView([46.8, 2.5], 6)
+
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+          attribution: '&copy; OpenStreetMap contributors'
+        }).addTo(this.map)
+
+        this.markersLayer = L.layerGroup().addTo(this.map)
+        this.refreshMarkers()
+      },
+
+      onUpdated() {
+        this.refreshMarkers()
+      },
+
+      refreshMarkers() {
+        if (!this.map || !this.markersLayer) {
+          return
+        }
+
+        this.markersLayer.clearLayers()
+
+        const points = []
+
+        for (let i = 0; i < this.props.results.length; i++) {
+          const f = this.props.results[i]
+
+          if (f.latitude && f.longitude) {
+            const marker = L.marker([f.latitude, f.longitude])
+            marker.bindPopup(`<b>${f.nom}</b><br>${f.ville}`)
+            marker.addTo(this.markersLayer)
+
+            points.push([f.latitude, f.longitude])
+          }
+        }
+
+        if (points.length > 0) {
+          this.map.fitBounds(points, { padding: [20, 20] })
+        } else {
+          this.map.setView([46.8, 2.5], 6)
+        }
+      }
+    }
+  </script>
+</map-view>