feat: multiple map tile styles switchable in Settings > Interface

New src/mapStyles.ts defines five styles from bincio_planner's sources:
- Liberty (OpenFreeMap vector, default)
- CyclOSM (cycling infrastructure raster)
- Topo (OpenTopoMap elevation raster)
- Satellite (Esri World Imagery raster)
- OSM (standard raster fallback)

Raster sources are wrapped in a StyleSpecification so MapLibre handles
them natively. Setting persisted via ThemeContext (AsyncStorage key
mapTileStyle). RecordingScreen and ActivityDetailScreen both read from
context so the style updates everywhere simultaneously.

MAP_STRATEGY.md added (untracked) with full map roadmap.

.gitignore

@@ -39,3 +39,4 @@ yarn-error.*
 # generated native folders
 /ios
 /android
+MAP_STRATEGY.md

src/ThemeContext.tsx

@@ -1,6 +1,7 @@
 import React, { createContext, useContext, useEffect, useState } from 'react';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { PALETTES, FONT_SCALE, type PaletteKey, type FontSizeKey } from './theme';
+import { MAP_STYLES, type MapTileStyle } from './mapStyles';
 
 export type MapOrientation = 'north' | 'compass' | 'course';
 
@@ -16,6 +17,8 @@ interface ThemeValue {
   scale:            number;
   mapOrientation:    MapOrientation;
   setMapOrientation: (o: MapOrientation) => void;
+  mapTileStyle:      MapTileStyle;
+  setMapTileStyle:   (s: MapTileStyle) => void;
 }
 
 const MAP_ORIENTATIONS: MapOrientation[] = ['north', 'compass', 'course'];
@@ -31,6 +34,8 @@ const ThemeContext = createContext<ThemeValue>({
   scale:             1,
   mapOrientation:    'north',
   setMapOrientation: () => {},
+  mapTileStyle:      'liberty',
+  setMapTileStyle:   () => {},
 });
 
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
@@ -38,20 +43,23 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
   const [fontSize,       setFontSizeState]       = useState<FontSizeKey>('medium');
   const [boldLabels,     setBoldLabelsState]     = useState(false);
   const [mapOrientation, setMapOrientationState] = useState<MapOrientation>('north');
+  const [mapTileStyle,   setMapTileStyleState]   = useState<MapTileStyle>('liberty');
 
   useEffect(() => {
     (async () => {
-      const [p, f, b, m] = await Promise.all([
+      const [p, f, b, m, t] = await Promise.all([
         AsyncStorage.getItem('themePalette'),
         AsyncStorage.getItem('themeFontSize'),
         AsyncStorage.getItem('themeBoldLabels'),
         AsyncStorage.getItem('mapOrientation'),
+        AsyncStorage.getItem('mapTileStyle'),
       ]);
       if (p && p in PALETTES)             setPaletteState(p as PaletteKey);
       if (f && f in FONT_SCALE)           setFontSizeState(f as FontSizeKey);
       if (b !== null)                     setBoldLabelsState(b === 'true');
       if (m && MAP_ORIENTATIONS.includes(m as MapOrientation))
         setMapOrientationState(m as MapOrientation);
+      if (t && t in MAP_STYLES)           setMapTileStyleState(t as MapTileStyle);
     })();
   }, []);
 
@@ -59,6 +67,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
   function setFontSize(f: FontSizeKey)           { setFontSizeState(f);       AsyncStorage.setItem('themeFontSize',   f); }
   function setBoldLabels(b: boolean)             { setBoldLabelsState(b);     AsyncStorage.setItem('themeBoldLabels', String(b)); }
   function setMapOrientation(o: MapOrientation)  { setMapOrientationState(o); AsyncStorage.setItem('mapOrientation',  o); }
+  function setMapTileStyle(s: MapTileStyle)       { setMapTileStyleState(s);   AsyncStorage.setItem('mapTileStyle',    s); }
 
   return (
     <ThemeContext.Provider value={{
@@ -69,6 +78,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
       boldLabels, setBoldLabels,
       scale:     FONT_SCALE[fontSize],
       mapOrientation, setMapOrientation,
+      mapTileStyle,   setMapTileStyle,
     }}>
       {children}
     </ThemeContext.Provider>

src/mapStyles.ts

@@ -0,0 +1,69 @@
+import type { StyleSpecification } from '@maplibre/maplibre-gl-style-spec';
+
+export type MapTileStyle = 'liberty' | 'cyclosm' | 'topo' | 'satellite' | 'osm';
+
+export interface MapStyleDef {
+  label:       string;
+  description: string;
+  style:       string | StyleSpecification;
+}
+
+function rasterStyle(tiles: string[], attribution: string): StyleSpecification {
+  return {
+    version: 8,
+    sources: {
+      base: { type: 'raster', tiles, tileSize: 256, attribution },
+    },
+    layers: [{ id: 'base', type: 'raster', source: 'base' }],
+  } as StyleSpecification;
+}
+
+export const MAP_STYLES: Record<MapTileStyle, MapStyleDef> = {
+  liberty: {
+    label:       'Liberty',
+    description: 'Vector street map',
+    style:       'https://tiles.openfreemap.org/styles/liberty',
+  },
+  cyclosm: {
+    label:       'CyclOSM',
+    description: 'Cycling infrastructure',
+    style: rasterStyle(
+      [
+        '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',
+      ],
+      '© OpenStreetMap contributors, CyclOSM',
+    ),
+  },
+  topo: {
+    label:       'Topo',
+    description: 'Elevation & terrain',
+    style: rasterStyle(
+      [
+        'https://a.tile.opentopomap.org/{z}/{x}/{y}.png',
+        'https://b.tile.opentopomap.org/{z}/{x}/{y}.png',
+        'https://c.tile.opentopomap.org/{z}/{x}/{y}.png',
+      ],
+      '© OpenStreetMap contributors, OpenTopoMap',
+    ),
+  },
+  satellite: {
+    label:       'Satellite',
+    description: 'Esri World Imagery',
+    style: rasterStyle(
+      ['https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'],
+      '© Esri, Maxar, Earthstar Geographics',
+    ),
+  },
+  osm: {
+    label:       'OSM',
+    description: 'Standard street map',
+    style: rasterStyle(
+      ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
+      '© OpenStreetMap contributors',
+    ),
+  },
+};
+
+export const MAP_TILE_STYLE_ORDER: MapTileStyle[] = ['liberty', 'cyclosm', 'topo', 'satellite', 'osm'];

src/screens/ActivityDetailScreen.tsx

@@ -16,8 +16,7 @@ import {
 } from '../sports';
 import { colors } from '../theme';
 import { useTheme } from '../ThemeContext';
-
+import { MAP_STYLES } from '../mapStyles';
-const MAP_STYLE = 'https://tiles.openfreemap.org/styles/liberty';
 
 type Route = RouteProp<RootStackParamList, 'ActivityDetail'>;
 
@@ -57,7 +56,8 @@ function formatDuration(secs: number) {
 
 export function ActivityDetailScreen() {
   const nav = useNavigation();
-  const { accent, accentDim } = useTheme();
+  const { accent, accentDim, mapTileStyle } = useTheme();
+  const mapStyle = MAP_STYLES[mapTileStyle].style;
   const insets = useSafeAreaInsets();
   const route = useRoute<Route>();
 
@@ -166,7 +166,7 @@ export function ActivityDetailScreen() {
         {points === null
           ? <View style={styles.center}><ActivityIndicator color={accent} /></View>
           : (
-            <Map mapStyle={MAP_STYLE} style={StyleSheet.absoluteFill} logo={false} attribution={false}>
+            <Map mapStyle={mapStyle} style={StyleSheet.absoluteFill} logo={false} attribution={false}>
               {bounds && (
                 <Camera
                   initialViewState={{ bounds, padding: { top: 32, bottom: 32, left: 32, right: 32 } }}

src/screens/RecordingScreen.tsx

@@ -10,14 +10,14 @@ import { startGpsRecording, stopGpsRecording, requestLocationPermissions, reques
 import { RootStackParamList } from '../types';
 import { colors } from '../theme';
 import { useTheme } from '../ThemeContext';
-
+import { MAP_STYLES } from '../mapStyles';
-const MAP_STYLE = 'https://tiles.openfreemap.org/styles/liberty';
 
 type Nav = NativeStackNavigationProp<RootStackParamList>;
 
 export function RecordingScreen() {
   const nav = useNavigation<Nav>();
-  const { accent, accentDim, scale, boldLabels, mapOrientation } = useTheme();
+  const { accent, accentDim, scale, boldLabels, mapOrientation, mapTileStyle } = useTheme();
+  const mapStyle = MAP_STYLES[mapTileStyle].style;
 
   // Map orientation setting → MapLibre trackUserLocation value
   const trackUserLocation = mapOrientation === 'north' ? 'default'
@@ -109,7 +109,7 @@ export function RecordingScreen() {
       </View>
 
       <View style={styles.mapArea}>
-        <Map mapStyle={MAP_STYLE} style={StyleSheet.absoluteFill} logo={false} attribution={false}>
+        <Map mapStyle={mapStyle} style={StyleSheet.absoluteFill} logo={false} attribution={false}>
           <Camera
             trackUserLocation={trackUserLocation}
             initialViewState={{ zoom: 14 }}

src/screens/SettingsScreen.tsx

@@ -7,6 +7,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage';
 import { login, logout, loadAuthState } from '../services/auth';
 import { colors, PALETTES, type PaletteKey, type FontSizeKey } from '../theme';
 import { useTheme, type MapOrientation } from '../ThemeContext';
+import { MAP_STYLES, MAP_TILE_STYLE_ORDER } from '../mapStyles';
 
 type Tab = 'ui' | 'app' | 'sync';
 
@@ -41,7 +42,7 @@ export function SettingsScreen() {
 // ─── UI tab ─────────────────────────────────────────────────────────────────
 
 function UITab() {
-  const { accent, palette, setPalette, fontSize, setFontSize, boldLabels, setBoldLabels } = useTheme();
+  const { accent, palette, setPalette, fontSize, setFontSize, boldLabels, setBoldLabels, mapTileStyle, setMapTileStyle } = useTheme();
 
   const fontSizes: FontSizeKey[] = ['small', 'medium', 'large'];
   const palettes = Object.entries(PALETTES) as [PaletteKey, typeof PALETTES[PaletteKey]][];
@@ -77,6 +78,25 @@ function UITab() {
         ))}
       </View>
 
+      <Text style={styles.sectionTitle}>Map style</Text>
+      {MAP_TILE_STYLE_ORDER.map((key) => {
+        const def = MAP_STYLES[key];
+        const active = mapTileStyle === key;
+        return (
+          <TouchableOpacity
+            key={key}
+            style={[styles.row, active && { borderColor: accent, backgroundColor: PALETTES[palette].accentDim }]}
+            onPress={() => setMapTileStyle(key)}
+          >
+            <View>
+              <Text style={[styles.rowLabel, active && { color: accent }]}>{def.label}</Text>
+              <Text style={styles.rowSub}>{def.description}</Text>
+            </View>
+            {active && <Text style={{ color: accent, fontSize: 16 }}>✓</Text>}
+          </TouchableOpacity>
+        );
+      })}
+
       <Text style={styles.sectionTitle}>Stat labels</Text>
       <View style={styles.row}>
         <Text style={styles.rowLabel}>Bold labels</Text>