✨ feat(ReserverController): Calcule l'itinéraire et affiche sur une carte

Ajoute le calcul de l'itinéraire via l'API Geoplateforme et affiche le résultat sur une carte Leaflet. Met à jour la CSP.

assets/reserve.js

@@ -4,6 +4,7 @@ import { CookieBanner } from "./tools/CookieBanner.js";
 import { FlowReserve } from "./tools/FlowReserve.js";
 import { FlowDatePicker } from "./tools/FlowDatePicker.js";
 import { FlowAddToCart } from "./tools/FlowAddToCart.js";
+import { LeafletMap } from "./tools/LeafletMap.js";
 import * as Turbo from "@hotwired/turbo";
 import { onLCP, onINP, onCLS } from 'web-vitals';
 import AOS from 'aos';
@@ -252,7 +253,7 @@ const initRegisterLogic = () => {
 
 // --- INITIALISATION ---
 const registerComponents = () => {
-    const comps = [['utm-event', UtmEvent], ['utm-account', UtmAccount], ['cookie-banner', CookieBanner]];
+    const comps = [['utm-event', UtmEvent], ['utm-account', UtmAccount], ['cookie-banner', CookieBanner], ['leaflet-map', LeafletMap]];
     comps.forEach(([name, cl]) => { if (!customElements.get(name)) customElements.define(name, cl); });
 
     if(!customElements.get('flow-reserve'))

assets/tools/LeafletMap.js

@@ -0,0 +1,53 @@
+
+export class LeafletMap extends HTMLElement {
+    connectedCallback() {
+        if (this.map) return;
+
+        // Ensure Leaflet is loaded
+        if (typeof L === 'undefined') {
+            const checkLeaflet = setInterval(() => {
+                if (typeof L !== 'undefined') {
+                    clearInterval(checkLeaflet);
+                    this.initMap();
+                }
+            }, 100);
+            return;
+        }
+
+        this.initMap();
+    }
+
+    initMap() {
+        if (!this.dataset.geometry) return;
+
+        try {
+            const geometry = JSON.parse(this.dataset.geometry);
+            
+            // 'this' refers to the custom element itself. 
+            // Leaflet can attach to it if it has dimensions.
+            this.map = L.map(this);
+
+            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            }).addTo(this.map);
+
+            const layer = L.geoJSON(geometry).addTo(this.map);
+            this.map.fitBounds(layer.getBounds(), {padding: [50, 50]});
+            
+            // Fix for map not rendering correctly sometimes when container size changes or initial load
+            setTimeout(() => {
+                this.map.invalidateSize();
+            }, 100);
+
+        } catch (e) {
+            console.error('Error initializing Leaflet map:', e);
+        }
+    }
+
+    disconnectedCallback() {
+        if (this.map) {
+            this.map.remove();
+            this.map = null;
+        }
+    }
+}