Map Sync

1"use client"
2 
3import { createContext, useContext, useEffect, useRef, useState, type ReactNode } from "react"
4import { useTheme } from "next-themes"
5import type mapboxgl from "mapbox-gl"
6import { mapgl, detectedLibrary } from "./map-library"
7import { Globe } from "lucide-react"
8import { cn } from "@/lib/utils"
9import {
10  defaultMapStyles,
11  defaultMapLibreStyles,
12  type MapProjection,
13  type MapCoordinates,
14  type MapThemeStyles,
15  type MapSyncLayout,
16} from "./types"
17 
18type MapConfig = {
19  style?: string
20  styles?: MapThemeStyles
21  label?: string
22}
23 
24type MapSyncProps = {
25  accessToken?: string
26  maps: [MapConfig, MapConfig] | [MapConfig, MapConfig, MapConfig, MapConfig]
27  center?: MapCoordinates
28  zoom?: number
29  bearing?: number
30  pitch?: number
31  projection?: MapProjection
32  layout?: MapSyncLayout
33  showLabels?: boolean
34  loader?: ReactNode
35}
36 
37type MapSyncContextValue = {
38  registerMap: (index: number, map: mapboxgl.Map) => void
39  unregisterMap: (index: number) => void
40  accessToken?: string
41  initialCenter: MapCoordinates
42  initialZoom: number
43  initialBearing: number
44  initialPitch: number
45  projection?: MapProjection
46}
47 
48type MapSyncProviderProps = {
49  children: ReactNode
50  accessToken?: string
51  initialCenter: MapCoordinates
52  initialZoom: number
53  initialBearing: number
54  initialPitch: number
55  projection?: MapProjection
56}
57 
58type SyncedMapPanelProps = {
59  index: number
60  style: { width: string; height: string }
61  label: string
62  showLabel: boolean
63  mapStyle?: string
64  mapStyles?: MapThemeStyles
65  loader?: ReactNode
66}
67 
68const DEFAULT_CENTER: MapCoordinates = [0, 0]
69const DEFAULT_ZOOM = 2
70const DEFAULT_BEARING = 0
71const DEFAULT_PITCH = 0
72 
73const LABEL_BASE_STYLES = "absolute z-10 bg-background/95 backdrop-blur-sm border rounded px-2 py-1 text-xs font-medium"
74 
75const MapSyncContext = createContext<MapSyncContextValue | null>(null)
76 
77const useMapSync = () => {
78  const context = useContext(MapSyncContext)
79  if (!context) {
80    throw new Error("useMapSync must be used within MapSyncProvider")
81  }
82  return context
83}
84 
85export const MapSync = ({
86  accessToken,
87  maps,
88  center = DEFAULT_CENTER,
89  zoom = DEFAULT_ZOOM,
90  bearing = DEFAULT_BEARING,
91  pitch = DEFAULT_PITCH,
92  projection,
93  layout = "horizontal",
94  showLabels = false,
95  loader,
96}: MapSyncProps) => {
97  const mapCount = maps.length
98  const isGrid = layout === "grid" && mapCount === 4
99 
100  const getLayoutClasses = () => {
101    if (isGrid) {
102      return "grid grid-cols-2 grid-rows-2"
103    }
104// … truncated