diff --git a/frontend/src/components/ui/RouteTileMap.jsx b/frontend/src/components/ui/RouteTileMap.jsx index 6dd8fea..7f5c0b7 100644 --- a/frontend/src/components/ui/RouteTileMap.jsx +++ b/frontend/src/components/ui/RouteTileMap.jsx @@ -2,11 +2,8 @@ import { useEffect, useRef } from 'react' import L from 'leaflet' import { sportColor } from '../../utils/format' -// Voyager raster tiles — same street style used on the activity map. We split -// the basemap (no labels) from a labels-only overlay so place names can be drawn -// *above* the route line instead of being hidden underneath it. -const BASE_URL = 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}{r}.png' -const LABELS_URL = 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager_only_labels/{z}/{x}/{y}{r}.png' +// OpenStreetMap standard raster — denser street/place labels than Carto Voyager. +const TILE_URL = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' function decodePolyline(encoded) { if (!encoded) return [] @@ -41,12 +38,7 @@ export default function RouteTileMap({ polyline, sportType, className = '' }) { zoomSnap: 0, }) mapRef.current = map - L.tileLayer(BASE_URL, { maxZoom: 19 }).addTo(map) - // A dedicated high-z pane keeps the labels overlay on top of the route line. - map.createPane('labels') - map.getPane('labels').style.zIndex = 650 - map.getPane('labels').style.pointerEvents = 'none' - L.tileLayer(LABELS_URL, { maxZoom: 19, pane: 'labels' }).addTo(map) + L.tileLayer(TILE_URL, { maxZoom: 19, subdomains: 'abc' }).addTo(map) return () => { map.remove(); mapRef.current = null } }, [])