viktor/wrongmove
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Auto-pan map to keep popup fully visible in viewport

Browse source 
When a property popup opens near the edge of the map, the map now
automatically pans so the entire popup is visible with 20px padding.
This commit is contained in:
Viktor Barzin 2026-02-15 15:27:51 +00:00
parent f6f0aa8d14
commit 6489012e8f
No known key found for this signature in database
GPG key ID: 0EB088298288D958
1 changed files with 20 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

20
frontend/src/components/Map.tsx
View file

@ -381,6 +381,26 @@ export function Map(props: MapProps) {
.setMaxWidth("450px")
.addTo(mapRef.current);
popup.on('close', () => root.unmount());
// Pan map to ensure popup is fully visible
requestAnimationFrame(() => {
const popupEl = popup.getElement();
if (!popupEl || !mapRef.current) return;
const popupRect = popupEl.getBoundingClientRect();
const mapRect = mapRef.current.getContainer().getBoundingClientRect();
const padding = 20;
let dx = 0, dy = 0;
if (popupRect.left < mapRect.left + padding)
dx = popupRect.left - mapRect.left - padding;
if (popupRect.right > mapRect.right - padding)
dx = popupRect.right - mapRect.right + padding;
if (popupRect.top < mapRect.top + padding)
dy = popupRect.top - mapRect.top - padding;
if (popupRect.bottom > mapRect.bottom - padding)
dy = popupRect.bottom - mapRect.bottom + padding;
if (dx !== 0 || dy !== 0)
mapRef.current.panBy([dx, dy], { duration: 300 });
});
}
}