SteveTarter · SteveTarter · Aug 8, 2026 · Aug 8, 2026
diff --git a/apps/roadrunner-view/src/App.tsx b/apps/roadrunner-view/src/App.tsx
@@ -27,6 +27,28 @@ const HomeRedirect = () => {
   return <Navigate to={provider === 'google' ? '/google/home' : '/home'} replace />;
 };
 
+const ProviderEnforcedRoute = ({ requiredProvider, component: Component }: { requiredProvider: 'google' | 'mapbox'; component: React.ComponentType }) => {
+  const provider = (localStorage.getItem('roadrunner_map_provider') as 'google' | 'mapbox') || 'google';
+  if (provider !== requiredProvider) {
+    const search = window.location.search;
+    const path = window.location.pathname;
+    let newPath = '';
+    if (requiredProvider === 'mapbox') {
+      if (path === '/home') newPath = '/google/home';
+      else if (path === '/3d-view') newPath = '/google/3d-view';
+      else if (path.startsWith('/driver-view/')) newPath = `/google/driver-view/${path.substring('/driver-view/'.length)}`;
+      else newPath = '/google/home';
+    } else {
+      if (path === '/google/home') newPath = '/home';
+      else if (path === '/google/3d-view') newPath = '/3d-view';
+      else if (path.startsWith('/google/driver-view/')) newPath = `/driver-view/${path.substring('/google/driver-view/'.length)}`;
+      else newPath = '/home';
+    }
+    return <Navigate to={`${newPath}${search}`} replace />;
+  }
+  return <Component />;
+};
+
 const WrappedGoogleHomePage = () => (
   <APIProvider apiKey={CONFIG.GOOGLE_MAPS_API_KEY || ''} version="weekly">
     <GoogleHomePage />
@@ -53,34 +75,40 @@ export const App = () => {
       <Routes>
         <Route path='/' element={<HomeRedirect />} />
         <Route
-        path='/home'
-        element={<AuthenticationGuard component={HomePage} />} />
+          path='/home'
+          element={<AuthenticationGuard component={() => <ProviderEnforcedRoute requiredProvider="mapbox" component={HomePage} />} />}
+        />
         <Route
-        path='/google/home'
-        element={<AuthenticationGuard component={WrappedGoogleHomePage} />} />
+          path='/google/home'
+          element={<AuthenticationGuard component={() => <ProviderEnforcedRoute requiredProvider="google" component={WrappedGoogleHomePage} />} />}
+        />
         <Route
-        path='/google/3d-view'
-        element={<AuthenticationGuard component={WrappedGoogleVehicle3DMapPage} />} />
+          path='/google/3d-view'
+          element={<AuthenticationGuard component={() => <ProviderEnforcedRoute requiredProvider="google" component={WrappedGoogleVehicle3DMapPage} />} />}
+        />
         <Route
-        path='/google/driver-view/:vehicleId'
-        element={<AuthenticationGuard component={WrappedGoogleDriverViewPage} />} />
+          path='/google/driver-view/:vehicleId'
+          element={<AuthenticationGuard component={() => <ProviderEnforcedRoute requiredProvider="google" component={WrappedGoogleDriverViewPage} />} />}
+        />
         <Route
-        path='/about'
-        element={<AuthenticationGuard component={AboutPage} />} />
+          path='/about'
+          element={<AuthenticationGuard component={AboutPage} />}
+        />
         <Route
-        path='/guide/:guideId'
-        element={<AuthenticationGuard component={GuidePage} />} />
+          path='/guide/:guideId'
+          element={<AuthenticationGuard component={GuidePage} />}
+        />
         <Route
-        path="/profile"
-        element={<AuthenticationGuard component={ProfilePage} />}
+          path="/profile"
+          element={<AuthenticationGuard component={ProfilePage} />}
         />
         <Route
-        path='/driver-view/:vehicleId'
-        element={<AuthenticationGuard component={DriverViewPage} />}
+          path='/driver-view/:vehicleId'
+          element={<AuthenticationGuard component={() => <ProviderEnforcedRoute requiredProvider="mapbox" component={DriverViewPage} />} />}
         />
         <Route
-        path='/3d-view'
-        element={<AuthenticationGuard component={Vehicle3DMapPage} />}
+          path='/3d-view'
+          element={<AuthenticationGuard component={() => <ProviderEnforcedRoute requiredProvider="mapbox" component={Vehicle3DMapPage} />} />}
         />
       </Routes>
       </div>

diff --git a/apps/roadrunner-view/src/components/AboutPage/AboutPage.tsx b/apps/roadrunner-view/src/components/AboutPage/AboutPage.tsx
@@ -5,7 +5,8 @@ export function AboutPage() {
   const navigate = useNavigate();
 
   const goHome = () => {
-    navigate(`/home`);
+    const provider = localStorage.getItem('roadrunner_map_provider') || 'google';
+    navigate(provider === 'google' ? '/google/home' : '/home');
   }
 
   return <MarkdownPageLayout

diff --git a/apps/roadrunner-view/src/components/DriverViewPage/DriverViewPage.tsx b/apps/roadrunner-view/src/components/DriverViewPage/DriverViewPage.tsx
@@ -89,7 +89,8 @@ export const DriverViewPage = () => {
       });
     }
 
-    navigate('/home');
+    const provider = localStorage.getItem('roadrunner_map_provider') || 'google';
+    navigate(provider === 'google' ? '/google/home' : '/home');
   }, [navigate, vehicleState, homeMapViewState, setHomeMapViewState, goingHome]);
 
   // Check if vehicle is absent in active tracking and query historical session if needed
@@ -462,7 +463,10 @@ export const DriverViewPage = () => {
                <Button
                  variant="light"
                  className="shadow-sm border border-primary animate-pulse"
-                 onClick={() => navigate(`/3d-view?vehicleId=${vehicleId}`)}
+                  onClick={() => {
+                    const provider = localStorage.getItem('roadrunner_map_provider') || 'google';
+                    navigate(provider === 'google' ? `/google/3d-view?vehicleId=${vehicleId}` : `/3d-view?vehicleId=${vehicleId}`);
+                  }}
                  title="Switch to 3D Map View"
                >
                  <FontAwesomeIcon icon={faExchangeAlt} className="text-primary" />

diff --git a/apps/roadrunner-view/src/components/GoogleDriverViewPage/GoogleDriverViewPage.tsx b/apps/roadrunner-view/src/components/GoogleDriverViewPage/GoogleDriverViewPage.tsx
@@ -186,7 +186,8 @@ export const GoogleDriverViewPage = () => {
       });
     }
 
-    navigate('/google/home');
+    const provider = localStorage.getItem('roadrunner_map_provider') || 'google';
+    navigate(provider === 'google' ? '/google/home' : '/home');
   }, [navigate, vehicleState, homeMapViewState, setHomeMapViewState, goingHome]);
 
   // Import Maps 3D library programmatically
@@ -466,7 +467,10 @@ export const GoogleDriverViewPage = () => {
 
               <Button
                 variant="light"
-                onClick={() => navigate(`/google/3d-view?vehicleId=${vehicleId}`)}
+                onClick={() => {
+                  const provider = localStorage.getItem('roadrunner_map_provider') || 'google';
+                  navigate(provider === 'google' ? `/google/3d-view?vehicleId=${vehicleId}` : `/3d-view?vehicleId=${vehicleId}`);
+                }}
                 className="shadow-sm border border-primary animate-pulse"
                 title="Switch to 3D Map View"
               >

diff --git a/apps/roadrunner-view/src/components/GoogleHomePage/GoogleHomePage.tsx b/apps/roadrunner-view/src/components/GoogleHomePage/GoogleHomePage.tsx
@@ -180,7 +180,8 @@ export const GoogleHomePage = () => {
 
     const sessionTime = new Date(startTime).toLocaleTimeString([], timeFormatOptions) + 'Z';
     setPlaybackSession(sessionTime);
-    navigate(`/google/driver-view/${vehicleId}`);
+    const provider = localStorage.getItem('roadrunner_map_provider') || 'google';
+    navigate(provider === 'google' ? `/google/driver-view/${vehicleId}` : `/driver-view/${vehicleId}`);
     setShowBookmarksPanel(false);
   }, [navigate, setPlaybackSession]);
 

diff --git a/apps/roadrunner-view/src/components/GoogleHomePage/GoogleVehicleIcon.tsx b/apps/roadrunner-view/src/components/GoogleHomePage/GoogleVehicleIcon.tsx
@@ -175,7 +175,8 @@ export const GoogleVehicleIcon: React.FC<{
                 size="sm"
                 onClick={(e) => {
                   e.stopPropagation();
-                  navigate(`/google/driver-view/${props.vehicleState.id}`);
+                  const provider = localStorage.getItem('roadrunner_map_provider') || 'google';
+                  navigate(provider === 'google' ? `/google/driver-view/${props.vehicleState.id}` : `/driver-view/${props.vehicleState.id}`);
                 }}
               >
                 Jump into vehicle

diff --git a/apps/roadrunner-view/src/components/GoogleVehicle3DMapPage/GoogleVehicle3DMapPage.tsx b/apps/roadrunner-view/src/components/GoogleVehicle3DMapPage/GoogleVehicle3DMapPage.tsx
@@ -756,7 +756,10 @@ export const GoogleVehicle3DMapPage = () => {
               <Button
                 variant="light"
                 className="shadow-sm"
-                onClick={() => navigate('/google/home')}
+                onClick={() => {
+                  const provider = localStorage.getItem('roadrunner_map_provider') || 'google';
+                  navigate(provider === 'google' ? '/google/home' : '/home');
+                }}
                 title="Home"
               >
                 <FontAwesomeIcon icon={faHome} />
@@ -766,7 +769,10 @@ export const GoogleVehicle3DMapPage = () => {
                 <Button
                   variant="light"
                   className="shadow-sm border border-primary animate-pulse"
-                  onClick={() => navigate(`/google/driver-view/${focusedVehicleId}`)}
+                  onClick={() => {
+                    const provider = localStorage.getItem('roadrunner_map_provider') || 'google';
+                    navigate(provider === 'google' ? `/google/driver-view/${focusedVehicleId}` : `/driver-view/${focusedVehicleId}`);
+                  }}
                   title="Switch to Driver View"
                 >
                   <FontAwesomeIcon icon={faExchangeAlt} className="text-primary" />

diff --git a/apps/roadrunner-view/src/components/HomePage/HomePage.tsx b/apps/roadrunner-view/src/components/HomePage/HomePage.tsx
@@ -233,7 +233,8 @@ export const HomePage = () => {
 
     const sessionTime = new Date(startTime).toLocaleTimeString([], timeFormatOptions) + 'Z'
     setPlaybackSession(sessionTime);
-    navigate(`/driver-view/${vehicleId}`);
+    const provider = localStorage.getItem('roadrunner_map_provider') || 'google';
+    navigate(provider === 'google' ? `/google/driver-view/${vehicleId}` : `/driver-view/${vehicleId}`);
     setShowBookmarksPanel(false);
   }, [navigate, setPlaybackSession]);
 

diff --git a/apps/roadrunner-view/src/components/HomePage/VehicleIcon.tsx b/apps/roadrunner-view/src/components/HomePage/VehicleIcon.tsx
@@ -3,6 +3,7 @@ import { getCachedAuthToken } from "../Utils/AuthUtils";
 import type { LayerProps } from "react-map-gl";
 import type { Feature } from "geojson";
 import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import { VehicleDisplay } from "../../models/VehicleDisplay";
 import { VehicleState } from "../../models/VehicleState";
 import { Button, Card } from "react-bootstrap";
@@ -13,6 +14,7 @@ export const VehicleIcon: React.FC<{
   vehicleState: VehicleState,
   vehicleDisplay: VehicleDisplay
 }> = (props) => {
+  const navigate = useNavigate();
   const { dataSource } = usePlayback();
   const [token, setToken] = useState("");
   const [directionsGeometry, setDirectionsGeometry] = useState([]);
@@ -136,7 +138,13 @@ export const VehicleIcon: React.FC<{
               Speed: {(Math.round(MPS_TO_MPH * props.vehicleState.metersPerSecond * 10) / 10).toFixed(1)} MPH<br/>
               Bearing: {(Math.round(props.vehicleState.degBearing * 10) / 10).toFixed(1)}&deg;
             </Card.Text>
-            <Button variant="primary" href={`/driver-view/${props.vehicleState.id}`}>
+            <Button
+              variant="primary"
+              onClick={() => {
+                const provider = localStorage.getItem('roadrunner_map_provider') || 'google';
+                navigate(provider === 'google' ? `/google/driver-view/${props.vehicleState.id}` : `/driver-view/${props.vehicleState.id}`);
+              }}
+            >
               Jump into vehicle
             </Button>
           </Card.Body>

diff --git a/apps/roadrunner-view/src/components/NavBar/NavBarBrand.tsx b/apps/roadrunner-view/src/components/NavBar/NavBarBrand.tsx
@@ -7,7 +7,10 @@ export const NavBarBrand: React.FC = () => {
   return (
     <div 
       className="nav-bar__brand" 
-      onClick={() => navigate('/home')} 
+      onClick={() => {
+        const provider = localStorage.getItem('roadrunner_map_provider') || 'google';
+        navigate(provider === 'google' ? '/google/home' : '/home');
+      }} 
       style={{ cursor: 'pointer' }}
     >
       <img

diff --git a/apps/roadrunner-view/src/components/Shared/MarkdownPageLayout.tsx b/apps/roadrunner-view/src/components/Shared/MarkdownPageLayout.tsx
@@ -35,7 +35,8 @@ export function MarkdownPageLayout({ title, markdownUrl, onClose }: MarkdownPage
     if (onClose) {
       onClose();
     } else {
-      navigate(`/home`);
+      const provider = localStorage.getItem('roadrunner_map_provider') || 'google';
+      navigate(provider === 'google' ? '/google/home' : '/home');
     }
   };
 

diff --git a/apps/roadrunner-view/src/components/Vehicle3DMapPage/Vehicle3DMapPage.tsx b/apps/roadrunner-view/src/components/Vehicle3DMapPage/Vehicle3DMapPage.tsx
@@ -597,7 +597,10 @@ export const Vehicle3DMapPage = () => {
               <Button
                 variant="light"
                 className="shadow-sm"
-                onClick={() => navigate('/home')}
+                onClick={() => {
+                  const provider = localStorage.getItem('roadrunner_map_provider') || 'google';
+                  navigate(provider === 'google' ? '/google/home' : '/home');
+                }}
                 title="Home"
               >
                 <FontAwesomeIcon icon={faHome} />
@@ -606,7 +609,10 @@ export const Vehicle3DMapPage = () => {
                 <Button
                   variant="light"
                   className="shadow-sm border border-primary animate-pulse"
-                  onClick={() => navigate(`/driver-view/${focusedVehicleId}`)}
+                  onClick={() => {
+                    const provider = localStorage.getItem('roadrunner_map_provider') || 'google';
+                    navigate(provider === 'google' ? `/google/driver-view/${focusedVehicleId}` : `/driver-view/${focusedVehicleId}`);
+                  }}
                   title="Switch to Driver View"
                 >
                   <FontAwesomeIcon icon={faExchangeAlt} className="text-primary" />