fix(stellungnahme): Mini-Map mobile square + Gebiet zentriert (fitBoundsPadding-Prop)
Deploy / verify (push) Successful in 1m5s
Deploy / deploy (push) Successful in 1m12s

This commit is contained in:
Peter Meier
2026-05-30 11:25:36 +02:00
parent bd67f0c568
commit 3f39b5b1a8
2 changed files with 18 additions and 3 deletions
+16 -2
View File
@@ -12,6 +12,7 @@
hiddenStatuses = [], hiddenStatuses = [],
hiddenRings = [], hiddenRings = [],
fitBoundsMaxZoom = 11, fitBoundsMaxZoom = 11,
fitBoundsPadding = null,
}: { }: {
areas: WindArea[]; areas: WindArea[];
onselect: (area: WindArea | null, center: [number, number] | null) => void; onselect: (area: WindArea | null, center: [number, number] | null) => void;
@@ -20,6 +21,10 @@
hiddenStatuses?: string[]; hiddenStatuses?: string[];
hiddenRings?: string[]; hiddenRings?: string[];
fitBoundsMaxZoom?: number; fitBoundsMaxZoom?: number;
/** Wenn gesetzt: symmetrisches [x,y]-Padding für fitBounds (z.B. Mini-Map
* ohne Panel). Default null = panel-aware Padding (großer Bottom-/Side-
* Bereich für Detail-Drawer in der vollwertigen Karte). */
fitBoundsPadding?: [number, number] | null;
} = $props(); } = $props();
const t = useTranslate(); const t = useTranslate();
@@ -166,9 +171,18 @@
if (zoom && prev !== name) { if (zoom && prev !== name) {
const desktop = window.innerWidth >= 640; const desktop = window.innerWidth >= 640;
const pad: { paddingTopLeft: [number, number]; paddingBottomRight: [number, number] } =
fitBoundsPadding
? {
paddingTopLeft: fitBoundsPadding,
paddingBottomRight: fitBoundsPadding,
}
: {
paddingTopLeft: [40, 40],
paddingBottomRight: [desktop ? 320 : 40, desktop ? 40 : 300],
};
map!.fitBounds((layer as import("leaflet").Polygon).getBounds(), { map!.fitBounds((layer as import("leaflet").Polygon).getBounds(), {
paddingTopLeft: [40, 40], ...pad,
paddingBottomRight: [desktop ? 320 : 40, desktop ? 40 : 300],
maxZoom: fitBoundsMaxZoom, maxZoom: fitBoundsMaxZoom,
}); });
} }
@@ -616,7 +616,7 @@ ${"=".repeat(64)}`;
</div> </div>
<!-- Mini-map --> <!-- Mini-map -->
{#if browser && MapComponent && mapReady && mapAreaData.length > 0} {#if browser && MapComponent && mapReady && mapAreaData.length > 0}
<div class="relative mb-6 aspect-square overflow-hidden rounded-xl border border-stein-200 shadow-sm sm:aspect-auto sm:h-80"> <div class="relative mb-6 aspect-square overflow-hidden rounded-xl border border-stein-200 shadow-sm sm:aspect-auto sm:h-80">
{#await MapComponent then Map} {#await MapComponent then Map}
<Map <Map
@@ -624,6 +624,7 @@ ${"=".repeat(64)}`;
initialGebietsNr={windArea.gebiets_nr} initialGebietsNr={windArea.gebiets_nr}
hiddenStatuses={[]} hiddenStatuses={[]}
hiddenRings={["2km","5km"]} hiddenRings={["2km","5km"]}
fitBoundsMaxZoom={13}
fitBoundsPadding={[20, 20]} fitBoundsPadding={[20, 20]}
onselect={() => {}} onselect={() => {}}
/> />