Add custom map text/bg overrides

Author: bkeepers

packages/react/src/components/StationsMap.tsx

@@ -22,7 +22,6 @@ import { keepPreviousData } from "@tanstack/react-query";
 import { useStation } from "../hooks/use-station.js";
 import { useStations } from "../hooks/use-stations.js";
 import { useDebouncedCallback } from "../hooks/use-debounced-callback.js";
-import { useDarkMode } from "../hooks/use-dark-mode.js";
 import { useThemeColors } from "../hooks/use-theme-colors.js";
 import { TideConditions } from "./TideConditions.js";
 import type { StationSummary } from "../types.js";
@@ -31,8 +30,6 @@ import type { StationSummary } from "../types.js";
 type ManagedMapProps = "onMove" | "onClick" | "interactiveLayerIds" | "style" | "cursor";
 
 export interface StationsMapProps extends Omit<ComponentProps<typeof Map>, ManagedMapProps> {
-  /** Optional dark mode style URL. Switches automatically based on .dark class or prefers-color-scheme. */
-  darkMapStyle?: string;
   onStationSelect?: (station: StationSummary) => void;
   onBoundsChange?: (bounds: { north: number; south: number; east: number; west: number }) => void;
   /** Whether to show the geolocation button. Defaults to true. */
@@ -77,8 +74,6 @@ function StationPreviewCard({ stationId }: { stationId: string }) {
 
 export const StationsMap = forwardRef<MapRef, StationsMapProps>(function StationsMap(
   {
-    mapStyle,
-    darkMapStyle,
     onStationSelect,
     onBoundsChange,
     focusStation,
@@ -98,9 +93,7 @@ export const StationsMap = forwardRef<MapRef, StationsMapProps>(function Station
   const debouncedSetBbox = useDebouncedCallback(setBbox, 200);
   const [selectedStation, setSelectedStation] = useState<StationSummary | null>(null);
 
-  const isDarkMode = useDarkMode();
   const colors = useThemeColors();
-  const effectiveMapStyle = isDarkMode && darkMapStyle ? darkMapStyle : mapStyle;
 
   const {
     data: stations = [],
@@ -218,7 +211,6 @@ export const StationsMap = forwardRef<MapRef, StationsMapProps>(function Station
         onMove={handleMove}
         onClick={handleMapClick}
         interactiveLayerIds={["clusters", "unclustered-point"]}
-        mapStyle={effectiveMapStyle}
         style={{ width: "100%", height: "100%" }}
         cursor="pointer"
         attributionControl={false}
@@ -291,17 +283,18 @@ export const StationsMap = forwardRef<MapRef, StationsMapProps>(function Station
             id="station-labels"
             type="symbol"
             filter={["!", ["has", "point_count"]]}
-            minzoom={8}
+            minzoom={7}
             layout={{
               "text-field": ["get", "name"],
-              "text-size": 11,
+              "text-size": 13,
               "text-offset": [0, 1.5],
               "text-anchor": "top",
               "text-max-width": 10,
+              "text-font": ["Open Sans Bold", "Arial Unicode MS Bold"],
             }}
             paint={{
-              "text-color": colors.text,
-              "text-halo-color": colors.bg,
+              "text-color": colors.mapText,
+              "text-halo-color": colors.mapBg,
               "text-halo-width": 1.5,
             }}
           />
@@ -325,15 +318,15 @@ export const StationsMap = forwardRef<MapRef, StationsMapProps>(function Station
               type="symbol"
               layout={{
                 "text-field": ["get", "name"],
-                "text-size": 12,
+                "text-size": 14,
                 "text-offset": [0, 1.8],
                 "text-anchor": "top",
                 "text-max-width": 10,
                 "text-font": ["Open Sans Bold", "Arial Unicode MS Bold"],
               }}
               paint={{
-                "text-color": colors.text,
-                "text-halo-color": colors.bg,
+                "text-color": colors.mapText,
+                "text-halo-color": colors.mapBg,
                 "text-halo-width": 2,
               }}
             />

packages/react/src/hooks/use-theme-colors.ts

@@ -13,6 +13,8 @@ export interface ThemeColors {
   text: string;
   textMuted: string;
   border: string;
+  mapText: string;
+  mapBg: string;
 }
 
 const FALLBACKS: ThemeColors = {
@@ -26,6 +28,8 @@ const FALLBACKS: ThemeColors = {
   text: "#0f172a",
   textMuted: "#64748b",
   border: "#e2e8f0",
+  mapText: "#0f172a",
+  mapBg: "#ffffff",
 };
 
 /**
@@ -63,23 +67,30 @@ export function withAlpha(color: string, alpha: number): string {
 
 /**
  * Reads resolved `--neaps-*` CSS custom property values from the DOM.
- * Re-computes when dark mode toggles so Chart.js (canvas) gets correct colors.
+ * Re-computes when dark mode toggles.
+ *
+ * `--neaps-map-text` and `--neaps-map-bg` default to `--neaps-text` and `--neaps-bg`
+ * respectively, so consumers only need to set them when the map background differs
+ * from the app theme (e.g. satellite imagery).
  */
 export function useThemeColors(): ThemeColors {
   const isDark = useDarkMode();
-  return useMemo(
-    () => ({
+  return useMemo(() => {
+    const text = readCSSVar("--neaps-text", FALLBACKS.text);
+    const bg = readCSSVar("--neaps-bg", FALLBACKS.bg);
+    return {
       primary: readCSSVar("--neaps-primary", FALLBACKS.primary),
       secondary: readCSSVar("--neaps-secondary", FALLBACKS.secondary),
       high: readCSSVar("--neaps-high", FALLBACKS.high),
       low: readCSSVar("--neaps-low", FALLBACKS.low),
       danger: readCSSVar("--neaps-danger", FALLBACKS.danger),
-      bg: readCSSVar("--neaps-bg", FALLBACKS.bg),
+      bg,
       bgSubtle: readCSSVar("--neaps-bg-subtle", FALLBACKS.bgSubtle),
-      text: readCSSVar("--neaps-text", FALLBACKS.text),
+      text,
       textMuted: readCSSVar("--neaps-text-muted", FALLBACKS.textMuted),
       border: readCSSVar("--neaps-border", FALLBACKS.border),
-    }),
-    [isDark],
-  );
+      mapText: readCSSVar("--neaps-map-text", text),
+      mapBg: readCSSVar("--neaps-map-bg", bg),
+    };
+  }, [isDark]);
 }