552 lines
19 KiB
TypeScript
552 lines
19 KiB
TypeScript
import { useCallback, useRef, useState, useMemo } from 'react';
|
|
import { H3HexagonLayer } from '@deck.gl/geo-layers';
|
|
import { GeoJsonLayer, IconLayer, TextLayer, ScatterplotLayer } from '@deck.gl/layers';
|
|
import type { PickingInfo } from '@deck.gl/core';
|
|
import type {
|
|
HexagonData,
|
|
PostcodeFeature,
|
|
PostcodeProperties,
|
|
POI,
|
|
FeatureMeta,
|
|
Bounds,
|
|
} from '../types';
|
|
import type { SearchedPostcode } from '../components/map/PostcodeSearch';
|
|
import { DENSITY_GRADIENT, DENSITY_GRADIENT_DARK } from '../lib/consts';
|
|
import { emojiToTwemojiUrl, getFeatureFillColor } from '../lib/map-utils';
|
|
|
|
/** Convert POI id (e.g. "n12345") to OpenStreetMap URL */
|
|
function osmIdToUrl(id: string): string | null {
|
|
const match = id.match(/^([nwr])(\d+)$/);
|
|
if (!match) return null;
|
|
const typeMap: Record<string, string> = { n: 'node', w: 'way', r: 'relation' };
|
|
return `https://www.openstreetmap.org/${typeMap[match[1]]}/${match[2]}`;
|
|
}
|
|
|
|
export { osmIdToUrl };
|
|
|
|
interface UseDeckLayersProps {
|
|
data: HexagonData[];
|
|
postcodeData: PostcodeFeature[];
|
|
usePostcodeView: boolean;
|
|
pois: POI[];
|
|
viewFeature: string | null;
|
|
colorRange: [number, number] | null;
|
|
filterRange: [number, number] | null;
|
|
features: FeatureMeta[];
|
|
selectedHexagonId: string | null;
|
|
hoveredHexagonId: string | null;
|
|
onHexagonClick: (id: string, isPostcode?: boolean) => void;
|
|
onHexagonHover: (h3: string | null, x?: number, y?: number) => void;
|
|
theme: 'light' | 'dark';
|
|
searchedPostcode?: SearchedPostcode | null;
|
|
bounds?: Bounds | null;
|
|
travelTimeEnabled?: boolean;
|
|
travelTimeDestination?: [number, number] | null;
|
|
travelTimeColorRange?: [number, number] | null;
|
|
travelTimeRange?: [number, number] | null;
|
|
}
|
|
|
|
export interface PopupInfo {
|
|
x: number;
|
|
y: number;
|
|
name: string;
|
|
category: string;
|
|
id: string;
|
|
}
|
|
|
|
export function useDeckLayers({
|
|
data,
|
|
postcodeData,
|
|
usePostcodeView,
|
|
pois,
|
|
viewFeature,
|
|
colorRange,
|
|
filterRange,
|
|
features,
|
|
selectedHexagonId,
|
|
hoveredHexagonId,
|
|
onHexagonClick,
|
|
onHexagonHover,
|
|
theme,
|
|
searchedPostcode,
|
|
bounds: viewportBounds,
|
|
travelTimeEnabled = false,
|
|
travelTimeDestination,
|
|
travelTimeColorRange,
|
|
travelTimeRange,
|
|
}: UseDeckLayersProps) {
|
|
const [popupInfo, setPopupInfo] = useState<PopupInfo | null>(null);
|
|
const [hoverPosition, setHoverPosition] = useState<{ x: number; y: number } | null>(null);
|
|
const [selectedPostcode, setSelectedPostcode] = useState<string | null>(null);
|
|
const [hoveredPostcode, setHoveredPostcode] = useState<string | null>(null);
|
|
|
|
const isDark = theme === 'dark';
|
|
const densityGradient = isDark ? DENSITY_GRADIENT_DARK : DENSITY_GRADIENT;
|
|
|
|
// --- Refs for deck.gl accessors (avoid re-creating layers on every change) ---
|
|
const viewFeatureRef = useRef(viewFeature);
|
|
viewFeatureRef.current = viewFeature;
|
|
const colorRangeRef = useRef(colorRange);
|
|
colorRangeRef.current = colorRange;
|
|
const filterRangeRef = useRef(filterRange);
|
|
filterRangeRef.current = filterRange;
|
|
const isDarkRef = useRef(isDark);
|
|
isDarkRef.current = isDark;
|
|
const densityGradientRef = useRef(densityGradient);
|
|
densityGradientRef.current = densityGradient;
|
|
const selectedHexagonIdRef = useRef(selectedHexagonId);
|
|
selectedHexagonIdRef.current = selectedHexagonId;
|
|
const hoveredHexagonIdRef = useRef(hoveredHexagonId);
|
|
hoveredHexagonIdRef.current = hoveredHexagonId;
|
|
const selectedPostcodeRef = useRef(selectedPostcode);
|
|
selectedPostcodeRef.current = selectedPostcode;
|
|
const hoveredPostcodeRef = useRef(hoveredPostcode);
|
|
hoveredPostcodeRef.current = hoveredPostcode;
|
|
|
|
const travelTimeEnabledRef = useRef(travelTimeEnabled);
|
|
travelTimeEnabledRef.current = travelTimeEnabled;
|
|
const travelTimeDestinationRef = useRef(travelTimeDestination);
|
|
travelTimeDestinationRef.current = travelTimeDestination;
|
|
const travelTimeColorRangeRef = useRef(travelTimeColorRange);
|
|
travelTimeColorRangeRef.current = travelTimeColorRange;
|
|
const travelTimeRangeRef = useRef(travelTimeRange);
|
|
travelTimeRangeRef.current = travelTimeRange;
|
|
|
|
const colorFeatureMeta = useMemo(
|
|
() => (viewFeature ? features.find((f) => f.name === viewFeature) || null : null),
|
|
[viewFeature, features]
|
|
);
|
|
const colorFeatureMetaRef = useRef(colorFeatureMeta);
|
|
colorFeatureMetaRef.current = colorFeatureMeta;
|
|
|
|
// --- Count ranges ---
|
|
const countRange = useMemo(() => {
|
|
if (data.length === 0) return { min: 0, max: 1 };
|
|
let min = Infinity;
|
|
let max = -Infinity;
|
|
for (const d of data) {
|
|
if (viewportBounds) {
|
|
if (
|
|
d.lat < viewportBounds.south ||
|
|
d.lat > viewportBounds.north ||
|
|
d.lon < viewportBounds.west ||
|
|
d.lon > viewportBounds.east
|
|
)
|
|
continue;
|
|
}
|
|
const c = d.count as number;
|
|
if (c < min) min = c;
|
|
if (c > max) max = c;
|
|
}
|
|
if (min === Infinity) return { min: 0, max: 1 };
|
|
if (min === max) return { min, max: min + 1 };
|
|
return { min, max };
|
|
}, [data, viewportBounds]);
|
|
|
|
const countRangeRef = useRef(countRange);
|
|
countRangeRef.current = countRange;
|
|
|
|
const postcodeCountRange = useMemo(() => {
|
|
if (postcodeData.length === 0) return { min: 0, max: 1 };
|
|
let min = Infinity;
|
|
let max = -Infinity;
|
|
for (const d of postcodeData) {
|
|
if (viewportBounds) {
|
|
const [lng, lat] = d.properties.centroid as [number, number];
|
|
if (
|
|
lat < viewportBounds.south ||
|
|
lat > viewportBounds.north ||
|
|
lng < viewportBounds.west ||
|
|
lng > viewportBounds.east
|
|
)
|
|
continue;
|
|
}
|
|
const c = d.properties.count;
|
|
if (c < min) min = c;
|
|
if (c > max) max = c;
|
|
}
|
|
if (min === Infinity) return { min: 0, max: 1 };
|
|
if (min === max) return { min, max: min + 1 };
|
|
return { min, max };
|
|
}, [postcodeData, viewportBounds]);
|
|
|
|
const postcodeCountRangeRef = useRef(postcodeCountRange);
|
|
postcodeCountRangeRef.current = postcodeCountRange;
|
|
|
|
// --- Click/hover handlers ---
|
|
const onHexagonClickRef = useRef(onHexagonClick);
|
|
onHexagonClickRef.current = onHexagonClick;
|
|
const handleHexagonClick = useCallback((info: PickingInfo<HexagonData>) => {
|
|
if (info.object && 'h3' in info.object) {
|
|
onHexagonClickRef.current(info.object.h3);
|
|
}
|
|
}, []);
|
|
|
|
const onHexagonHoverRef = useRef(onHexagonHover);
|
|
onHexagonHoverRef.current = onHexagonHover;
|
|
const handleHexagonHover = useCallback((info: PickingInfo<HexagonData>) => {
|
|
if (info.object && 'h3' in info.object && info.x !== undefined && info.y !== undefined) {
|
|
setHoverPosition({ x: info.x, y: info.y });
|
|
onHexagonHoverRef.current(info.object.h3, info.x, info.y);
|
|
} else {
|
|
setHoverPosition(null);
|
|
onHexagonHoverRef.current(null);
|
|
}
|
|
}, []);
|
|
|
|
const handlePoiHover = useCallback((info: PickingInfo<POI>) => {
|
|
if (info.object && info.x !== undefined && info.y !== undefined) {
|
|
setPopupInfo({
|
|
x: info.x,
|
|
y: info.y,
|
|
name: info.object.name,
|
|
category: info.object.category,
|
|
id: info.object.id,
|
|
});
|
|
} else {
|
|
setPopupInfo(null);
|
|
}
|
|
}, []);
|
|
|
|
const handlePoiHoverRef = useRef(handlePoiHover);
|
|
handlePoiHoverRef.current = handlePoiHover;
|
|
const stablePoiHover = useCallback((info: PickingInfo<POI>) => {
|
|
handlePoiHoverRef.current(info);
|
|
}, []);
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
const handlePostcodeClick = useCallback((info: PickingInfo<any>) => {
|
|
const pc = info.object?.properties?.postcode;
|
|
if (pc) {
|
|
setSelectedPostcode((prev) => (prev === pc ? null : pc));
|
|
onHexagonClickRef.current(pc, true);
|
|
}
|
|
}, []);
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
const handlePostcodeHoverCallback = useCallback((info: PickingInfo<any>) => {
|
|
const pc = info.object?.properties?.postcode;
|
|
if (pc && info.x !== undefined && info.y !== undefined) {
|
|
setHoveredPostcode(pc);
|
|
setHoverPosition({ x: info.x, y: info.y });
|
|
onHexagonHoverRef.current(pc, info.x, info.y);
|
|
} else {
|
|
setHoveredPostcode(null);
|
|
setHoverPosition(null);
|
|
onHexagonHoverRef.current(null);
|
|
}
|
|
}, []);
|
|
|
|
// --- Color triggers ---
|
|
const ttTrigger = `${travelTimeEnabled}|${travelTimeColorRange?.[0]}|${travelTimeColorRange?.[1]}|${travelTimeRange?.[0]}|${travelTimeRange?.[1]}|${travelTimeDestination?.[0]}|${travelTimeDestination?.[1]}`;
|
|
const colorTrigger = `${viewFeature}|${colorRange?.[0]}|${colorRange?.[1]}|${filterRange?.[0]}|${filterRange?.[1]}|${countRange.min}|${countRange.max}|${selectedHexagonId}|${hoveredHexagonId}|${theme}|${ttTrigger}`;
|
|
const postcodeColorTrigger = `${viewFeature}|${colorRange?.[0]}|${colorRange?.[1]}|${filterRange?.[0]}|${filterRange?.[1]}|${postcodeCountRange.min}|${postcodeCountRange.max}|${selectedPostcode}|${hoveredPostcode}|${theme}|${ttTrigger}`;
|
|
|
|
// --- Layers ---
|
|
const hexLayer = useMemo(
|
|
() =>
|
|
new H3HexagonLayer<HexagonData>({
|
|
id: 'h3-hexagons',
|
|
data,
|
|
getHexagon: (d) => d.h3,
|
|
getFillColor: (d) => {
|
|
const dark = isDarkRef.current;
|
|
// Travel time coloring takes priority
|
|
if (travelTimeEnabledRef.current && travelTimeDestinationRef.current) {
|
|
const ttVal = d.travel_time;
|
|
const ttClr = travelTimeColorRangeRef.current;
|
|
if (ttVal == null) {
|
|
return (dark ? [80, 70, 65, 80] : [128, 128, 128, 80]) as [number, number, number, number];
|
|
}
|
|
const ttFr = travelTimeRangeRef.current;
|
|
if (ttFr && ((ttVal as number) < ttFr[0] || (ttVal as number) > ttFr[1])) {
|
|
return (dark ? [60, 55, 50, 60] : [180, 180, 180, 60]) as [number, number, number, number];
|
|
}
|
|
if (ttClr) {
|
|
return getFeatureFillColor(
|
|
ttVal as number,
|
|
ttVal as number,
|
|
ttVal as number,
|
|
ttClr,
|
|
null,
|
|
0,
|
|
densityGradientRef.current,
|
|
dark,
|
|
255
|
|
);
|
|
}
|
|
}
|
|
const vf = viewFeatureRef.current;
|
|
const clr = colorRangeRef.current;
|
|
const fr = filterRangeRef.current;
|
|
const cfm = colorFeatureMetaRef.current;
|
|
if (vf && clr && cfm) {
|
|
const val = d[`avg_${vf}`] ?? d[`min_${vf}`];
|
|
const minVal = d[`min_${vf}`] as number | undefined;
|
|
const maxVal = d[`max_${vf}`] as number | undefined;
|
|
return getFeatureFillColor(
|
|
val as number | null | undefined,
|
|
minVal,
|
|
maxVal,
|
|
clr,
|
|
fr,
|
|
0,
|
|
densityGradientRef.current,
|
|
dark,
|
|
255
|
|
);
|
|
}
|
|
const cr = countRangeRef.current;
|
|
const c = d.count as number;
|
|
const t = (c - cr.min) / (cr.max - cr.min);
|
|
return getFeatureFillColor(
|
|
null,
|
|
undefined,
|
|
undefined,
|
|
null,
|
|
null,
|
|
t,
|
|
densityGradientRef.current,
|
|
dark,
|
|
255
|
|
);
|
|
},
|
|
getLineColor: (d) => {
|
|
if (d.h3 === selectedHexagonIdRef.current)
|
|
return [255, 255, 255, 255] as [number, number, number, number];
|
|
if (d.h3 === hoveredHexagonIdRef.current)
|
|
return [29, 228, 195, 200] as [number, number, number, number];
|
|
return [0, 0, 0, 0] as [number, number, number, number];
|
|
},
|
|
getLineWidth: (d) => {
|
|
if (d.h3 === selectedHexagonIdRef.current) return 3;
|
|
if (d.h3 === hoveredHexagonIdRef.current) return 2;
|
|
return 0;
|
|
},
|
|
lineWidthUnits: 'pixels',
|
|
updateTriggers: {
|
|
getFillColor: [colorTrigger],
|
|
getLineColor: [colorTrigger],
|
|
getLineWidth: [colorTrigger],
|
|
},
|
|
extruded: false,
|
|
pickable: true,
|
|
opacity: 1,
|
|
highPrecision: true,
|
|
onClick: handleHexagonClick,
|
|
onHover: handleHexagonHover,
|
|
// @ts-expect-error beforeId is a MapboxOverlay interleave prop, not typed in LayerProps
|
|
beforeId: 'landuse_park',
|
|
}),
|
|
[data, colorTrigger, handleHexagonClick, handleHexagonHover]
|
|
);
|
|
|
|
const postcodeLayer = useMemo(
|
|
() =>
|
|
new GeoJsonLayer<PostcodeProperties>({
|
|
id: 'postcode-polygons',
|
|
data: postcodeData as PostcodeFeature[],
|
|
getFillColor: (f) => {
|
|
const d = f.properties;
|
|
const vf = viewFeatureRef.current;
|
|
const clr = colorRangeRef.current;
|
|
const fr = filterRangeRef.current;
|
|
const cfm = colorFeatureMetaRef.current;
|
|
const dark = isDarkRef.current;
|
|
if (vf && clr && cfm) {
|
|
const val = d[`avg_${vf}`] ?? d[`min_${vf}`];
|
|
const minVal = d[`min_${vf}`] as number | undefined;
|
|
const maxVal = d[`max_${vf}`] as number | undefined;
|
|
return getFeatureFillColor(
|
|
val as number | null | undefined,
|
|
minVal,
|
|
maxVal,
|
|
clr,
|
|
fr,
|
|
0,
|
|
densityGradientRef.current,
|
|
dark,
|
|
180
|
|
);
|
|
}
|
|
const cr = postcodeCountRangeRef.current;
|
|
const c = d.count;
|
|
const t = (c - cr.min) / (cr.max - cr.min);
|
|
return getFeatureFillColor(
|
|
null,
|
|
undefined,
|
|
undefined,
|
|
null,
|
|
null,
|
|
t,
|
|
densityGradientRef.current,
|
|
dark,
|
|
180
|
|
);
|
|
},
|
|
getLineColor: (f) => {
|
|
const pc = f.properties.postcode;
|
|
const dark = isDarkRef.current;
|
|
if (pc === selectedPostcodeRef.current)
|
|
return [255, 255, 255, 255] as [number, number, number, number];
|
|
if (pc === hoveredPostcodeRef.current)
|
|
return [29, 228, 195, 200] as [number, number, number, number];
|
|
return (dark ? [180, 170, 160, 100] : [100, 100, 100, 150]) as [
|
|
number,
|
|
number,
|
|
number,
|
|
number,
|
|
];
|
|
},
|
|
getLineWidth: (f) => {
|
|
const pc = f.properties.postcode;
|
|
if (pc === selectedPostcodeRef.current) return 3;
|
|
if (pc === hoveredPostcodeRef.current) return 2;
|
|
return 1;
|
|
},
|
|
lineWidthUnits: 'pixels',
|
|
updateTriggers: {
|
|
getFillColor: [postcodeColorTrigger],
|
|
getLineColor: [postcodeColorTrigger],
|
|
getLineWidth: [postcodeColorTrigger],
|
|
},
|
|
extruded: false,
|
|
pickable: true,
|
|
onClick: handlePostcodeClick,
|
|
onHover: handlePostcodeHoverCallback,
|
|
// @ts-expect-error beforeId is a MapboxOverlay interleave prop, not typed in LayerProps
|
|
beforeId: 'landuse_park',
|
|
}),
|
|
[postcodeData, postcodeColorTrigger, handlePostcodeClick, handlePostcodeHoverCallback]
|
|
);
|
|
|
|
const postcodeLabelsLayer = useMemo(
|
|
() =>
|
|
new TextLayer<PostcodeFeature>({
|
|
id: 'postcode-labels',
|
|
data: postcodeData,
|
|
getPosition: (f) => f.properties.centroid,
|
|
getText: (f) => f.properties.postcode,
|
|
getSize: 12,
|
|
getColor: theme === 'dark' ? [255, 255, 255, 240] : [40, 40, 40, 220],
|
|
getTextAnchor: 'middle',
|
|
getAlignmentBaseline: 'center',
|
|
fontFamily: 'Inter, system-ui, sans-serif',
|
|
fontWeight: 600,
|
|
outlineWidth: 2,
|
|
outlineColor: theme === 'dark' ? [30, 30, 30, 200] : [255, 255, 255, 200],
|
|
sizeUnits: 'pixels',
|
|
sizeMinPixels: 10,
|
|
sizeMaxPixels: 14,
|
|
billboard: false,
|
|
pickable: false,
|
|
}),
|
|
[postcodeData, theme]
|
|
);
|
|
|
|
const poiLayer = useMemo(
|
|
() =>
|
|
new IconLayer<POI>({
|
|
id: 'poi-icons',
|
|
data: pois,
|
|
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,
|
|
}),
|
|
[pois, stablePoiHover]
|
|
);
|
|
|
|
// Check if the searched postcode has data (passes current filters)
|
|
const searchedPostcodeHasData = useMemo(() => {
|
|
if (!searchedPostcode) return false;
|
|
return postcodeData.some((f) => f.properties.postcode === searchedPostcode.postcode);
|
|
}, [searchedPostcode, postcodeData]);
|
|
|
|
// Highlight layer for searched postcode
|
|
const searchedPostcodeHighlightLayer = useMemo(() => {
|
|
if (!searchedPostcode) return null;
|
|
const hasData = searchedPostcodeHasData;
|
|
const feature = {
|
|
type: 'Feature' as const,
|
|
geometry: searchedPostcode.geometry,
|
|
properties: {},
|
|
};
|
|
return new GeoJsonLayer({
|
|
id: 'searched-postcode-highlight',
|
|
data: [feature],
|
|
getFillColor: hasData
|
|
? [29, 228, 195, 40] // teal tint when has data
|
|
: [255, 180, 0, 30], // orange tint when filtered out
|
|
getLineColor: hasData
|
|
? [29, 228, 195, 255] // solid teal when has data
|
|
: [255, 180, 0, 200], // orange when filtered out (no matching properties)
|
|
getLineWidth: hasData ? 4 : 3,
|
|
lineWidthUnits: 'pixels',
|
|
stroked: true,
|
|
filled: true,
|
|
pickable: false,
|
|
});
|
|
}, [searchedPostcode, searchedPostcodeHasData]);
|
|
|
|
const destinationMarkerLayer = useMemo(() => {
|
|
if (!travelTimeEnabled || !travelTimeDestination) return null;
|
|
return new ScatterplotLayer({
|
|
id: 'travel-time-destination',
|
|
data: [{ position: [travelTimeDestination[1], travelTimeDestination[0]] }],
|
|
getPosition: (d: { position: [number, number] }) => d.position,
|
|
getRadius: 8,
|
|
getFillColor: [239, 68, 68, 220],
|
|
getLineColor: [255, 255, 255, 255],
|
|
getLineWidth: 2,
|
|
lineWidthUnits: 'pixels' as const,
|
|
radiusUnits: 'pixels' as const,
|
|
stroked: true,
|
|
pickable: false,
|
|
});
|
|
}, [travelTimeEnabled, travelTimeDestination]);
|
|
|
|
const layers = useMemo(() => {
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
const baseLayers: any[] = usePostcodeView
|
|
? [postcodeLayer, postcodeLabelsLayer, poiLayer]
|
|
: [hexLayer, poiLayer];
|
|
if (searchedPostcodeHighlightLayer) baseLayers.push(searchedPostcodeHighlightLayer);
|
|
if (destinationMarkerLayer) baseLayers.push(destinationMarkerLayer);
|
|
return baseLayers;
|
|
}, [
|
|
usePostcodeView,
|
|
hexLayer,
|
|
postcodeLayer,
|
|
postcodeLabelsLayer,
|
|
poiLayer,
|
|
searchedPostcodeHighlightLayer,
|
|
destinationMarkerLayer,
|
|
]);
|
|
|
|
const handleMouseLeave = useCallback(() => {
|
|
setHoverPosition(null);
|
|
setHoveredPostcode(null);
|
|
setPopupInfo(null);
|
|
onHexagonHoverRef.current(null);
|
|
}, []);
|
|
|
|
return {
|
|
layers,
|
|
popupInfo,
|
|
hoverPosition,
|
|
countRange,
|
|
postcodeCountRange,
|
|
colorFeatureMeta,
|
|
handleMouseLeave,
|
|
selectedPostcode,
|
|
hoveredPostcode,
|
|
};
|
|
}
|