feat(windkarte): Karten-UX Verbesserungen
Deploy / verify (push) Successful in 54s
Deploy / deploy (push) Successful in 1m7s

- Polygon-Labels ab Zoom 13 mit zoom-proportionaler Schriftgröße
- Hover-Highlight, Deselect per Hintergrundklick
- Mobile Bottom-Sheet / Desktop Side-Panel (CSS-only)
- Share-Link via URL-Hash (#W-10), auto-select on load
- Share-Button + OSM-Link im Panel
- Reset-Button auf Karte
- Buffer-Spinner während Turf-Berechnung
- Leaflet-Attribution nach links (kollidierte mit Panel)
- fitBounds mit asymmetrischem Padding + maxZoom 14

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Peter Meier
2026-05-13 10:24:56 +02:00
parent 6fef86fc6b
commit 0e28a7e334
3 changed files with 308 additions and 58 deletions
+40
View File
@@ -5,9 +5,11 @@
let {
area,
center,
onclose,
}: {
area: WindArea | null;
center: [number, number] | null;
onclose: () => void;
} = $props();
@@ -28,6 +30,22 @@
if (s._slug) return `/post/${s._slug}`;
return null;
}
let copied = $state(false);
async function copyLink() {
await navigator.clipboard.writeText(location.href);
copied = true;
setTimeout(() => (copied = false), 2000);
}
$derived: osmHref: center
? `https://www.openstreetmap.org/?mlat=${center[0].toFixed(5)}&mlon=${center[1].toFixed(5)}#map=14/${center[0].toFixed(5)}/${center[1].toFixed(5)}`
: null;
function osmHref(c: [number, number] | null): string | null {
if (!c) return null;
return `https://www.openstreetmap.org/?mlat=${c[0].toFixed(5)}&mlon=${c[1].toFixed(5)}#map=14/${c[0].toFixed(5)}/${c[1].toFixed(5)}`;
}
</script>
{#if area}
@@ -121,6 +139,28 @@
Stellungnahme-Vorlage noch nicht verknüpft
</div>
{/if}
<!-- Actions -->
<div class="flex gap-2 pt-1">
<button
onclick={copyLink}
class="flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-stein-200 px-2 py-2 text-xs font-medium text-stein-600 hover:bg-stein-50 transition-colors whitespace-nowrap"
>
<Icon icon={copied ? "mdi:check" : "mdi:link-variant"} class="size-3.5 shrink-0" />
{copied ? "Kopiert!" : "Link kopieren"}
</button>
{#if osmHref(center)}
<a
href={osmHref(center)}
target="_blank"
rel="noopener noreferrer"
class="flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-stein-200 px-2 py-2 text-xs font-medium text-stein-600 hover:bg-stein-50 transition-colors whitespace-nowrap"
>
<Icon icon="mdi:map-outline" class="size-3.5 shrink-0" />
In OSM öffnen
</a>
{/if}
</div>
</div>
</div>
{/if}