From 0936103f0438f49f628c0d116ad33312554bad80 Mon Sep 17 00:00:00 2001 From: Maurice Date: Thu, 11 Jun 2026 15:44:44 +0200 Subject: [PATCH] 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). --- client/src/components/Map/MapView.tsx | 12 +++++++++++- client/src/components/Map/MapViewGL.tsx | 2 ++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/client/src/components/Map/MapView.tsx b/client/src/components/Map/MapView.tsx index 75493f4f..1beb3f1a 100644 --- a/client/src/components/Map/MapView.tsx +++ b/client/src/components/Map/MapView.tsx @@ -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 diff --git a/client/src/components/Map/MapViewGL.tsx b/client/src/components/Map/MapViewGL.tsx index 9e6f4745..fd40ce5a 100644 --- a/client/src/components/Map/MapViewGL.tsx +++ b/client/src/components/Map/MapViewGL.tsx @@ -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