seems alright

frontend/src/components/map/MapPage.tsx

@@ -6,6 +6,7 @@ import type { SearchedLocation } from './LocationSearch';
 import { useMapData } from '../../hooks/useMapData';
 import { usePOIData } from '../../hooks/usePOIData';
 import { useActualListings } from '../../hooks/useActualListings';
+import { buildTravelParam } from '../../lib/travel-params';
 import { useFilters } from '../../hooks/useFilters';
 import { useHexagonSelection } from '../../hooks/useHexagonSelection';
 import { usePaneResize } from '../../hooks/usePaneResize';
@@ -15,7 +16,7 @@ import { useUrlSync } from '../../hooks/useUrlSync';
 import { useTutorial } from '../../hooks/useTutorial';
 import { getTutorialStyles } from '../../lib/tutorial-styles';
 import { travelFieldKey, useTravelTime } from '../../hooks/useTravelTime';
-import { apiUrl, authHeaders } from '../../lib/api';
+import { apiUrl, authHeaders, buildFilterString } from '../../lib/api';
 import { useFilterCounts } from '../../hooks/useFilterCounts';
 import { trackEvent } from '../../lib/analytics';
 import { INITIAL_VIEW_STATE, POSTCODE_SEARCH_ZOOM } from '../../lib/consts';
@@ -408,10 +409,15 @@ export default function MapPage({
   }, []);
 
   const pois = usePOIData(mapData.bounds, selectedPOICategories);
-  const { listings: actualListings } = useActualListings(
-    mapData.bounds,
-    mapData.currentView?.zoom ?? 0
+  const actualListingsFilterParam = useMemo(
+    () => buildFilterString(filters, features),
+    [filters, features]
   );
+  const actualListingsTravelParam = useMemo(() => buildTravelParam(entries), [entries]);
+  const { listings: actualListings } = useActualListings(mapData.bounds, {
+    filterParam: actualListingsFilterParam,
+    travelParam: actualListingsTravelParam,
+  });
   const [isAreaGroupExpanded, toggleAreaGroup] = useCollapsibleGroups(true);
 
   useUrlSync(
@@ -464,11 +470,7 @@ export default function MapPage({
     mapData.resolution,
     areaStats
   );
-  const tutorial = useTutorial(
-    initialLoading,
-    isMobile,
-    deferTutorial || mapData.licenseRequired
-  );
+  const tutorial = useTutorial(initialLoading, isMobile, deferTutorial || mapData.licenseRequired);
   const tutorialTheme = useMemo(() => getTutorialStyles(theme), [theme]);
   const densityLabel = t('mapLegend.historicalMatches');
   const hasActiveFilters = Object.keys(filters).length > 0 || activeEntries.length > 0;
@@ -499,15 +501,7 @@ export default function MapPage({
         entries,
         shareCode
       ).toString(),
-    [
-      entries,
-      features,
-      filters,
-      rightPaneTab,
-      selectedPOICategories,
-      shareCode,
-      shareAndSaveView,
-    ]
+    [entries, features, filters, rightPaneTab, selectedPOICategories, shareCode, shareAndSaveView]
   );
   const handleSaveSearch = useCallback(
     async (name: string) => {
@@ -652,11 +646,7 @@ export default function MapPage({
   };
 
   const exportToast = (
-    <ExportToast
-      notice={exportNotice}
-      closeLabel={t('common.close')}
-      onClose={clearExportNotice}
-    />
+    <ExportToast notice={exportNotice} closeLabel={t('common.close')} onClose={clearExportNotice} />
   );
   const toasts = exportToast;
 
@@ -671,9 +661,7 @@ export default function MapPage({
             i18nKey="savedPage.isBeingUpdated"
             values={{ name: editingSearch.name }}
             components={{
-              strong: (
-                <strong className="font-semibold text-navy-950 dark:text-warm-100" />
-              ),
+              strong: <strong className="font-semibold text-navy-950 dark:text-warm-100" />,
             }}
           />
         </span>