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:
@@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user