Replace OSM iframe with Leaflet map: marker, zoom, geocoding via Nominatim

- Add event-map.js module: loads Leaflet dynamically, geocodes address, renders map with marker at zoom 16 - Remove iframe, address text and OSM link below map - Add CSP entries for unpkg (Leaflet), tile.openstreetmap.org (tiles), nominatim (geocoding) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-20 18:35:54 +01:00
parent e2797e9731
commit 91b52116c7
4 changed files with 55 additions and 14 deletions
--- a/assets/modules/event-map.js
+++ b/assets/modules/event-map.js
@@ -0,0 +1,47 @@
+export function initEventMap() {
+    const mapEl = document.getElementById('event-map')
+    if (!mapEl) return
+
+    const address = mapEl.dataset.address
+    if (!address) return
+
+    const link = document.createElement('link')
+    link.rel = 'stylesheet'
+    link.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css'
+    document.head.appendChild(link)
+
+    const script = document.createElement('script')
+    script.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js'
+    script.onload = () => geocodeAndRender(address, mapEl)
+    document.head.appendChild(script)
+}
+
+function geocodeAndRender(address, mapEl) {
+    const url = 'https://nominatim.openstreetmap.org/search?format=json&limit=1&q=' + encodeURIComponent(address)
+
+    globalThis.fetch(url)
+        .then(r => r.json())
+        .then(data => {
+            if (data.length === 0) {
+                mapEl.innerHTML = '<div style="display:flex;align-items:center;justify-content:center;height:100%;background:#f3f4f6;"><p style="font-weight:700;color:#9ca3af;">Adresse introuvable sur la carte</p></div>'
+
+                return
+            }
+
+            const lat = parseFloat(data[0].lat)
+            const lon = parseFloat(data[0].lon)
+
+            /* global L */
+            const map = L.map(mapEl).setView([lat, lon], 16)
+
+            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+                maxZoom: 19,
+            }).addTo(map)
+
+            L.marker([lat, lon]).addTo(map).bindPopup('<b>' + address + '</b>').openPopup()
+        })
+        .catch(() => {
+            mapEl.innerHTML = '<div style="display:flex;align-items:center;justify-content:center;height:100%;background:#f3f4f6;"><p style="font-weight:700;color:#9ca3af;">Carte indisponible</p></div>'
+        })
+}