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) -}) +}