fix(windkarte): 2km/5km-Ringe selektion-basiert statt permanent
Deploy / verify (push) Successful in 54s
Deploy / deploy (push) Successful in 1m1s

Ringe erscheinen nur bei ausgewähltem Gebiet (wie 200m/600m/1km),
Toggle steuert Sichtbarkeit. Permanente Allgebiets-Berechnung entfernt.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Peter Meier
2026-05-13 15:24:14 +02:00
parent f9b7057ba4
commit ad72c44d98
+29 -19
View File
@@ -35,6 +35,8 @@
selectedSlug = null; selectedSlug = null;
onselect(null, null); onselect(null, null);
bufferLayer?.clearLayers(); bufferLayer?.clearLayers();
if (ring2kmLayer && map?.hasLayer(ring2kmLayer)) map.removeLayer(ring2kmLayer);
if (ring5kmLayer && map?.hasLayer(ring5kmLayer)) map.removeLayer(ring5kmLayer);
} }
} }
}); });
@@ -44,18 +46,20 @@
let mapEl: HTMLDivElement; let mapEl: HTMLDivElement;
let map: import("leaflet").Map | null = null; let map: import("leaflet").Map | null = null;
let bufferLayer: import("leaflet").LayerGroup | null = null; let bufferLayer: import("leaflet").LayerGroup | null = null;
let ring2kmLayer: import("leaflet").LayerGroup | null = null;
let ring5kmLayer: import("leaflet").LayerGroup | null = null;
let labelLayer: import("leaflet").LayerGroup | null = null; let labelLayer: import("leaflet").LayerGroup | null = null;
let selectedSlug = $state<string | null>(null); let selectedSlug = $state<string | null>(null);
let geojsonLayer: import("leaflet").GeoJSON | null = null; let geojsonLayer: import("leaflet").GeoJSON | null = null;
let buffering = $state(false); let buffering = $state(false);
let permanentRing2km = $state<import("leaflet").LayerGroup | null>(null); let _hiddenRings: string[] = ["2km", "5km"];
let permanentRing5km = $state<import("leaflet").LayerGroup | null>(null);
$effect(() => { $effect(() => {
const hidden = hiddenRings; _hiddenRings = hiddenRings;
for (const [key, layer] of [["2km", permanentRing2km], ["5km", permanentRing5km]] as [string, import("leaflet").LayerGroup | null][]) { if (!map) return;
if (!layer || !map) continue; for (const [key, layer] of [["2km", ring2kmLayer], ["5km", ring5kmLayer]] as [string, import("leaflet").LayerGroup | null][]) {
if (hidden.includes(key)) { if (!layer) continue;
if (_hiddenRings.includes(key)) {
if (map.hasLayer(layer)) map.removeLayer(layer); if (map.hasLayer(layer)) map.removeLayer(layer);
} else { } else {
if (!map.hasLayer(layer)) map.addLayer(layer); if (!map.hasLayer(layer)) map.addLayer(layer);
@@ -111,6 +115,21 @@
style: { color, fillColor: color, fillOpacity: 0.05, weight: 1.5, dashArray: dash }, style: { color, fillColor: color, fillOpacity: 0.05, weight: 1.5, dashArray: dash },
}).addTo(bufferLayer!); }).addTo(bufferLayer!);
} }
// 2km / 5km — always compute on selection, show/hide controlled by hiddenRings toggle
if (!ring2kmLayer) ring2kmLayer = L.layerGroup();
else ring2kmLayer.clearLayers();
if (!ring5kmLayer) ring5kmLayer = L.layerGroup();
else ring5kmLayer.clearLayers();
const b2 = buffer(feature, 2, { units: "kilometers" });
if (b2) L.geoJSON(b2, { style: { color: "#5e6fa3", fillColor: "#5e6fa3", fillOpacity: 0.05, weight: 1.5, dashArray: "10 5" } }).addTo(ring2kmLayer);
const b5 = buffer(feature, 5, { units: "kilometers" });
if (b5) L.geoJSON(b5, { style: { color: "#8a567a", fillColor: "#8a567a", fillOpacity: 0.05, weight: 1.5, dashArray: "14 6" } }).addTo(ring5kmLayer);
if (!_hiddenRings.includes("2km") && !map!.hasLayer(ring2kmLayer)) map!.addLayer(ring2kmLayer);
if (!_hiddenRings.includes("5km") && !map!.hasLayer(ring5kmLayer)) map!.addLayer(ring5kmLayer);
buffering = false; buffering = false;
} }
@@ -136,6 +155,8 @@
} else { } else {
onselect(null, null); onselect(null, null);
bufferLayer?.clearLayers(); bufferLayer?.clearLayers();
if (ring2kmLayer && map!.hasLayer(ring2kmLayer)) map!.removeLayer(ring2kmLayer);
if (ring5kmLayer && map!.hasLayer(ring5kmLayer)) map!.removeLayer(ring5kmLayer);
} }
if (zoom && prev !== name) { if (zoom && prev !== name) {
@@ -176,6 +197,8 @@
restyleAll(null); restyleAll(null);
onselect(null, null); onselect(null, null);
bufferLayer?.clearLayers(); bufferLayer?.clearLayers();
if (ring2kmLayer && map!.hasLayer(ring2kmLayer)) map!.removeLayer(ring2kmLayer);
if (ring5kmLayer && map!.hasLayer(ring5kmLayer)) map!.removeLayer(ring5kmLayer);
}); });
try { try {
@@ -274,19 +297,6 @@
map.on("zoomend", syncLabels); map.on("zoomend", syncLabels);
syncLabels(); syncLabels();
// Permanent 2km / 5km rings for all areas (built async, shown/hidden via hiddenRings prop)
const { buffer: turfBuffer } = await import("@turf/buffer");
const r2 = L.layerGroup();
const r5 = L.layerGroup();
for (const feature of geo.features) {
const b2 = turfBuffer(feature, 2, { units: "kilometers" });
if (b2) L.geoJSON(b2, { style: { color: "#5e6fa3", fillColor: "#5e6fa3", fillOpacity: 0.04, weight: 1.5, dashArray: "10 5" }, interactive: false }).addTo(r2);
const b5 = turfBuffer(feature, 5, { units: "kilometers" });
if (b5) L.geoJSON(b5, { style: { color: "#8a567a", fillColor: "#8a567a", fillOpacity: 0.03, weight: 1.5, dashArray: "14 6" }, interactive: false }).addTo(r5);
}
permanentRing2km = r2;
permanentRing5km = r5;
// Auto-select from hash // Auto-select from hash
if (initialGebietsNr) { if (initialGebietsNr) {
const entry = layerMap.get(initialGebietsNr); const entry = layerMap.get(initialGebietsNr);