2 files changed, 53 insertions, 24 deletions

diff --git a/src/frontend/app/routes/map.tsx b/src/frontend/app/routes/map.tsx
index 461e891..402bf60 100644
--- a/src/frontend/app/routes/map.tsx
+++ b/src/frontend/app/routes/map.tsx
@@ -35,7 +35,7 @@ export default function StopMap() {
   const [stops, setStops] = useState<
     GeoJsonFeature<
       Point,
-      { stopId: number; name: string; lines: string[]; cancelled?: boolean }
+      { stopId: string; name: string; lines: string[]; cancelled?: boolean, prefix: string }
     >[]
   >([]);
   const [selectedStop, setSelectedStop] = useState<Stop | null>(null);
@@ -65,7 +65,7 @@ export default function StopMap() {
     StopDataProvider.getStops().then((data) => {
       const features: GeoJsonFeature<
         Point,
-        { stopId: number; name: string; lines: string[]; cancelled?: boolean }
+        { stopId: string; name: string; lines: string[]; cancelled?: boolean, prefix: string }
       >[] = data.map((s) => ({
         type: "Feature",
         geometry: {
@@ -77,6 +77,7 @@ export default function StopMap() {
           name: s.name.original,
           lines: s.lines,
           cancelled: s.cancelled ?? false,
+          prefix: s.stopId.startsWith("renfe:") ? "stop-renfe" : (s.cancelled ? "stop-vitrasa-cancelled" : "stop-vitrasa"),
         },
       }));
       setStops(features);
@@ -152,7 +153,7 @@ export default function StopMap() {
       return;
     }
 
-    const stopId = parseInt(props.stopId, 10);
+    const stopId = props.stopId;
 
     // fetch full stop to get lines array
     StopDataProvider.getStopById(stopId)
@@ -200,25 +201,23 @@ export default function StopMap() {
       <Layer
         id="stops"
         type="symbol"
-        minzoom={13}
+        minzoom={11}
         source="stops-source"
         layout={{
           "icon-image": [
-            "case",
-            ["coalesce", ["get", "cancelled"], false],
-            `stop-vigo-cancelled`,
-            `stop-vigo`,
+            "get",
+            "prefix"
           ],
           "icon-size": [
             "interpolate",
             ["linear"],
             ["zoom"],
             13,
-            0.4,
-            14,
             0.7,
+            16,
+            0.8,
             18,
-            1.0,
+            1.2,
           ],
           "icon-allow-overlap": true,
           "icon-ignore-placement": true,
@@ -239,7 +238,12 @@ export default function StopMap() {
           "text-size": ["interpolate", ["linear"], ["zoom"], 11, 8, 22, 16],
         }}
         paint={{
-          "text-color": `${REGION_DATA.textColour}`,
+          "text-color": [
+            "case",
+            ["==", ["get", "prefix"], "stop-renfe"],
+            "#870164",
+            "#e72b37"
+          ],
           "text-halo-color": "#FFF",
           "text-halo-width": 1,
         }}
diff --git a/src/frontend/app/routes/stops-$id.tsx b/src/frontend/app/routes/stops-$id.tsx
index 31cc75f..d836c12 100644
--- a/src/frontend/app/routes/stops-$id.tsx
+++ b/src/frontend/app/routes/stops-$id.tsx
@@ -72,10 +72,35 @@ const loadConsolidatedData = async (
   return await resp.json();
 };
 
+export interface ConsolidatedCirculation {
+  line: string;
+  route: string;
+  schedule?: {
+    running: boolean;
+    minutes: number;
+    serviceId: string;
+    tripId: string;
+    shapeId?: string;
+  };
+  realTime?: {
+    minutes: number;
+    distance: number;
+  };
+  currentPosition?: {
+    latitude: number;
+    longitude: number;
+    orientationDegrees: number;
+    shapeIndex?: number;
+  };
+  isPreviousTrip?: boolean;
+  previousTripShapeId?: string;
+  nextStreets?: string[];
+}
+
 export default function Estimates() {
   const { t } = useTranslation();
   const params = useParams();
-  const stopIdNum = parseInt(params.id ?? "");
+  const stopId = params.id ?? "";
   const [customName, setCustomName] = useState<string | undefined>(undefined);
   const [stopData, setStopData] = useState<Stop | undefined>(undefined);
 
@@ -98,8 +123,8 @@ export default function Estimates() {
     if (customName) return customName;
     if (stopData?.name.intersect) return stopData.name.intersect;
     if (stopData?.name.original) return stopData.name.original;
-    return `Parada ${stopIdNum}`;
-  }, [customName, stopData, stopIdNum]);
+    return `Parada ${stopId}`;
+  }, [customName, stopData, stopId]);
 
   usePageTitle(getStopDisplayName());
 
@@ -128,21 +153,21 @@ export default function Estimates() {
     try {
       setDataError(null);
 
-      const body = await loadConsolidatedData(params.id!);
+      const body = await loadConsolidatedData(stopId);
       setData(body);
       setDataDate(new Date());
 
       // Load stop data from StopDataProvider
-      const stop = await StopDataProvider.getStopById(stopIdNum);
+      const stop = await StopDataProvider.getStopById(stopId);
       setStopData(stop);
-      setCustomName(StopDataProvider.getCustomName(stopIdNum));
+      setCustomName(StopDataProvider.getCustomName(stopId));
     } catch (error) {
       console.error("Error loading consolidated data:", error);
       setDataError(parseError(error));
       setData(null);
       setDataDate(null);
     }
-  }, [params.id, stopIdNum]);
+  }, [stopId]);
 
   const refreshData = useCallback(async () => {
     await Promise.all([loadData()]);
@@ -170,19 +195,19 @@ export default function Estimates() {
     setDataLoading(true);
     loadData();
 
-    StopDataProvider.pushRecent(parseInt(params.id ?? ""));
+    StopDataProvider.pushRecent(stopId);
     setFavourited(
-      StopDataProvider.isFavourite(parseInt(params.id ?? ""))
+      StopDataProvider.isFavourite(stopId)
     );
     setDataLoading(false);
-  }, [params.id, loadData]);
+  }, [stopId, loadData]);
 
   const toggleFavourite = () => {
     if (favourited) {
-      StopDataProvider.removeFavourite(stopIdNum);
+      StopDataProvider.removeFavourite(stopId);
       setFavourited(false);
     } else {
-      StopDataProvider.addFavourite(stopIdNum);
+      StopDataProvider.addFavourite(stopId);
       setFavourited(true);
     }
   };