Map Mini Map

1"use client"
2 
3import { useEffect, useRef, useState, useCallback } from "react"
4import { useTheme } from "next-themes"
5import type mapboxgl from "mapbox-gl"
6import { mapgl } from "./map-library"
7import { useMap } from "./hooks"
8import { cn } from "@/lib/utils"
9import { defaultMapStyles, defaultMapLibreStyles, type MapThemeStyles } from "./types"
10 
11type MapMiniMapProps = {
12  position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
13  width?: number
14  height?: number
15  zoomOffset?: number
16  style?: string
17  styles?: MapThemeStyles
18  boxColor?: string
19  boxBorderWidth?: number
20  rounded?: number | "full" | "none"
21  draggable?: boolean
22}
23 
24const DEFAULT_BORDER_RADIUS = 8
25 
26type Position = { x: number; y: number }
27 
28export function MapMiniMap({
29  position = "bottom-right",
30  width = 200,
31  height = 150,
32  zoomOffset = -4,
33  style,
34  styles,
35  boxColor = "#3b82f6",
36  boxBorderWidth = 2,
37  rounded = DEFAULT_BORDER_RADIUS,
38  draggable = false,
39}: MapMiniMapProps) {
40  const { map: mainMap, isLoaded, library } = useMap()
41  const { resolvedTheme } = useTheme()
42  const containerRef = useRef<HTMLDivElement>(null)
43  const wrapperRef = useRef<HTMLDivElement>(null)
44  const miniMapRef = useRef<mapboxgl.Map | null>(null)
45  const [miniMapLoaded, setMiniMapLoaded] = useState(false)
46  const [dragPosition, setDragPosition] = useState<Position | null>(null)
47  const isDraggingRef = useRef(false)
48  const dragStartRef = useRef<Position>({ x: 0, y: 0 })
49  const positionStartRef = useRef<Position>({ x: 0, y: 0 })
50 
51  const positionClasses = {
52    "top-left": "top-4 left-4",
53    "top-right": "top-4 right-4",
54    "bottom-left": "bottom-4 left-4",
55    "bottom-right": "bottom-4 right-4",
56  }
57 
58  const getMapStyle = () => {
59    if (style) {
60      return style
61    }
62    const defaults = library === "maplibre" ? defaultMapLibreStyles : defaultMapStyles
63    if (styles) {
64      const darkStyle = styles.dark ?? defaults.dark
65      const lightStyle = styles.light ?? defaults.light
66      return resolvedTheme === "dark" ? darkStyle : lightStyle
67    }
68    return resolvedTheme === "dark" ? defaults.dark : defaults.light
69  }
70 
71  const addViewportBox = (miniMap: mapboxgl.Map) => {
72    miniMap.addSource("viewport-box", {
73      type: "geojson",
74      data: {
75        type: "Feature",
76        properties: {},
77        geometry: { type: "Polygon", coordinates: [[]] },
78      },
79    })
80 
81    miniMap.addLayer({
82      id: "viewport-box-fill",
83      type: "fill",
84      source: "viewport-box",
85// … truncated