Heatmap

1"use client";
2 
3import { useEffect, useId } from "react";
4 
5import { Map, useMap } from "@/components/ui/map";
6 
7const EARTHQUAKE_GEOJSON_URL =
8  "https://maplibre.org/maplibre-gl-js/docs/assets/earthquakes.geojson";
9 
10const HEATMAP_GRADIENT_COLORS = [
11  "#fff7bc",
12  "#fee391",
13  "#fec44f",
14  "#fe9929",
15  "#d7301f",
16];
17 
18const HEATMAP_COLOR_STOPS: [number, string][] = [
19  [0.15, HEATMAP_GRADIENT_COLORS[0]],
20  [0.35, HEATMAP_GRADIENT_COLORS[1]],
21  [0.55, HEATMAP_GRADIENT_COLORS[2]],
22  [0.75, HEATMAP_GRADIENT_COLORS[3]],
23  [1, HEATMAP_GRADIENT_COLORS[4]],
24];
25 
26function GlobeHeatmapLayers() {
27  const { map, isLoaded } = useMap();
28  const id = useId();
29  const sourceId = `heatmap-source-${id}`;
30  const heatLayerId = `heatmap-layer-${id}`;
31  const pointLayerId = `heatmap-point-layer-${id}`;
32 
33  useEffect(() => {
34    if (!map || !isLoaded) return;
35 
36    if (!map.getSource(sourceId)) {
37      map.addSource(sourceId, {
38        type: "geojson",
39        data: EARTHQUAKE_GEOJSON_URL,
40      });
41    }
42 
43    if (!map.getLayer(heatLayerId)) {
44      map.addLayer({
45        id: heatLayerId,
46        type: "heatmap",
47        source: sourceId,
48        maxzoom: 6,
49        paint: {
50          "heatmap-weight": [
51            "interpolate",
52            ["linear"],
53            ["get", "mag"],
54            0,
55            0,
56            6,
57            0.8,
58          ],
59          "heatmap-intensity": [
60            "interpolate",
61            ["linear"],
62            ["zoom"],
63            0,
64            0.55,
65            6,
66            1.25,
67          ],
68          "heatmap-color": [
69            "interpolate",
70            ["linear"],
71            ["heatmap-density"],
72            0,
73            "rgba(59, 130, 246, 0)",
74            ...HEATMAP_COLOR_STOPS.flat(),
75          ],
76          "heatmap-radius": ["interpolate", ["linear"], ["zoom"], 0, 8, 6, 34],
77          "heatmap-opacity": [
78            "interpolate",
79            ["linear"],
80            ["zoom"],
81            4.5,
82            0.75,
83            6.5,
84            0.08,
85          ],
86        },
87      });
88    }
89 
90    if (!map.getLayer(pointLayerId)) {
91      map.addLayer({
92        id: pointLayerId,
93        type: "circle",
94        source: sourceId,
95        minzoom: 4.5,
96        paint: {
97          "circle-radius": [
98            "interpolate",
99            ["linear"],
100            ["get", "mag"],
101            1,
102            3,
103            6,
104            10,
105          ],
106          "circle-color": [
107            "interpolate",
108            ["linear"],
109// … truncated