99 lines
3.9 KiB
HTML
99 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Route Map (Debug)</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin=""/>
|
|
<style>
|
|
html, body { height: 100%; margin: 0; padding: 0; }
|
|
#map { width: 100vw; height: 100vh; min-height: 100%; min-width: 100%; border-radius: 1rem; }
|
|
.leaflet-container { background: #f8f9fa; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
|
|
<script>
|
|
// Get route_id from query string
|
|
function getRouteId() {
|
|
const params = new URLSearchParams(window.location.search);
|
|
return params.get('route_id');
|
|
}
|
|
|
|
const routeId = getRouteId();
|
|
const map = L.map('map');
|
|
|
|
// Set map size to fit iframe
|
|
function resizeMap() {
|
|
const mapDiv = document.getElementById('map');
|
|
mapDiv.style.width = window.innerWidth + 'px';
|
|
mapDiv.style.height = window.innerHeight + 'px';
|
|
map.invalidateSize();
|
|
}
|
|
window.addEventListener('resize', resizeMap);
|
|
|
|
// Initial size
|
|
resizeMap();
|
|
|
|
// Add OSM tiles
|
|
// Use CartoDB Positron for English map labels (clean, readable, English by default)
|
|
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
|
|
attribution: '© OpenStreetMap contributors & CartoDB',
|
|
subdomains: 'abcd',
|
|
maxZoom: 19
|
|
}).addTo(map);
|
|
|
|
// Ensure map is always north-up (default in Leaflet)
|
|
// Prevent any future rotation plugins or gestures
|
|
map.dragRotate && map.dragRotate.disable && map.dragRotate.disable();
|
|
map.touchZoomRotate && map.touchZoomRotate.disableRotation && map.touchZoomRotate.disableRotation();
|
|
// Fetch route data
|
|
if (routeId) {
|
|
fetch(`/community/api/route/${routeId}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data && data.coordinates && data.coordinates.length > 0) {
|
|
const latlngs = data.coordinates.map(pt => [pt[0], pt[1]]);
|
|
const polyline = L.polyline(latlngs, { color: '#ef4444', weight: 5, opacity: 0.9 }).addTo(map);
|
|
map.fitBounds(polyline.getBounds(), { padding: [20, 20], maxZoom: 15 });
|
|
// Start marker (green pin)
|
|
L.marker(latlngs[0], {
|
|
icon: L.icon({
|
|
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
|
|
iconSize: [25, 41],
|
|
iconAnchor: [12, 41],
|
|
popupAnchor: [1, -34],
|
|
shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
|
|
shadowSize: [41, 41]
|
|
})
|
|
}).addTo(map);
|
|
// End marker (red pin)
|
|
L.marker(latlngs[latlngs.length-1], {
|
|
icon: L.icon({
|
|
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
|
|
iconSize: [25, 41],
|
|
iconAnchor: [12, 41],
|
|
popupAnchor: [1, -34],
|
|
shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
|
|
shadowSize: [41, 41]
|
|
})
|
|
}).addTo(map);
|
|
} else {
|
|
map.setView([45.9432, 24.9668], 6);
|
|
L.marker([45.9432, 24.9668]).addTo(map).bindPopup('No route data').openPopup();
|
|
}
|
|
})
|
|
.catch(err => {
|
|
map.setView([45.9432, 24.9668], 6);
|
|
L.marker([45.9432, 24.9668]).addTo(map).bindPopup('Error loading route').openPopup();
|
|
});
|
|
} else {
|
|
map.setView([45.9432, 24.9668], 6);
|
|
L.marker([45.9432, 24.9668]).addTo(map).bindPopup('No route selected').openPopup();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|