diff --git a/public/js/app.js b/public/js/app.js index 78ef683..1359a0e 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -88,9 +88,9 @@ basemapCartoDB.addTo(map); // Layer Control const basemaps = { - ' Hintergrundkarte (farbe)': basemapOSM, - ' Hintergrundkarte (grau)': basemapCartoDB, - ' Satellitenbild': basemapSatellite, + // 'Hintergrundkarte': basemapOSM, + 'Hintergrundkarte': basemapCartoDB, + 'Satellitenbild': basemapSatellite, }; const overlays = {}; // Populated later with Contribution Layers @@ -100,6 +100,16 @@ const layerControl = L.control.layers(basemaps, overlays, { collapsed: true }).addTo(map); +// Adds styled Header to Layer Control Dropdown +var layerControlContainer = layerControl.getContainer(); +var layerList = layerControlContainer.querySelector('.leaflet-control-layers-list'); +if (layerList) { + var header = document.createElement('div'); + header.className = 'layer-control-header'; + header.innerHTML = ' Layerauswahl'; + layerList.parentNode.insertBefore(header, layerList); +} + // ===================================================================== // Block 4: Map Controls @@ -392,7 +402,7 @@ function loadContributions() { onEachFeature: bindFeaturePopup }).addTo(map); - layerControl.addOverlay(contributionsLayer, ' Beiträge'); + layerControl.addOverlay(contributionsLayer, 'Bürgerbeiträge'); // Update Sidebar List and Statistics updateContributionsList(); buildCategoryFilter(); diff --git a/public/styles.css b/public/styles.css index 2c6cec7..69455ce 100644 --- a/public/styles.css +++ b/public/styles.css @@ -435,6 +435,69 @@ select.form-input { cursor: pointer; } border-radius: 4px; } +/* Layer Control Expanded Dropdown */ +.leaflet-control-layers-expanded { + padding: 0 !important; + background: var(--color-surface) !important; + font-family: var(--font-body) !important; + border-radius: 10px !important; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important; + border: 1px solid var(--color-border) !important; + min-width: 220px; +} + +.leaflet-control-layers-list { + padding: 8px 0; +} + +.leaflet-control-layers-separator { + border-top: 1px solid var(--color-border) !important; + margin: 4px 12px !important; +} + +.leaflet-control-layers label { + display: flex !important; + align-items: center !important; + gap: 8px !important; + padding: 8px 16px !important; + margin: 0 !important; + cursor: pointer !important; + font-size: 0.83rem !important; + color: var(--color-text) !important; + transition: background var(--transition-fast); +} + +.leaflet-control-layers label:hover { + background: var(--color-bg) !important; +} + +.leaflet-control-layers input[type="radio"], +.leaflet-control-layers input[type="checkbox"] { + accent-color: var(--color-primary); + width: 16px; + height: 16px; + cursor: pointer; + flex-shrink: 0; +} + +/* Layer Control Header — only visible when expanded */ +.layer-control-header { + background: var(--color-primary); + color: white; + font-family: var(--font-body); + font-size: 0.85rem; + font-weight: 600; + padding: 10px 16px; + display: none; + align-items: center; + gap: 8px; + border-radius: 10px 10px 0 0; +} + +.leaflet-control-layers-expanded .layer-control-header { + display: flex; +} + /* ----------------------------------------------------------------- 4.3 Sidebar Overrides