feat(windkarte): permanente 2km/5km-Ringe togglebar in Legende
Deploy / verify (push) Successful in 55s
Deploy / deploy (push) Successful in 1m4s

Zeigt 2km (indigo) und 5km (lila) Pufferringe für alle Gebiete gleichzeitig,
unabhängig von Selektion. Default versteckt, Klick auf Legendenitem ein-/ausblenden.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Peter Meier
2026-05-13 15:19:44 +02:00
parent 0f6a58fed4
commit cd67ff8dc8
2 changed files with 49 additions and 0 deletions
+29
View File
@@ -9,12 +9,14 @@
onready = null,
initialGebietsNr = null,
hiddenStatuses = [],
hiddenRings = ["2km", "5km"],
}: {
areas: WindArea[];
onselect: (area: WindArea | null, center: [number, number] | null) => void;
onready?: ((ctrl: { reset: () => void }) => void) | null;
initialGebietsNr?: string | null;
hiddenStatuses?: string[];
hiddenRings?: string[];
} = $props();
// Mirror prop into plain variable so Leaflet event handlers read current value.
@@ -46,6 +48,20 @@
let selectedSlug = $state<string | null>(null);
let geojsonLayer: import("leaflet").GeoJSON | null = null;
let buffering = $state(false);
let permanentRing2km = $state<import("leaflet").LayerGroup | null>(null);
let permanentRing5km = $state<import("leaflet").LayerGroup | null>(null);
$effect(() => {
const hidden = hiddenRings;
for (const [key, layer] of [["2km", permanentRing2km], ["5km", permanentRing5km]] as [string, import("leaflet").LayerGroup | null][]) {
if (!layer || !map) continue;
if (hidden.includes(key)) {
if (map.hasLayer(layer)) map.removeLayer(layer);
} else {
if (!map.hasLayer(layer)) map.addLayer(layer);
}
}
});
const COLORS: Record<string, { fill: string; stroke: string }> = {
rechtskraeftig: { fill: "#2d7a45", stroke: "#1a4d28" },
@@ -258,6 +274,19 @@
map.on("zoomend", 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
if (initialGebietsNr) {
const entry = layerMap.get(initialGebietsNr);