From ec6f4254b99413d244650979c82a92be0dc83802 Mon Sep 17 00:00:00 2001
From: Matt <matt@echo6.co>
Date: Sun, 26 Apr 2026 00:20:31 +0000
Subject: [PATCH] fix: zoom indicator now updates live via dedicated useEffect

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/MapView.jsx | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/components/MapView.jsx b/src/components/MapView.jsx
index 735b7ea..7265c1f 100644
--- a/src/components/MapView.jsx
+++ b/src/components/MapView.jsx
@@ -643,9 +643,6 @@ const MapView = forwardRef(function MapView(_, ref) {
         type: 'geojson',
         data: { type: 'FeatureCollection', features: [] },
       })
-      // Initialize zoom indicator and subscribe to zoom changes
-      setZoomLevel(map.getZoom())
-      map.on("zoom", () => setZoomLevel(map.getZoom()))
 
       // Restore overlay layers from localStorage prefs
       try {
@@ -973,6 +970,27 @@ const MapView = forwardRef(function MapView(_, ref) {
     }
   }, [stops, route, gpsOrigin, geoPermission])
 
+  // Track zoom level for indicator
+  useEffect(() => {
+    const map = mapInstance.current
+    if (!map) return
+
+    const updateZoom = () => setZoomLevel(map.getZoom())
+    
+    // Set initial zoom
+    if (map.loaded()) {
+      updateZoom()
+    } else {
+      map.once("load", updateZoom)
+    }
+    
+    // Subscribe to zoom changes
+    map.on("zoom", updateZoom)
+    
+    return () => {
+      map.off("zoom", updateZoom)
+    }
+  }, [])
 
   return (
     <div className="relative w-full h-full">