This commit is contained in:
Andras Schmelczer 2026-05-13 08:00:12 +01:00
parent 63713c3a2b
commit bd6b511f16
17 changed files with 544 additions and 377 deletions

View file

@ -17,7 +17,7 @@ import { travelFieldKey, useTravelTime } from '../../hooks/useTravelTime';
import { apiUrl, authHeaders } from '../../lib/api';
import { useFilterCounts } from '../../hooks/useFilterCounts';
import { trackEvent } from '../../lib/analytics';
import { INITIAL_VIEW_STATE } from '../../lib/consts';
import { INITIAL_VIEW_STATE, POSTCODE_SEARCH_ZOOM } from '../../lib/consts';
import { useLicense } from '../../hooks/useLicense';
import {
AreaPane,
@ -51,6 +51,8 @@ import type { MapFlyTo, MapPageProps } from './map-page/types';
export type { ExportState } from './map-page/types';
type PendingFlyTo = { lat: number; lng: number; zoom: number };
export default function MapPage({
features,
poiCategoryGroups,
@ -150,6 +152,7 @@ export default function MapPage({
const mapFlyToRef = useRef<MapFlyTo | null>(null);
const pendingCurrentLocationFlyToRef = useRef<{ lat: number; lng: number } | null>(null);
const pendingLocationSearchFlyToRef = useRef<PendingFlyTo | null>(null);
const mobileDrawerPanelRectRef = useRef<DOMRectReadOnly | null>(null);
const mapData = useMapData({
@ -296,11 +299,27 @@ export default function MapPage({
journeyDest,
});
const consumePendingLocationSearchFlyTo = useCallback((rect?: DOMRectReadOnly | null) => {
const pending = pendingLocationSearchFlyToRef.current;
const panelRect = rect ?? mobileDrawerPanelRectRef.current;
if (!pending || !panelRect) return;
const bottomInset = Math.max(0, window.innerHeight - panelRect.top);
const flyTo = mapFlyToRef.current;
if (!flyTo) return;
flyTo(pending.lat, pending.lng, pending.zoom, {
visibleViewportArea: { bottom: bottomInset },
});
pendingLocationSearchFlyToRef.current = null;
}, []);
const handleLocationSearchResult = useCallback(
(result: SearchedLocation | null) => {
if (result) {
if (result.markerLatitude != null && result.markerLongitude != null) {
setCurrentLocation({ lat: result.markerLatitude, lng: result.markerLongitude });
const markerLat = result.markerLatitude;
const markerLng = result.markerLongitude;
if (markerLat != null && markerLng != null) {
setCurrentLocation({ lat: markerLat, lng: markerLng });
} else {
setCurrentLocation(null);
}
@ -312,13 +331,22 @@ export default function MapPage({
result.openProperties,
result.focusAddress
);
if (isMobile) setMobileDrawerOpen(true);
if (isMobile) {
pendingLocationSearchFlyToRef.current = {
lat: markerLat ?? result.latitude,
lng: markerLng ?? result.longitude,
zoom: result.openProperties ? 17 : POSTCODE_SEARCH_ZOOM,
};
setMobileDrawerOpen(true);
consumePendingLocationSearchFlyTo();
}
} else {
setCurrentLocation(null);
pendingLocationSearchFlyToRef.current = null;
handleCloseSelection();
}
},
[handleCloseSelection, handleLocationSearch, isMobile]
[consumePendingLocationSearchFlyTo, handleCloseSelection, handleLocationSearch, isMobile]
);
const consumePendingCurrentLocationFlyTo = useCallback((rect?: DOMRectReadOnly | null) => {
@ -327,7 +355,9 @@ export default function MapPage({
if (!pending || !panelRect) return;
const bottomInset = Math.max(0, window.innerHeight - panelRect.top);
mapFlyToRef.current?.(pending.lat, pending.lng, 17, {
const flyTo = mapFlyToRef.current;
if (!flyTo) return;
flyTo(pending.lat, pending.lng, 17, {
visibleViewportArea: { bottom: bottomInset },
});
pendingCurrentLocationFlyToRef.current = null;
@ -352,12 +382,14 @@ export default function MapPage({
(rect: DOMRectReadOnly) => {
mobileDrawerPanelRectRef.current = rect;
consumePendingCurrentLocationFlyTo(rect);
consumePendingLocationSearchFlyTo(rect);
},
[consumePendingCurrentLocationFlyTo]
[consumePendingCurrentLocationFlyTo, consumePendingLocationSearchFlyTo]
);
const handleMobileDrawerClose = useCallback(() => {
pendingCurrentLocationFlyToRef.current = null;
pendingLocationSearchFlyToRef.current = null;
mobileDrawerPanelRectRef.current = null;
setMobileDrawerOpen(false);
}, []);
@ -387,7 +419,11 @@ export default function MapPage({
isMobile,
flyTo: mapFlyToRef,
onLocationSearch: handleLocationSearch,
onOpenMobileDrawer: () => setMobileDrawerOpen(true),
onOpenMobileDrawer: (target) => {
pendingLocationSearchFlyToRef.current = target;
setMobileDrawerOpen(true);
consumePendingLocationSearchFlyTo();
},
});
useHorizontalSwipeNavigationGuard();
useMobileBackNavigationGuard(isMobile);