comunes/todos-contra-el-fuego-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(maps): entregar el mapa solo cuando tiene tamano real (MapReady)

Browse source 
MapReady entregaba el mapa en el useEffect de montaje, cuando el contenedor
puede no tener tamano todavia. En FiresMap eso hacia que getBounds() lanzara;
el catch solo avisaba ("Failed to set map bounds and scale") y mapSize nunca
se seteaba, con lo que la suscripcion de fuegos por viewport NI SE CREABA:
loading eterno y tile-pane vacio (0 capas) pese a haber 7470 fuegos.

Evidencia: en Meteor.connection._subscriptions solo aparecian activefirestotal,
activefiresuniontotal, settings y userData — ninguna por localizacion.

Ahora se entrega via map.whenReady() + invalidateSize(), solo cuando getSize()
no es 0, con reintento en el evento resize y entrega unica (flag delivered).

Toca el componente compartido por todos los mapas: al desplegar hay que
re-verificar /fires, /zones, /subscriptions, home y detalle de fuego.
SIN DESPLEGAR todavia (la imagen viva es la de 01:33, sin este cambio).
This commit is contained in:
vjrj 2026-07-28 07:46:19 +02:00
parent c50690cc8a
commit e5f7a0f4be
1 changed files with 22 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

24
imports/ui/components/Maps/MapBridge.js
View file

@ -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;
};