RG-T117 PR#42 fixes

Author: ucswift

src/app/(app)/index.tsx

@@ -21,14 +21,14 @@ import { useMapGeolocationUpdates } from '@/hooks/use-map-geolocation-updates';
 import { useMapSignalRUpdates } from '@/hooks/use-map-signalr-updates';
 import { Env } from '@/lib/env';
 import { logger } from '@/lib/logging';
+import { useDepartmentMapCenter } from '@/lib/map-center';
 import { type MapMakerInfoData } from '@/models/v4/mapping/getMapDataAndMarkersData';
 import { locationService } from '@/services/location';
 import { useCoreStore } from '@/stores/app/core-store';
 import { useLocationStore } from '@/stores/app/location-store';
 import { useMapsStore } from '@/stores/maps/store';
 import { useToastStore } from '@/stores/toast/store';
 import { useWeatherAlertsStore } from '@/stores/weather-alerts/store';
-import { getDepartmentMapCenter } from '@/lib/map-center';
 
 Mapbox.setAccessToken(Env.IC_MAPBOX_PUBKEY);
 
@@ -61,6 +61,9 @@ function MapContent() {
   const locationLongitude = useLocationStore((state) => state.longitude);
   const locationHeading = useLocationStore((state) => state.heading);
   const isMapLocked = useLocationStore((state) => state.isMapLocked);
+  // Reactive: department config can land after this screen mounts.
+  const departmentCenter = useDepartmentMapCenter();
+  const appliedDepartmentCenterRef = useRef<string | null>(null);
 
   // Weather alert banner state
   const weatherAlerts = useWeatherAlertsStore((state) => state.alerts);
@@ -109,14 +112,36 @@ function MapContent() {
       };
     }
 
-    // Fallback: default US center when location hasn't arrived yet
+    // Fallback: the department's configured center when location hasn't arrived yet
     return {
-      centerCoordinate: [getDepartmentMapCenter().longitude, getDepartmentMapCenter().latitude] as [number, number],
+      centerCoordinate: [departmentCenter.longitude, departmentCenter.latitude] as [number, number],
       zoomLevel: 4,
       heading: 0,
       pitch: 0,
     };
-  }, [locationLatitude, locationLongitude, isMapLocked]);
+  }, [locationLatitude, locationLongitude, isMapLocked, departmentCenter.latitude, departmentCenter.longitude]);
+
+  // defaultSettings only applies at mount, and department config can land after it. Move the camera
+  // to the department center when it changes, unless a device fix or the user got there first.
+  useEffect(() => {
+    if (!isMapReady || hasUserMovedMap || (locationLatitude != null && locationLongitude != null)) {
+      return;
+    }
+
+    const center = `${departmentCenter.longitude},${departmentCenter.latitude}`;
+    if (appliedDepartmentCenterRef.current === center) {
+      return;
+    }
+    appliedDepartmentCenterRef.current = center;
+
+    cameraRef.current?.setCamera({
+      centerCoordinate: [departmentCenter.longitude, departmentCenter.latitude],
+      zoomLevel: 4,
+      heading: 0,
+      pitch: 0,
+      animationDuration: 500,
+    });
+  }, [isMapReady, hasUserMovedMap, locationLatitude, locationLongitude, departmentCenter.latitude, departmentCenter.longitude]);
 
   // Fetch map layers (department-level, no unit context needed)
   useEffect(() => {

src/app/command-map/[callId].tsx

@@ -22,16 +22,14 @@ import { useCommandMapOverlay } from '@/hooks/use-command-map-overlay';
 import { useMapGeolocationUpdates } from '@/hooks/use-map-geolocation-updates';
 import { useMapSignalRUpdates } from '@/hooks/use-map-signalr-updates';
 import { logger } from '@/lib/logging';
+import { useDepartmentMapCenter } from '@/lib/map-center';
 import { IncidentMapAnnotationType } from '@/models/v4/incidentCommand/incidentCommandEnums';
 import { type MapMakerInfoData } from '@/models/v4/mapping/getMapDataAndMarkersData';
 import { useCommandStore } from '@/stores/command/store';
 import { useToastStore } from '@/stores/toast/store';
-import { getDepartmentMapCenter } from '@/lib/map-center';
 
 type DrawMode = 'none' | 'line' | 'area' | 'text';
 
-const DEFAULT_CENTER: [number, number] = [getDepartmentMapCenter().longitude, getDepartmentMapCenter().latitude];
-
 /**
  * Fullscreen editable incident tactical map: pan/zoom freely, save the incident's framing (Save View),
  * draw lines/areas, drop text labels, and remove markup — every change syncs to the board's map card
@@ -50,6 +48,8 @@ export default function CommandMapScreen() {
   const saveMapAnnotationEntry = useCommandStore((state) => state.saveMapAnnotationEntry);
   const deleteMapAnnotationEntry = useCommandStore((state) => state.deleteMapAnnotationEntry);
   const showToast = useToastStore((state) => state.showToast);
+  // Reactive: department config can land after this screen mounts.
+  const departmentCenter = useDepartmentMapCenter();
 
   const boardState = boards[callId];
   const command = boardState?.board?.Command ?? null;
@@ -72,6 +72,9 @@ export default function CommandMapScreen() {
   // Tracks what the camera was auto-centered on so higher-priority targets
   // arriving later (saved view > ICP > first pin) can still recenter.
   const autoCenterPriorityRef = useRef<0 | 1 | 2>(0);
+  // The department center at mount is already baked into initialCamera, so only a later change
+  // (config landing after mount) needs an imperative move. Null until the first effect run.
+  const appliedDepartmentCenterRef = useRef<string | null>(null);
 
   useEffect(() => {
     let cancelled = false;
@@ -116,7 +119,7 @@ export default function CommandMapScreen() {
     if (first) {
       return { centerCoordinate: [first.Longitude, first.Latitude] as [number, number], zoomLevel: 13 };
     }
-    return { centerCoordinate: DEFAULT_CENTER, zoomLevel: 4 };
+    return { centerCoordinate: [departmentCenter.longitude, departmentCenter.latitude] as [number, number], zoomLevel: 4 };
     // incidentPins intentionally omitted: pins arrive async and are applied via the recenter effect below
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
@@ -128,6 +131,8 @@ export default function CommandMapScreen() {
     namedMap?.CenterLatitude,
     namedMap?.CenterLongitude,
     namedMap?.ZoomLevel,
+    departmentCenter.latitude,
+    departmentCenter.longitude,
   ]);
 
   // initialCamera is only applied at mount (defaultSettings). Pins and the ICP
@@ -152,8 +157,21 @@ export default function CommandMapScreen() {
     if (first && autoCenterPriorityRef.current < 1) {
       autoCenterPriorityRef.current = 1;
       cameraRef.current?.setCamera({ centerCoordinate: [first.Longitude, first.Latitude], zoomLevel: 13, animationDuration: 500 });
+      return;
+    }
+
+    // Nothing incident-specific to frame: stay on the department center, which changes when config
+    // lands after mount. The priority stays 0 so an ICP or a pin arriving later still wins.
+    if (autoCenterPriorityRef.current === 0) {
+      const center = `${departmentCenter.longitude},${departmentCenter.latitude}`;
+      const applied = appliedDepartmentCenterRef.current;
+      appliedDepartmentCenterRef.current = center;
+      // The first run only records what defaultSettings already applied — no camera move.
+      if (applied !== null && applied !== center) {
+        cameraRef.current?.setCamera({ centerCoordinate: [departmentCenter.longitude, departmentCenter.latitude], zoomLevel: 4, animationDuration: 500 });
+      }
     }
-  }, [incidentPins, namedMap, command]);
+  }, [incidentPins, namedMap, command, departmentCenter.latitude, departmentCenter.longitude]);
 
   const handleCameraChanged = useCallback((state: { properties?: { center?: number[]; zoom?: number } }) => {
     const center = state?.properties?.center;

src/components/maps/full-screen-location-picker.tsx

@@ -10,7 +10,7 @@ import { Box } from '@/components/ui/box';
 import { Button, ButtonText } from '@/components/ui/button';
 import { Text } from '@/components/ui/text';
 import { Env } from '@/lib/env';
-import { getDepartmentMapCenter } from '@/lib/map-center';
+import { useDepartmentMapCenter } from '@/lib/map-center';
 
 // Ensure Mapbox access token is set before using any Mapbox components
 Mapbox.setAccessToken(Env.IC_MAPBOX_PUBKEY);
@@ -35,11 +35,12 @@ const FullScreenLocationPicker: React.FC<FullScreenLocationPickerProps> = ({ ini
   const insets = useSafeAreaInsets();
   const mapRef = useRef<React.ElementRef<typeof Mapbox.MapView>>(null);
   const cameraRef = useRef<any>(null); // Using any due to imperative handle
+  const departmentCenter = useDepartmentMapCenter();
   // Always start with a location - either initial, or default
   const [currentLocation, setCurrentLocation] = useState<{
     latitude: number;
     longitude: number;
-  }>(initialLocation || getDepartmentMapCenter());
+  }>(initialLocation || { latitude: departmentCenter.latitude, longitude: departmentCenter.longitude });
   const [isLocating, setIsLocating] = useState(false);
   const [isReverseGeocoding, setIsReverseGeocoding] = useState(false);
   const [address, setAddress] = useState<string | undefined>(undefined);
@@ -152,6 +153,15 @@ const FullScreenLocationPicker: React.FC<FullScreenLocationPickerProps> = ({ ini
     };
   }, [initialLocation, getUserLocation, reverseGeocode]);
 
+  // Department config can land after mount. Follow it only while the placeholder is still on
+  // screen — an initial location or anything the user/device picked outranks it.
+  useEffect(() => {
+    if (initialLocation || hasUserLocation) {
+      return;
+    }
+    setCurrentLocation({ latitude: departmentCenter.latitude, longitude: departmentCenter.longitude });
+  }, [initialLocation, hasUserLocation, departmentCenter.latitude, departmentCenter.longitude]);
+
   const handleMapPress = (event: GeoJSON.Feature) => {
     if (event.geometry.type !== 'GeometryCollection' && 'coordinates' in event.geometry) {
       const coords = event.geometry.coordinates as number[];
@@ -177,7 +187,14 @@ const FullScreenLocationPicker: React.FC<FullScreenLocationPickerProps> = ({ ini
   return (
     <Box style={styles.container}>
       <Mapbox.MapView ref={mapRef} style={styles.map} logoEnabled={false} attributionEnabled={true} compassEnabled={true} zoomEnabled={true} rotateEnabled={true} onPress={handleMapPress}>
-        <Mapbox.Camera ref={cameraRef} zoomLevel={hasUserLocation ? 15 : 4} centerCoordinate={[currentLocation.longitude, currentLocation.latitude]} animationMode="flyTo" animationDuration={1000} />
+        {/* Without a real location the camera sits on the department center, so it frames it at the department's configured zoom rather than a hardcoded one. */}
+        <Mapbox.Camera
+          ref={cameraRef}
+          zoomLevel={hasUserLocation ? 15 : departmentCenter.zoomLevel}
+          centerCoordinate={[currentLocation.longitude, currentLocation.latitude]}
+          animationMode="flyTo"
+          animationDuration={1000}
+        />
         {/* Marker for the selected location */}
         <Mapbox.PointAnnotation id="selectedLocation" coordinate={[currentLocation.longitude, currentLocation.latitude]} title="Selected Location">
           <Box className="items-center justify-center">

src/components/maps/location-picker.tsx

@@ -9,7 +9,7 @@ import { Box } from '@/components/ui/box';
 import { Button, ButtonText } from '@/components/ui/button';
 import { Text } from '@/components/ui/text';
 import { Env } from '@/lib/env';
-import { getDepartmentMapCenter } from '@/lib/map-center';
+import { useDepartmentMapCenter } from '@/lib/map-center';
 
 // Ensure Mapbox access token is set before using any Mapbox components
 if (!Env.IC_MAPBOX_PUBKEY) {
@@ -38,11 +38,12 @@ const LocationPicker: React.FC<LocationPickerProps> = ({ initialLocation, onLoca
   const mapRef = useRef<React.ElementRef<typeof Mapbox.MapView>>(null);
   const cameraRef = useRef<any>(null); // Using any due to imperative handle
   const isMountedRef = useRef(true);
+  const departmentCenter = useDepartmentMapCenter();
   // Always start with a location - either initial, or default
   const [currentLocation, setCurrentLocation] = useState<{
     latitude: number;
     longitude: number;
-  }>(initialLocation || getDepartmentMapCenter());
+  }>(initialLocation || { latitude: departmentCenter.latitude, longitude: departmentCenter.longitude });
   const [isLocating, setIsLocating] = useState(false);
   const [hasUserLocation, setHasUserLocation] = useState(!!initialLocation);
 
@@ -123,6 +124,15 @@ const LocationPicker: React.FC<LocationPickerProps> = ({ initialLocation, onLoca
     };
   }, [initialLocation, getUserLocation]);
 
+  // Department config can land after mount. Follow it only while the placeholder is still on
+  // screen — an initial location or anything the user/device picked outranks it.
+  useEffect(() => {
+    if (initialLocation || hasUserLocation) {
+      return;
+    }
+    setCurrentLocation({ latitude: departmentCenter.latitude, longitude: departmentCenter.longitude });
+  }, [initialLocation, hasUserLocation, departmentCenter.latitude, departmentCenter.longitude]);
+
   const handleMapPress = (event: GeoJSON.Feature) => {
     const geometry = event.geometry as GeoJSON.Point;
     const [longitude, latitude] = geometry.coordinates;
@@ -141,7 +151,14 @@ const LocationPicker: React.FC<LocationPickerProps> = ({ initialLocation, onLoca
   return (
     <Box style={[styles.container, { height }]}>
       <Mapbox.MapView ref={mapRef} style={styles.map} logoEnabled={false} attributionEnabled={false} compassEnabled={true} zoomEnabled={true} rotateEnabled={true} onPress={handleMapPress}>
-        <Mapbox.Camera ref={cameraRef} zoomLevel={hasUserLocation ? 15 : 4} centerCoordinate={[currentLocation.longitude, currentLocation.latitude]} animationMode="flyTo" animationDuration={1000} />
+        {/* Without a real location the camera sits on the department center, so it frames it at the department's configured zoom rather than a hardcoded one. */}
+        <Mapbox.Camera
+          ref={cameraRef}
+          zoomLevel={hasUserLocation ? 15 : departmentCenter.zoomLevel}
+          centerCoordinate={[currentLocation.longitude, currentLocation.latitude]}
+          animationMode="flyTo"
+          animationDuration={1000}
+        />
         {/* Marker for the selected location */}
         <Mapbox.PointAnnotation id="selectedLocation" coordinate={[currentLocation.longitude, currentLocation.latitude]} title={t('common.selected_location')}>
           <Box className="items-center justify-center">

src/components/maps/map-view.web.tsx

@@ -10,7 +10,7 @@ import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHan
 import { createRoot } from 'react-dom/client';
 
 import { Env } from '@/lib/env';
-import { getDepartmentMapCenter } from '@/lib/map-center';
+import { useDepartmentMapCenter } from '@/lib/map-center';
 
 // Set the access token globally
 mapboxgl.accessToken = Env.IC_MAPBOX_PUBKEY;
@@ -209,6 +209,10 @@ export const MapView = forwardRef<any, MapViewProps>(
     const map = useRef<any | null>(null);
     const [isLoaded, setIsLoaded] = useState(false);
     const [hasSize, setHasSize] = useState(false);
+    // Reactive: department config can land after the map is constructed.
+    const departmentCenter = useDepartmentMapCenter();
+    const appliedDepartmentCenterRef = useRef<string | null>(null);
+    const hasUserMovedRef = useRef(false);
 
     useImperativeHandle(ref, () => ({
       getMap: () => map.current,
@@ -253,7 +257,7 @@ export const MapView = forwardRef<any, MapViewProps>(
       try {
         // Use initialCenter/initialZoom if provided so the map starts at the
         // correct position without needing a programmatic camera move later.
-        const startCenter = initialCenter && isFinite(initialCenter[0]) && isFinite(initialCenter[1]) ? initialCenter : ([getDepartmentMapCenter().longitude, getDepartmentMapCenter().latitude] as [number, number]); // Default US center
+        const startCenter = initialCenter && isFinite(initialCenter[0]) && isFinite(initialCenter[1]) ? initialCenter : ([departmentCenter.longitude, departmentCenter.latitude] as [number, number]); // Department center
         const startZoom = initialZoom != null && isFinite(initialZoom) ? initialZoom : 4;
 
         const newMap = new mapboxgl.Map({
@@ -293,6 +297,9 @@ export const MapView = forwardRef<any, MapViewProps>(
           // We tag all programmatic camera moves with { _programmatic: true } so the
           // moveend handler can distinguish them from real user interactions.
           const wasUser = !e._programmatic;
+          if (wasUser) {
+            hasUserMovedRef.current = true;
+          }
           onCameraChanged?.({ properties: { isUserInteraction: wasUser } });
         });
 
@@ -385,6 +392,22 @@ export const MapView = forwardRef<any, MapViewProps>(
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hasSize]);
 
+    // The constructor center is fixed at build time, and department config can land after that.
+    // Recenter when it changes — but only when the caller pinned no initial center and the user
+    // has not already moved the map themselves.
+    useEffect(() => {
+      if (!isLoaded || !map.current) return;
+      if (initialCenter && isFinite(initialCenter[0]) && isFinite(initialCenter[1])) return;
+      if (hasUserMovedRef.current) return;
+
+      const center = `${departmentCenter.longitude},${departmentCenter.latitude}`;
+      if (appliedDepartmentCenterRef.current === center) return;
+      appliedDepartmentCenterRef.current = center;
+
+      // Tagged programmatic so moveend does not report this as a user interaction.
+      map.current.easeTo({ center: [departmentCenter.longitude, departmentCenter.latitude], duration: 500 }, { _programmatic: true });
+    }, [isLoaded, initialCenter, departmentCenter.longitude, departmentCenter.latitude]);
+
     // Keep the map canvas in sync with container size changes.
     useEffect(() => {
       if (!map.current || !mapContainer.current) return;