Fmt

frontend/src/components/learn/LearnPage.tsx

@@ -126,11 +126,7 @@ const DS_KEYS: Record<string, [string, string, string]> = {
     'learnPage.dsGreenspaceOrigin',
     'learnPage.dsGreenspaceUse',
   ],
-  'forest-research-tow': [
-    'learnPage.dsTowName',
-    'learnPage.dsTowOrigin',
-    'learnPage.dsTowUse',
-  ],
+  'forest-research-tow': ['learnPage.dsTowName', 'learnPage.dsTowOrigin', 'learnPage.dsTowUse'],
   naptan: ['learnPage.dsNaptanName', 'learnPage.dsNaptanOrigin', 'learnPage.dsNaptanUse'],
   noise: ['learnPage.dsNoiseName', 'learnPage.dsNoiseOrigin', 'learnPage.dsNoiseUse'],
   ofsted: ['learnPage.dsOfstedName', 'learnPage.dsOfstedOrigin', 'learnPage.dsOfstedUse'],

frontend/src/components/map/MapPage.tsx

@@ -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);

frontend/src/components/map/map-page/effects.ts

@@ -4,6 +4,7 @@ import type { MutableRefObject } from 'react';
 import type { PostcodeGeometry, ViewState } from '../../../types';
 import type { useMapData } from '../../../hooks/useMapData';
 import { authHeaders } from '../../../lib/api';
+import { POSTCODE_SEARCH_ZOOM } from '../../../lib/consts';
 import { canWheelScrollInsideTarget } from '../../../lib/dom-scroll';
 import type { MapFlyTo } from './types';
 
@@ -32,7 +33,7 @@ interface UseInitialPostcodeSelectionOptions {
     lat?: number,
     lng?: number
   ) => void;
-  onOpenMobileDrawer: () => void;
+  onOpenMobileDrawer: (target: { lat: number; lng: number; zoom: number }) => void;
 }
 
 export function useInitialPostcodeSelection({
@@ -62,9 +63,15 @@ export function useInitialPostcodeSelection({
           longitude: number;
           geometry: PostcodeGeometry;
         }) => {
-          flyTo.current?.(data.latitude, data.longitude, 16);
+          flyTo.current?.(data.latitude, data.longitude, POSTCODE_SEARCH_ZOOM);
           onLocationSearch(data.postcode, data.geometry, data.latitude, data.longitude);
-          if (isMobile) onOpenMobileDrawer();
+          if (isMobile) {
+            onOpenMobileDrawer({
+              lat: data.latitude,
+              lng: data.longitude,
+              zoom: POSTCODE_SEARCH_ZOOM,
+            });
+          }
         }
       )
       .catch(() => {