improved map styling and readability

Author: Alessandro100

src/app/components/GtfsVisualizationMap.functions.tsx

@@ -43,20 +43,42 @@ export function extractRouteIds(val: RouteIdsInput): string[] {
 
 export function generateStopColorExpression(
   routeIdToColor: Record<string, string>,
+  mapBgColor: string,
+  altColor: string,
   fallback: string = '#888',
 ): string | ExpressionSpecification {
   const expression: Array<string | ExpressionSpecification> = [];
 
   const isHex = (s: string): boolean =>
     /^[0-9A-Fa-f]{3}([0-9A-Fa-f]{3})?$/.test(s);
 
+  const toFullHex = (hex: string): string =>
+    hex.length === 3
+      ? `#${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`
+      : `#${hex}`;
+
+  const contrastRatio = (lum1: number, lum2: number): number =>
+    (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
+
+  const bgLum = linearLuminance(mapBgColor);
+  const altLum = linearLuminance(altColor);
+
   for (const [routeId, raw] of Object.entries(routeIdToColor)) {
     if (raw == null) continue;
     const hex = String(raw).trim().replace(/^#/, '');
     if (!isHex(hex)) continue; // skip empty/invalid colors
 
+    const fullHex = toFullHex(hex);
+    const routeLum = linearLuminance(fullHex);
+    const crBg = contrastRatio(routeLum, bgLum); // route vs map bg
+    const crAlt = contrastRatio(routeLum, altLum); // route vs alt color
+
+    // Same logic as route outline: use route color when it contrasts more against the bg,
+    // fall back to altColor when altColor contrasts more against the route
+    const chosenColor = crBg >= crAlt ? fullHex : altColor;
+
     // route_ids is a string of quoted ids; keep your quoted match style
-    expression.push(['in', `"${routeId}"`, ['get', 'route_ids']], `#${hex}`);
+    expression.push(['in', `"${routeId}"`, ['get', 'route_ids']], chosenColor);
   }
 
   // If nothing valid was added, just use the fallback color directly
@@ -68,6 +90,99 @@ export function generateStopColorExpression(
   return ['case', ...expression] as ExpressionSpecification;
 }
 
+/**
+ * Simplified relative luminance (linear approximation, 0–1 range).
+ * Uses the Rec. 709 coefficients without sRGB gamma correction
+ * (MapLibre expressions don't support `pow`).
+ */
+function linearLuminance(hex: string): number {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+}
+
+/**
+ * Builds a MapLibre expression that picks the outline color for a route line
+ * by computing simplified contrast ratios against two candidate colours
+ * (`mapBgColor` and `altOutlineColor`) and choosing the one with the
+ * higher contrast.
+ *
+ * This handles both light-on-light (e.g. white route on white map) and
+ * dark-on-dark (e.g. black route on dark outline) scenarios.
+ */
+export function generateRouteOutlineColorExpression(
+  mapBgColor: string,
+  altOutlineColor: string,
+): ExpressionSpecification {
+  // Luminance of the two candidate outline colours (precomputed at build time)
+  const bgLum = linearLuminance(mapBgColor);
+  const altLum = linearLuminance(altOutlineColor);
+
+  // Parse the feature's route_color (stored as hex without '#') into RGBA
+  const routeColorExpr: ExpressionSpecification = [
+    'to-color',
+    ['concat', '#', ['get', 'route_color']],
+    '#000000', // fallback when route_color is missing/invalid
+  ];
+
+  // Route luminance computed at render time (0–1)
+  const lumExpr: ExpressionSpecification = [
+    '/',
+    [
+      '+',
+      ['*', 0.2126, ['at', 0, ['var', 'rgba']]],
+      [
+        '+',
+        ['*', 0.7152, ['at', 1, ['var', 'rgba']]],
+        ['*', 0.0722, ['at', 2, ['var', 'rgba']]],
+      ],
+    ],
+    255,
+  ];
+
+  // Contrast ratio: CR = (Lmax + 0.05) / (Lmin + 0.05)
+  const crBgExpr: ExpressionSpecification = [
+    '/',
+    ['+', ['max', ['var', 'lum'], bgLum], 0.05],
+    ['+', ['min', ['var', 'lum'], bgLum], 0.05],
+  ];
+
+  const crAltExpr: ExpressionSpecification = [
+    '/',
+    ['+', ['max', ['var', 'lum'], altLum], 0.05],
+    ['+', ['min', ['var', 'lum'], altLum], 0.05],
+  ];
+
+  // Bind intermediate values, then pick the outline with the higher contrast
+  return [
+    'let',
+    'rgba',
+    ['to-rgba', routeColorExpr],
+    [
+      'let',
+      'lum',
+      lumExpr,
+      [
+        'let',
+        'crBg',
+        crBgExpr,
+        [
+          'let',
+          'crAlt',
+          crAltExpr,
+          [
+            'case',
+            ['>=', ['var', 'crBg'], ['var', 'crAlt']],
+            mapBgColor,
+            altOutlineColor,
+          ],
+        ],
+      ],
+    ],
+  ];
+}
+
 export const getBoundsFromCoordinates = (
   coordinates: LngLatTuple[],
 ): LngLatBoundsLike => {

src/app/components/GtfsVisualizationMap.layers.tsx

@@ -5,7 +5,10 @@ import {
   type ExpressionSpecification,
   type LayerSpecification,
 } from 'maplibre-gl';
-import { generateStopColorExpression } from './GtfsVisualizationMap.functions';
+import {
+  generateStopColorExpression,
+  generateRouteOutlineColorExpression,
+} from './GtfsVisualizationMap.functions';
 import { type Theme } from '@mui/material';
 
 // layer helpers
@@ -40,7 +43,6 @@ export const stopsBaseFilter = (
         ];
 };
 
-// layers
 export const RoutesWhiteLayer = (
   filteredRouteTypeIds: string[],
   theme: Theme,
@@ -52,8 +54,17 @@ export const RoutesWhiteLayer = (
     'source-layer': 'routesoutput',
     type: 'line',
     paint: {
-      'line-color': theme.palette.background.default,
-      'line-width': ['match', ['get', 'route_type'], '3', 10, '1', 15, 3],
+      'line-color': generateRouteOutlineColorExpression(
+        theme.map.basemapTileOverallColor ?? '#ffffff',
+        theme.palette.mode === 'light' ? theme.palette.grey[500] : '#ffffff1a',
+      ),
+      'line-opacity': 1,
+      'line-width': ['match', ['get', 'route_type'], '3', 5, '1', 10, 7],
+    },
+    layout: {
+      'line-cap': 'round',
+      'line-join': 'round',
+      'line-sort-key': ['match', ['get', 'route_type'], '1', 3, '3', 2, 0],
     },
   };
 };
@@ -78,34 +89,50 @@ export const RouteLayer = (
           ['==', filteredRoutes.length, 0],
           ['in', ['get', 'route_id'], ['literal', filteredRoutes]],
         ],
-        0.4,
+        ['match', ['get', 'route_type'], '1', 0.8, '3', 0.4, 0.5],
         0.1,
       ],
     },
     layout: {
+      'line-cap': 'round',
+      'line-join': 'round',
       'line-sort-key': ['match', ['get', 'route_type'], '1', 3, '3', 2, 0],
     },
   };
 };
 
-export const StopLayer = (
-  hideStops: boolean,
-  allSelectedRouteIds: string[],
-  stopRadius: number,
+export const RoutesWhiteHighlightLayer = (
+  routeId: string | undefined,
+  hoverInfo: string[],
+  filteredRoutes: string[],
+  theme: Theme,
 ): LayerSpecification => {
   return {
-    id: 'stops',
-    filter: stopsBaseFilter(hideStops, allSelectedRouteIds),
-    source: 'sample',
-    'source-layer': 'stopsoutput',
-    type: 'circle',
+    id: 'routes-white-highlight',
+    source: 'routes',
+    'source-layer': 'routesoutput',
+    type: 'line',
     paint: {
-      'circle-radius': stopRadius,
-      'circle-color': '#000000',
-      'circle-opacity': 0.4,
+      'line-color': generateRouteOutlineColorExpression(
+        theme.map.basemapTileOverallColor ?? '#ffffff',
+        theme.palette.mode === 'light'
+          ? theme.palette.grey[500]
+          : theme.palette.grey[200],
+      ),
+      'line-opacity': 1,
+      'line-width': ['match', ['get', 'route_type'], '3', 10, '1', 14, 10],
     },
-    minzoom: 12,
-    maxzoom: 22,
+    layout: {
+      'line-cap': 'round',
+      'line-join': 'round',
+      'line-sort-key': ['match', ['get', 'route_type'], '1', 3, '3', 2, 0],
+    },
+    filter: [
+      'any',
+      ['in', ['get', 'route_id'], ['literal', hoverInfo]],
+      ['in', ['get', 'route_id'], ['literal', filteredRoutes]],
+      ['in', ['get', 'route_id'], ['literal', [routeId ?? '']]],
+    ],
   };
 };
 
@@ -133,12 +160,35 @@ export const RouteHighlightLayer = (
   };
 };
 
+export const StopLayer = (
+  hideStops: boolean,
+  allSelectedRouteIds: string[],
+  stopRadius: number,
+  theme: Theme,
+): LayerSpecification => {
+  return {
+    id: 'stops',
+    filter: stopsBaseFilter(hideStops, allSelectedRouteIds),
+    source: 'sample',
+    'source-layer': 'stopsoutput',
+    type: 'circle',
+    paint: {
+      'circle-radius': stopRadius,
+      'circle-color': theme.palette.text.primary,
+      'circle-opacity': 0.4,
+    },
+    minzoom: 12,
+    maxzoom: 22,
+  };
+};
+
 export const StopsHighlightLayer = (
   hoverInfo: string[],
   hideStops: boolean,
   filteredRoutes: string[],
   stopId: string | undefined,
   stopHighlightColorMap: Record<string, string>,
+  theme: Theme,
 ): LayerSpecification => {
   return {
     id: 'stops-highlight',
@@ -147,10 +197,14 @@ export const StopsHighlightLayer = (
     type: 'circle',
     paint: {
       'circle-radius': 7,
-      'circle-color': generateStopColorExpression(stopHighlightColorMap),
+      'circle-color': generateStopColorExpression(
+        stopHighlightColorMap,
+        theme.map.basemapTileOverallColor ?? '#ffffff',
+        theme.palette.text.primary,
+      ),
       'circle-opacity': 1,
     },
-    minzoom: 10,
+    minzoom: 11,
     maxzoom: 22,
     filter: hideStops
       ? !hideStops
@@ -198,6 +252,8 @@ export const StopsHighlightOuterLayer = (
       'circle-color': theme.palette.background.paper,
       'circle-opacity': 1,
     },
+    minzoom: 11,
+    maxzoom: 22,
     filter: hideStops
       ? !hideStops
       : [

src/app/components/GtfsVisualizationMap.tsx

@@ -32,6 +32,7 @@ import {
 import {
   RouteHighlightLayer,
   RouteLayer,
+  RoutesWhiteHighlightLayer,
   RoutesWhiteLayer,
   StopLayer,
   StopsHighlightLayer,
@@ -590,7 +591,13 @@ export const GtfsVisualizationMap = ({
                 },
                 RoutesWhiteLayer(filteredRouteTypeIds, theme),
                 RouteLayer(filteredRoutes, filteredRouteTypeIds),
-                StopLayer(hideStops, allSelectedRouteIds, stopRadius),
+                RoutesWhiteHighlightLayer(
+                  mapClickRouteData?.route_id,
+                  hoverInfo,
+                  filteredRoutes,
+                  theme,
+                ),
+                StopLayer(hideStops, allSelectedRouteIds, stopRadius, theme),
                 RouteHighlightLayer(
                   mapClickRouteData?.route_id,
                   hoverInfo,
@@ -602,6 +609,7 @@ export const GtfsVisualizationMap = ({
                   filteredRoutes,
                   mapClickStopData?.stop_id,
                   stopHighlightColorMap,
+                  theme,
                 ),
                 StopsHighlightOuterLayer(
                   hoverInfo,