diff --git a/src/static/js/components.js b/src/static/js/components.js index 51cc757..482a298 100644 --- a/src/static/js/components.js +++ b/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 += ``; 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 = 'Legende'; + L.DomEvent.disableClickPropagation(div); + let html = 'Filter'; ['primary', 'secondary', 'tertiary', 'mentioned'].forEach(cat => { if (usedCategories.has(cat) && legendLabels[cat]) { - html += `