color: '#f97316', weight: 5, opacity: 0.9, smoothFactor: 1 }).addTo(routeLayer); polyline.bindPopup(`

🏍️ ${route.title}

Distance: ${route.distance.toFixed(2)} km
Elevation Gain: ${route.elevation_gain.toFixed(0)} m
`); // 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 = `
⚠️
${msg}
`; } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initializeMap); } else { initializeMap(); } window.addEventListener('resize', () => { if (map) setTimeout(() => map.invalidateSize(), 100); });