feat(routing): track activeRoute for line and distance

frontend/calpoly-map/src/app/App.tsx

@@ -58,6 +58,7 @@ function MapScreen({
     routeRequested,
     routeStartIsCurrentLocation,
     setActivePath,
+    setRoute,
     setRouteError,
   } = useMapContext();
   const { graph, error } = usePathGraph();
@@ -75,8 +76,11 @@ function MapScreen({
   useEffect(() => {
     if (!routingActive || !routeRequested || !routeStart || !routeEnd || !graph) {
       setActivePath(null);
+      setRoute(null);
       if (routingActive && routeRequested && routeStart && routeEnd && !graph) {
         setRouteError("Loading paths data...");
+      } else if (routingActive && routeRequested && (!routeStart || !routeEnd)) {
+        setRouteError("Select a start and destination");
       } else {
         setRouteError(null);
       }
@@ -96,6 +100,7 @@ function MapScreen({
     }
     if (!result) {
       setActivePath(null);
+      setRoute(null);
       setRouteError(
         routeStartIsCurrentLocation
           ? "Current location isn't on the path network. Choose a start point."
@@ -106,13 +111,19 @@ function MapScreen({
 
     setRouteError(null);
     setActivePath(result);
+    setRoute({
+      nodes: [],
+      totalDistance: result.distance,
+      coordinates: result.path,
+    });
   }, [
     graph,
     routeStart,
     routeEnd,
     routingActive,
     routeRequested,
     setActivePath,
+    setRoute,
     setRouteError,
   ]);
 

frontend/calpoly-map/src/components/features/search/SearchPanel.tsx

@@ -34,7 +34,7 @@ export function SearchPanel({ cameraMove }: Props) {
     userLocation,
     routeStart,
     routeEnd,
-    activePath,
+    activeRoute,
     routeError,
     routingActive,
     routeRequested,
@@ -332,9 +332,9 @@ export function SearchPanel({ cameraMove }: Props) {
         <Text style={styles.statusText}>
           End: {routeEnd ? "set" : "not set"}
         </Text>
-        {activePath && (
+        {activeRoute && (
           <Text style={styles.statusText}>
-            Distance: {Math.round(activePath.distance)}m
+            Distance: {Math.round(activeRoute.totalDistance)}m
           </Text>
         )}
         {routeError && <Text style={styles.errorText}>{routeError}</Text>}

frontend/calpoly-map/src/components/map/layers/RouteLineLayer.tsx

@@ -4,10 +4,10 @@ import { CircleLayer, LineLayer, ShapeSource } from "@maplibre/maplibre-react-na
 import { useMapContext } from "../../../context/MapContext";
 
 export function RouteLineLayer() {
-  const { activePath, routeStart, routeEnd } = useMapContext();
+  const { activeRoute, routeStart, routeEnd } = useMapContext();
 
   const lineCollection = useMemo<FeatureCollection<LineString> | null>(() => {
-    if (!activePath || activePath.path.length < 2) {
+    if (!activeRoute || activeRoute.coordinates.length < 2) {
       return null;
     }
     return {
@@ -17,13 +17,13 @@ export function RouteLineLayer() {
           type: "Feature",
           geometry: {
             type: "LineString",
-            coordinates: activePath.path,
+            coordinates: activeRoute.coordinates,
           },
           properties: {},
         },
       ],
     };
-  }, [activePath]);
+  }, [activeRoute]);
 
   const pointCollection = useMemo<FeatureCollection<Point> | null>(() => {
     if (!routeStart && !routeEnd) {

frontend/calpoly-map/src/context/MapContext.tsx

@@ -139,6 +139,7 @@ export function MapProvider({ children }: { children: React.ReactNode }) {
     setRouteStart(null);
     setRouteEnd(null);
     setActivePath(null);
+    setActiveRoute(null);
     setRouteError(null);
     setRouteRequested(false);
     setRouteStartIsCurrentLocation(false);