feat: route tiles use Thunderforest Outdoors map style (dense labels, paths, contours)

frontend/src/components/ui/RouteTileMap.jsx

@@ -2,8 +2,10 @@ import { useEffect, useRef } from 'react'
 import L from 'leaflet'
 import { sportColor } from '../../utils/format'
 
-// OpenStreetMap standard raster — denser street/place labels than Carto Voyager.
+// Thunderforest Outdoors raster — topo style with dense place/street labels,
-const TILE_URL = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+// paths and contours. The apikey is a client-side tile key (public by nature).
+const THUNDERFOREST_KEY = '872984f587484873a74ea454662ffacb'
+const TILE_URL = `https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey=${THUNDERFOREST_KEY}`
 
 function decodePolyline(encoded) {
   if (!encoded) return []
@@ -38,7 +40,7 @@ export default function RouteTileMap({ polyline, sportType, className = '' }) {
       zoomSnap: 0,
     })
     mapRef.current = map
-    L.tileLayer(TILE_URL, { maxZoom: 19, subdomains: 'abc' }).addTo(map)
+    L.tileLayer(TILE_URL, { maxZoom: 22, subdomains: 'abc' }).addTo(map)
     return () => { map.remove(); mapRef.current = null }
   }, [])