feat: Checkbox-Filter fuer Karten-Legende - Marker pro Kategorie ein-/ausblendbar

src/static/js/components.js

@@ -617,6 +617,8 @@ const UI = {
      */
     _map: null,
     _mapCluster: null,
+    _mapCategoryLayers: {},
+    _mapLegendControl: null,
 
     _pendingLocations: null,
 
@@ -735,6 +737,7 @@ const UI = {
             this._map.addLayer(this._mapCluster);
         } else {
             this._mapCluster.clearLayers();
+            this._mapCategoryLayers = {};
         }
 
         // Marker hinzufuegen
@@ -778,6 +781,8 @@ const UI = {
             popupHtml += `</div></div>`;
 
             marker.bindPopup(popupHtml, { maxWidth: 300, className: 'map-popup-container' });
+            if (!this._mapCategoryLayers[cat]) this._mapCategoryLayers[cat] = L.featureGroup();
+            this._mapCategoryLayers[cat].addLayer(marker);
             this._mapCluster.addLayer(marker);
             bounds.push([loc.lat, loc.lon]);
         });
@@ -791,28 +796,39 @@ const UI = {
             }
         }
 
-        // Legende hinzufuegen
+        // Legende mit Checkbox-Filter
         if (this._map) {
-            // Alte Legende entfernen
-            this._map.eachLayer(layer => {});
             const existingLegend = document.querySelector('.map-legend-ctrl');
             if (existingLegend) existingLegend.remove();
+            if (this._mapLegendControl) {
+                try { this._map.removeControl(this._mapLegendControl); } catch(e) {}
+            }
 
             const legend = L.control({ position: 'bottomright' });
             const self2 = this;
             const legendLabels = catLabels;
             legend.onAdd = function() {
                 const div = L.DomUtil.create('div', 'map-legend-ctrl');
-                let html = '<strong style="display:block;margin-bottom:6px;">Legende</strong>';
+                L.DomEvent.disableClickPropagation(div);
+                let html = '<strong style="display:block;margin-bottom:6px;">Filter</strong>';
                 ['primary', 'secondary', 'tertiary', 'mentioned'].forEach(cat => {
                     if (usedCategories.has(cat) && legendLabels[cat]) {
-                        html += `<div style="display:flex;align-items:center;gap:6px;margin:3px 0;"><span style="width:10px;height:10px;border-radius:50%;background:${self2._categoryColors[cat]};flex-shrink:0;"></span><span>${legendLabels[cat]}</span></div>`;
+                        html += '<label class="map-legend-item" style="display:flex;align-items:center;gap:6px;margin:3px 0;cursor:pointer;">'
+                            + '<input type="checkbox" checked data-map-cat="' + cat + '" style="accent-color:' + self2._categoryColors[cat] + ';margin:0;cursor:pointer;">'
+                            + '<span style="width:10px;height:10px;border-radius:50%;background:' + self2._categoryColors[cat] + ';flex-shrink:0;"></span>'
+                            + '<span>' + legendLabels[cat] + '</span></label>';
                     }
                 });
                 div.innerHTML = html;
+                div.addEventListener('change', function(e) {
+                    const cb = e.target;
+                    if (!cb.dataset.mapCat) return;
+                    self2._toggleMapCategory(cb.dataset.mapCat, cb.checked);
+                });
                 return div;
             };
             legend.addTo(this._map);
+            this._mapLegendControl = legend;
         }
 
         // Resize-Fix fuer gridstack (mehrere Versuche, da Container-Hoehe erst spaeter steht)
@@ -914,6 +930,18 @@ const UI = {
 
     _mapFsKeyHandler: null,
 
+    _toggleMapCategory(cat, visible) {
+        const layers = this._mapCategoryLayers[cat];
+        if (!layers || !this._mapCluster) return;
+        layers.eachLayer(marker => {
+            if (visible) {
+                this._mapCluster.addLayer(marker);
+            } else {
+                this._mapCluster.removeLayer(marker);
+            }
+        });
+    },
+
     /**
      * HTML escapen.
      */