fix(stellungnahme): Mini-Map mobile square + Gebiet zentriert (fitBoundsPadding-Prop)
This commit is contained in:
@@ -12,6 +12,7 @@
|
||||
hiddenStatuses = [],
|
||||
hiddenRings = [],
|
||||
fitBoundsMaxZoom = 11,
|
||||
fitBoundsPadding = null,
|
||||
}: {
|
||||
areas: WindArea[];
|
||||
onselect: (area: WindArea | null, center: [number, number] | null) => void;
|
||||
@@ -20,6 +21,10 @@
|
||||
hiddenStatuses?: string[];
|
||||
hiddenRings?: string[];
|
||||
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();
|
||||
|
||||
const t = useTranslate();
|
||||
@@ -166,9 +171,18 @@
|
||||
|
||||
if (zoom && prev !== name) {
|
||||
const desktop = window.innerWidth >= 640;
|
||||
map!.fitBounds((layer as import("leaflet").Polygon).getBounds(), {
|
||||
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(), {
|
||||
...pad,
|
||||
maxZoom: fitBoundsMaxZoom,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -616,7 +616,7 @@ ${"=".repeat(64)}`;
|
||||
</div>
|
||||
|
||||
<!-- 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">
|
||||
{#await MapComponent then Map}
|
||||
<Map
|
||||
@@ -624,6 +624,7 @@ ${"=".repeat(64)}`;
|
||||
initialGebietsNr={windArea.gebiets_nr}
|
||||
hiddenStatuses={[]}
|
||||
hiddenRings={["2km","5km"]}
|
||||
fitBoundsMaxZoom={13}
|
||||
fitBoundsPadding={[20, 20]}
|
||||
onselect={() => {}}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user