More fixes

frontend/src/hooks/useDeckLayers.ts

@@ -1,7 +1,8 @@
 import { useCallback, useRef, useState, useMemo, useEffect } from 'react';
 import { H3HexagonLayer } from '@deck.gl/geo-layers';
-import { GeoJsonLayer, IconLayer, TextLayer } from '@deck.gl/layers';
+import { GeoJsonLayer, IconLayer, TextLayer, ScatterplotLayer } from '@deck.gl/layers';
 import { cellToBoundary } from 'h3-js';
+import Supercluster from 'supercluster';
 import type { PickingInfo } from '@deck.gl/core';
 import type {
   HexagonData,
@@ -12,7 +13,16 @@ import type {
   FeatureMeta,
   Bounds,
 } from '../types';
-import { DENSITY_GRADIENT, DENSITY_GRADIENT_DARK } from '../lib/consts';
+import {
+  DENSITY_GRADIENT,
+  DENSITY_GRADIENT_DARK,
+  POI_GROUP_COLORS,
+  POI_DEFAULT_COLOR,
+  MINOR_POI_CATEGORIES,
+  MINOR_POI_ZOOM_THRESHOLD,
+  POI_CLUSTER_RADIUS,
+  POI_CLUSTER_MAX_ZOOM,
+} from '../lib/consts';
 import { emojiToTwemojiUrl, getFeatureFillColor } from '../lib/map-utils';
 import {
   type TravelTimeEntry,
@@ -55,7 +65,18 @@ interface PopupInfo {
   y: number;
   name: string;
   category: string;
+  group: string;
+  emoji: string;
   id: string;
+  isCluster?: boolean;
+  clusterCount?: number;
+}
+
+interface ClusterPoint {
+  lng: number;
+  lat: number;
+  count: number;
+  clusterId: number;
 }
 
 export function useDeckLayers({
@@ -204,6 +225,8 @@ export function useDeckLayers({
         y: info.y,
         name: info.object.name,
         category: info.object.category,
+        group: info.object.group,
+        emoji: info.object.emoji,
         id: info.object.id,
       });
     } else {
@@ -217,6 +240,30 @@ export function useDeckLayers({
     handlePoiHoverRef.current(info);
   }, []);
 
+  const handleClusterHover = useCallback((info: PickingInfo<ClusterPoint>) => {
+    if (info.object && info.x !== undefined && info.y !== undefined) {
+      setPopupInfo({
+        x: info.x,
+        y: info.y,
+        name: `${info.object.count} places`,
+        category: 'Zoom in to see details',
+        group: '',
+        emoji: '',
+        id: '',
+        isCluster: true,
+        clusterCount: info.object.count,
+      });
+    } else {
+      setPopupInfo(null);
+    }
+  }, []);
+
+  const handleClusterHoverRef = useRef(handleClusterHover);
+  handleClusterHoverRef.current = handleClusterHover;
+  const stableClusterHover = useCallback((info: PickingInfo<ClusterPoint>) => {
+    handleClusterHoverRef.current(info);
+  }, []);
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handlePostcodeClick = useCallback((info: PickingInfo<any>) => {
     const pc = info.object?.properties?.postcode;
@@ -461,24 +508,147 @@ export function useDeckLayers({
     [postcodeData, theme]
   );
 
-  const poiLayer = useMemo(
+  // --- POI clustering ---
+  const clusterIndex = useMemo(() => {
+    if (pois.length === 0) return null;
+    const index = new Supercluster<POI>({
+      radius: POI_CLUSTER_RADIUS,
+      maxZoom: POI_CLUSTER_MAX_ZOOM,
+    });
+    const features: Supercluster.PointFeature<POI>[] = pois.map((poi) => ({
+      type: 'Feature',
+      geometry: { type: 'Point', coordinates: [poi.lng, poi.lat] },
+      properties: poi,
+    }));
+    index.load(features);
+    return index;
+  }, [pois]);
+
+  const clusterZoom = Math.floor(zoom);
+  const showMinorPois = zoom >= MINOR_POI_ZOOM_THRESHOLD;
+
+  const { visiblePois, clusters } = useMemo(() => {
+    if (!clusterIndex || pois.length === 0) {
+      return { visiblePois: [] as POI[], clusters: [] as ClusterPoint[] };
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const allFeatures = clusterIndex.getClusters([-180, -85, 180, 85], clusterZoom) as any[];
+    const individual: POI[] = [];
+    const clusterPoints: ClusterPoint[] = [];
+    for (const feature of allFeatures) {
+      if (feature.properties.cluster) {
+        clusterPoints.push({
+          lng: feature.geometry.coordinates[0],
+          lat: feature.geometry.coordinates[1],
+          count: feature.properties.point_count,
+          clusterId: feature.properties.cluster_id,
+        });
+      } else {
+        const poi = feature.properties as POI;
+        if (!showMinorPois && MINOR_POI_CATEGORIES.has(poi.category)) continue;
+        individual.push(poi);
+      }
+    }
+    return { visiblePois: individual, clusters: clusterPoints };
+  }, [clusterIndex, clusterZoom, showMinorPois, pois]);
+
+  // --- Individual POI layers (shadow → background → emoji) ---
+  const poiShadowLayer = useMemo(
+    () =>
+      new ScatterplotLayer<POI>({
+        id: 'poi-shadow',
+        data: visiblePois,
+        getPosition: (d) => [d.lng, d.lat],
+        getRadius: 16,
+        radiusUnits: 'pixels',
+        getFillColor: isDark ? [0, 0, 0, 50] : [0, 0, 0, 25],
+        pickable: false,
+        transitions: { getRadius: { duration: 300, enter: () => [0] } },
+      }),
+    [visiblePois, isDark]
+  );
+
+  const poiBackgroundLayer = useMemo(
+    () =>
+      new ScatterplotLayer<POI>({
+        id: 'poi-background',
+        data: visiblePois,
+        getPosition: (d) => [d.lng, d.lat],
+        getRadius: 14,
+        radiusUnits: 'pixels',
+        getFillColor: isDark ? [41, 37, 36, 255] : [255, 255, 255, 255],
+        getLineColor: (d) => {
+          const c = POI_GROUP_COLORS[d.group] || POI_DEFAULT_COLOR;
+          return [c[0], c[1], c[2], 255] as [number, number, number, number];
+        },
+        getLineWidth: 2.5,
+        lineWidthUnits: 'pixels',
+        stroked: true,
+        pickable: true,
+        onHover: stablePoiHover,
+        transitions: { getRadius: { duration: 300, enter: () => [0] } },
+      }),
+    [visiblePois, isDark, stablePoiHover]
+  );
+
+  const poiIconLayer = useMemo(
     () =>
       new IconLayer<POI>({
         id: 'poi-icons',
-        data: pois,
+        data: visiblePois,
         getPosition: (d) => [d.lng, d.lat],
         getIcon: (d) => ({
           url: emojiToTwemojiUrl(d.emoji),
           width: 72,
           height: 72,
         }),
-        getSize: 24,
-        sizeMinPixels: 20,
-        sizeMaxPixels: 40,
-        pickable: true,
-        onHover: stablePoiHover,
+        getSize: 18,
+        sizeUnits: 'pixels',
+        pickable: false,
+        transitions: { getSize: { duration: 300, enter: () => [0] } },
       }),
-    [pois, stablePoiHover]
+    [visiblePois]
+  );
+
+  // --- Cluster layers ---
+  const clusterCircleLayer = useMemo(
+    () =>
+      new ScatterplotLayer<ClusterPoint>({
+        id: 'poi-clusters',
+        data: clusters,
+        getPosition: (d) => [d.lng, d.lat],
+        getRadius: (d) => Math.min(30, 14 + Math.sqrt(d.count) * 2),
+        radiusUnits: 'pixels',
+        getFillColor: isDark ? [5, 129, 114, 220] : [20, 184, 166, 220],
+        getLineColor: [255, 255, 255, isDark ? 60 : 120],
+        getLineWidth: 2,
+        lineWidthUnits: 'pixels',
+        stroked: true,
+        pickable: true,
+        onHover: stableClusterHover,
+        transitions: { getRadius: { duration: 300, enter: () => [0] } },
+      }),
+    [clusters, isDark, stableClusterHover]
+  );
+
+  const clusterTextLayer = useMemo(
+    () =>
+      new TextLayer<ClusterPoint>({
+        id: 'poi-cluster-text',
+        data: clusters,
+        getPosition: (d) => [d.lng, d.lat],
+        getText: (d) =>
+          d.count >= 1000 ? `${(d.count / 1000).toFixed(1)}k` : String(d.count),
+        getSize: 12,
+        getColor: [255, 255, 255, 255],
+        fontWeight: 700,
+        fontFamily: 'Inter, system-ui, sans-serif',
+        getTextAnchor: 'middle',
+        getAlignmentBaseline: 'center',
+        sizeUnits: 'pixels',
+        pickable: false,
+      }),
+    [clusters]
   );
 
   // Marching ants highlight layer for selected hexagon or postcode
@@ -511,13 +681,18 @@ export function useDeckLayers({
     });
   }, [selectedPostcodeGeometry, selectedHexagonId, marchTime]);
 
+  const poiLayers = useMemo(
+    () => [poiShadowLayer, poiBackgroundLayer, poiIconLayer, clusterCircleLayer, clusterTextLayer],
+    [poiShadowLayer, poiBackgroundLayer, poiIconLayer, clusterCircleLayer, clusterTextLayer]
+  );
+
   const layers = useMemo(() => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const baseLayers: any[] = usePostcodeView
       ? zoom >= 16
-        ? [postcodeLayer, postcodeLabelsLayer, poiLayer]
-        : [postcodeLayer, poiLayer]
-      : [hexLayer, poiLayer];
+        ? [postcodeLayer, postcodeLabelsLayer, ...poiLayers]
+        : [postcodeLayer, ...poiLayers]
+      : [hexLayer, ...poiLayers];
     if (marchingAntsLayer) baseLayers.push(marchingAntsLayer);
     return baseLayers;
   }, [
@@ -526,7 +701,7 @@ export function useDeckLayers({
     hexLayer,
     postcodeLayer,
     postcodeLabelsLayer,
-    poiLayer,
+    poiLayers,
     marchingAntsLayer,
   ]);
 

frontend/src/hooks/useHexagonSelection.ts

@@ -16,13 +16,20 @@ interface SelectedHexagon {
   resolution: number;
 }
 
+interface JourneyDest {
+  mode: string;
+  slug: string;
+}
+
 interface UseHexagonSelectionOptions {
   filters: FeatureFilters;
   features: FeatureMeta[];
   resolution: number;
+  /** First transit destination — used to pick the best central_postcode for journey display. */
+  journeyDest?: JourneyDest | null;
 }
 
-export function useHexagonSelection({ filters, features, resolution }: UseHexagonSelectionOptions) {
+export function useHexagonSelection({ filters, features, resolution, journeyDest }: UseHexagonSelectionOptions) {
   const [selectedHexagon, setSelectedHexagon] = useState<SelectedHexagon | null>(null);
   const [properties, setProperties] = useState<Property[]>([]);
   const [propertiesTotal, setPropertiesTotal] = useState(0);
@@ -46,11 +53,15 @@ export function useHexagonSelection({ filters, features, resolution }: UseHexago
       if (fields) {
         params.set('fields', fields.join(','));
       }
+      if (journeyDest) {
+        params.set('journey_mode', journeyDest.mode);
+        params.set('journey_slug', journeyDest.slug);
+      }
       const response = await fetch(apiUrl('hexagon-stats', params), authHeaders({ signal }));
       assertOk(response, 'hexagon-stats');
       return (await response.json()) as HexagonStatsResponse;
     },
-    [filters, features]
+    [filters, features, journeyDest]
   );
 
   const fetchPostcodeStats = useCallback(

frontend/src/hooks/useTravelDestinations.ts

@@ -0,0 +1,46 @@
+import { useState, useEffect, useRef } from 'react';
+import { authHeaders, logNonAbortError } from '../lib/api';
+import type { TransportMode } from './useTravelTime';
+
+export interface Destination {
+  name: string;
+  slug: string;
+  place_type: string;
+  city?: string;
+}
+
+/** Fetches all travel-time destinations for a mode once, with client-side caching. */
+export function useTravelDestinations(mode: TransportMode) {
+  const [destinations, setDestinations] = useState<Destination[]>([]);
+  const [loading, setLoading] = useState(false);
+  const cacheRef = useRef<Partial<Record<TransportMode, Destination[]>>>({});
+
+  useEffect(() => {
+    if (cacheRef.current[mode]) {
+      setDestinations(cacheRef.current[mode]!);
+      return;
+    }
+
+    const controller = new AbortController();
+    setLoading(true);
+
+    fetch(
+      `/api/travel-destinations?mode=${mode}`,
+      authHeaders({ signal: controller.signal }),
+    )
+      .then((res) => {
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        return res.json();
+      })
+      .then((data: { destinations: Destination[] }) => {
+        cacheRef.current[mode] = data.destinations;
+        setDestinations(data.destinations);
+      })
+      .catch((err) => logNonAbortError('travel destinations', err))
+      .finally(() => setLoading(false));
+
+    return () => controller.abort();
+  }, [mode]);
+
+  return { destinations, loading };
+}

frontend/src/hooks/useTravelTime.ts

@@ -47,7 +47,7 @@ export function useTravelTime(initial?: TravelTimeInitial) {
     (index: number, slug: string, label: string) => {
       setEntries((prev) =>
         prev.map((entry, i) =>
-          i === index ? { ...entry, slug, label, timeRange: null } : entry
+          i === index ? { ...entry, slug, label, timeRange: slug ? [0, 120] : null } : entry
         )
       );
     },