feat(tours): OpenHikingMap as a hiking base map of the tour planner (MAP-01)

While a hike is planned, the planner's map switch offers "Hiking" beside the map, topo and satellite: OpenHikingMap, with marked trails over the terrain. It is a choice of the planner's view alone, like topo: the global map setting, the tour and its days stay as they are. With no tour open, over an import viewed as it came in and for a paddle tour it is not offered, and a choice made earlier falls back to the standard map there. openmaps.fr's tile usage policy is followed: tiles load only as the map shows them, with the browser's Referer, from the server's own caching; no service worker rule keeps them and the 3D flyover's warm-up passes their source by. Its credit and donation link are on the map; the 3D map, whose attribution is folded away under the panel, shows them as a line of its own above its controls. The service is best effort. A run of failed tiles while it is shown marks the switch, with a tooltip and a status for screen readers that say it is not answering and that the tour is untouched; one tile arriving clears it. The tile health the seamark overlay had is now useTileHealth, shared by both. The source is free for non-commercial installs up to 500,000 tiles a month. tours_hiking_map_enabled is an admin switch under Tours (admin tours-hiking-map, audited), on by default, for an install that is commercial or larger to switch off until it has an agreement with the operator. /api/addons carries it as toursHikingMap, true only while Tours is on. Leaflet, GL and the 3D map read one table of the planner's raster bases (tourRasterBases), so topo and the hiking map are drawn the same way. tile.openmaps.fr is on the CSP's connect-src for the GL maps.
2026-10-21 06:26:26 +00:00 · 2026-10-19 13:07:36 +02:00
parent d322363e53
commit 06e6e25b25
90 changed files with 839 additions and 117 deletions
@@ -1,4 +1,4 @@
-// FE-COMP-MAPLAYER-001 to FE-COMP-MAPLAYER-017
+// FE-COMP-MAPLAYER-001 to FE-COMP-MAPLAYER-019
 import React from 'react'
 import { describe, it, expect, vi } from 'vitest'
 import { render, screen, fireEvent } from '../../../tests/helpers/render'
@@ -59,6 +59,30 @@ describe('MapLayerSwitcher', () => {
    expect(onChange).toHaveBeenCalledWith('topo')
  })

+  it('FE-COMP-MAPLAYER-018: offers the hiking map only where the tour type and the admin offer it (MAP-01)', () => {
+    const onChange = vi.fn()
+    const { rerender } = render(<TourMapLayerSwitcher active="default" onChange={onChange} layers={{ bases: ['default', 'topo', 'satellite'] }} />)
+    expect(screen.queryByRole('button', { name: 'Hiking' })).toBeNull()
+
+    rerender(<TourMapLayerSwitcher active="default" onChange={onChange} layers={{ bases: ['default', 'topo', 'hiking', 'satellite'] }} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Hiking' }))
+    expect(onChange).toHaveBeenCalledWith('hiking')
+  })
+
+  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 { rerender } = render(<TourMapLayerSwitcher active="hiking" onChange={() => {}} layers={layers} />)
+    const segment = screen.getByRole('button', { name: 'Hiking' })
+    expect(segment).toHaveAttribute('aria-pressed', 'true')
+    expect(segment).toHaveTextContent('!')
+    expect(screen.getByRole('status')).toHaveTextContent('OpenHikingMap is not answering right now')
+
+    rerender(<TourMapLayerSwitcher active="default" onChange={() => {}} layers={layers} />)
+    expect(screen.getByRole('button', { name: 'Hiking' })).not.toHaveTextContent('!')
+    expect(screen.queryByRole('status')).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')
@@ -1,4 +1,4 @@
-import { Anchor, Loader2, Map as MapIcon, MapPinPlus, Mountain, Rotate3d, Satellite } from 'lucide-react'
+import { Anchor, 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,9 +9,10 @@ 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'

 export type BaseLayer = 'default' | 'satellite'
-export type TourBaseLayer = BaseLayer | 'topo'
+export type TourBaseLayer = BaseLayer | TourRasterBase

 /** What a tour's type offers on the planner map (P2B-06): its base layers, and the overlays beside the ferratas. */
 export interface TourLayerOffer {
@@ -19,6 +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
 }

 const FROSTED_SHELL = {
@@ -83,6 +86,7 @@ export function MapLayerSwitcher({ active, onToggle }: { active: BaseLayer; onTo
 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: 'satellite', labelKey: 'map.baseLayer.satellite', Icon: Satellite },
 ] as const

@@ -199,6 +203,15 @@ const OVERLAY_LOOK: Record<string, { Icon: typeof Anchor; labelKey: string; down
 * once its source stopped answering, which the tooltip names. The map and the
 * planning go on without it.
 */
+/** The warning mark on a switch whose source stopped answering; the tooltip says what it means. */
+function DownBadge() {
+  return (
+    <span aria-hidden className="inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-warning-soft px-1 font-semibold leading-none text-warning" style={fs(10)}>
+      !
+    </span>
+  )
+}
+
 function OverlayToggle({ overlay, compact }: { overlay: ToggleableRasterOverlay; compact: boolean }) {
  const { t } = useTranslation()
  const look = OVERLAY_LOOK[overlay.id]
@@ -221,11 +234,7 @@ function OverlayToggle({ overlay, compact }: { overlay: ToggleableRasterOverlay;
        >
          <look.Icon size={15} strokeWidth={2} />
          {!compact && <span>{label}</span>}
-          {down && (
-            <span aria-hidden className="inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-warning-soft px-1 font-semibold leading-none text-warning" style={fs(10)}>
-              !
-            </span>
-          )}
+          {down && <DownBadge />}
        </button>
      </Tooltip>
      <span role="status" aria-live="polite" className="sr-only">{down ? t(look.downKey) : ''}</span>
@@ -265,14 +274,17 @@ 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

  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
        return (
-          <Tooltip key={id} label={label} placement="top" disabled={!compact}>
+          <Tooltip key={id} label={down ? t('map.baseLayer.hikingDown') : label} placement="top" disabled={!compact && !down}>
            <button
              type="button"
              onClick={() => onChange(id)}
@@ -283,10 +295,12 @@ export function TourMapLayerSwitcher({
            >
              <Icon size={15} strokeWidth={2} />
              {!compact && <span>{label}</span>}
+              {down && <DownBadge />}
            </button>
          </Tooltip>
        )
      })}
+      {hikingDown && <span role="status" aria-live="polite" className="sr-only">{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} />}
@@ -252,7 +252,7 @@ describe('MapView', () => {
    const route = [[[39.9042, 116.4074], [39.9052, 116.4084]]] as [number, number][][]
    const plannerWaypoints = [{ id: 'start', lat: 39.9042, lng: 116.4074, role: 'start' as const }]
    const routeProfileFocus = { distanceMeters: 100, elevationMeters: 0, lat: 39.9047, lng: 116.4079, sampleIndex: 0 }
-    const props = (viewBaseLayer: 'default' | 'topo' | 'satellite') => ({
+    const props = (viewBaseLayer: 'default' | 'topo' | 'hiking' | 'satellite') => ({
      places: [beijing], center: [39.9042, 116.4074] as [number, number], zoom: 15,
      route, plannerWaypoints, routeProfileFocus, tileUrl: AMAP_ROAD, viewBaseLayer, onViewBaseLayerChange,
    })
@@ -279,6 +279,11 @@ describe('MapView', () => {
    expect(screen.getAllByTestId('polyline').every(polyline => polyline.getAttribute('data-points') === JSON.stringify(route[0]))).toBe(true)
    expect(screen.getByTestId('profile-focus-marker')).toHaveAttribute('data-center', JSON.stringify([routeProfileFocus.lat, routeProfileFocus.lng]))

+    // MAP-01: OpenHikingMap is drawn in WGS-84 like topo, from its own template.
+    rerender(<MapView {...props('hiking')} />)
+    expect(screen.getByTestId('map-container')).toHaveAttribute('data-crs', 'EPSG:3857')
+    expect(screen.getByTestId('tile-layer')).toHaveAttribute('data-url', 'https://tile.openmaps.fr/openhikingmap/{z}/{x}/{y}.png')
+
    rerender(<MapView {...props('satellite')} />)
    const satelliteMap = screen.getByTestId('map-container')
    expect(satelliteMap).not.toBe(topoMap)
@@ -63,7 +63,8 @@ import { poiDetailRowKey, poiDetailRows, poiPinCacheKey, poiPinParts } from './p
 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, OPENTOPOMAP_TILE_URL, OPENTOPOMAP_TILE_ATTRIBUTION, OPENTOPOMAP_TILE_MAXZOOM, SATELLITE_TILE_URL, SATELLITE_TILE_MAXZOOM, AMAP_SATELLITE, attributionForTile } from '../../constants/mapDefaults'
+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 { crsForBasemap } from './gcj02Crs'
 import { isGcj02Basemap, resolveBasemap } from '../../utils/tileUrl'
 import VectorBasemap from './VectorBasemap'
@@ -839,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 isTopo = baseLayer === 'topo'
+  const tourRaster = tourRasterBaseOf(baseLayer) // topo or OpenHikingMap, 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.
@@ -851,7 +852,7 @@ export const MapView = memo(function MapView({
   * decided before the map is constructed, because Leaflet cannot change a map's
   * CRS afterwards — hence the whole map, not just the tile layer.
   */
-  const isGcjBasemap = !isTopo && basemap.kind === 'raster' && isGcj02Basemap(basemap.url)
+  const isGcjBasemap = !tourRaster && basemap.kind === 'raster' && isGcj02Basemap(basemap.url)
  const gcjCrs = useMemo(() => crsForBasemap(isGcjBasemap), [isGcjBasemap])
  const poiMarkers = useMemo(() => (pois as Poi[]).map((poi: Poi) => (
    <Marker
@@ -1116,17 +1117,16 @@ export const MapView = memo(function MapView({
          updateWhenIdle={true}
          referrerPolicy="strict-origin-when-cross-origin"
        />
-      ) : isTopo ? (
+      ) : tourRaster ? (
        <TileLayer
-          key="topo"
-          url={OPENTOPOMAP_TILE_URL}
-          attribution={OPENTOPOMAP_TILE_ATTRIBUTION}
-          maxNativeZoom={OPENTOPOMAP_TILE_MAXZOOM}
+          key={baseLayer}
+          url={tourRaster.url}
+          attribution={tourRaster.attribution}
+          maxNativeZoom={tourRaster.maxZoom}
          maxZoom={MAP_MAX_ZOOM}
-          keepBuffer={8}
-          updateWhenZooming={false}
-          updateWhenIdle={true}
+          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}
        />
      ) : basemap.kind === 'vector' ? (
        <VectorBasemap style={basemap.style} />
@@ -8,7 +8,7 @@ import { renderIconMarkup } from '../../utils/iconMarkup'
 import type mapboxgl from 'mapbox-gl'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useTranslation } from '../../i18n/TranslationContext'
-import { applySatellite } from './glRasterLayers'
+import { applyBaseLayer } from './glRasterLayers'
 import { isTourLayerHit, useTourMapLayersGL } from './mapRasterOverlay'
 import { MapLayerSwitcher, TourMapLayerSwitcher, MAP_LAYER_SWITCHER_INSET, type BaseLayer, type TourBaseLayer } from './MapLayerSwitcher'
 import { MapLockPill } from './MapLockPill'
@@ -612,7 +612,7 @@ export function MapViewGL({
  const mapRef = useRef<any | null>(null)
  const hazardPopupFactory = useCallback(() => new gl.Popup({ className: 'map-tooltip trek-hazard-popup', maxWidth: '320px' }), [gl])
  useHazardLayerGL(mapRef.current, mapReady, hazards, hazardPopupFactory)
-  useTourMapLayersGL(mapReady ? readyMap : null, ferrataLayer, tourLayers?.overlays, tourLayers?.paddle)
+  useTourMapLayersGL(mapReady ? readyMap : null, ferrataLayer, tourLayers)
  // Beneath the planned route's casing, the GL twin of the Leaflet pane order.
  useDawarichTrailGL(mapRef.current, mapReady, dawarichTrack, dawarichSelectedDate, 'trip-route-casing', dawarichHiddenDates)
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2185,14 +2185,11 @@ export function MapViewGL({
  useEffect(() => {
    const map = mapRef.current
    if (!map || !mapReady) return
-    const apply = () => {
-      applySatellite(map, isSatellite)
-      applySatellite(map, baseLayer === 'topo', true)
-    }
+    const apply = () => applyBaseLayer(map, baseLayer)
    apply()
    map.on('styledata', apply)
    return () => { map.off('styledata', apply) }
-  }, [isSatellite, baseLayer, mapReady, glProvider])
+  }, [baseLayer, mapReady, glProvider])

  if (!isMapLibre && !mapboxToken) {
    return (
@@ -0,0 +1,55 @@
+import { describe, expect, it, vi } from 'vitest';
+import { applyBaseLayer, tourRasterSourceId } from './glRasterLayers';
+
+/** Enough of a GL map for the base layers: sources, layers with their visibility, and the style's order. */
+function fakeMap(styleLayers: Array<{ id: string }> = [{ id: 'water' }, { id: 'trip-route' }]) {
+  const sources = new Map<string, Record<string, unknown>>();
+  const layers = new Map<string, string>();
+  const map = {
+    getSource: vi.fn((id: string) => sources.get(id)),
+    addSource: vi.fn((id: string, source: Record<string, unknown>) => sources.set(id, source)),
+    getLayer: vi.fn((id: string) => (layers.has(id) ? { id } : undefined)),
+    addLayer: vi.fn((layer: { id: string }, _before?: string) => layers.set(layer.id, 'visible')),
+    setLayoutProperty: vi.fn((id: string, _key: string, value: string) => layers.set(id, value)),
+    getStyle: vi.fn(() => ({ layers: styleLayers })),
+  };
+  return { map, sources, layers };
+}
+
+describe('applyBaseLayer (MAP-01)', () => {
+  it('lays OpenHikingMap with its credit under the first thing TREK draws', () => {
+    const { map, sources } = fakeMap();
+    applyBaseLayer(map, 'hiking');
+    expect(tourRasterSourceId('hiking')).toBe('trip-hiking');
+    expect(sources.get('trip-hiking')).toMatchObject({
+      type: 'raster',
+      tiles: ['https://tile.openmaps.fr/openhikingmap/{z}/{x}/{y}.png'],
+      maxzoom: 18,
+    });
+    expect(String(sources.get('trip-hiking')?.attribution)).toContain('openmaps.fr/donate');
+    expect(map.addLayer).toHaveBeenCalledWith(expect.objectContaining({ id: 'trip-hiking-raster' }), 'trip-route');
+    // Nothing else is built while it is off.
+    expect(sources.has('trip-topo')).toBe(false);
+    expect(sources.has('trip-satellite')).toBe(false);
+  });
+
+  it('switching away hides it, and back shows the same layer again without a second source', () => {
+    const { map, layers } = fakeMap();
+    applyBaseLayer(map, 'hiking');
+    applyBaseLayer(map, 'topo');
+    expect(layers.get('trip-hiking-raster')).toBe('none');
+    expect(layers.get('trip-topo-raster')).toBe('visible');
+    applyBaseLayer(map, 'hiking');
+    expect(layers.get('trip-hiking-raster')).toBe('visible');
+    expect(layers.get('trip-topo-raster')).toBe('none');
+    expect(map.addSource).toHaveBeenCalledTimes(2);
+  });
+
+  it("keeps the user's own map when the style refuses the layer", () => {
+    const { map } = fakeMap();
+    map.addLayer.mockImplementation(() => {
+      throw new Error('style not loaded');
+    });
+    expect(() => applyBaseLayer(map, 'hiking')).not.toThrow();
+  });
+});
@@ -1,15 +1,9 @@
-import {
-  OPENTOPOMAP_TILE_ATTRIBUTION,
-  OPENTOPOMAP_TILE_MAXZOOM,
-  OPENTOPOMAP_TILE_URL,
-  SATELLITE_TILE_ATTRIBUTION,
-  SATELLITE_TILE_MAXZOOM,
-  SATELLITE_TILE_URL,
-} from '../../constants/mapDefaults';
+import { SATELLITE_TILE_ATTRIBUTION, SATELLITE_TILE_MAXZOOM, SATELLITE_TILE_URL } from '../../constants/mapDefaults';
+import { TOUR_RASTER_BASE_IDS, TOUR_RASTER_BASES, type TourRasterBase } from './tourRasterBases';

 /*
 * The raster layers a GL map draws between its basemap style and what TREK
- * adds on top: the satellite and topo base layers, and (in mapRasterOverlay.ts)
+ * adds on top: the satellite, topo and hiking base layers, and (in mapRasterOverlay.ts)
 * the transparent overlays such as the seamarks.
 */

@@ -50,9 +44,10 @@ export const OWN_LAYER_PREFIXES = ['trip-', 'trek-', 'route-alt-'];
 * yet. The catch covers that case, and `styledata` brings the pass back once it is in.
 */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function applySatellite(map: any, on: boolean, topo = false): void {
-  const layerId = topo ? 'trip-topo-raster' : SATELLITE_LAYER_ID;
-  const sourceId = topo ? 'trip-topo' : SATELLITE_SOURCE_ID;
+export function applySatellite(map: any, on: boolean, raster?: TourRasterBase): void {
+  const layerId = raster ? `trip-${raster}-raster` : SATELLITE_LAYER_ID;
+  const sourceId = raster ? tourRasterSourceId(raster) : SATELLITE_SOURCE_ID;
+  const source = raster ? TOUR_RASTER_BASES[raster] : null;
  try {
    if (map.getLayer(layerId)) {
      map.setLayoutProperty(layerId, 'visibility', on ? 'visible' : 'none');
@@ -65,12 +60,10 @@ export function applySatellite(map: any, on: boolean, topo = false): void {
    if (!map.getSource(sourceId)) {
      map.addSource(sourceId, {
        type: 'raster',
-        tiles: topo
-          ? ['a', 'b', 'c'].map((subdomain) => OPENTOPOMAP_TILE_URL.replace('{s}', subdomain))
-          : [SATELLITE_TILE_URL],
+        tiles: source ? source.tiles : [SATELLITE_TILE_URL],
        tileSize: 256,
-        maxzoom: topo ? OPENTOPOMAP_TILE_MAXZOOM : SATELLITE_TILE_MAXZOOM,
-        attribution: topo ? OPENTOPOMAP_TILE_ATTRIBUTION : SATELLITE_TILE_ATTRIBUTION,
+        maxzoom: source ? source.maxZoom : SATELLITE_TILE_MAXZOOM,
+        attribution: source ? source.attribution : SATELLITE_TILE_ATTRIBUTION,
      });
    }
    // Under the first thing TREK draws, over everything the basemap style draws.
@@ -90,3 +83,14 @@ export function applySatellite(map: any, on: boolean, topo = false): void {
    /* a style that refuses the layer keeps the plain basemap */
  }
 }
+
+/** The GL source a Tours raster base map is drawn from, which its tile events name. */
+export function tourRasterSourceId(raster: TourRasterBase): string {
+  return `trip-${raster}`;
+}
+
+/** The base layer on a GL map: the imagery, a Tours raster map, or neither over the user's own style. */
+export function applyBaseLayer(map: Parameters<typeof applySatellite>[0], baseLayer: string): void {
+  applySatellite(map, baseLayer === 'satellite');
+  for (const raster of TOUR_RASTER_BASE_IDS) applySatellite(map, baseLayer === raster, raster);
+}
@@ -1,6 +1,11 @@
 import { renderHook } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
-import { useRasterOverlaysGL, type MapRasterOverlay, type RasterOverlayGlMap } from './mapRasterOverlay';
+import {
+  useRasterOverlaysGL,
+  useSourceTileHealthGL,
+  type MapRasterOverlay,
+  type RasterOverlayGlMap,
+} from './mapRasterOverlay';

 type Handler = (event: Record<string, unknown>) => void;

@@ -103,3 +108,27 @@ describe('useRasterOverlaysGL', () => {
    expect(map.on).not.toHaveBeenCalled();
  });
 });
+
+describe('useSourceTileHealthGL (MAP-01)', () => {
+  it("reports one source's failed and arrived tiles into its health, nothing else's", () => {
+    const { gl, fire } = fakeMap();
+    const health = { down: false, onTileError: vi.fn(), onTileLoad: vi.fn() };
+    renderHook(() => useSourceTileHealthGL(gl, 'trip-hiking', health));
+    fire('error', { sourceId: 'trip-hiking', error: new Error('503') });
+    fire('error', { sourceId: 'trip-topo', error: new Error('503') });
+    fire('sourcedata', { sourceId: 'trip-hiking', tile: {} });
+    fire('sourcedata', { sourceId: 'trip-hiking' });
+    expect(health.onTileError).toHaveBeenCalledTimes(1);
+    expect(health.onTileLoad).toHaveBeenCalledTimes(1);
+  });
+
+  it('listens to nothing while the map is not shown, and lets go when it goes', () => {
+    const { map, gl } = fakeMap();
+    const health = { down: false, onTileError: vi.fn(), onTileLoad: vi.fn() };
+    renderHook(() => useSourceTileHealthGL(gl, 'trip-hiking', undefined));
+    expect(map.on).not.toHaveBeenCalled();
+    const { unmount } = renderHook(() => useSourceTileHealthGL(gl, 'trip-hiking', health));
+    unmount();
+    expect(map.off).toHaveBeenCalledTimes(2);
+  });
+});
@@ -4,7 +4,8 @@ import { isFerrataHit, useFerrataMapLayerGL } from '../Ferratas/useFerrataLayerG
 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 } from './glRasterLayers';
+import { OWN_LAYER_PREFIXES, tourRasterSourceId } from './glRasterLayers';
+import type { TileHealth } from './tourRasterBases';

 /**
 * A transparent raster layer laid over the basemap and under the route, such
@@ -104,16 +105,47 @@ export function useRasterOverlaysGL(map: RasterOverlayGlMap | null, overlays: re
  }, [map, overlays]);
 }

-/** The tour planner's layers on a GL map: the via ferratas, the raster overlays its type offers and the paddle obstacles. */
+/**
+ * Reports the tiles of one GL source into its health while `health` is given:
+ * a failure carries the source it came from, an arrival a tile. The base layer
+ * itself is drawn by applyBaseLayer.
+ */
+export function useSourceTileHealthGL(
+  map: RasterOverlayGlMap | null,
+  sourceId: string,
+  health: TileHealth | undefined
+) {
+  const { onTileError, onTileLoad } = health ?? {};
+  useEffect(() => {
+    if (!map || !onTileError || !onTileLoad) return;
+    const failed = (event: { error?: Error; sourceId?: string }) => {
+      if (event.sourceId === sourceId) onTileError();
+    };
+    const loaded = (event: { sourceId?: string; tile?: unknown }) => {
+      if (event.sourceId === sourceId && event.tile) onTileLoad();
+    };
+    map.on('error', failed);
+    map.on('sourcedata', loaded);
+    return () => {
+      map.off('error', failed);
+      map.off('sourcedata', loaded);
+    };
+  }, [map, sourceId, onTileError, onTileLoad]);
+}
+
+/**
+ * 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.
+ */
 export function useTourMapLayersGL(
  map: RasterOverlayGlMap | null,
  ferrataLayer: FerrataMapLayer | undefined,
-  overlays: readonly MapRasterOverlay[] | undefined,
-  paddle?: PaddleMapLayer
+  layers: { overlays?: readonly MapRasterOverlay[]; paddle?: PaddleMapLayer; hikingMap?: TileHealth } | undefined
 ) {
  useFerrataMapLayerGL(map, ferrataLayer);
-  useRasterOverlaysGL(map, overlays);
-  usePaddleLayerGL(map as unknown as PaddleGlMap | null, paddle);
+  useRasterOverlaysGL(map, layers?.overlays);
+  usePaddleLayerGL(map as unknown as PaddleGlMap | null, layers?.paddle);
+  useSourceTileHealthGL(map, tourRasterSourceId('hiking'), layers?.hikingMap);
 }

 /**
@@ -0,0 +1,53 @@
+import {
+  OPENHIKINGMAP_TILE_ATTRIBUTION,
+  OPENHIKINGMAP_TILE_MAXZOOM,
+  OPENHIKINGMAP_TILE_URL,
+  OPENTOPOMAP_TILE_ATTRIBUTION,
+  OPENTOPOMAP_TILE_MAXZOOM,
+  OPENTOPOMAP_TILE_URL,
+} 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 interface TourRasterBaseSource {
+  /** The Leaflet template; `{s}` is a shard Leaflet fills in. */
+  url: string;
+  /** The same tiles spelled out for a GL source, which knows no shards. */
+  tiles: string[];
+  attribution: string;
+  maxZoom: number;
+}
+
+export const TOUR_RASTER_BASES: Record<TourRasterBase, TourRasterBaseSource> = {
+  topo: {
+    url: OPENTOPOMAP_TILE_URL,
+    tiles: ['a', 'b', 'c'].map((shard) => OPENTOPOMAP_TILE_URL.replace('{s}', shard)),
+    attribution: OPENTOPOMAP_TILE_ATTRIBUTION,
+    maxZoom: OPENTOPOMAP_TILE_MAXZOOM,
+  },
+  hiking: {
+    url: OPENHIKINGMAP_TILE_URL,
+    tiles: [OPENHIKINGMAP_TILE_URL],
+    attribution: OPENHIKINGMAP_TILE_ATTRIBUTION,
+    maxZoom: OPENHIKINGMAP_TILE_MAXZOOM,
+  },
+};
+
+export const TOUR_RASTER_BASE_IDS = Object.keys(TOUR_RASTER_BASES) as TourRasterBase[];
+
+/** 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;
+}
+
+/**
+ * Whether a best-effort tile source still answers: a run of failed tiles marks
+ * it down, one tile arriving clears that. The maps report into it, the switch
+ * shows it.
+ */
+export interface TileHealth {
+  down: boolean;
+  onTileError: () => void;
+  onTileLoad: () => void;
+}