More

frontend/src/hooks/useMapData.ts

@@ -32,6 +32,9 @@ interface UseMapDataOptions {
   activeFeature: string | null;
   dragValue: [number, number] | null;
   dragData: HexagonData[] | null;
+  travelTimeEnabled: boolean;
+  travelTimeDestination: [number, number] | null;
+  travelTimeMode: string;
 }
 
 export function useMapData({
@@ -41,6 +44,9 @@ export function useMapData({
   activeFeature,
   dragValue,
   dragData,
+  travelTimeEnabled,
+  travelTimeDestination,
+  travelTimeMode,
 }: UseMapDataOptions) {
   const [rawData, setRawData] = useState<HexagonData[]>([]);
   const [postcodeData, setPostcodeData] = useState<PostcodeFeature[]>([]);
@@ -104,6 +110,10 @@ export function useMapData({
           });
           if (filtersStr) params.set('filters', filtersStr);
           params.set('fields', viewFeature || '');
+          if (travelTimeEnabled && travelTimeDestination) {
+            params.set('destination', `${travelTimeDestination[0]},${travelTimeDestination[1]}`);
+            params.set('mode', travelTimeMode);
+          }
           const res = await fetch(
             apiUrl('hexagons', params),
             authHeaders({
@@ -126,7 +136,7 @@ export function useMapData({
         clearTimeout(debounceRef.current);
       }
     };
-  }, [resolution, bounds, filters, buildFilterParam, viewFeature, usePostcodeView]);
+  }, [resolution, bounds, filters, buildFilterParam, viewFeature, usePostcodeView, travelTimeEnabled, travelTimeDestination, travelTimeMode]);
 
   const data = dragData ?? rawData;
 
@@ -187,6 +197,27 @@ export function useMapData({
     return null;
   }, [viewFeature, features, dataRange, activeFeature, dragValue]);
 
+  // Color range for travel time (computed from response data)
+  const travelTimeColorRange = useMemo((): [number, number] | null => {
+    if (!travelTimeEnabled || !travelTimeDestination) return null;
+    const vals: number[] = [];
+    for (const item of data) {
+      if (bounds) {
+        const { lat, lon } = item;
+        if (lat < bounds.south || lat > bounds.north || lon < bounds.west || lon > bounds.east)
+          continue;
+      }
+      const val = item.travel_time;
+      if (typeof val === 'number' && !isNaN(val)) vals.push(val);
+    }
+    if (vals.length === 0) return null;
+    vals.sort((a, b) => a - b);
+    return [
+      percentile(vals, COLOR_RANGE_LOW_PERCENTILE),
+      percentile(vals, COLOR_RANGE_HIGH_PERCENTILE),
+    ];
+  }, [travelTimeEnabled, travelTimeDestination, data, bounds]);
+
   const handleViewChange = useCallback(
     ({
       resolution: newRes,
@@ -226,6 +257,7 @@ export function useMapData({
     currentView,
     usePostcodeView,
     colorRange,
+    travelTimeColorRange,
     handleViewChange,
     setInitialView,
   };