diff --git a/templates/dashboard.html b/templates/dashboard.html index 1f7ae54..06b0a10 100644 --- a/templates/dashboard.html +++ b/templates/dashboard.html @@ -15,6 +15,11 @@ border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } + #dashboard-map-modal { + width: 100%; + height: 100%; + min-height: 480px; + } {% endblock %} @@ -204,8 +209,11 @@
-
Zugriffe auf der Karte
-
+
+
Zugriffe auf der Karte
+ +
+
@@ -246,6 +254,21 @@ + + + {% endblock %} {% block scripts %} @@ -256,10 +279,7 @@ // Leaflet map with aggregated downloads (fail-safe so charts still render) try { - (function initDashboardMap() { - const mapElement = document.getElementById('dashboard-map'); - if (!mapElement || typeof L === 'undefined') return; - + const createLeafletMap = (mapElement) => { const map = L.map(mapElement).setView([50, 10], 4); const bounds = L.latLngBounds(); const defaultCenter = [50, 10]; @@ -295,7 +315,7 @@ mapElement.appendChild(msg); } - if (!bounds.isEmpty()) { + if (bounds.isValid()) { map.fitBounds(bounds, { padding: [24, 24] }); } else { map.setView(defaultCenter, defaultZoom); @@ -305,6 +325,38 @@ refreshSize(); window.addEventListener('resize', refreshSize); window.addEventListener('orientationchange', refreshSize); + return { map, refreshSize }; + }; + + (function initDashboardMap() { + const mapElement = document.getElementById('dashboard-map'); + if (!mapElement || typeof L === 'undefined') return; + createLeafletMap(mapElement); + + const modalEl = document.getElementById('mapModal'); + let modalMapInstance = null; + if (modalEl) { + modalEl.addEventListener('shown.bs.modal', () => { + const modalMapElement = document.getElementById('dashboard-map-modal'); + if (!modalMapElement) return; + const modalBody = modalEl.querySelector('.modal-body'); + const modalHeader = modalEl.querySelector('.modal-header'); + if (modalBody && modalHeader) { + const availableHeight = window.innerHeight - modalHeader.offsetHeight; + modalBody.style.height = `${availableHeight}px`; + modalMapElement.style.height = '100%'; + } + if (!modalMapInstance) { + const { map, refreshSize } = createLeafletMap(modalMapElement); + modalMapInstance = { map, refreshSize }; + } + // Ensure proper sizing after modal animation completes + setTimeout(() => { + modalMapInstance.map.invalidateSize(); + if (modalMapInstance.refreshSize) modalMapInstance.refreshSize(); + }, 200); + }); + } })(); } catch (err) { console.error('Dashboard map init failed:', err);