feat: route tiles use OpenStreetMap standard raster for denser place/street labels
This commit is contained in:
@@ -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 }
|
||||
}, [])
|
||||
|
||||
|
||||
Reference in New Issue
Block a user