81 lines
3.5 KiB
HTML
81 lines
3.5 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
|
|
L.marker(latlngs[0], { icon: L.divIcon({ html: '<div style="background:#22c55e;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:#fff;"><i class=\'fas fa-play\'></i></div>', className: 'custom-div-icon', iconSize: [24,24], iconAnchor: [12,12] }) }).addTo(map);
|
|
// End marker
|
|
L.marker(latlngs[latlngs.length-1], { icon: L.divIcon({ html: '<div style="background:#ef4444;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:#fff;"><i class=\'fas fa-flag-checkered\'></i></div>', className: 'custom-div-icon', iconSize: [24,24], iconAnchor: [12,12] }) }).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>
|