fix: prevent Leaflet tile rendering on hidden container

Keep map container always visible (no display:none), overlay
loading text on top, and call invalidateSize() after init.
This commit is contained in:
ralksta
2026-02-15 23:14:08 +01:00
parent 960bab8783
commit 76889093bf

View File

@@ -105,6 +105,9 @@ export function MapView() {
map.fitBounds(group.getBounds().pad(0.15)); map.fitBounds(group.getBounds().pad(0.15));
} }
// Force Leaflet to recalculate tile grid
setTimeout(() => map.invalidateSize(), 100);
setLoading(false); setLoading(false);
} }
@@ -134,17 +137,16 @@ export function MapView() {
} }
return ( return (
<> <div style={{ position: 'relative' }}>
{loading && ( {loading && (
<div className="map-container__loading"> <div className="map-container__loading" style={{ position: 'absolute', inset: 0, zIndex: 1000 }}>
<p>Loading map…</p> <p>Loading map…</p>
</div> </div>
)} )}
<div <div
ref={containerRef} ref={containerRef}
className="map-container" className="map-container"
style={{ display: loading ? 'none' : 'block' }}
/> />
</> </div>
); );
} }