vibes

frontend/src/components/map/MapPage.tsx

@@ -27,8 +27,14 @@ import { useFilterCounts } from '../../hooks/useFilterCounts';
 import { trackEvent } from '../../lib/analytics';
 import { INITIAL_VIEW_STATE, POSTCODE_ZOOM_THRESHOLD } from '../../lib/consts';
 import type { OverlayId } from '../../lib/overlays';
+import type { BasemapId } from '../../lib/basemaps';
 import { useLicense } from '../../hooks/useLicense';
 import { stateToParams } from '../../lib/url-state';
+import { groupFeaturesByCategory } from '../../lib/features';
+import {
+  getActiveAmenityFilterFeatureNames,
+  isPoiFilterFeatureName,
+} from '../../lib/poi-distance-filter';
 import {
   AreaPane,
   Filters,
@@ -74,6 +80,7 @@ export default function MapPage({
   initialViewState,
   initialPOICategories,
   initialOverlays,
+  initialBasemap = 'standard',
   initialTab,
   initialLoading,
   theme,
@@ -107,6 +114,7 @@ export default function MapPage({
   const [activeOverlays, setActiveOverlays] = useState<Set<OverlayId>>(
     () => new Set(initialOverlays ?? [])
   );
+  const [basemap, setBasemap] = useState<BasemapId>(initialBasemap);
   const [leftPaneWidth, leftPaneHandlers] = usePaneResize(384, 200, 0.45, 'left');
   const [rightPaneWidth, rightPaneHandlers] = usePaneResize(384, 200, 0.45, 'right');
   const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false);
@@ -229,10 +237,10 @@ export default function MapPage({
           noBuses: parsed.noBuses,
           slug: tt.slug,
           label: tt.label,
-          timeRange: [
-            tt.min ?? 0,
-            Math.min(tt.max ?? MAX_TRAVEL_MINUTES, MAX_TRAVEL_MINUTES),
-          ] as [number, number],
+          timeRange: [tt.min ?? 0, Math.min(tt.max ?? MAX_TRAVEL_MINUTES, MAX_TRAVEL_MINUTES)] as [
+            number,
+            number,
+          ],
           useBest: false,
         }))
       );
@@ -300,6 +308,29 @@ export default function MapPage({
 
   const filterCounts = useFilterCounts(filters, features, mapData.bounds, entries, shareCode);
   const license = useLicense();
+  const [isAreaGroupExpanded, toggleAreaGroup] = useCollapsibleGroups(true);
+  const activeFilterNames = useMemo(() => new Set(Object.keys(filters)), [filters]);
+  const activeAmenityFeatureNames = useMemo(
+    () => getActiveAmenityFilterFeatureNames(filters),
+    [filters]
+  );
+  const areaStatsFields = useMemo(
+    () =>
+      groupFeaturesByCategory(features)
+        .filter((group) => isAreaGroupExpanded(group.name))
+        .flatMap((group) =>
+          group.features
+            .filter((feature) => {
+              if (group.name !== 'Amenities') return true;
+              if (isPoiFilterFeatureName(feature.name)) {
+                return activeAmenityFeatureNames.has(feature.name);
+              }
+              return activeFilterNames.has(feature.name);
+            })
+            .map((feature) => feature.name)
+        ),
+    [activeAmenityFeatureNames, activeFilterNames, features, isAreaGroupExpanded]
+  );
 
   const handleTravelTimeSetDestination = useCallback(
     (index: number, slug: string, label: string, _lat: number, _lon: number) => {
@@ -338,6 +369,7 @@ export default function MapPage({
     resolution: mapData.resolution,
     usePostcodeView: mapData.usePostcodeView,
     travelTimeEntries: entries,
+    areaStatsFields,
     shareCode,
     journeyDest,
   });
@@ -452,7 +484,7 @@ export default function MapPage({
   const actualListingsTravelParam = useMemo(() => buildTravelParam(entries), [entries]);
   const actualListingsEnabled = !__DEV__ || devActualListingsEnabled;
   const { listings: actualListings } = useActualListings(
-    actualListingsEnabled ? mapData.bounds : null,
+    actualListingsEnabled ? mapData.visibleBounds : null,
     {
       filterParam: actualListingsFilterParam,
       travelParam: actualListingsTravelParam,
@@ -464,7 +496,6 @@ export default function MapPage({
     if (!__DEV__) return;
     setDevActualListingsEnabled((enabled) => !enabled);
   }, []);
-  const [isAreaGroupExpanded, toggleAreaGroup] = useCollapsibleGroups(true);
 
   useUrlSync(
     mapData.currentView,
@@ -474,7 +505,8 @@ export default function MapPage({
     rightPaneTab,
     entries,
     shareCode,
-    activeOverlays
+    activeOverlays,
+    basemap
   );
 
   useInitialMapPageView(mapData, initialViewState, initialTab, setRightPaneTab);
@@ -548,10 +580,12 @@ export default function MapPage({
         rightPaneTab,
         entries,
         shareCode,
-        activeOverlays
+        activeOverlays,
+        basemap
       ).toString(),
     [
       activeOverlays,
+      basemap,
       entries,
       features,
       filters,
@@ -596,6 +630,7 @@ export default function MapPage({
         ogMode={ogMode}
         travelTimeEntries={entries}
         activeOverlays={activeOverlays}
+        basemap={basemap}
       />
     );
   }
@@ -656,6 +691,8 @@ export default function MapPage({
       <OverlayPane
         selectedOverlays={activeOverlays}
         onOverlaysChange={setActiveOverlays}
+        basemap={basemap}
+        onBasemapChange={setBasemap}
         zoomedIn={overlaysZoomedIn}
         onClose={() => setOverlayPaneOpen(false)}
       />
@@ -790,6 +827,7 @@ export default function MapPage({
         mapData={mapData}
         pois={pois}
         activeOverlays={activeOverlays}
+        basemap={basemap}
         mapViewFeature={mapViewFeature}
         filterRange={filterRange}
         viewSource={viewSource}
@@ -860,6 +898,7 @@ export default function MapPage({
       mapData={mapData}
       pois={pois}
       activeOverlays={activeOverlays}
+      basemap={basemap}
       mapViewFeature={mapViewFeature}
       filterRange={filterRange}
       viewSource={viewSource}