diff --git a/imports/ui/components/Maps/MapBridge.js b/imports/ui/components/Maps/MapBridge.js index ea44ea2..bcfe22e 100644 --- a/imports/ui/components/Maps/MapBridge.js +++ b/imports/ui/components/Maps/MapBridge.js @@ -8,8 +8,28 @@ import { useMap, useMapEvents } from 'react-leaflet'; export const MapReady = ({ onReady }) => { const map = useMap(); useEffect(() => { - if (onReady) onReady(map); - // run once per map instance + if (!onReady) return undefined; + let cancelled = false; + let delivered = false; + // El efecto de montaje puede correr antes de que el contenedor tenga tamaño. + // Si entregamos el mapa entonces, un `getBounds()` del padre lanza y se queda + // sin bounds: en /fires eso dejaba la suscripcion por viewport sin crear y el + // mapa vacio (0 capas) pese a haber 7470 fuegos. Esperamos a que el mapa este + // listo Y tenga tamaño real; entregamos una sola vez. + const deliver = () => { + if (cancelled || delivered) return; + map.invalidateSize(); + const size = map.getSize(); + if (!size || size.x === 0 || size.y === 0) return; + delivered = true; + onReady(map); + }; + map.whenReady(deliver); + map.on('resize', deliver); + return () => { + cancelled = true; + map.off('resize', deliver); + }; }, [map]); // eslint-disable-line react-hooks/exhaustive-deps return null; };