mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-06-19 05:11:46 +00:00
fix(map): centre a clicked place above the bottom inspector panel
Selecting a place panned/flew it to the dead centre of the screen, where it sat behind the detail card. Both overlays now bias the target into the visible area above the bottom panel (Leaflet offsets the pan by the inspector inset; Mapbox passes the padding to flyTo).
This commit is contained in:
@@ -134,7 +134,17 @@ function SelectionController({ places, selectedPlaceId, dayPlaces, paddingOpts }
|
||||
// Pan to the selected place without changing zoom
|
||||
const selected = places.find(p => p.id === selectedPlaceId)
|
||||
if (selected?.lat && selected?.lng) {
|
||||
map.panTo([selected.lat, selected.lng], { animate: true })
|
||||
const latlng: [number, number] = [selected.lat, selected.lng]
|
||||
const tl = (paddingOpts as { paddingTopLeft?: [number, number] }).paddingTopLeft
|
||||
const br = (paddingOpts as { paddingBottomRight?: [number, number] }).paddingBottomRight
|
||||
if (tl && br && typeof map.project === 'function' && typeof map.unproject === 'function') {
|
||||
// Bias the place into the area above the bottom inspector panel instead of
|
||||
// dead-centre, so it doesn't sit behind the detail card.
|
||||
const point = map.project(latlng).add([(br[0] - tl[0]) / 2, (br[1] - tl[1]) / 2])
|
||||
map.panTo(map.unproject(point), { animate: true })
|
||||
} else {
|
||||
map.panTo(latlng, { animate: true })
|
||||
}
|
||||
}
|
||||
}
|
||||
prev.current = selectedPlaceId
|
||||
|
||||
@@ -553,6 +553,8 @@ export function MapViewGL({
|
||||
zoom: Math.max(map.getZoom(), 14),
|
||||
pitch: mapbox3d ? 45 : 0,
|
||||
duration: 400,
|
||||
// Bias the place above the bottom inspector panel instead of dead-centre.
|
||||
padding: paddingOpts,
|
||||
})
|
||||
} catch { /* noop */ }
|
||||
}, [selectedPlaceId, mapbox3d]) // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
Reference in New Issue
Block a user