feat(roadrunner-view): localize Google Maps to Canada and enhance map…

apps/roadrunner-view/src/App.tsx

@@ -52,19 +52,19 @@ const ProviderEnforcedRoute = ({ requiredProvider, component: Component }: { req
 };
 
 const WrappedGoogleHomePage = () => (
-  <APIProvider apiKey={CONFIG.GOOGLE_MAPS_API_KEY || ''} version="weekly">
+  <APIProvider apiKey={CONFIG.GOOGLE_MAPS_API_KEY || ''} version="weekly" region="CA">
     <GoogleHomePage />
   </APIProvider>
 );
 
 const WrappedGoogleVehicle3DMapPage = () => (
-  <APIProvider apiKey={CONFIG.GOOGLE_MAPS_API_KEY || ''} version="beta">
+  <APIProvider apiKey={CONFIG.GOOGLE_MAPS_API_KEY || ''} version="beta" region="CA">
     <GoogleVehicle3DMapPage />
   </APIProvider>
 );
 
 const WrappedGoogleDriverViewPage = () => (
-  <APIProvider apiKey={CONFIG.GOOGLE_MAPS_API_KEY || ''} version="beta">
+  <APIProvider apiKey={CONFIG.GOOGLE_MAPS_API_KEY || ''} version="beta" region="CA">
     <GoogleDriverViewPage />
   </APIProvider>
 );

apps/roadrunner-view/src/components/GoogleDriverViewPage/GoogleDriverViewPage.tsx

@@ -261,8 +261,7 @@ export const GoogleDriverViewPage = () => {
           }
         }
       } catch (error) {
-        console.error("Historical session lookup failed, exiting to home:", error);
-        gotoHomePage();
+        console.error("Historical session lookup failed:", error);
       } finally {
         setIsSearchingSession(false);
         setHasCheckedHistory(true);
@@ -274,6 +273,17 @@ export const GoogleDriverViewPage = () => {
 
   // Handle Auto-Redirects
   useEffect(() => {
+    if (goingHome) return;
+
+    if (isDataLoaded && version > 0 && !isSearchingSession && hasCheckedHistory && !vehicleStateMap.has(vehicleId) && !lastState) {
+      if (missingTimestampRef.current === null) {
+        missingTimestampRef.current = Date.now();
+      } else if (Date.now() - missingTimestampRef.current > 10000) {
+        gotoHomePage();
+      }
+      return;
+    }
+
     const msCurrentTime = Date.now() - playbackOffset;
 
     if ((playbackOffset === 0) && lastState && (lastState.msEpochLastRun < msCurrentTime - (30 * 1000))) {
@@ -283,8 +293,9 @@ export const GoogleDriverViewPage = () => {
     const currentState = vehicleStateMap.get(vehicleId);
     if (currentState && (lastState?.msEpochLastRun !== currentState.msEpochLastRun)) {
       setLastState(currentState);
+      missingTimestampRef.current = null;
     }
-  }, [vehicleStateMap, vehicleId, lastState, playbackOffset, gotoHomePage]);
+  }, [vehicleStateMap, vehicleId, lastState, playbackOffset, gotoHomePage, isDataLoaded, version, isSearchingSession, hasCheckedHistory, goingHome]);
 
   const getCoordinateAtBearingAndRange = useCallback((degLatitude: number, degLongitude: number, degBearing: number, mRange: number) => {
     const KM_EARTH_RADIUS = 6378.14;

apps/roadrunner-view/src/components/HomePage/CreateVehiclePanel.tsx

@@ -99,7 +99,7 @@ export const CreateVehiclePanel = (props: {
       const data = await response.json();
 
       // Hop into the vehicle.
-      const provider = localStorage.getItem('roadrunner_map_provider') || 'mapbox';
+      const provider = localStorage.getItem('roadrunner_map_provider') || 'google';
       navigate(provider === 'google' ? `/google/driver-view/${data.id}` : `/driver-view/${data.id}`);
     } catch (error) {
       console.error(error);

apps/roadrunner-view/src/components/HomePage/SimulationTable.tsx

@@ -1,4 +1,5 @@
 import { useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { MaterialReactTable } from 'material-react-table';
 import { usePlayback } from "../../context/PlaybackContext";
 import { useSimulationSessionData } from "../../hooks/useSimulationSessionData";
@@ -20,6 +21,7 @@ export const SimulationTable = (props: {
   toggleSimTable: any,
   returnToNow: any,
 }) => {
+  const navigate = useNavigate();
   const { playbackOffset, setPlaybackSession } = usePlayback();
   const { simulationSessionMap, activeCountData } = useSimulationSessionData();
 
@@ -91,16 +93,21 @@ export const SimulationTable = (props: {
             variant="primary"
             size="sm"
             onClick={() => {
+              const vehicleId = row.original.vehicleId || row.original.id;
               setPlaybackSession(row.original.start);
               props.toggleSimTable();
+              if (vehicleId) {
+                const provider = localStorage.getItem('roadrunner_map_provider') || 'google';
+                navigate(provider === 'google' ? `/google/driver-view/${vehicleId}` : `/driver-view/${vehicleId}`);
+              }
             }}
           >
             Jump to
           </Button>
         ),
       },
     ],
-    [props, setPlaybackSession]
+    [props, setPlaybackSession, navigate]
   );
 
   return (

apps/roadrunner-view/src/components/Shared/PointPicker.tsx

@@ -148,31 +148,51 @@ export const PointPicker = ({
         markerRef.current = null;
       }
 
-      // Reuse/update Google AdvancedMarkerElement
-      if (typeof google !== 'undefined' && google.maps && google.maps.marker?.AdvancedMarkerElement) {
+      // Reuse/update Google Marker (AdvancedMarkerElement or standard Marker)
+      if (typeof google !== 'undefined' && google.maps) {
         const position = { lat: selectedLat, lng: selectedLng };
 
         if (googleMarkerRef.current) {
-          googleMarkerRef.current.position = position;
+          if (typeof googleMarkerRef.current.setPosition === 'function') {
+            googleMarkerRef.current.setPosition(position);
+          } else {
+            googleMarkerRef.current.position = position;
+          }
           if (googleInfoWindowRef.current) {
             googleInfoWindowRef.current.setPosition(position);
           }
         } else {
-          const marker = new google.maps.marker.AdvancedMarkerElement({
-            position: position,
-            map: map,
-            title: label
-          });
+          let marker: any = null;
+          if (google.maps.marker?.AdvancedMarkerElement) {
+            try {
+              marker = new google.maps.marker.AdvancedMarkerElement({
+                position: position,
+                map: map,
+                title: label
+              });
+            } catch (err) {
+              console.warn("AdvancedMarkerElement initialization failed, falling back to google.maps.Marker", err);
+            }
+          }
+          if (!marker && google.maps.Marker) {
+            marker = new google.maps.Marker({
+              position: position,
+              map: map,
+              title: label
+            });
+          }
 
-          const infoWindow = new google.maps.InfoWindow({
-            content: `<div style="color: #000; font-weight: bold; padding: 2px 5px;">${label}</div>`,
-            disableAutoPan: true
-          });
+          if (marker) {
+            const infoWindow = new google.maps.InfoWindow({
+              content: `<div style="color: #000; font-weight: bold; padding: 2px 5px;">${label}</div>`,
+              disableAutoPan: true
+            });
 
-          infoWindow.open(map, marker);
+            infoWindow.open(map, marker);
 
-          googleMarkerRef.current = marker;
-          googleInfoWindowRef.current = infoWindow;
+            googleMarkerRef.current = marker;
+            googleInfoWindowRef.current = infoWindow;
+          }
         }
       }
     }