diff --git a/src/lib/components/WindkarteMap.svelte b/src/lib/components/WindkarteMap.svelte index cbb59c7..27beebc 100644 --- a/src/lib/components/WindkarteMap.svelte +++ b/src/lib/components/WindkarteMap.svelte @@ -8,13 +8,37 @@ onselect, onready = null, initialGebietsNr = null, + hiddenStatuses = [], }: { areas: WindArea[]; onselect: (area: WindArea | null, center: [number, number] | null) => void; onready?: ((ctrl: { reset: () => void }) => void) | null; initialGebietsNr?: string | null; + hiddenStatuses?: string[]; } = $props(); + // Mirror prop into plain variable so Leaflet event handlers read current value. + let _hidden: string[] = []; + $effect(() => { + _hidden = hiddenStatuses; + if (!geojsonLayer) return; + restyleAll(selectedSlug); + // Deselect if selected area's status was just hidden. + if (selectedSlug) { + geojsonLayer.eachLayer((l) => { + const f = (l as import("leaflet").Path & { feature?: GeoJSON.Feature }).feature; + if (f?.properties?.name === selectedSlug) { + const s = f.properties?.status ?? "rechtskraeftig"; + if (_hidden.includes(s)) { + selectedSlug = null; + onselect(null, null); + bufferLayer?.clearLayers(); + } + } + }); + } + }); + let mapEl: HTMLDivElement; let map: import("leaflet").Map | null = null; let bufferLayer: import("leaflet").LayerGroup | null = null; @@ -46,7 +70,11 @@ const f = (l as import("leaflet").Path & { feature?: GeoJSON.Feature }).feature; if (!f) return; const s = f.properties?.status ?? "rechtskraeftig"; - (l as import("leaflet").Path).setStyle(style(s, f.properties?.name === sel)); + if (_hidden.includes(s)) { + (l as import("leaflet").Path).setStyle({ opacity: 0, fillOpacity: 0, weight: 0 }); + } else { + (l as import("leaflet").Path).setStyle(style(s, f.properties?.name === sel)); + } }); } @@ -168,19 +196,23 @@ // Hover highlight layer.on("mouseover", () => { + const s = feature.properties?.status ?? "rechtskraeftig"; + if (_hidden.includes(s)) return; if (feature.properties?.name !== selectedSlug) { - const s = feature.properties?.status ?? "rechtskraeftig"; (layer as import("leaflet").Path).setStyle(style(s, false, true)); } }); layer.on("mouseout", () => { + const s = feature.properties?.status ?? "rechtskraeftig"; + if (_hidden.includes(s)) return; if (feature.properties?.name !== selectedSlug) { - const s = feature.properties?.status ?? "rechtskraeftig"; (layer as import("leaflet").Path).setStyle(style(s, false, false)); } }); layer.on("click", async (e) => { + const s = feature.properties?.status ?? "rechtskraeftig"; + if (_hidden.includes(s)) return; L.DomEvent.stopPropagation(e); await selectFeature(L, feature, layer, area); }); diff --git a/src/lib/components/blocks/WindkarteBlock.svelte b/src/lib/components/blocks/WindkarteBlock.svelte index ea2f6d2..0988380 100644 --- a/src/lib/components/blocks/WindkarteBlock.svelte +++ b/src/lib/components/blocks/WindkarteBlock.svelte @@ -21,6 +21,13 @@ let areas = $state([]); let mapReady = $state(false); let initialGebietsNr = $state(null); let resetMap: (() => void) | null = null; + let hiddenStatuses = $state([]); + + function toggleStatus(status: string) { + hiddenStatuses = hiddenStatuses.includes(status) + ? hiddenStatuses.filter((s) => s !== status) + : [...hiddenStatuses, status]; + } const MapComponent = browser ? import("$lib/components/WindkarteMap.svelte").then((m) => m.default) @@ -105,6 +112,7 @@ let areas = $state([]); { resetMap = ctrl.reset; }} /> @@ -127,18 +135,22 @@ let areas = $state([]);
- - - {t(T.windkarte_legend_rechtskraeftig)} - - - - {t(T.windkarte_legend_entwurf_2)} - - - - {t(T.windkarte_legend_entwurf_2_voraussichtlich)} - + {#each [ + { status: "rechtskraeftig", color: "#2d7a45", label: t(T.windkarte_legend_rechtskraeftig) }, + { status: "entwurf_2", color: "#b08a52", label: t(T.windkarte_legend_entwurf_2) }, + { status: "entwurf_2_voraussichtlich", color: "#d4752a", label: t(T.windkarte_legend_entwurf_2_voraussichtlich) }, + ] as item} + + {/each} {t(T.windkarte_legend_distances)} {#each [{ color: "#e35651", label: "200 m" }, { color: "#b08a52", label: "600 m" }, { color: "#436e85", label: "1 km" }] as ring}