From d434204860fc0409ad6343e815d0057b97ce3573 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Wed, 19 Nov 2025 12:40:48 +0100
Subject: Some UI tweaks

---
 src/frontend/app/routes/map.tsx | 42 ++++++++++++++++++++++++++++-------------
 1 file changed, 29 insertions(+), 13 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 5a8c7a2..b8fb881 100644
--- a/src/frontend/app/routes/map.tsx
+++ b/src/frontend/app/routes/map.tsx
@@ -1,22 +1,21 @@
 import StopDataProvider, { type Stop } from "../data/StopDataProvider";
 import "./map.css";
 
+import { loadStyle } from "app/maps/styleloader";
+import type { Feature as GeoJsonFeature, Point } from "geojson";
 import { useEffect, useRef, useState } from "react";
-import { useApp } from "~/AppContext";
+import { useTranslation } from "react-i18next";
 import Map, {
-  AttributionControl,
-  GeolocateControl,
-  Layer,
-  NavigationControl,
-  Source,
-  type MapRef,
-  type MapLayerMouseEvent,
-  type StyleSpecification,
+    GeolocateControl,
+    Layer,
+    NavigationControl,
+    Source,
+    type MapLayerMouseEvent,
+    type MapRef,
+    type StyleSpecification
 } from "react-map-gl/maplibre";
-import { loadStyle } from "app/maps/styleloader";
-import type { Feature as GeoJsonFeature, Point } from "geojson";
+import { useApp } from "~/AppContext";
 import { StopSheet } from "~/components/StopSheet";
-import { useTranslation } from "react-i18next";
 import { REGIONS } from "~/data/RegionConfig";
 
 // Default minimal fallback style before dynamic loading
@@ -96,10 +95,26 @@ export default function StopMap() {
       updateMapState([center.lat, center.lng], zoom);
     };
 
+    const handleStyleImageMissing = (e: any) => {
+      // Suppress warnings for missing sprite images from base style
+      // This prevents console noise from OpenFreeMap's missing icons
+      if (!mapRef.current) return;
+      const map = mapRef.current.getMap();
+      if (!map || map.hasImage(e.id)) return;
+
+      // Add a transparent 1x1 placeholder to prevent repeated warnings
+      map.addImage(e.id, {
+        width: 1,
+        height: 1,
+        data: new Uint8Array(4),
+      });
+    };
+
     if (mapRef.current) {
       const map = mapRef.current.getMap();
       if (map) {
         map.on("moveend", handleMapChange);
+        map.on("styleimagemissing", handleStyleImageMissing);
       }
     }
 
@@ -108,6 +123,7 @@ export default function StopMap() {
         const map = mapRef.current.getMap();
         if (map) {
           map.off("moveend", handleMapChange);
+          map.off("styleimagemissing", handleStyleImageMissing);
         }
       }
     };
@@ -168,7 +184,7 @@ export default function StopMap() {
         layout={{
           "icon-image": [
             "case",
-            ["boolean", ["get", "cancelled"], false],
+            ["coalesce", ["get", "cancelled"], false],
             `stop-${region}-cancelled`,
             `stop-${region}`,
           ],
-- 
cgit v1.3

