From d7073a32701e8c1e0feb6fd72271760486fedda9 Mon Sep 17 00:00:00 2001
From: ngoiyaeric <115367894+ngoiyaeric@users.noreply.github.com>
Date: Fri, 21 Nov 2025 02:18:07 -0500
Subject: [PATCH] feat: Show Mapbox NavigationControl in DrawingMode and
 RealTimeMode

---
 components/map/mapbox-map.tsx | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/components/map/mapbox-map.tsx b/components/map/mapbox-map.tsx
index e472c705..4b608665 100644
--- a/components/map/mapbox-map.tsx
+++ b/components/map/mapbox-map.tsx
@@ -20,6 +20,7 @@ export const Mapbox: React.FC<{ position?: { latitude: number; longitude: number
   const map = useRef<mapboxgl.Map | null>(null)
   const { setMap } = useMap()
   const drawRef = useRef<MapboxDraw | null>(null)
+  const navigationControlRef = useRef<mapboxgl.NavigationControl | null>(null)
   const rotationFrameRef = useRef<number | null>(null)
   const polygonLabelsRef = useRef<{ [id: string]: mapboxgl.Marker }>({})
   const lineLabelsRef = useRef<{ [id: string]: mapboxgl.Marker }>({})
@@ -352,6 +353,24 @@ export const Mapbox: React.FC<{ position?: { latitude: number; longitude: number
       // Handle geolocation setup based on mode
       setupGeolocationWatcher()
       
+      // Add navigation control for DrawingMode or RealTimeMode
+      if (mapType === MapToggleEnum.DrawingMode || mapType === MapToggleEnum.RealTimeMode) {
+        if (!navigationControlRef.current) {
+          navigationControlRef.current = new mapboxgl.NavigationControl()
+          if (map.current) {
+            map.current.addControl(navigationControlRef.current, 'top-left')
+          }
+        }
+      } else {
+        // Remove navigation control in FreeMode
+        if (navigationControlRef.current) {
+          if (map.current) {
+            map.current.removeControl(navigationControlRef.current)
+          }
+          navigationControlRef.current = null
+        }
+      }
+
       // Handle draw controls based on mode
       if (mapType === MapToggleEnum.DrawingMode) {
         // If switching to drawing mode, setup drawing tools
@@ -409,7 +428,7 @@ export const Mapbox: React.FC<{ position?: { latitude: number; longitude: number
         preserveDrawingBuffer: true
       })
 
-      map.current.addControl(new mapboxgl.NavigationControl(), 'top-left')
+
 
       // Register event listeners
       map.current.on('moveend', captureMapCenter)