github/TREK
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add referrerPolicy to TileLayer to fix OSM tile blocking (#264)

Browse Source 
OpenStreetMap requires a Referer header per their tile usage policy.
Without it, tiles are blocked with "Access blocked" error.
This commit is contained in:
Maurice
2026-04-01 12:17:53 +02:00
parent 4ebf9c5f11
commit e89ba2ecfc
2 changed files with 2 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/components/Map/MapView.tsx
View File

@@ -485,6 +485,7 @@ export const MapView = memo(function MapView({
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>' attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
maxZoom={19} maxZoom={19}
keepBuffer={4} keepBuffer={4}
referrerPolicy="strict-origin-when-cross-origin"
/> />
<MapController center={center} zoom={zoom} /> <MapController center={center} zoom={zoom} />

2
client/src/pages/SharedTripPage.tsx
View File

@@ -168,7 +168,7 @@ export default function SharedTripPage() {
{activeTab === 'plan' && (<> {activeTab === 'plan' && (<>
<div style={{ borderRadius: 16, overflow: 'hidden', height: 300, marginBottom: 20, boxShadow: '0 2px 12px rgba(0,0,0,0.08)' }}> <div style={{ borderRadius: 16, overflow: 'hidden', height: 300, marginBottom: 20, boxShadow: '0 2px 12px rgba(0,0,0,0.08)' }}>
<MapContainer center={center as [number, number]} zoom={11} zoomControl={false} style={{ width: '100%', height: '100%' }}> <MapContainer center={center as [number, number]} zoom={11} zoomControl={false} style={{ width: '100%', height: '100%' }}>
<TileLayer url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png" /> <TileLayer url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png" referrerPolicy="strict-origin-when-cross-origin" />
<FitBoundsToPlaces places={mapPlaces} /> <FitBoundsToPlaces places={mapPlaces} />
{mapPlaces.map((p: any) => ( {mapPlaces.map((p: any) => (
<Marker key={p.id} position={[p.lat, p.lng]} icon={createMarkerIcon(p)}> <Marker key={p.id} position={[p.lat, p.lng]} icon={createMarkerIcon(p)}>