From 76889093bf5b7b95658b928991217080d810de37 Mon Sep 17 00:00:00 2001
From: ralksta <ralksta@users.noreply.github.com>
Date: Sun, 15 Feb 2026 23:14:08 +0100
Subject: [PATCH] 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.
---
 components/MapView.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

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