Finalize mail settings admin UI and Mailrise compatibility

app/static/map_iframe_single.html

@@ -38,17 +38,24 @@ window.addEventListener('resize', resizeMap);
 resizeMap();
 
 // Add OSM tiles
-L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    attribution: '© OpenStreetMap contributors'
+// 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[1], pt[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
@@ -70,30 +77,4 @@ if (routeId) {
 }
 </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>