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 L from 'leaflet'
|
||||||
import { sportColor } from '../../utils/format'
|
import { sportColor } from '../../utils/format'
|
||||||
|
|
||||||
// Voyager raster tiles — same street style used on the activity map. We split
|
// OpenStreetMap standard raster — denser street/place labels than Carto Voyager.
|
||||||
// the basemap (no labels) from a labels-only overlay so place names can be drawn
|
const TILE_URL = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
|
||||||
// *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'
|
|
||||||
|
|
||||||
function decodePolyline(encoded) {
|
function decodePolyline(encoded) {
|
||||||
if (!encoded) return []
|
if (!encoded) return []
|
||||||
@@ -41,12 +38,7 @@ export default function RouteTileMap({ polyline, sportType, className = '' }) {
|
|||||||
zoomSnap: 0,
|
zoomSnap: 0,
|
||||||
})
|
})
|
||||||
mapRef.current = map
|
mapRef.current = map
|
||||||
L.tileLayer(BASE_URL, { maxZoom: 19 }).addTo(map)
|
L.tileLayer(TILE_URL, { maxZoom: 19, subdomains: 'abc' }).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)
|
|
||||||
return () => { map.remove(); mapRef.current = null }
|
return () => { map.remove(); mapRef.current = null }
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user