Map

1"use client";
2 
3import MapLibreGL, { type PopupOptions, type MarkerOptions } from "maplibre-gl";
4import "maplibre-gl/dist/maplibre-gl.css";
5import type * as GeoJSON from "geojson";
6import {
7  createContext,
8  forwardRef,
9  useCallback,
10  useContext,
11  useEffect,
12  useId,
13  useImperativeHandle,
14  useMemo,
15  useRef,
16  useState,
17  type ReactNode,
18} from "react";
19import { createPortal } from "react-dom";
20import { X, Minus, Plus, Locate, Maximize, Loader2 } from "lucide-react";
21 
22import { cn } from "@/lib/utils";
23 
24const defaultStyles = {
25  dark: "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
26  light: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
27};
28 
29// A tile-less, dependency-free style with a transparent background. Use it for
30// data visualizations (choropleths, world arcs, dot maps) where you draw your
31// own layers and don't need a street basemap. The easiest way to opt in is the
32// `blank` prop:
33//   <Map blank>...</Map>
34// The transparent background lets the themed container show through.
35const blankMapStyle: MapLibreGL.StyleSpecification = {
36  version: 8,
37  sources: {},
38  layers: [
39    {
40      id: "background",
41      type: "background",
42      paint: { "background-color": "rgba(0, 0, 0, 0)" },
43    },
44  ],
45};
46 
47// Prevent equivalent inline style objects from triggering a full map style reload.
48function useStableValue<T>(value: T): T {
49  const key = useMemo(() => JSON.stringify(value) ?? "", [value]);
50  // eslint-disable-next-line react-hooks/exhaustive-deps
51  return useMemo(() => value, [key]);
52}
53 
54function mergeHoverPaint<T extends Record<string, unknown>>(
55  paint: T,
56  hoverPaint: T | undefined,
57): T {
58  if (!hoverPaint) return paint;
59  const merged: Record<string, unknown> = { ...paint };
60  for (const [key, hoverValue] of Object.entries(hoverPaint)) {
61    if (hoverValue === undefined) continue;
62    const baseValue = merged[key];
63    merged[key] =
64      baseValue === undefined
65        ? hoverValue
66        : [
67            "case",
68            ["boolean", ["feature-state", "hover"], false],
69            hoverValue,
70            baseValue,
71          ];
72  }
73  return merged as T;
74}
75 
76type Theme = "light" | "dark";
77 
78// Check the document for an explicit theme (works with next-themes, etc.).
79// Covers both `attribute="class"` (the default) and `attribute="data-theme"`.
80function getDocumentTheme(): Theme | null {
81  if (typeof document === "undefined") return null;
82  const root = document.documentElement;
83// … truncated