mirror of
https://github.com/immich-app/immich
synced 2025-10-17 18:19:27 +00:00
feat(web): auto fit bounds for map modal (#20345)
This commit is contained in:
parent
d34670bae6
commit
66ea75072d
2 changed files with 19 additions and 13 deletions
|
|
@ -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) => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue