From 0f8e57e93b7e5bfa429a36300fb896197de336ca Mon Sep 17 00:00:00 2001
From: Roozbeh Karimi <rkarimi@sipstack.com>
Date: Mon, 6 Oct 2025 14:44:00 -0400
Subject: [PATCH] fix for map first load

---
 frontend/src/views/map/page.jsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/frontend/src/views/map/page.jsx b/frontend/src/views/map/page.jsx
index c1be06d..8786ca5 100644
--- a/frontend/src/views/map/page.jsx
+++ b/frontend/src/views/map/page.jsx
@@ -125,6 +125,23 @@ const FlightsLayer = ({ flightsData, updateInterval = 5000 }) => {
   return null;
 };
 
+const InitialBounds = ({ setBoundries }) => {
+  const map = useMap();
+
+  useEffect(() => {
+    // Wait for map to be ready, then set initial bounds
+    map.whenReady(() => {
+      const bounds = map.getBounds();
+      setBoundries({
+        southWest: bounds.getSouthWest(),
+        northEast: bounds.getNorthEast(),
+      });
+    });
+  }, [map, setBoundries]);
+
+  return null;
+};
+
 const createPlaneIcon = (heading = 0) => {
   const html = `
     <div style="
@@ -220,6 +237,7 @@ const MapView = () => {
           worldCopyJump={true}
         >
           <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
+          <InitialBounds setBoundries={setBoundaries} />
           <FlightsLayer flightsData={flights} updateInterval={2000} />
           <MapBounds setBoundries={setBoundaries} />
         </MapContainer>