Map Choropleth

1"use client"
2 
3import type mapboxgl from "mapbox-gl"
4 
5import { useEffect, useId, useRef } from "react"
6import { useMap } from "./hooks"
7 
8type ChoroplethColorStop = {
9  value: number
10  color: string
11}
12 
13type ChoroplethColorScale = {
14  stops: ChoroplethColorStop[]
15  interpolation?: "linear" | "step"
16  nullColor?: string
17}
18 
19type ChoroplethFeature<P extends GeoJSON.GeoJsonProperties = GeoJSON.GeoJsonProperties> = GeoJSON.Feature<
20  GeoJSON.Polygon | GeoJSON.MultiPolygon,
21  P
22>
23 
24type ChoroplethData<P extends GeoJSON.GeoJsonProperties = GeoJSON.GeoJsonProperties> =
25  | string
26  | GeoJSON.FeatureCollection<GeoJSON.Polygon | GeoJSON.MultiPolygon, P>
27 
28type ChoroplethClickEvent<P extends GeoJSON.GeoJsonProperties> = {
29  feature: ChoroplethFeature<P>
30  value: number | null
31  coordinates: [number, number]
32}
33 
34type ChoroplethHoverEvent<P extends GeoJSON.GeoJsonProperties> = {
35  feature: ChoroplethFeature<P> | null
36  value: number | null
37  coordinates: [number, number] | null
38}
39 
40type MapChoroplethProps<P extends GeoJSON.GeoJsonProperties = GeoJSON.GeoJsonProperties> = {
41  data: ChoroplethData<P>
42  valueProperty: keyof P | string
43  colorScale: ChoroplethColorScale
44  fillOpacity?: number
45  strokeColor?: string
46  strokeWidth?: number
47  strokeOpacity?: number
48  hoverEnabled?: boolean
49  hoverFillOpacity?: number
50  hoverStrokeColor?: string
51  hoverStrokeWidth?: number
52  neonAnimated?: boolean
53  neonColors?: string[]
54  neonDuration?: number
55  onClick?: (event: ChoroplethClickEvent<P>) => void
56  onHover?: (event: ChoroplethHoverEvent<P>) => void
57}
58 
59const DEFAULT_FILL_OPACITY = 0.8
60const DEFAULT_STROKE_COLOR = "#ffffff"
61const DEFAULT_STROKE_WIDTH = 2
62const DEFAULT_STROKE_OPACITY = 1
63const DEFAULT_NULL_COLOR = "#cccccc"
64const DEFAULT_HOVER_FILL_OPACITY = 1
65const DEFAULT_HOVER_STROKE_COLOR = "#000000"
66const DEFAULT_HOVER_STROKE_WIDTH = 4
67const DEFAULT_NEON_COLORS = ["#00ffff", "#a855f7", "#ec4899", "#f97316", "#00ffff"]
68const DEFAULT_NEON_DURATION = 8000
69 
70const buildColorExpression = (
71  valueProperty: string,
72  colorScale: ChoroplethColorScale
73): mapboxgl.Expression | string => {
74  const { stops, interpolation = "linear", nullColor = DEFAULT_NULL_COLOR } = colorScale
75 
76  if (stops.length === 0) {
77    return nullColor
78  }
79 
80  const sortedStops = [...stops].sort((a, b) => {
81    return a.value - b.value
82  })
83 
84  if (interpolation === "step") {
85    const stepArgs: (string | number | mapboxgl.Expression)[] = [["get", valueProperty], nullColor]
86 
87    sortedStops.forEach((stop) => {
88// … truncated