fix(fiche-detail): mini-carte dessinée quand la fiche s'ouvre côté client (conteneur ClientOnly attendu)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AGNSEFZdoKvbdsGyfSnu5S
This commit is contained in:
Jules Neny
2026-10-03 09:09:37 +02:00
co-authored by Claude Opus 5.5
parent 5e0027b861
commit a6dcf48c71
+13 -4
View File
@@ -285,15 +285,24 @@ async function submitReport() {
// ── Mini-carte Leaflet ──────────────────────────────────────────────── // ── Mini-carte Leaflet ────────────────────────────────────────────────
const mapContainer = ref<HTMLElement | null>(null) const mapContainer = ref<HTMLElement | null>(null)
onMounted(async () => { // Le conteneur est dans <ClientOnly>, rendu APRÈS le onMounted de ce composant
if (!hasCoords.value || !mapContainer.value) return // quand la fiche s'ouvre côté client (panneau de la vue fiches, B12) : on
// attend qu'il existe au lieu de le lire au montage (il valait null, la
// mini-carte restait un cadre vide).
let mapInit = false
watch(mapContainer, (el) => { if (el) initMap(el) }, { flush: 'post' })
onMounted(() => { if (mapContainer.value) initMap(mapContainer.value) })
async function initMap(el: HTMLElement) {
if (mapInit || !hasCoords.value) return
mapInit = true
const L = (await import('leaflet')).default const L = (await import('leaflet')).default
const lat = props.org.latitude as number const lat = props.org.latitude as number
const lng = props.org.longitude as number const lng = props.org.longitude as number
const map = L.map(mapContainer.value, { const map = L.map(el, {
center: [lat, lng], center: [lat, lng],
zoom: 10, zoom: 10,
zoomControl: false, zoomControl: false,
@@ -323,7 +332,7 @@ onMounted(async () => {
}) })
L.marker([lat, lng], { icon }).addTo(map) L.marker([lat, lng], { icon }).addTo(map)
}) }
</script> </script>
<style scoped> <style scoped>