fix(ftmap): tell Leaflet when its box changes size; fix(decodes): all seven continents
The FT map drew a strip of dead space along the bottom after a zoom. Leaflet measures its container ONCE, at creation — which for this panel is the instant the tab is selected, before the flex layout has settled — and then asks for tiles to fit that stale size for ever. A ResizeObserver hands it the real size, plus one pass after the first paint for the layout that settles without ever firing a resize. And the decode list's continent chips are the seven, fixed. Building them from the feed meant a row that reshuffled itself every period — a chip appeared when the first Asian station decoded and moved everything sideways under the pointer — and it could not say what the filter was capable of until something had been heard.
This commit is contained in:
@@ -62,7 +62,25 @@ export function FTMapPanel({ decodes, myGrid }: { decodes: FTMapDecode[]; myGrid
|
||||
});
|
||||
mapRef.current = m;
|
||||
layerRef.current = L.layerGroup().addTo(m);
|
||||
return () => { m.remove(); mapRef.current = null; layerRef.current = null; };
|
||||
// Leaflet measures its container ONCE, when the map is created, and then
|
||||
// draws tiles for that size for ever. This panel is mounted the moment its
|
||||
// tab is selected — before the flex layout has settled — and the window can
|
||||
// be resized under it, so the stale measurement showed as a strip of dead
|
||||
// space along the bottom where tiles were never asked for. The observer
|
||||
// hands it the real size whenever the box changes.
|
||||
const ro = new ResizeObserver(() => m.invalidateSize({ animate: false }));
|
||||
ro.observe(divRef.current);
|
||||
// Once more after the first paint: the first observation can arrive while
|
||||
// the panel is still zero-height, and no further resize follows a layout
|
||||
// that settles by itself.
|
||||
const settle = window.setTimeout(() => m.invalidateSize({ animate: false }), 100);
|
||||
return () => {
|
||||
window.clearTimeout(settle);
|
||||
ro.disconnect();
|
||||
m.remove();
|
||||
mapRef.current = null;
|
||||
layerRef.current = null;
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Basemap follows the picker.
|
||||
|
||||
Reference in New Issue
Block a user