From 37d8eedd641bb04c086797010292bcb25240d56d Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Thu, 6 Nov 2025 23:36:52 +0100
Subject: Refactor styles and add alert color variables; implement scroll
 management for timetable

---
 src/frontend/app/routes/map.tsx | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

(limited to 'src/frontend/app/routes/map.tsx')

diff --git a/src/frontend/app/routes/map.tsx b/src/frontend/app/routes/map.tsx
index effd29b..f705617 100644
--- a/src/frontend/app/routes/map.tsx
+++ b/src/frontend/app/routes/map.tsx
@@ -32,7 +32,10 @@ const defaultStyle: StyleSpecification = {
 export default function StopMap() {
   const { t } = useTranslation();
   const [stops, setStops] = useState<
-    GeoJsonFeature<Point, { stopId: number; name: string; lines: string[] }>[]
+    GeoJsonFeature<
+      Point,
+      { stopId: number; name: string; lines: string[]; cancelled?: boolean }
+    >[]
   >([]);
   const [selectedStop, setSelectedStop] = useState<Stop | null>(null);
   const [isSheetOpen, setIsSheetOpen] = useState(false);
@@ -57,14 +60,19 @@ export default function StopMap() {
     StopDataProvider.getStops(region).then((data) => {
       const features: GeoJsonFeature<
         Point,
-        { stopId: number; name: string; lines: string[] }
+        { stopId: number; name: string; lines: string[]; cancelled?: boolean }
       >[] = data.map((s) => ({
         type: "Feature",
         geometry: {
           type: "Point",
           coordinates: [s.longitude as number, s.latitude as number],
         },
-        properties: { stopId: s.stopId, name: s.name.original, lines: s.lines },
+        properties: {
+          stopId: s.stopId,
+          name: s.name.original,
+          lines: s.lines,
+          cancelled: s.cancelled,
+        },
       }));
       setStops(features);
     });
@@ -157,7 +165,12 @@ export default function StopMap() {
         type="symbol"
         source="stops-source"
         layout={{
-          "icon-image": `stop-${region}`,
+          "icon-image": [
+            "case",
+            ["boolean", ["get", "cancelled"], false],
+            `stop-${region}-cancelled`,
+            `stop-${region}`,
+          ],
           "icon-size": ["interpolate", ["linear"], ["zoom"], 11, 0.7, 18, 1.0],
           "icon-allow-overlap": true,
           "icon-ignore-placement": true,
-- 
cgit v1.3