Add tile overlay definitions and LayersControl entries

- layers.ts: overlayLayers with hillshading, Waymarked Cycling/Hiking/MTB
- PlannerMap: LayersControl.Overlay entries for each overlay tile layer
- Leaflet handles attribution updates natively on toggle

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/planner/app/components/PlannerMap.tsx

@@ -5,7 +5,7 @@ import * as Y from "yjs";
 import { useTranslation } from "react-i18next";
 import type { DayStage } from "@trails-cool/gpx";
 import type { YjsState } from "~/lib/use-yjs";
-import { baseLayers } from "@trails-cool/map";
+import { baseLayers, overlayLayers } from "@trails-cool/map";
 import { parseGpxAsync, extractWaypoints } from "@trails-cool/gpx";
 import { isOvernight } from "~/lib/overnight";
 import { setOvernight } from "~/lib/overnight";
@@ -455,6 +455,11 @@ export function PlannerMap({ yjs, onRouteRequest, highlightPosition, highlighted
             <TileLayer url={layer.url} attribution={layer.attribution} maxZoom={layer.maxZoom} />
           </LayersControl.BaseLayer>
         ))}
+        {overlayLayers.map((layer) => (
+          <LayersControl.Overlay key={layer.id} name={layer.name}>
+            <TileLayer url={layer.url} attribution={layer.attribution} maxZoom={layer.maxZoom} opacity={layer.opacity ?? 0.7} />
+          </LayersControl.Overlay>
+        ))}
       </LayersControl>
 
       <MapExposer />

openspec/changes/osm-overlays/tasks.md

@@ -1,8 +1,8 @@
 ## 1. Tile Overlay Definitions
 
-- [ ] 1.1 Add `overlayLayers` export to `packages/map/src/layers.ts` with hillshading, Waymarked Cycling, Waymarked Hiking, Waymarked MTB tile configs
-- [ ] 1.2 Add `LayersControl.Overlay` entries in `MapView.tsx` and `PlannerMap.tsx` for each overlay
-- [ ] 1.3 Verify overlay attribution updates correctly when toggling overlays on/off
+- [x] 1.1 Add `overlayLayers` export to `packages/map/src/layers.ts` with hillshading, Waymarked Cycling, Waymarked Hiking, Waymarked MTB tile configs
+- [x] 1.2 Add `LayersControl.Overlay` entries in `MapView.tsx` and `PlannerMap.tsx` for each overlay
+- [x] 1.3 Verify overlay attribution updates correctly when toggling overlays on/off
 
 ## 2. Overlay State Sync
 

packages/map/src/index.ts

@@ -2,5 +2,5 @@ export { MapView } from "./MapView.tsx";
 export type { MapViewProps } from "./MapView.tsx";
 export { RouteLayer } from "./RouteLayer.tsx";
 export type { RouteLayerProps } from "./RouteLayer.tsx";
-export { baseLayers } from "./layers.ts";
-export type { TileLayerConfig } from "./layers.ts";
+export { baseLayers, overlayLayers } from "./layers.ts";
+export type { TileLayerConfig, OverlayLayerConfig } from "./layers.ts";

packages/map/src/layers.ts

@@ -5,6 +5,43 @@ export interface TileLayerConfig {
   maxZoom?: number;
 }
 
+export interface OverlayLayerConfig extends TileLayerConfig {
+  id: string;
+  opacity?: number;
+}
+
+export const overlayLayers: OverlayLayerConfig[] = [
+  {
+    id: "hillshading",
+    name: "Hillshading",
+    url: "https://tiles.wmflabs.org/hillshading/{z}/{x}/{y}.png",
+    attribution: "Hillshading: SRTM/Mapzen",
+    maxZoom: 17,
+    opacity: 0.5,
+  },
+  {
+    id: "waymarked-cycling",
+    name: "Cycling Routes",
+    url: "https://tile.waymarkedtrails.org/cycling/{z}/{x}/{y}.png",
+    attribution: '&copy; <a href="https://waymarkedtrails.org">Waymarked Trails</a> (CC-BY-SA)',
+    maxZoom: 18,
+  },
+  {
+    id: "waymarked-hiking",
+    name: "Hiking Routes",
+    url: "https://tile.waymarkedtrails.org/hiking/{z}/{x}/{y}.png",
+    attribution: '&copy; <a href="https://waymarkedtrails.org">Waymarked Trails</a> (CC-BY-SA)',
+    maxZoom: 18,
+  },
+  {
+    id: "waymarked-mtb",
+    name: "MTB Routes",
+    url: "https://tile.waymarkedtrails.org/mtb/{z}/{x}/{y}.png",
+    attribution: '&copy; <a href="https://waymarkedtrails.org">Waymarked Trails</a> (CC-BY-SA)',
+    maxZoom: 18,
+  },
+];
+
 export const baseLayers: TileLayerConfig[] = [
   {
     name: "OpenStreetMap",