Geo Map

1"use client";
2 
3import { memo, useEffect, useState } from "react";
4import { cn } from "./_adapter";
5import { GeoMapEngine } from "./geo-map-engine";
6import styles from "./geo-map-theme.module.css";
7import type { GeoMapProps, GeoMapStyle } from "./schema";
8 
9const LIGHT_TILE_URL =
10  "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png";
11const DARK_TILE_URL =
12  "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png";
13 
14function getSystemTheme(): "light" | "dark" {
15  if (typeof window === "undefined") return "light";
16  return window.matchMedia?.("(prefers-color-scheme: dark)").matches
17    ? "dark"
18    : "light";
19}
20 
21function getDocumentTheme(): "light" | "dark" | null {
22  if (typeof document === "undefined") return null;
23 
24  const root = document.documentElement;
25  const dataTheme = root.getAttribute("data-theme")?.toLowerCase();
26  if (dataTheme === "dark") return "dark";
27  if (dataTheme === "light") return "light";
28  if (root.classList.contains("dark")) return "dark";
29  if (root.classList.contains("light")) return "light";
30 
31  return null;
32}
33 
34function useInheritedTheme(): "light" | "dark" {
35  const [theme, setTheme] = useState<"light" | "dark">(() => {
36    return getDocumentTheme() ?? getSystemTheme();
37  });
38 
39  useEffect(() => {
40    if (typeof window === "undefined" || typeof document === "undefined") {
41      return;
42    }
43 
44    const update = () => setTheme(getDocumentTheme() ?? getSystemTheme());
45 
46    const mql = window.matchMedia?.("(prefers-color-scheme: dark)");
47    mql?.addEventListener("change", update);
48 
49    const observer = new MutationObserver(update);
50    observer.observe(document.documentElement, {
51      attributes: true,
52      attributeFilter: ["class", "data-theme"],
53    });
54 
55    return () => {
56      mql?.removeEventListener("change", update);
57      observer.disconnect();
58    };
59  }, []);
60 
61  return theme;
62}
63 
64function resolveMapAriaLabel(title?: string, description?: string): string {
65  if (title && description) {
66    return `${title}. ${description}`;
67  }
68 
69  return title ?? description ?? "Geographic map";
70}
71 
72export const GeoMap = memo(function GeoMap({
73  id,
74  role: _role,
75  receipt: _receipt,
76  title,
77  description,
78  markers,
79  routes,
80  clustering,
81  viewport,
82  showZoomControl = true,
83  theme,
84  className,
85  style,
86  tooltipClassName,
87  popupClassName,
88  onMarkerClick,
89  onRouteClick,
90}: GeoMapProps) {
91  const inheritedTheme = useInheritedTheme();
92  const resolvedTheme = theme ?? inheritedTheme;
93// … truncated