vibes

frontend/src/components/map/MapPage.tsx

@@ -39,6 +39,7 @@ import { trackEvent } from '../../lib/analytics';
 import { INITIAL_VIEW_STATE } from '../../lib/consts';
 import { useLicense } from '../../hooks/useLicense';
 import UpgradeModal from '../ui/UpgradeModal';
+import { CloseIcon } from '../ui/icons/CloseIcon';
 import { SpinnerIcon } from '../ui/icons/SpinnerIcon';
 import { MapPinIcon } from '../ui/icons/MapPinIcon';
 import { BookmarkIcon } from '../ui/icons/BookmarkIcon';
@@ -203,13 +204,6 @@ export default function MapPage({
     ]
   );
 
-  const handleTravelTimeSetDestination = useCallback(
-    (index: number, slug: string, label: string) => {
-      travelTime.handleSetDestination(index, slug, label);
-    },
-    [travelTime.handleSetDestination]
-  );
-
   const handleTravelTimeRemoveEntry = useCallback(
     (index: number) => {
       const entry = travelTime.entries[index];
@@ -241,6 +235,16 @@ export default function MapPage({
     travelTimeEntries: travelTime.entries,
   });
 
+  const handleTravelTimeSetDestination = useCallback(
+    (index: number, slug: string, label: string, lat: number, lon: number) => {
+      travelTime.handleSetDestination(index, slug, label);
+      if (slug) {
+        mapFlyToRef.current?.(lat, lon, mapData.currentView?.zoom ?? INITIAL_VIEW_STATE.zoom);
+      }
+    },
+    [travelTime.handleSetDestination, mapData.currentView?.zoom]
+  );
+
   // First transit destination — used to pick the best central_postcode for journey display
   const journeyDest = useMemo(() => {
     const entry = travelTime.entries.find((e) => e.mode === 'transit' && e.slug);
@@ -439,14 +443,22 @@ export default function MapPage({
         ? mapData.postcodeData.length > 0
         : mapData.data.length > 0;
       if (hasData) {
-        // Wait for deck.gl to actually paint: in interleaved MapboxOverlay mode,
-        // hexagons render during MapLibre's rAF cycle. Double-rAF ensures at
-        // least one full paint has completed before we signal readiness.
-        requestAnimationFrame(() => {
-          requestAnimationFrame(() => {
-            window.__screenshot_ready = true;
-          });
-        });
+        // Wait for both deck.gl data AND MapLibre base map tile rendering.
+        // __map_idle is set by Map's onIdle callback, which fires after all
+        // tiles are loaded and rendered — critical for SwiftShader where
+        // edge tiles can lag behind the center.
+        const waitAndSignal = () => {
+          if (window.__map_idle) {
+            requestAnimationFrame(() => {
+              requestAnimationFrame(() => {
+                window.__screenshot_ready = true;
+              });
+            });
+          } else {
+            requestAnimationFrame(waitAndSignal);
+          }
+        };
+        waitAndSignal();
       }
     }
   }, [
@@ -854,6 +866,13 @@ export default function MapPage({
                 isActive={selection.rightPaneTab === 'properties'}
                 onClick={selection.handlePropertiesTabClick}
               />
+              <button
+                onClick={selection.handleCloseSelection}
+                className="px-2 flex items-center text-warm-400 hover:text-warm-700 dark:hover:text-warm-300"
+                title="Close pane"
+              >
+                <CloseIcon className="w-4 h-4" />
+              </button>
             </div>
 
             <div className="flex-1 overflow-hidden">