feat(tours): bike tours in the planner, CyclOSM, and the planned cards' last points (BIK-01 to BIK-06, RTE-01, IO-01, LIB-02)

The tour type is a dropdown; a bike tour picks its profile, routes for it,
says when a point lies off every way, and shows what it runs on: surfaces,
kinds of way and, for a mountain bike, the trail grades, each pointed at on
the map. A type's own map (OpenHikingMap for a hike, CyclOSM for a bike tour)
is offered while a tour of that type is open, with an admin switch each.

From the planned cards: a hike avoids steep climbs, steps or ferries, nothing
else; a saved tour can be shared where the platform takes GPX files; and the
tours rail adds a tour from one menu: plan new, import GPX, or take one over
from another trip.

client/src/components/Map/MapLayerSwitcher.test.tsx

@@ -1,4 +1,4 @@
-// FE-COMP-MAPLAYER-001 to FE-COMP-MAPLAYER-019
+// FE-COMP-MAPLAYER-001 to FE-COMP-MAPLAYER-020
 import React from 'react'
 import { describe, it, expect, vi } from 'vitest'
 import { render, screen, fireEvent } from '../../../tests/helpers/render'
@@ -70,8 +70,8 @@ describe('MapLayerSwitcher', () => {
   })
 
   it('FE-COMP-MAPLAYER-019: a hiking map that stopped answering says so on its segment, and only while it is shown', () => {
-    const hikingMap = { down: true, onTileError: vi.fn(), onTileLoad: vi.fn() }
-    const layers = { bases: ['default', 'hiking'] as const, hikingMap }
+    const baseHealth = { base: 'hiking' as const, down: true, onTileError: vi.fn(), onTileLoad: vi.fn() }
+    const layers = { bases: ['default', 'hiking'] as const, baseHealth }
     const { rerender } = render(<TourMapLayerSwitcher active="hiking" onChange={() => {}} layers={layers} />)
     const segment = screen.getByRole('button', { name: 'Hiking' })
     expect(segment).toHaveAttribute('aria-pressed', 'true')
@@ -83,6 +83,14 @@ describe('MapLayerSwitcher', () => {
     expect(screen.queryByRole('status')).toBeNull()
   })
 
+  it('FE-COMP-MAPLAYER-020: CyclOSM sits in the switch as Cycling and says so when it stops answering (BIK-06)', () => {
+    const baseHealth = { base: 'cycle' as const, down: true, onTileError: vi.fn(), onTileLoad: vi.fn() }
+    render(<TourMapLayerSwitcher active="cycle" onChange={() => {}} layers={{ bases: ['default', 'cycle'], baseHealth }} />)
+    expect(screen.getByRole('button', { name: 'Cycling' })).toHaveTextContent('!')
+    expect(screen.getByRole('status')).toHaveTextContent('CyclOSM is not answering right now')
+    expect(screen.queryByRole('button', { name: 'Hiking' })).toBeNull()
+  })
+
   it('FE-COMP-MAPLAYER-008: the shell is as wide as the size its neighbours are placed off', () => {
     render(<MapLayerSwitcher active="default" onToggle={() => {}} />)
     const button = screen.getByRole('button')

client/src/components/Map/MapLayerSwitcher.tsx

@@ -1,4 +1,4 @@
-import { Anchor, Footprints, Loader2, Map as MapIcon, MapPinPlus, Mountain, Rotate3d, Satellite } from 'lucide-react'
+import { Anchor, Bike, Footprints, Loader2, Map as MapIcon, MapPinPlus, Mountain, Rotate3d, Satellite } from 'lucide-react'
 import type { PaddleMapLayer } from '../Tours/paddle/paddleMapLayer'
 import type { CSSProperties } from 'react'
 import { useTranslation } from '../../i18n'
@@ -9,7 +9,7 @@ import { fs } from '../shared/DialogShell'
 import { Tooltip } from '../shared/Tooltip'
 import { MAP_CONTROL_SHADOW } from './mapControlShadow'
 import type { ToggleableRasterOverlay } from './mapRasterOverlay'
-import type { TileHealth, TourRasterBase } from './tourRasterBases'
+import type { BaseMapHealth, TourRasterBase } from './tourRasterBases'
 
 export type BaseLayer = 'default' | 'satellite'
 export type TourBaseLayer = BaseLayer | TourRasterBase
@@ -20,8 +20,8 @@ export interface TourLayerOffer {
   overlays?: readonly ToggleableRasterOverlay[]
   /** PAD-05B: the paddle obstacles around a paddle tour, drawn by every renderer. */
   paddle?: PaddleMapLayer
-  /** MAP-01: whether OpenHikingMap answers while it is the base map; the maps report into it. */
-  hikingMap?: TileHealth
+  /** MAP-01, BIK-06: whether the map on terms shown (OpenHikingMap, CyclOSM) answers; the maps report into it. */
+  baseHealth?: BaseMapHealth
 }
 
 const FROSTED_SHELL = {
@@ -87,6 +87,7 @@ const TOUR_LAYERS = [
   { id: 'default', labelKey: 'map.baseLayer.default', Icon: MapIcon },
   { id: 'topo', labelKey: null, Icon: Mountain },
   { id: 'hiking', labelKey: 'map.baseLayer.hiking', Icon: Footprints },
+  { id: 'cycle', labelKey: 'map.baseLayer.cycle', Icon: Bike },
   { id: 'satellite', labelKey: 'map.baseLayer.satellite', Icon: Satellite },
 ] as const
 
@@ -274,17 +275,18 @@ export function TourMapLayerSwitcher({
   const { t } = useTranslation()
   const bases = layers?.bases
   const overlays = layers?.overlays
-  // OpenHikingMap is a best-effort service: while it is shown and stops answering, its segment says so.
-  const hikingDown = active === 'hiking' && !!layers?.hikingMap?.down
+  // A map on terms is a best-effort service: while it is shown and stops answering, its segment says so.
+  const health = layers?.baseHealth
 
   return (
     <div style={{ ...FROSTED_SHELL, gap: 2 }} role="group" aria-label={t('settings.mapStyle')}>
       {TOUR_LAYERS.filter(({ id }) => !bases || bases.includes(id)).map(({ id, labelKey, Icon }) => {
         const selected = active === id
         const label = labelKey ? t(labelKey) : 'Topo'
-        const down = id === 'hiking' && hikingDown
+        const down = !!health?.down && health.base === id && active === id
+        const downLabel = id === 'cycle' ? t('map.baseLayer.cycleDown') : t('map.baseLayer.hikingDown')
         return (
-          <Tooltip key={id} label={down ? t('map.baseLayer.hikingDown') : label} placement="top" disabled={!compact && !down}>
+          <Tooltip key={id} label={down ? downLabel : label} placement="top" disabled={!compact && !down}>
             <button
               type="button"
               onClick={() => onChange(id)}
@@ -300,7 +302,11 @@ export function TourMapLayerSwitcher({
           </Tooltip>
         )
       })}
-      {hikingDown && <span role="status" aria-live="polite" className="sr-only">{t('map.baseLayer.hikingDown')}</span>}
+      {health?.down && active === health.base && (
+        <span role="status" aria-live="polite" className="sr-only">
+          {health.base === 'cycle' ? t('map.baseLayer.cycleDown') : t('map.baseLayer.hikingDown')}
+        </span>
+      )}
       {(ferrataLayer || onToggleTerrain || placeTool || !!overlays?.length) && <span aria-hidden className="mx-0.5 h-5 w-px bg-edge" />}
       {placeTool && <PlaceToolToggle tool={placeTool} />}
       {ferrataLayer && <FerrataToggle layer={ferrataLayer} compact={compact} />}

client/src/components/Map/MapView.tsx

@@ -64,7 +64,7 @@ import { resolveTrackColor, hasManualTrackColor } from './trackColors'
 import { SelectedTrackLine, TrackLines } from './TrackLines'
 import DawarichTrailLayer from './DawarichTrailLayer'
 import { OFM_POSITRON, DEFAULT_MAP_CENTER, DEFAULT_MAP_ZOOM, MAP_MAX_ZOOM, SATELLITE_TILE_URL, SATELLITE_TILE_MAXZOOM, AMAP_SATELLITE, attributionForTile } from '../../constants/mapDefaults'
-import { tourRasterBaseOf } from './tourRasterBases'
+import { tileHealthHandlers, tourRasterBaseOf } from './tourRasterBases'
 import { crsForBasemap } from './gcj02Crs'
 import { isGcj02Basemap, resolveBasemap } from '../../utils/tileUrl'
 import VectorBasemap from './VectorBasemap'
@@ -840,7 +840,7 @@ export const MapView = memo(function MapView({
   const baseLayer = (viewBaseLayer ?? globalBaseLayer) as TourBaseLayer
   const hasViewBaseLayer = viewBaseLayer !== undefined && typeof onViewBaseLayerChange === 'function'
   const isSatellite = baseLayer === 'satellite'
-  const tourRaster = tourRasterBaseOf(baseLayer) // topo or OpenHikingMap, the Tours planner's own
+  const tourRaster = tourRasterBaseOf(baseLayer) // topo, OpenHikingMap or CyclOSM, the Tours planner's own
   // The caller hands over whatever the user configured; what kind of basemap
   // that is decides which layer draws it. A saved raster template still wins,
   // the default is a vector style.
@@ -1126,7 +1126,7 @@ export const MapView = memo(function MapView({
           maxZoom={MAP_MAX_ZOOM}
           keepBuffer={8} updateWhenZooming={false} updateWhenIdle={true}
           referrerPolicy="strict-origin-when-cross-origin"
-          eventHandlers={baseLayer === 'hiking' && tourLayers?.hikingMap ? { tileerror: tourLayers.hikingMap.onTileError, tileload: tourLayers.hikingMap.onTileLoad } : undefined}
+          eventHandlers={tileHealthHandlers(tourLayers?.baseHealth, baseLayer)}
         />
       ) : basemap.kind === 'vector' ? (
         <VectorBasemap style={basemap.style} />

client/src/components/Map/mapRasterOverlay.ts

@@ -5,7 +5,7 @@ import type { FerrataMapLayer } from '../Ferratas/useFerrataMapLayer';
 import type { PaddleMapLayer } from '../Tours/paddle/paddleMapLayer';
 import { isPaddleHit, type PaddleGlMap, usePaddleLayerGL } from '../Tours/paddle/usePaddleLayerGL';
 import { OWN_LAYER_PREFIXES, tourRasterSourceId } from './glRasterLayers';
-import type { TileHealth } from './tourRasterBases';
+import type { BaseMapHealth, TileHealth } from './tourRasterBases';
 
 /**
  * A transparent raster layer laid over the basemap and under the route, such
@@ -135,17 +135,17 @@ export function useSourceTileHealthGL(
 
 /**
  * The tour planner's layers on a GL map: the via ferratas, the raster overlays its type offers,
- * the paddle obstacles, and whether OpenHikingMap answers while it is the base map.
+ * the paddle obstacles, and whether the map on terms (OpenHikingMap, CyclOSM) answers while it is the base map.
  */
 export function useTourMapLayersGL(
   map: RasterOverlayGlMap | null,
   ferrataLayer: FerrataMapLayer | undefined,
-  layers: { overlays?: readonly MapRasterOverlay[]; paddle?: PaddleMapLayer; hikingMap?: TileHealth } | undefined
+  layers: { overlays?: readonly MapRasterOverlay[]; paddle?: PaddleMapLayer; baseHealth?: BaseMapHealth } | undefined
 ) {
   useFerrataMapLayerGL(map, ferrataLayer);
   useRasterOverlaysGL(map, layers?.overlays);
   usePaddleLayerGL(map as unknown as PaddleGlMap | null, layers?.paddle);
-  useSourceTileHealthGL(map, tourRasterSourceId('hiking'), layers?.hikingMap);
+  useSourceTileHealthGL(map, tourRasterSourceId(layers?.baseHealth?.base ?? 'hiking'), layers?.baseHealth);
 }
 
 /**

client/src/components/Map/poiCategories.ts

@@ -1,4 +1,4 @@
-import { Utensils, Coffee, Wine, BedDouble, Camera, Landmark, Trees, Ticket, Fuel, Zap, ParkingSquare, Tent, Binoculars, Mountain, Warehouse, Droplet, Toilet, Sandwich, Anchor, Sailboat, type LucideIcon } from 'lucide-react'
+import { Utensils, Coffee, Wine, BedDouble, Camera, Landmark, Trees, Ticket, Fuel, Zap, ParkingSquare, Tent, Binoculars, Mountain, Warehouse, Droplet, Toilet, Sandwich, Anchor, Sailboat, Wrench, type LucideIcon } from 'lucide-react'
 import type { TourPoiCategory } from '@trek/shared'
 import { parsePluginPoiCategoryKey, type PluginPoiDetail } from '@trek/shared'
 // The road-trip kinds take their colour from the one place that defines it, so the
@@ -45,7 +45,7 @@ const CORE_COLOR = new Map(POI_CATEGORIES.map(c => [c.key, c.color] as const))
 const coreColor = (key: string) => CORE_COLOR.get(key) ?? POI_DEFAULT_COLOR
 
 /**
- * What a hike or a paddle tour stops for (PLN-02), searched along a tour in the
+ * What a hike, a ride or a paddle tour stops for (PLN-02), searched along a tour in the
  * planner and drawn on its map. Each takes the colour of the explore category
  * it is closest to, so the map keeps one palette.
  */
@@ -61,6 +61,7 @@ export const TOUR_POI_LOOKS: Record<TourPoiCategory, PoiCategory> = {
   sights: { key: 'sights', labelKey: 'tours.poi.cat.sights', Icon: Camera, color: coreColor('sights') },
   slipway: { key: 'slipway', labelKey: 'tours.poi.cat.slipway', Icon: Anchor, color: coreColor('museum') },
   boat_rental: { key: 'boat_rental', labelKey: 'tours.poi.cat.boat_rental', Icon: Sailboat, color: coreColor('cafe') },
+  bike_repair: { key: 'bike_repair', labelKey: 'tours.poi.cat.bike_repair', Icon: Wrench, color: coreColor('activity') },
 }
 
 // A Map rather than an object, so a category named after an Object.prototype member

client/src/components/Map/tourRasterBases.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, it, vi } from 'vitest';
+import { isOnTermsBase, tileHealthHandlers, TOUR_RASTER_BASES, tourRasterBaseOf } from './tourRasterBases';
+
+// FE-MAP-TOURBASES-001 to FE-MAP-TOURBASES-003
+
+describe('tourRasterBases (MAP-01, BIK-06)', () => {
+  it('FE-MAP-TOURBASES-001: knows topo, OpenHikingMap and CyclOSM, CyclOSM on its three shards', () => {
+    expect(tourRasterBaseOf('topo')).toBe(TOUR_RASTER_BASES.topo);
+    expect(tourRasterBaseOf('cycle')?.tiles).toEqual([
+      'https://a.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png',
+      'https://b.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png',
+      'https://c.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png',
+    ]);
+    expect(tourRasterBaseOf('cycle')?.maxZoom).toBe(20);
+    expect(tourRasterBaseOf('satellite')).toBeNull();
+    // Inherited names are no base map.
+    expect(tourRasterBaseOf('toString')).toBeNull();
+  });
+
+  it('FE-MAP-TOURBASES-002: the maps on terms carry their credit; topo is no map on terms', () => {
+    expect(isOnTermsBase('hiking')).toBe(true);
+    expect(isOnTermsBase('cycle')).toBe(true);
+    expect(isOnTermsBase('topo')).toBe(false);
+    expect(isOnTermsBase('default')).toBe(false);
+    expect(TOUR_RASTER_BASES.cycle.onTerms?.credit.map((part) => part.href)).toEqual([
+      'https://www.cyclosm.org',
+      'https://www.openstreetmap.org/copyright',
+    ]);
+    expect(TOUR_RASTER_BASES.hiking.onTerms?.credit).toHaveLength(3);
+  });
+
+  it('FE-MAP-TOURBASES-003: a Leaflet layer reports into the health of the map watched, and only of that one', () => {
+    const health = { base: 'cycle' as const, down: false, onTileError: vi.fn(), onTileLoad: vi.fn() };
+    expect(tileHealthHandlers(health, 'cycle')).toEqual({ tileerror: health.onTileError, tileload: health.onTileLoad });
+    expect(tileHealthHandlers(health, 'hiking')).toBeUndefined();
+    expect(tileHealthHandlers(undefined, 'cycle')).toBeUndefined();
+  });
+});

client/src/components/Map/tourRasterBases.ts

@@ -1,4 +1,7 @@
 import {
+  CYCLOSM_TILE_ATTRIBUTION,
+  CYCLOSM_TILE_MAXZOOM,
+  CYCLOSM_TILE_URL,
   OPENHIKINGMAP_TILE_ATTRIBUTION,
   OPENHIKINGMAP_TILE_MAXZOOM,
   OPENHIKINGMAP_TILE_URL,
@@ -8,7 +11,7 @@ import {
 } from '../../constants/mapDefaults';
 
 /** The raster base maps only the Tours planner offers, drawn the same way by Leaflet, GL and the 3D map. */
-export type TourRasterBase = 'topo' | 'hiking';
+export type TourRasterBase = 'topo' | 'hiking' | 'cycle';
 
 export interface TourRasterBaseSource {
   /** The Leaflet template; `{s}` is a shard Leaflet fills in. */
@@ -17,6 +20,12 @@ export interface TourRasterBaseSource {
   tiles: string[];
   attribution: string;
   maxZoom: number;
+  /**
+   * A map its operator offers on terms (MAP-01, BIK-06): loaded only as viewed, never
+   * prefetched or kept offline, its credit readable without a click, and watched for whether it
+   * answers. `credit` is what the 3D map shows above its controls.
+   */
+  onTerms?: { credit: ReadonlyArray<{ label: string; href: string }> };
 }
 
 export const TOUR_RASTER_BASES: Record<TourRasterBase, TourRasterBaseSource> = {
@@ -31,6 +40,25 @@ export const TOUR_RASTER_BASES: Record<TourRasterBase, TourRasterBaseSource> = {
     tiles: [OPENHIKINGMAP_TILE_URL],
     attribution: OPENHIKINGMAP_TILE_ATTRIBUTION,
     maxZoom: OPENHIKINGMAP_TILE_MAXZOOM,
+    onTerms: {
+      credit: [
+        { label: '\u00a9 OpenHikingMap', href: 'https://wiki.openstreetmap.org/wiki/OpenHikingMap' },
+        { label: '\u00a9 OpenStreetMap', href: 'https://www.openstreetmap.org/copyright' },
+        { label: '\u2764\ufe0f Donation', href: 'https://openmaps.fr/donate' },
+      ],
+    },
+  },
+  cycle: {
+    url: CYCLOSM_TILE_URL,
+    tiles: ['a', 'b', 'c'].map((shard) => CYCLOSM_TILE_URL.replace('{s}', shard)),
+    attribution: CYCLOSM_TILE_ATTRIBUTION,
+    maxZoom: CYCLOSM_TILE_MAXZOOM,
+    onTerms: {
+      credit: [
+        { label: '\u00a9 CyclOSM', href: 'https://www.cyclosm.org' },
+        { label: '\u00a9 OpenStreetMap', href: 'https://www.openstreetmap.org/copyright' },
+      ],
+    },
   },
 };
 
@@ -38,7 +66,14 @@ export const TOUR_RASTER_BASE_IDS = Object.keys(TOUR_RASTER_BASES) as TourRaster
 
 /** The raster source of a base layer, or null for the user's own map and the imagery. */
 export function tourRasterBaseOf(layer: string): TourRasterBaseSource | null {
-  return layer === 'topo' || layer === 'hiking' ? TOUR_RASTER_BASES[layer] : null;
+  return Object.prototype.hasOwnProperty.call(TOUR_RASTER_BASES, layer)
+    ? TOUR_RASTER_BASES[layer as TourRasterBase]
+    : null;
+}
+
+/** Whether the layer is a map its operator offers on terms (OpenHikingMap, CyclOSM). */
+export function isOnTermsBase(layer: string): layer is TourRasterBase {
+  return !!tourRasterBaseOf(layer)?.onTerms;
 }
 
 /**
@@ -51,3 +86,13 @@ export interface TileHealth {
   onTileError: () => void;
   onTileLoad: () => void;
 }
+
+/** The health of the map on terms that is the base map now, with which one it is. */
+export interface BaseMapHealth extends TileHealth {
+  base: TourRasterBase;
+}
+
+/** A Leaflet tile layer's events that report into the health of `layer`, while it is the map watched. */
+export function tileHealthHandlers(health: BaseMapHealth | undefined, layer: string) {
+  return health?.base === layer ? { tileerror: health.onTileError, tileload: health.onTileLoad } : undefined;
+}

client/src/components/Map/valhallaRoute.test.ts

@@ -2,7 +2,7 @@ import { describe, it, expect, afterEach, vi } from 'vitest'
 import { http, HttpResponse } from 'msw'
 import { server } from '../../../tests/helpers/msw/server'
 import { useSettingsStore } from '../../store/settingsStore'
-import { valhallaBase, valhallaAvailable, valhallaTurn, resetValhallaTurns, valhallaRouteAvoiding, valhallaRun, valhallaAlternates, alternatesFrom, runFrom, legAvoids } from './valhallaRoute'
+import { valhallaBase, valhallaAvailable, valhallaTurn, resetValhallaTurns, valhallaRouteAvoiding, valhallaRun, valhallaAlternates, alternatesFrom, runFrom, legAvoids, valhallaTraceAttributes } from './valhallaRoute'
 
 const FOSSGIS_VALHALLA = 'https://valhalla1.openstreetmap.de/route'
 
@@ -531,3 +531,55 @@ describe('valhallaAlternates', () => {
     expect(calls).toBe(2)
   })
 })
+
+describe('valhallaTraceAttributes (BIK-01)', () => {
+  const TRACE = 'https://valhalla1.openstreetmap.de/trace_attributes'
+
+  it('VALHALLA-TRACE-001: asks for the ways under the line, matched as a mountain bike rides, and hands the answer on', async () => {
+    const bodies: Record<string, unknown>[] = []
+    server.use(http.post(TRACE, async ({ request }) => {
+      bodies.push(await request.json() as Record<string, unknown>)
+      return HttpResponse.json({ shape: SHAPE, edges: [] })
+    }))
+    await expect(valhallaTraceAttributes(SHAPE_POINTS)).resolves.toEqual({ shape: SHAPE, edges: [] })
+    expect(bodies[0]).toMatchObject({
+      costing: 'bicycle',
+      costing_options: { bicycle: { bicycle_type: 'Mountain' } },
+      shape_match: 'map_snap',
+      filters: { action: 'include' },
+    })
+    expect(bodies[0].shape).toEqual(SHAPE_POINTS.map(([lat, lon]) => ({ lat, lon })))
+  })
+
+  it('VALHALLA-TRACE-002: a long line is thinned evenly to what one request carries, its ends kept', async () => {
+    let shape: unknown[] = []
+    server.use(http.post(TRACE, async ({ request }) => {
+      shape = ((await request.json()) as { shape: unknown[] }).shape
+      return HttpResponse.json({})
+    }))
+    const line = Array.from({ length: 9001 }, (_, i): [number, number] => [47 + i / 1e5, 11])
+    await valhallaTraceAttributes(line)
+    expect(shape.length).toBeLessThanOrEqual(4001)
+    expect(shape[0]).toEqual({ lat: 47, lon: 11 })
+    expect(shape[shape.length - 1]).toEqual({ lat: line[9000][0], lon: 11 })
+  })
+
+  it('VALHALLA-TRACE-003: null for a refusal, a network failure, a line of one point or a router that is not Valhalla', async () => {
+    server.use(http.post(TRACE, () => new HttpResponse(null, { status: 400 })))
+    await expect(valhallaTraceAttributes(SHAPE_POINTS)).resolves.toBeNull()
+    server.use(http.post(TRACE, () => HttpResponse.error()))
+    await expect(valhallaTraceAttributes(SHAPE_POINTS)).resolves.toBeNull()
+    await expect(valhallaTraceAttributes(SHAPE_POINTS.slice(0, 1))).resolves.toBeNull()
+    setSettings({ routing_base_url: 'https://osrm.example' })
+    await expect(valhallaTraceAttributes(SHAPE_POINTS)).resolves.toBeNull()
+  })
+
+  it('VALHALLA-TRACE-004: a caller gone before its turn asks nothing', async () => {
+    let asked = false
+    server.use(http.post(TRACE, () => { asked = true; return HttpResponse.json({}) }))
+    const controller = new AbortController()
+    controller.abort()
+    await expect(valhallaTraceAttributes(SHAPE_POINTS, controller.signal)).resolves.toBeNull()
+    expect(asked).toBe(false)
+  })
+})

client/src/components/Map/valhallaRoute.ts

@@ -55,6 +55,9 @@ const COSTING: Record<'driving' | 'walking' | 'cycling', string> = {
   cycling: 'bicycle',
 }
 
+/** What a caller tunes in the costing model: a weighting, a switch, or a bicycle type by name. */
+export type CostingOptions = Record<string, number | string | boolean>
+
 /**
  * What a caller can ask to be left out, against the costing option that asks for it.
  *
@@ -191,7 +194,7 @@ export async function valhallaRun(
   profile: 'driving' | 'walking' | 'cycling',
   avoid: readonly AvoidClass[],
   signal?: AbortSignal,
-  costingOptions: Readonly<Record<string, number | boolean>> = {},
+  costingOptions: Readonly<CostingOptions> = {},
 ): Promise<ValhallaRun | null> {
   const base = valhallaBase()
   if (!base || notValhalla.has(base) || waypoints.length < 2) return null
@@ -315,14 +318,14 @@ function routeBody(
   waypoints: Waypoint[],
   profile: 'driving' | 'walking' | 'cycling',
   avoid: readonly AvoidClass[],
-  costingOptions: Readonly<Record<string, number | boolean>> = {},
+  costingOptions: Readonly<CostingOptions> = {},
 ): Record<string, unknown> {
   const costing = COSTING[profile]
   // All of them in one request: the options are independent weightings, so asking to
   // leave out tolls and ferries together is one question rather than two routes to
   // reconcile. Measured Hamburg to Copenhagen: tolls, motorways and ferries weighted
   // away together answered 656.9 km against 339.2 km for the plain route.
-  const options: Record<string, number | boolean> = { ...costingOptions }
+  const options: CostingOptions = { ...costingOptions }
   for (const cls of avoid) options[AVOID_OPTION[cls]] = 0
   return {
     locations: waypoints.map(w => ({ lat: w.lat, lon: w.lng, radius: SNAP_RADIUS_M })),
@@ -359,6 +362,51 @@ async function postRoute(base: string, body: Record<string, unknown>, signal?: A
   }
 }
 
+/** The most points a description of a line asks about; a longer line is thinned evenly, its ends kept. */
+const TRACE_MAX_POINTS = 4000
+/** How long a description may take before it counts as failed, so a router that hangs does not leave its card waiting. */
+const TRACE_TIMEOUT_MS = 30_000
+
+/**
+ * BIK-01: how the router describes the ways under a line (`trace_attributes`):
+ * the surface, the use and road class, the cycle lane and the OpenStreetMap way
+ * of every edge, with the line as matched. The edges are matched as a mountain
+ * bike would ride them, the costing that refuses the fewest ways, so a road
+ * bike's route and a gravel one are described alike. Null for every failure:
+ * the description is an addition beside a route that already exists.
+ */
+export async function valhallaTraceAttributes(line: readonly [number, number][], signal?: AbortSignal): Promise<unknown> {
+  const base = valhallaBase()
+  if (!base || line.length < 2) return null
+  const step = Math.max(1, Math.ceil(line.length / TRACE_MAX_POINTS))
+  const shape = line.filter((_, index) => index % step === 0 || index === line.length - 1).map(([lat, lon]) => ({ lat, lon }))
+  const bounded = signal ? AbortSignal.any([signal, AbortSignal.timeout(TRACE_TIMEOUT_MS)]) : AbortSignal.timeout(TRACE_TIMEOUT_MS)
+  try {
+    await valhallaTurn(base, signal)
+    if (signal?.aborted) return null
+    const response = await fetch(`${base}/trace_attributes`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'X-Client-Id': 'trek' },
+      body: JSON.stringify({
+        shape,
+        costing: 'bicycle',
+        costing_options: { bicycle: { bicycle_type: 'Mountain' } },
+        shape_match: 'map_snap',
+        filters: {
+          attributes: ['shape', 'edge.surface', 'edge.use', 'edge.road_class', 'edge.cycle_lane', 'edge.length', 'edge.way_id',
+            'edge.begin_shape_index', 'edge.end_shape_index'],
+          action: 'include',
+        },
+      }),
+      signal: bounded,
+    })
+    if (!response.ok) return null
+    return await response.json()
+  } catch {
+    return null
+  }
+}
+
 /** One request, at most ten locations. */
 async function requestRun(
   base: string,
@@ -366,7 +414,7 @@ async function requestRun(
   profile: 'driving' | 'walking' | 'cycling',
   avoid: readonly AvoidClass[],
   signal?: AbortSignal,
-  costingOptions: Readonly<Record<string, number | boolean>> = {},
+  costingOptions: Readonly<CostingOptions> = {},
 ): Promise<Omit<ValhallaRun, 'snapped'> | null> {
   const data = await postRoute(base, routeBody(waypoints, profile, avoid, costingOptions), signal)
   return data === null ? null : runFrom(data)