Map

1"use client"
2 
3import { useTheme } from "next-themes"
4import { createContext, useEffect, useRef, useState, type ReactNode } from "react"
5import type mapboxgl from "mapbox-gl"
6import { mapgl, detectedLibrary } from "./map-library"
7import { Globe } from "lucide-react"
8import {
9  defaultMapStyles,
10  defaultMapLibreStyles,
11  type MapContextValue,
12  type MapThemeStyles,
13  type MapProjection,
14  type MapCoordinates,
15  type MapBounds,
16} from "./types"
17 
18export const MapContext = createContext<MapContextValue | null>(null)
19 
20const DEFAULT_CENTER: MapCoordinates = [0, 0]
21const DEFAULT_ZOOM = 2
22const DEFAULT_BEARING = 0
23const DEFAULT_PITCH = 0
24const DEFAULT_ROTATE_SPEED = 3
25 
26type MapProps = {
27  accessToken?: string
28  children?: ReactNode
29  loader?: ReactNode
30  // Forces loader to show when true, hides when false, auto when undefined
31  showLoader?: boolean
32  // Overrides theme-based styles when set
33  style?: string
34  styles?: MapThemeStyles
35  center?: MapCoordinates
36  zoom?: number
37  bearing?: number
38  pitch?: number
39  projection?: MapProjection
40  minZoom?: number
41  maxZoom?: number
42  maxBounds?: MapBounds
43  // Auto-rotate the globe (only works with projection="globe")
44  autoRotate?: boolean
45  // Rotation speed in degrees per second
46  rotateSpeed?: number
47}
48 
49export const Map = ({
50  accessToken,
51  children,
52  loader,
53  showLoader,
54  style,
55  styles,
56  center = DEFAULT_CENTER,
57  zoom = DEFAULT_ZOOM,
58  bearing = DEFAULT_BEARING,
59  pitch = DEFAULT_PITCH,
60  projection,
61  minZoom,
62  maxZoom,
63  maxBounds,
64  autoRotate,
65  rotateSpeed = DEFAULT_ROTATE_SPEED,
66}: MapProps) => {
67  const containerRef = useRef<HTMLDivElement>(null)
68  const mapRef = useRef<mapboxgl.Map | null>(null)
69  const [isLoaded, setIsLoaded] = useState(false)
70  const [error, setError] = useState<string | null>(null)
71  const { resolvedTheme } = useTheme()
72  const initializedRef = useRef(false)
73 
74  const shouldShowLoader = showLoader ?? !isLoaded
75 
76  const getMapStyle = () => {
77    if (style) {
78      return style
79    }
80    const defaults = detectedLibrary === "maplibre" ? defaultMapLibreStyles : defaultMapStyles
81    const darkStyle = styles?.dark ?? defaults.dark
82    const lightStyle = styles?.light ?? defaults.light
83 
84    return resolvedTheme === "dark" ? darkStyle : lightStyle
85  }
86 
87  const createMapInstance = (container: HTMLDivElement) => {
88    return new mapgl.Map({
89      container,
90      style: getMapStyle(),
91      center,
92      zoom,
93      bearing,
94      pitch,
95      projection,
96      minZoom,
97      maxZoom,
98// … truncated