Map Popup

1"use client"
2 
3import type mapboxgl from "mapbox-gl"
4import type { PopupOptions } from "mapbox-gl"
5import { mapgl } from "./map-library"
6import { useEffect, useMemo, useRef, type ReactNode } from "react"
7import { createPortal } from "react-dom"
8import { X } from "lucide-react"
9import { cn } from "@/lib/utils"
10import { useMap } from "./hooks"
11import type { MapCoordinates } from "./types"
12 
13type MapPopupProps = {
14  /** Coordinates [longitude, latitude] for popup position */
15  coordinates: MapCoordinates
16  /** Callback when popup is closed */
17  onClose?: () => void
18  /** Popup content */
19  children: ReactNode
20  /** Additional CSS classes for the popup container */
21  className?: string
22  /** Show a close button in the popup (default: false) */
23  closeButton?: boolean
24} & Omit<PopupOptions, "className" | "closeButton">
25 
26export function MapPopup({
27  coordinates,
28  onClose,
29  children,
30  className,
31  closeButton = false,
32  ...popupOptions
33}: MapPopupProps) {
34  const { map } = useMap()
35  const popupRef = useRef<mapboxgl.Popup | null>(null)
36 
37  const container = useMemo(() => document.createElement("div"), [])
38 
39  useEffect(() => {
40    if (!map || !map.isStyleLoaded()) return
41 
42    const popup = new mapgl.Popup({
43      offset: 16,
44      ...popupOptions,
45      closeButton: false,
46      className: "custom-map-popup",
47    })
48      .setMaxWidth("none")
49      .setDOMContent(container)
50      .setLngLat(coordinates)
51      .addTo(map)
52 
53    const onCloseProp = () => onClose?.()
54 
55    popup.on("close", onCloseProp)
56 
57    popupRef.current = popup
58 
59    return () => {
60      popup.off("close", onCloseProp)
61      popup.remove()
62      popupRef.current = null
63    }
64  }, [map, coordinates, popupOptions, onClose, container])
65 
66  return createPortal(
67    <div
68      className={cn(
69        "relative rounded-md border bg-popover p-3 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95",
70        className
71      )}
72    >
73      {closeButton && (
74        <button
75          type="button"
76          onClick={() => {
77            popupRef.current?.remove()
78            onClose?.()
79          }}
80          className="absolute top-1 right-1 z-10 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
81          aria-label="Close popup"
82        >
83          <X className="h-4 w-4" />
84          <span className="sr-only">Close</span>
85        </button>
86      )}
87      {children}
88    </div>,
89    container
90  )
91}