mapbox-pointer

1"use client"
2 
3import { useEffect, useRef, useState } from "react"
4import { useTheme } from "next-themes"
5 
6type MapboxStyle =
7  | "streets-v12"
8  | "outdoors-v12"
9  | "light-v11"
10  | "dark-v11"
11  | "satellite-v9"
12  | "satellite-streets-v12"
13  | "navigation-day-v1"
14  | "navigation-night-v1"
15 
16interface MapboxPointerLabelProps {
17  label: string
18  href?: string
19  className?: string
20}
21 
22export function MapboxPointerLabel({
23  label,
24  href,
25  className = "",
26}: MapboxPointerLabelProps) {
27  const baseClasses =
28    "bg-background border-border text-foreground absolute right-4 bottom-4 z-10 flex items-center gap-1 rounded border px-3 py-1 text-xs font-normal"
29 
30  if (href) {
31    return (
32      <a
33        href={href}
34        target="_blank"
35        rel="noopener noreferrer"
36        className={`${baseClasses} cursor-pointer ${className}`}
37        onClick={(e) => e.stopPropagation()}
38      >
39        {label}
40      </a>
41    )
42  }
43 
44  return <div className={`${baseClasses} ${className}`}>{label}</div>
45}
46 
47interface MapboxPointerProps {
48  latitude: number
49  longitude: number
50  zoom?: number
51  mapboxToken?: string
52  googleMapsUrl?: string
53  markerColor?: string
54  className?: string
55  interactive?: boolean
56  style?: MapboxStyle
57  themeAware?: boolean
58  label?: string
59  labelHref?: string
60  clickForDirections?: boolean
61  children?: React.ReactNode
62}
63 
64declare global {
65  interface Window {
66    mapboxgl: any
67  }
68}
69 
70// Global promise to track Mapbox script loading
71let mapboxLoadPromise: Promise<void> | null = null
72 
73export function MapboxPointer({
74  latitude,
75  longitude,
76  zoom = 13,
77  mapboxToken,
78  googleMapsUrl,
79  markerColor = "#679BFF",
80  className = "",
81  interactive = true,
82  style = "streets-v12",
83  themeAware = false,
84  label,
85  labelHref,
86  clickForDirections = false,
87  children,
88}: MapboxPointerProps) {
89  const mapContainer = useRef<HTMLDivElement>(null)
90  const map = useRef<any>(null)
91  const [isLoading, setIsLoading] = useState(true)
92  const { theme, resolvedTheme } = useTheme()
93 
94  // Get token from props or environment
95  const token = mapboxToken || process.env.NEXT_PUBLIC_MAPBOX_TOKEN || ""
96 
97  // Determine the actual map style based on theme awareness
98  const actualStyle: MapboxStyle = themeAware
99    ? resolvedTheme === "dark"
100      ? "dark-v11"
101      : "streets-v12"
102    : style
103 
104  useEffect(() => {
105    // Check if token is available
106    if (!token) {
107      console.warn(
108// … truncated