feat: integrate geolocation functionality and enhance map interactions

- Added useGeolocation hook to manage user location and permissions.
- Updated PlannerOverlay to utilize geolocation for setting origin.
- Enhanced NavBar with a new planner route.
- Introduced context menu for map interactions to set routes from current location.
- Improved search functionality in the map with a dedicated search bar.
- Updated localization files with new strings for routing and search features.

1 files changed, 21 insertions, 9 deletions

diff --git a/src/frontend/app/components/shared/AppMap.tsx b/src/frontend/app/components/shared/AppMap.tsx
index c6eb8ee..f4c8658 100644
--- a/src/frontend/app/components/shared/AppMap.tsx
+++ b/src/frontend/app/components/shared/AppMap.tsx
@@ -44,6 +44,7 @@ interface AppMapProps {
   onRotateStart?: () => void;
   onPitchStart?: () => void;
   onLoad?: () => void;
+  onContextMenu?: (e: MapLayerMouseEvent) => void;
 }
 
 export const AppMap = forwardRef<MapRef, AppMapProps>(
@@ -72,6 +73,7 @@ export const AppMap = forwardRef<MapRef, AppMapProps>(
       onRotateStart,
       onPitchStart,
       onLoad,
+      onContextMenu,
     },
     ref
   ) => {
@@ -79,6 +81,8 @@ export const AppMap = forwardRef<MapRef, AppMapProps>(
       theme,
       mapState,
       updateMapState,
+      setUserLocation,
+      setLocationPermission,
       showTraffic: settingsShowTraffic,
       showCameras: settingsShowCameras,
       mapPositionMode,
@@ -159,14 +163,9 @@ export const AppMap = forwardRef<MapRef, AppMapProps>(
     const viewState = useMemo(() => {
       if (initialViewState) return initialViewState;
 
-      if (mapPositionMode === "gps" && mapState.userLocation) {
-        return {
-          latitude: getLatitude(mapState.userLocation),
-          longitude: getLongitude(mapState.userLocation),
-          zoom: 16,
-        };
-      }
-
+      // Prefer the last saved position for this path so navigation doesn't
+      // reset the map viewport. GPS mode is only used as a fallback when the
+      // user has never visited this path before.
       const pathState = mapState.paths[path];
       if (pathState) {
         return {
@@ -176,6 +175,14 @@ export const AppMap = forwardRef<MapRef, AppMapProps>(
         };
       }
 
+      if (mapPositionMode === "gps" && mapState.userLocation) {
+        return {
+          latitude: getLatitude(mapState.userLocation),
+          longitude: getLongitude(mapState.userLocation),
+          zoom: 16,
+        };
+      }
+
       return {
         latitude: getLatitude(APP_CONSTANTS.defaultCenter),
         longitude: getLongitude(APP_CONSTANTS.defaultCenter),
@@ -200,13 +207,18 @@ export const AppMap = forwardRef<MapRef, AppMapProps>(
         onRotateStart={onRotateStart}
         onPitchStart={onPitchStart}
         onLoad={onLoad}
+        onContextMenu={onContextMenu}
       >
         {showNavigation && <NavigationControl position="bottom-right" />}
         {showGeolocate && (
           <GeolocateControl
             position="bottom-right"
-            trackUserLocation={true}
             positionOptions={{ enableHighAccuracy: false }}
+            onGeolocate={(e) => {
+              const { latitude, longitude } = e.coords;
+              setUserLocation([latitude, longitude]);
+              setLocationPermission(true);
+            }}
           />
         )}
         {children}