From a6dcf48c71ec0963c7099e3d35aa98b4ed79e37f Mon Sep 17 00:00:00 2001 From: Jules Neny Date: Sat, 3 Oct 2026 09:09:37 +0200 Subject: [PATCH] =?UTF-8?q?fix(fiche-detail):=20mini-carte=20dessin=C3=A9e?= =?UTF-8?q?=20quand=20la=20fiche=20s'ouvre=20c=C3=B4t=C3=A9=20client=20(co?= =?UTF-8?q?nteneur=20ClientOnly=20attendu)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01AGNSEFZdoKvbdsGyfSnu5S --- components/FicheDetail.vue | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/components/FicheDetail.vue b/components/FicheDetail.vue index 5472b46..d88007f 100644 --- a/components/FicheDetail.vue +++ b/components/FicheDetail.vue @@ -285,15 +285,24 @@ async function submitReport() { // ── Mini-carte Leaflet ──────────────────────────────────────────────── const mapContainer = ref(null) -onMounted(async () => { - if (!hasCoords.value || !mapContainer.value) return +// Le conteneur est dans , rendu APRÈS le onMounted de ce composant +// 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 lat = props.org.latitude as number const lng = props.org.longitude as number - const map = L.map(mapContainer.value, { + const map = L.map(el, { center: [lat, lng], zoom: 10, zoomControl: false, @@ -323,7 +332,7 @@ onMounted(async () => { }) L.marker([lat, lng], { icon }).addTo(map) -}) +}