Map Circle Cluster

1"use client"
2 
3import { useEffect, useId, useRef } from "react"
4import type mapboxgl from "mapbox-gl"
5import { useMap } from "./hooks"
6import type { MapCoordinates } from "./types"
7 
8type MapCircleClusterProps<P extends GeoJSON.GeoJsonProperties = GeoJSON.GeoJsonProperties> = {
9  /** GeoJSON FeatureCollection data or URL to fetch GeoJSON from */
10  data: string | GeoJSON.FeatureCollection<GeoJSON.Point, P>
11  /** Maximum zoom level to cluster points on (default: 14) */
12  clusterMaxZoom?: number
13  /** Radius of each cluster when clustering points in pixels (default: 50) */
14  clusterRadius?: number
15  /** Colors for cluster circles: [small, medium, large] based on point count (default: ["#51bbd6", "#f1f075", "#f28cb1"]) */
16  clusterColors?: [string, string, string]
17  /** Point count thresholds for color/size steps: [medium, large] (default: [100, 750]) */
18  clusterThresholds?: [number, number]
19  /** Color for unclustered individual points (default: "#3b82f6") */
20  pointColor?: string
21  /** Callback when an unclustered point is clicked */
22  onPointClick?: (feature: GeoJSON.Feature<GeoJSON.Point, P>, coordinates: MapCoordinates) => void
23  /** Callback when a cluster is clicked. If not provided, zooms into the cluster */
24  onClusterClick?: (clusterId: number, coordinates: MapCoordinates, pointCount: number) => void
25}
26 
27export function MapCircleCluster<P extends GeoJSON.GeoJsonProperties = GeoJSON.GeoJsonProperties>({
28  data,
29  clusterMaxZoom = 14,
30  clusterRadius = 50,
31  clusterColors = ["#be123c", "#1d4ed8", "#f28cb1"],
32  clusterThresholds = [100, 750],
33  pointColor = "#3b82f6",
34  onPointClick,
35  onClusterClick,
36}: MapCircleClusterProps<P>) {
37  const { map, isLoaded } = useMap()
38  const id = useId()
39  const sourceId = `cluster-source-${id}`
40  const clusterLayerId = `cluster-layer-${id}`
41  const clusterCountLayerId = `cluster-count-${id}`
42  const unclusteredLayerId = `unclustered-point-${id}`
43 
44  const initializedRef = useRef(false)
45  const stylePropsRef = useRef({
46    clusterColors,
47    clusterThresholds,
48    pointColor,
49  })
50 
51  // Add source and layers on mount
52  useEffect(() => {
53    if (!isLoaded || !map || initializedRef.current) return
54    if (!map.getContainer?.() || !map.getCanvasContainer?.() || !map.isStyleLoaded()) {
55      return
56    }
57 
58    // Add clustered GeoJSON source
59    map.addSource(sourceId, {
60      type: "geojson",
61      data: typeof data === "string" ? data : data,
62      cluster: true,
63      clusterMaxZoom,
64      clusterRadius,
65    })
66 
67// … truncated