feat(windkarte): Karten-UX Verbesserungen
- 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:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user