feat(web): auto fit bounds for map modal (#20345)

This commit is contained in:
Dag Stuan 2025-07-28 18:36:37 +02:00 committed by GitHub
parent d34670bae6
commit 66ea75072d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 19 additions and 13 deletions

View file

@ -56,6 +56,7 @@
popup?: import('svelte').Snippet<[{ marker: MapMarkerResponseDto }]>;
rounded?: boolean;
showSimpleControls?: boolean;
autoFitBounds?: boolean;
}
let {
@ -73,9 +74,21 @@
popup,
rounded = false,
showSimpleControls = true,
autoFitBounds = true,
}: Props = $props();
const initialCenter = center;
// Calculate initial bounds from markers once during initialization
const initialBounds = (() => {
if (!autoFitBounds || center || zoom !== undefined || !mapMarkers || mapMarkers.length === 0) {
return undefined;
}
const bounds = new maplibregl.LngLatBounds();
for (const marker of mapMarkers) {
bounds.extend([marker.lon, marker.lat]);
}
return bounds;
})();
let map: maplibregl.Map | undefined = $state();
let marker: maplibregl.Marker | null = null;
@ -277,7 +290,9 @@
style=""
class="h-full {rounded ? 'rounded-2xl' : 'rounded-none'}"
{zoom}
center={initialCenter}
{center}
bounds={initialBounds}
fitBoundsOptions={{ padding: 50, maxZoom: 15 }}
attributionControl={false}
diffStyleUpdates={true}
onload={(event) => {