Map Marker

1"use client"
2 
3import { createContext, useContext, useEffect, useRef, useState, type ReactNode } from "react"
4import { createPortal } from "react-dom"
5import type mapboxgl from "mapbox-gl"
6import { mapgl } from "./map-library"
7import { X } from "lucide-react"
8import { cn } from "@/lib/utils"
9import { useMap } from "./hooks"
10import type { MapCoordinates, LngLatCoordinates } from "./types"
11 
12type MarkerContextValue = {
13  markerRef: React.RefObject<mapboxgl.Marker | null>
14  markerElementRef: React.RefObject<HTMLDivElement | null>
15  map: mapboxgl.Map | null
16  // State triggers re-render when marker element is ready.
17  // Refs don't cause re-renders, so children would see null without this.
18  isMounted: boolean
19}
20 
21type MapMarkerProps = {
22  coordinates: MapCoordinates
23  children: ReactNode
24  onClick?: (e: MouseEvent) => void
25  onMouseEnter?: (e: MouseEvent) => void
26  onMouseLeave?: (e: MouseEvent) => void
27  onDragStart?: (lngLat: LngLatCoordinates) => void
28  onDrag?: (lngLat: LngLatCoordinates) => void
29  onDragEnd?: (lngLat: LngLatCoordinates) => void
30  draggable?: boolean
31  offset?: [number, number]
32  rotation?: number
33  rotationAlignment?: "map" | "viewport" | "auto"
34  pitchAlignment?: "map" | "viewport" | "auto"
35}
36 
37type MarkerCallbacks = {
38  onClick?: (e: MouseEvent) => void
39  onMouseEnter?: (e: MouseEvent) => void
40  onMouseLeave?: (e: MouseEvent) => void
41  onDragStart?: (lngLat: LngLatCoordinates) => void
42  onDrag?: (lngLat: LngLatCoordinates) => void
43  onDragEnd?: (lngLat: LngLatCoordinates) => void
44}
45 
46type MarkerContentProps = {
47  children?: ReactNode
48  className?: string
49}
50 
51type MarkerPopupProps = {
52  children: ReactNode
53  className?: string
54  closeButton?: boolean
55  offset?: number | [number, number]
56  maxWidth?: string
57}
58 
59type MarkerTooltipProps = {
60  children: ReactNode
61  className?: string
62  offset?: number | [number, number]
63  maxWidth?: string
64}
65 
66type MarkerLabelProps = {
67  children: ReactNode
68  className?: string
69  position?: "top" | "bottom"
70}
71 
72type MarkerLabelPosition = "top" | "bottom"
73 
74type MarkerStatusColor = "green" | "red" | "yellow" | "blue"
75 
76type MarkerAvatarProps = {
77  src: string
78  alt: string
79  size?: number
80  online?: boolean
81  statusColor?: MarkerStatusColor
82  className?: string
83}
84 
85type MarkerAvatarPinProps = {
86  src: string
87  alt: string
88  size?: number
89  borderWidth?: number
90  className?: string
91}
92 
93const DEFAULT_DRAGGABLE = false
94const DEFAULT_CLOSE_BUTTON = false
95const DEFAULT_POPUP_OFFSET = 16
96const DEFAULT_TOOLTIP_OFFSET = 16
97// … truncated