Fix: Clean up map_iframe_single.html, remove debug overlay, ensure clean map rendering.

2025-07-26 15:19:52 +03:00
parent 187254beca
commit 5ddde4bd9b
23 changed files with 1755 additions and 1658 deletions
--- a/app/static/map_iframe_single.html
+++ b/app/static/map_iframe_single.html
@@ -0,0 +1,99 @@
+<!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>