feat(map): toggle the trip map between default and satellite tiles

Add a corner button on the Leaflet trip map that switches the base layer
between the default street tiles and a tokenless satellite view (ESRI
World Imagery). The choice is a per-user setting (map_base_layer) that
persists and applies instantly, including offline. GL-renderer satellite
styles are unchanged.

Closes #993

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

@@ -0,0 +1,44 @@
+// FE-COMP-MAPLAYER-001 to FE-COMP-MAPLAYER-005
+import React from 'react'
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '../../../tests/helpers/render'
+import { MapLayerSwitcher } from './MapLayerSwitcher'
+
+describe('MapLayerSwitcher', () => {
+  it('FE-COMP-MAPLAYER-001: on the default layer, offers the switch to satellite', () => {
+    render(<MapLayerSwitcher active="default" onToggle={() => {}} />)
+    const button = screen.getByRole('button', { name: 'Switch to satellite view' })
+    expect(button.getAttribute('aria-pressed')).toBe('false')
+  })
+
+  it('FE-COMP-MAPLAYER-002: on the satellite layer, offers the switch back to the map', () => {
+    render(<MapLayerSwitcher active="satellite" onToggle={() => {}} />)
+    const button = screen.getByRole('button', { name: 'Switch to map view' })
+    expect(button.getAttribute('aria-pressed')).toBe('true')
+  })
+
+  it('FE-COMP-MAPLAYER-003: clicking fires the toggle', () => {
+    const onToggle = vi.fn()
+    render(<MapLayerSwitcher active="default" onToggle={onToggle} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Switch to satellite view' }))
+    expect(onToggle).toHaveBeenCalledTimes(1)
+  })
+
+  it('FE-COMP-MAPLAYER-004: swaps the icon with the active layer', () => {
+    const { rerender } = render(<MapLayerSwitcher active="default" onToggle={() => {}} />)
+    // Destination icon: on the map you can reach satellite, and vice-versa.
+    const iconOnDefault = screen.getByRole('button').querySelector('svg')?.getAttribute('class')
+    rerender(<MapLayerSwitcher active="satellite" onToggle={() => {}} />)
+    const iconOnSatellite = screen.getByRole('button').querySelector('svg')?.getAttribute('class')
+    expect(iconOnDefault).not.toBe(iconOnSatellite)
+  })
+
+  it('FE-COMP-MAPLAYER-005: highlights the button on hover and clears it again', () => {
+    render(<MapLayerSwitcher active="default" onToggle={() => {}} />)
+    const button = screen.getByRole('button')
+    fireEvent.mouseEnter(button)
+    expect(button.style.background).toBe('var(--bg-hover)')
+    fireEvent.mouseLeave(button)
+    expect(button.style.background).toBe('transparent')
+  })
+})

client/src/components/Map/MapLayerSwitcher.tsx

@@ -0,0 +1,43 @@
+import { Map as MapIcon, Satellite } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+
+export type BaseLayer = 'default' | 'satellite'
+
+// Round base-layer switcher for the Leaflet planner map (default street tiles ↔
+// satellite). Same frosted shell as MapCompassPill so it lines up with the other
+// map controls; the icon shows the layer it switches to.
+export function MapLayerSwitcher({ active, onToggle }: { active: BaseLayer; onToggle: () => void }) {
+  const { t } = useTranslation()
+  const isSatellite = active === 'satellite'
+  const Icon = isSatellite ? MapIcon : Satellite
+  const label = isSatellite ? t('map.baseLayer.switchToDefault') : t('map.baseLayer.switchToSatellite')
+
+  return (
+    <div style={{
+      display: 'inline-flex', alignItems: 'center', padding: 4, borderRadius: 999, pointerEvents: 'auto',
+      background: 'var(--sidebar-bg)',
+      backdropFilter: 'blur(20px) saturate(180%)',
+      WebkitBackdropFilter: 'blur(20px) saturate(180%)',
+      boxShadow: 'var(--sidebar-shadow, 0 4px 16px rgba(0,0,0,0.14))',
+    }}>
+      <button
+        type="button"
+        onClick={onToggle}
+        aria-label={label}
+        title={label}
+        aria-pressed={isSatellite}
+        className="text-content-muted"
+        style={{
+          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+          width: 34, height: 34, borderRadius: 999, border: 'none', cursor: 'pointer',
+          background: 'transparent', padding: 0,
+          transition: 'background 0.14s, color 0.14s',
+        }}
+        onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-hover)' }}
+        onMouseLeave={e => { e.currentTarget.style.background = 'transparent' }}
+      >
+        <Icon size={17} strokeWidth={2} />
+      </button>
+    </div>
+  )
+}

client/src/components/Map/MapView.tsx

@@ -16,7 +16,9 @@ import { visibleRouteReservations } from '../../utils/reservationRoutes'
 import type { Reservation, RouteVia } from '../../types'
 import { POI_CATEGORY_BY_KEY, type Poi } from './poiCategories'
 import { resolveTrackColor, hasManualTrackColor } from './trackColors'
-import { DEFAULT_MAP_CENTER, DEFAULT_MAP_ZOOM } from '../../constants/mapDefaults'
+import { DEFAULT_MAP_CENTER, DEFAULT_MAP_ZOOM, SATELLITE_TILE_URL, SATELLITE_TILE_ATTRIBUTION, SATELLITE_TILE_MAXZOOM } from '../../constants/mapDefaults'
+import { useSettingsStore } from '../../store/settingsStore'
+import { MapLayerSwitcher } from './MapLayerSwitcher'
 import { computeMapViewport, TILE_SIZE_RASTER, type ViewportPadding } from '../../utils/mapViewport'
 
 function categoryIconSvg(iconName: string | null | undefined, size: number): string {
@@ -771,6 +773,17 @@ export const MapView = memo(function MapView({
     ? 'calc(var(--bottom-nav-h, 84px) + 20px + var(--day-panel-h, 0px) + 12px)'
     : 'calc(var(--bottom-nav-h, 84px) + 12px)'
 
+  const baseLayer = useSettingsStore(s => s.settings.map_base_layer) || 'default'
+  const updateSetting = useSettingsStore(s => s.updateSetting)
+  const isSatellite = baseLayer === 'satellite'
+  const toggleBaseLayer = useCallback(() => {
+    // Store flips state synchronously (instant, works offline); a failed save is logged there.
+    updateSetting('map_base_layer', isSatellite ? 'default' : 'satellite').catch(() => {})
+  }, [isSatellite, updateSetting])
+  const switcherBottom = hasDayDetail
+    ? 'calc(var(--bottom-nav-h, 0px) + 20px + var(--day-panel-h, 0px) + 12px)'
+    : 'calc(var(--bottom-nav-h, 0px) + 12px)'
+
   return (
     <>
     <div className="w-full h-full relative">
@@ -781,10 +794,12 @@ export const MapView = memo(function MapView({
       zoomControl={false}
       className="w-full h-full bg-[#e5e7eb]"
     >
+      {/* key remounts the layer on switch, else attribution/maxZoom stick at mount-time values. */}
       <TileLayer
-        url={tileUrl}
-        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-        maxZoom={19}
+        key={isSatellite ? 'satellite' : 'default'}
+        url={isSatellite ? SATELLITE_TILE_URL : tileUrl}
+        attribution={isSatellite ? SATELLITE_TILE_ATTRIBUTION : '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'}
+        maxZoom={isSatellite ? SATELLITE_TILE_MAXZOOM : 19}
         keepBuffer={8}
         updateWhenZooming={false}
         updateWhenIdle={true}
@@ -864,6 +879,9 @@ export const MapView = memo(function MapView({
       onClick={cycleTrackingMode}
       bottomOffset={locationButtonBottom as unknown as number}
     />}
+    <div style={{ position: 'absolute', left: leftWidth + 12, bottom: switcherBottom, zIndex: 1000, pointerEvents: 'none' }}>
+      <MapLayerSwitcher active={baseLayer} onToggle={toggleBaseLayer} />
+    </div>
     </div>
 
     {TooltipOverlay && (