Map

1"use client";
2
3import {
4  MapLibreMap,
5  MapOptions,
6  Marker,
7  MarkerOptions,
8  Popup,
9  PopupOptions,
10  StyleSpecification,
11} from "maplibre-gl";
12import "maplibre-gl/dist/maplibre-gl.css";
13import * as React from "react";
14import { createPortal } from "react-dom";
15
16import { Button } from "@/components/ui/button";
17import { ButtonGroup } from "@/components/ui/button-group";
18import { Loading } from "@/components/ui/loading";
19import { cn } from "@/lib/utils";
20import {
21  ChevronDown,
22  ChevronUp,
23  Globe,
24  Loader2,
25  Locate,
26  Map as MapIcon,
27  MapPin,
28  Maximize,
29  Minimize,
30  Minus,
31  Plus,
32} from "lucide-react";
33
34type Theme = "light" | "dark";
35type Coordinate = { latitude: number; longitude: number };
36type Projection = "mercator" | "globe";
37type Style = string | StyleSpecification;
38
39const defaultStyles: Record<Theme, Style> = {
40  light: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
41  dark: "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
42};
43
44function getDocumentTheme(): Theme | null {
45  if (typeof document === "undefined") return null;
46  if (document.documentElement.classList.contains("dark")) return "dark";
47  if (document.documentElement.classList.contains("light")) return "light";
48  return null;
49}
50
51function getSystemTheme(): Theme {
52  if (typeof window === "undefined") return "light";
53  return window.matchMedia("(prefers-color-scheme: dark)").matches
54    ? "dark"
55    : "light";
56}
57
58function useTheme(defaultTheme?: Theme): Theme {
59  const [theme, setTheme] = React.useState<Theme>(
60    () => getDocumentTheme() ?? getSystemTheme(),
61  );
62
63  React.useEffect(() => {
64    if (defaultTheme) return;
65
66    const observer = new MutationObserver(() => {
67      const docTheme = getDocumentTheme();
68      if (docTheme) setTheme(docTheme);
69    });
70
71    observer.observe(document.documentElement, {
72      attributes: true,
73      attributeFilter: ["class"],
74    });
75
76    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
77    const handleSystemChange = (e: MediaQueryListEvent) => {
78      if (!getDocumentTheme()) setTheme(e.matches ? "dark" : "light");
79    };
80    mediaQuery.addEventListener("change", handleSystemChange);
81
82    return () => {
83      observer.disconnect();
84      mediaQuery.removeEventListener("change", handleSystemChange);
85    };
86  }, [defaultTheme]);
87
88  return defaultTheme ?? theme;
89}
90
91type MapContext = {
92// … truncated