100 lines
4.4 KiB
HTML
100 lines
4.4 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
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© OpenStreetMap contributors'
|
|
}).addTo(map);
|
|
|
|
// 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[1], pt[0]]);
|
|
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>
|
|
color: '#f97316', weight: 5, opacity: 0.9, smoothFactor: 1
|
|
}).addTo(routeLayer);
|
|
polyline.bindPopup(`<div><h3>🏍️ ${route.title}</h3><div>Distance: ${route.distance.toFixed(2)} km</div><div>Elevation Gain: ${route.elevation_gain.toFixed(0)} m</div></div>`);
|
|
// Always fit bounds to the route and bind to frame size
|
|
function fitRouteBounds() {
|
|
map.invalidateSize();
|
|
map.fitBounds(polyline.getBounds(), { padding: [10, 10], maxZoom: 18 });
|
|
}
|
|
fitRouteBounds();
|
|
window.addEventListener('resize', fitRouteBounds);
|
|
})
|
|
.catch(error => showError(error.message));
|
|
}
|
|
function showError(msg) {
|
|
const loading = document.getElementById('map-loading');
|
|
loading.innerHTML = `<div style='color:#dc2626;'><div style='font-size:1.2em;margin-bottom:8px;'>⚠️</div><div>${msg}</div></div>`;
|
|
}
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initializeMap);
|
|
} else {
|
|
initializeMap();
|
|
}
|
|
window.addEventListener('resize', () => { if (map) setTimeout(() => map.invalidateSize(), 100); });
|
|
</script>
|
|
</body>
|
|
</html>
|