diff --git a/frontend/src/components/ui/RouteTileMap.jsx b/frontend/src/components/ui/RouteTileMap.jsx index 7f5c0b7..472ae38 100644 --- a/frontend/src/components/ui/RouteTileMap.jsx +++ b/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. -const TILE_URL = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' +// Thunderforest Outdoors raster — topo style with dense place/street labels, +// 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 } }, [])