Fix crime & add actual listings

frontend/src/hooks/useDeckLayers.ts

@@ -11,6 +11,7 @@ import type {
   POI,
   FeatureMeta,
   Bounds,
+  ActualListing,
 } from '../types';
 import {
   DENSITY_GRADIENT,
@@ -21,6 +22,7 @@ import {
 import { getFeatureFillColor } from '../lib/map-utils';
 import type { TravelTimeEntry } from './useTravelTime';
 import { usePoiLayers } from './usePoiLayers';
+import { useListingLayers } from './useListingLayers';
 import { MarchingAntsExtension } from '../lib/MarchingAntsExtension';
 import { PieHexExtension } from '../lib/PieHexExtension';
 
@@ -30,6 +32,7 @@ interface UseDeckLayersProps {
   usePostcodeView: boolean;
   zoom: number;
   pois: POI[];
+  actualListings: ActualListing[];
   viewFeature: string | null;
   colorRange: [number, number] | null;
   filterRange: [number, number] | null;
@@ -71,6 +74,7 @@ export function useDeckLayers({
   usePostcodeView,
   zoom,
   pois,
+  actualListings,
   viewFeature,
   colorRange,
   filterRange,
@@ -101,6 +105,15 @@ export function useDeckLayers({
   const isDark = theme === 'dark';
   const densityGradient = isDark ? DENSITY_GRADIENT_DARK : DENSITY_GRADIENT;
   const { poiLayers, popupInfo, clearPopupInfo } = usePoiLayers({ pois, zoom, isDark });
+  const { listingLayers, listingPopup, clearListingPopup } = useListingLayers({
+    listings: actualListings,
+    zoom,
+    isDark,
+    hexagonData: data,
+    postcodeData,
+    resolution: usePostcodeView ? 0 : Math.round(zoom),
+    usePostcodeView,
+  });
 
   // --- Refs for deck.gl accessors ---
   const viewFeatureRef = useRef(viewFeature);
@@ -606,6 +619,7 @@ export function useDeckLayers({
     }
     if (marchingAntsLayer) baseLayers.push(marchingAntsLayer);
     if (currentLocationLayer) baseLayers.push(currentLocationLayer);
+    if (listingLayers.length > 0) baseLayers.push(...listingLayers);
     return baseLayers;
   }, [
     usePostcodeView,
@@ -616,19 +630,23 @@ export function useDeckLayers({
     poiLayers,
     marchingAntsLayer,
     currentLocationLayer,
+    listingLayers,
   ]);
 
   const handleMouseLeave = useCallback(() => {
     setHoverPosition(null);
     setHoveredPostcode(null);
     clearPopupInfo();
+    clearListingPopup();
     onHexagonHoverRef.current(null);
-  }, [clearPopupInfo]);
+  }, [clearPopupInfo, clearListingPopup]);
 
   return {
     layers,
     popupInfo,
     clearPopupInfo,
+    listingPopup,
+    clearListingPopup,
     hoverPosition,
     countRange,
     postcodeCountRange,