4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T114b,"use client"; import { useEffect, useId } from "react"; import { Map, useMap } from "@/components/ui/map"; const EARTHQUAKE_GEOJSON_URL = "https://maplibre.org/maplibre-gl-js/docs/assets/earthquakes.geojson"; const HEATMAP_GRADIENT_COLORS = [ "#fff7bc", "#fee391", "#fec44f", "#fe9929", "#d7301f", ]; const HEATMAP_COLOR_STOPS: [number, string][] = [ [0.15, HEATMAP_GRADIENT_COLORS[0]], [0.35, HEATMAP_GRADIENT_COLORS[1]], [0.55, HEATMAP_GRADIENT_COLORS[2]], [0.75, HEATMAP_GRADIENT_COLORS[3]], [1, HEATMAP_GRADIENT_COLORS[4]], ]; function GlobeHeatmapLayers() { const { map, isLoaded } = useMap(); const id = useId(); const sourceId = `heatmap-source-${id}`; const heatLayerId = `heatmap-layer-${id}`; const pointLayerId = `heatmap-point-layer-${id}`; useEffect(() => { if (!map || !isLoaded) return; if (!map.getSource(sourceId)) { map.addSource(sourceId, { type: "geojson", data: EARTHQUAKE_GEOJSON_URL, }); } if (!map.getLayer(heatLayerId)) { map.addLayer({ id: heatLayerId, type: "heatmap", source: sourceId, maxzoom: 6, paint: { "heatmap-weight": [ "interpolate", ["linear"], ["get", "mag"], 0, 0, 6, 0.8, ], "heatmap-intensity": [ "interpolate", ["linear"], ["zoom"], 0, 0.55, 6, 1.25, ], "heatmap-color": [ "interpolate", ["linear"], ["heatmap-density"], 0, "rgba(59, 130, 246, 0)", ...HEATMAP_COLOR_STOPS.flat(), ], "heatmap-radius": ["interpolate", ["linear"], ["zoom"], 0, 8, 6, 34], "heatmap-opacity": [ "interpolate", ["linear"], ["zoom"], 4.5, 0.75, 6.5, 0.08, ], }, }); } if (!map.getLayer(pointLayerId)) { map.addLayer({ id: pointLayerId, type: "circle", source: sourceId, minzoom: 4.5, paint: { "circle-radius": [ "interpolate", ["linear"], ["get", "mag"], 1, 3, 6, 10, ], "circle-color": [ "interpolate", ["linear"], ["get", "mag"], 1, HEATMAP_GRADIENT_COLORS[1], 2.5, HEATMAP_GRADIENT_COLORS[2], 4, HEATMAP_GRADIENT_COLORS[3], 6, HEATMAP_GRADIENT_COLORS[4], ], "circle-stroke-width": 1, "circle-stroke-color": "rgba(255,255,255,0.8)", "circle-opacity": [ "interpolate", ["linear"], ["zoom"], 4.5, 0, 6.5, 0.7, ], }, }); } return () => { try { if (map.getLayer(pointLayerId)) map.removeLayer(pointLayerId); if (map.getLayer(heatLayerId)) map.removeLayer(heatLayerId); if (map.getSource(sourceId)) map.removeSource(sourceId); } catch { // ignore } }; }, [map, isLoaded, sourceId, heatLayerId, pointLayerId]); return null; } const gradient = `linear-gradient(to right, ${HEATMAP_GRADIENT_COLORS.join(", ")})`; export default function Page() { return (

Global Earthquakes Heatmap

Low High

); } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@mapcn","registryDependencies":["@mapcn/map"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/registry/blocks/heatmap/page.tsx","content":"$50","type":"registry:page","target":"app/heatmap/page.tsx"}],"className":"h-[70svh] min-h-80"}]]}]