1477 lines
38 KiB
TypeScript
1477 lines
38 KiB
TypeScript
"use client"
|
|
|
|
import MapLibreGL, { type MarkerOptions, type PopupOptions } from "maplibre-gl"
|
|
import "maplibre-gl/dist/maplibre-gl.css"
|
|
import { Loader2, Locate, Maximize, Minus, Plus, X } from "lucide-react"
|
|
import {
|
|
createContext,
|
|
forwardRef,
|
|
type ReactNode,
|
|
useCallback,
|
|
useContext,
|
|
useEffect,
|
|
useId,
|
|
useImperativeHandle,
|
|
useMemo,
|
|
useRef,
|
|
useState
|
|
} from "react"
|
|
import { createPortal } from "react-dom"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
|
|
const defaultStyles = {
|
|
dark: "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
|
|
light: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
|
|
}
|
|
|
|
type Theme = "light" | "dark"
|
|
|
|
// Check document class for theme (works with next-themes, etc.)
|
|
function getDocumentTheme(): Theme | null {
|
|
if (typeof document === "undefined") return null
|
|
if (document.documentElement.classList.contains("dark")) return "dark"
|
|
if (document.documentElement.classList.contains("light")) return "light"
|
|
return null
|
|
}
|
|
|
|
// Get system preference
|
|
function getSystemTheme(): Theme {
|
|
if (typeof window === "undefined") return "light"
|
|
return window.matchMedia("(prefers-color-scheme: dark)").matches
|
|
? "dark"
|
|
: "light"
|
|
}
|
|
|
|
function useResolvedTheme(themeProp?: "light" | "dark"): Theme {
|
|
const [detectedTheme, setDetectedTheme] = useState<Theme>(
|
|
() => getDocumentTheme() ?? getSystemTheme()
|
|
)
|
|
|
|
useEffect(() => {
|
|
if (themeProp) return // Skip detection if theme is provided via prop
|
|
|
|
// Watch for document class changes (e.g., next-themes toggling dark class)
|
|
const observer = new MutationObserver(() => {
|
|
const docTheme = getDocumentTheme()
|
|
if (docTheme) {
|
|
setDetectedTheme(docTheme)
|
|
}
|
|
})
|
|
observer.observe(document.documentElement, {
|
|
attributes: true,
|
|
attributeFilter: ["class"]
|
|
})
|
|
|
|
// Also watch for system preference changes
|
|
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
|
|
const handleSystemChange = (e: MediaQueryListEvent) => {
|
|
// Only use system preference if no document class is set
|
|
if (!getDocumentTheme()) {
|
|
setDetectedTheme(e.matches ? "dark" : "light")
|
|
}
|
|
}
|
|
mediaQuery.addEventListener("change", handleSystemChange)
|
|
|
|
return () => {
|
|
observer.disconnect()
|
|
mediaQuery.removeEventListener("change", handleSystemChange)
|
|
}
|
|
}, [themeProp])
|
|
|
|
return themeProp ?? detectedTheme
|
|
}
|
|
|
|
type MapContextValue = {
|
|
map: MapLibreGL.Map | null
|
|
isLoaded: boolean
|
|
}
|
|
|
|
const MapContext = createContext<MapContextValue | null>(null)
|
|
|
|
function useMap() {
|
|
const context = useContext(MapContext)
|
|
if (!context) {
|
|
throw new Error("useMap must be used within a Map component")
|
|
}
|
|
return context
|
|
}
|
|
|
|
/** Map viewport state */
|
|
type MapViewport = {
|
|
/** Center coordinates [longitude, latitude] */
|
|
center: [number, number]
|
|
/** Zoom level */
|
|
zoom: number
|
|
/** Bearing (rotation) in degrees */
|
|
bearing: number
|
|
/** Pitch (tilt) in degrees */
|
|
pitch: number
|
|
}
|
|
|
|
type MapStyleOption = string | MapLibreGL.StyleSpecification
|
|
|
|
type MapRef = MapLibreGL.Map
|
|
|
|
type MapProps = {
|
|
children?: ReactNode
|
|
/** Additional CSS classes for the map container */
|
|
className?: string
|
|
/**
|
|
* Theme for the map. If not provided, automatically detects system preference.
|
|
* Pass your theme value here.
|
|
*/
|
|
theme?: Theme
|
|
/** Custom map styles for light and dark themes. Overrides the default Carto styles. */
|
|
styles?: {
|
|
light?: MapStyleOption
|
|
dark?: MapStyleOption
|
|
}
|
|
/** Map projection type. Use `{ type: "globe" }` for 3D globe view. */
|
|
projection?: MapLibreGL.ProjectionSpecification
|
|
/**
|
|
* Controlled viewport. When provided with onViewportChange,
|
|
* the map becomes controlled and viewport is driven by this prop.
|
|
*/
|
|
viewport?: Partial<MapViewport>
|
|
/**
|
|
* Callback fired continuously as the viewport changes (pan, zoom, rotate, pitch).
|
|
* Can be used standalone to observe changes, or with `viewport` prop
|
|
* to enable controlled mode where the map viewport is driven by your state.
|
|
*/
|
|
onViewportChange?: (viewport: MapViewport) => void
|
|
} & Omit<MapLibreGL.MapOptions, "container" | "style">
|
|
|
|
function DefaultLoader() {
|
|
return (
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<div className="flex gap-1">
|
|
<span className="size-1.5 rounded-full bg-muted-foreground/60 animate-pulse" />
|
|
<span className="size-1.5 rounded-full bg-muted-foreground/60 animate-pulse [animation-delay:150ms]" />
|
|
<span className="size-1.5 rounded-full bg-muted-foreground/60 animate-pulse [animation-delay:300ms]" />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function getViewport(map: MapLibreGL.Map): MapViewport {
|
|
const center = map.getCenter()
|
|
return {
|
|
center: [center.lng, center.lat],
|
|
zoom: map.getZoom(),
|
|
bearing: map.getBearing(),
|
|
pitch: map.getPitch()
|
|
}
|
|
}
|
|
|
|
const Map = forwardRef<MapRef, MapProps>(function Map(
|
|
{
|
|
children,
|
|
className,
|
|
theme: themeProp,
|
|
styles,
|
|
projection,
|
|
viewport,
|
|
onViewportChange,
|
|
...props
|
|
},
|
|
ref
|
|
) {
|
|
const containerRef = useRef<HTMLDivElement>(null)
|
|
const [mapInstance, setMapInstance] = useState<MapLibreGL.Map | null>(null)
|
|
const [isLoaded, setIsLoaded] = useState(false)
|
|
const [isStyleLoaded, setIsStyleLoaded] = useState(false)
|
|
const currentStyleRef = useRef<MapStyleOption | null>(null)
|
|
const styleTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
|
|
const internalUpdateRef = useRef(false)
|
|
const resolvedTheme = useResolvedTheme(themeProp)
|
|
|
|
const isControlled = viewport !== undefined && onViewportChange !== undefined
|
|
|
|
const onViewportChangeRef = useRef(onViewportChange)
|
|
onViewportChangeRef.current = onViewportChange
|
|
|
|
const mapStyles = useMemo(
|
|
() => ({
|
|
dark: styles?.dark ?? defaultStyles.dark,
|
|
light: styles?.light ?? defaultStyles.light
|
|
}),
|
|
[styles]
|
|
)
|
|
|
|
// Expose the map instance to the parent component
|
|
useImperativeHandle(ref, () => mapInstance as MapLibreGL.Map, [mapInstance])
|
|
|
|
const clearStyleTimeout = useCallback(() => {
|
|
if (styleTimeoutRef.current) {
|
|
clearTimeout(styleTimeoutRef.current)
|
|
styleTimeoutRef.current = null
|
|
}
|
|
}, [])
|
|
|
|
// Initialize the map
|
|
useEffect(() => {
|
|
if (!containerRef.current) return
|
|
|
|
const initialStyle =
|
|
resolvedTheme === "dark" ? mapStyles.dark : mapStyles.light
|
|
currentStyleRef.current = initialStyle
|
|
|
|
const map = new MapLibreGL.Map({
|
|
container: containerRef.current,
|
|
style: initialStyle,
|
|
renderWorldCopies: false,
|
|
attributionControl: {
|
|
compact: true
|
|
},
|
|
...props,
|
|
...viewport
|
|
})
|
|
|
|
const styleDataHandler = () => {
|
|
clearStyleTimeout()
|
|
// Delay to ensure style is fully processed before allowing layer operations
|
|
// This is a workaround to avoid race conditions with the style loading
|
|
// else we have to force update every layer on setStyle change
|
|
styleTimeoutRef.current = setTimeout(() => {
|
|
setIsStyleLoaded(true)
|
|
if (projection) {
|
|
map.setProjection(projection)
|
|
}
|
|
}, 100)
|
|
}
|
|
const loadHandler = () => setIsLoaded(true)
|
|
|
|
// Viewport change handler - skip if triggered by internal update
|
|
const handleMove = () => {
|
|
if (internalUpdateRef.current) return
|
|
onViewportChangeRef.current?.(getViewport(map))
|
|
}
|
|
|
|
map.on("load", loadHandler)
|
|
map.on("styledata", styleDataHandler)
|
|
map.on("move", handleMove)
|
|
setMapInstance(map)
|
|
|
|
return () => {
|
|
clearStyleTimeout()
|
|
map.off("load", loadHandler)
|
|
map.off("styledata", styleDataHandler)
|
|
map.off("move", handleMove)
|
|
map.remove()
|
|
setIsLoaded(false)
|
|
setIsStyleLoaded(false)
|
|
setMapInstance(null)
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [])
|
|
|
|
// Sync controlled viewport to map
|
|
useEffect(() => {
|
|
if (!mapInstance || !isControlled || !viewport) return
|
|
if (mapInstance.isMoving()) return
|
|
|
|
const current = getViewport(mapInstance)
|
|
const next = {
|
|
center: viewport.center ?? current.center,
|
|
zoom: viewport.zoom ?? current.zoom,
|
|
bearing: viewport.bearing ?? current.bearing,
|
|
pitch: viewport.pitch ?? current.pitch
|
|
}
|
|
|
|
if (
|
|
next.center[0] === current.center[0] &&
|
|
next.center[1] === current.center[1] &&
|
|
next.zoom === current.zoom &&
|
|
next.bearing === current.bearing &&
|
|
next.pitch === current.pitch
|
|
) {
|
|
return
|
|
}
|
|
|
|
internalUpdateRef.current = true
|
|
mapInstance.jumpTo(next)
|
|
internalUpdateRef.current = false
|
|
}, [mapInstance, isControlled, viewport])
|
|
|
|
// Handle style change
|
|
useEffect(() => {
|
|
if (!mapInstance || !resolvedTheme) return
|
|
|
|
const newStyle = resolvedTheme === "dark" ? mapStyles.dark : mapStyles.light
|
|
|
|
if (currentStyleRef.current === newStyle) return
|
|
|
|
clearStyleTimeout()
|
|
currentStyleRef.current = newStyle
|
|
setIsStyleLoaded(false)
|
|
|
|
mapInstance.setStyle(newStyle, { diff: true })
|
|
}, [mapInstance, resolvedTheme, mapStyles, clearStyleTimeout])
|
|
|
|
const contextValue = useMemo(
|
|
() => ({
|
|
map: mapInstance,
|
|
isLoaded: isLoaded && isStyleLoaded
|
|
}),
|
|
[mapInstance, isLoaded, isStyleLoaded]
|
|
)
|
|
|
|
return (
|
|
<MapContext.Provider value={contextValue}>
|
|
<div
|
|
ref={containerRef}
|
|
className={cn("relative w-full h-full", className)}
|
|
>
|
|
{!isLoaded && <DefaultLoader />}
|
|
{/* SSR-safe: children render only when map is loaded on client */}
|
|
{mapInstance && children}
|
|
</div>
|
|
</MapContext.Provider>
|
|
)
|
|
})
|
|
|
|
type MarkerContextValue = {
|
|
marker: MapLibreGL.Marker
|
|
map: MapLibreGL.Map | null
|
|
}
|
|
|
|
const MarkerContext = createContext<MarkerContextValue | null>(null)
|
|
|
|
function useMarkerContext() {
|
|
const context = useContext(MarkerContext)
|
|
if (!context) {
|
|
throw new Error("Marker components must be used within MapMarker")
|
|
}
|
|
return context
|
|
}
|
|
|
|
type MapMarkerProps = {
|
|
/** Longitude coordinate for marker position */
|
|
longitude: number
|
|
/** Latitude coordinate for marker position */
|
|
latitude: number
|
|
/** Marker subcomponents (MarkerContent, MarkerPopup, MarkerTooltip, MarkerLabel) */
|
|
children: ReactNode
|
|
/** Callback when marker is clicked */
|
|
onClick?: (e: MouseEvent) => void
|
|
/** Callback when mouse enters marker */
|
|
onMouseEnter?: (e: MouseEvent) => void
|
|
/** Callback when mouse leaves marker */
|
|
onMouseLeave?: (e: MouseEvent) => void
|
|
/** Callback when marker drag starts (requires draggable: true) */
|
|
onDragStart?: (lngLat: { lng: number; lat: number }) => void
|
|
/** Callback during marker drag (requires draggable: true) */
|
|
onDrag?: (lngLat: { lng: number; lat: number }) => void
|
|
/** Callback when marker drag ends (requires draggable: true) */
|
|
onDragEnd?: (lngLat: { lng: number; lat: number }) => void
|
|
} & Omit<MarkerOptions, "element">
|
|
|
|
function MapMarker({
|
|
longitude,
|
|
latitude,
|
|
children,
|
|
onClick,
|
|
onMouseEnter,
|
|
onMouseLeave,
|
|
onDragStart,
|
|
onDrag,
|
|
onDragEnd,
|
|
draggable = false,
|
|
...markerOptions
|
|
}: MapMarkerProps) {
|
|
const { map } = useMap()
|
|
|
|
const callbacksRef = useRef({
|
|
onClick,
|
|
onMouseEnter,
|
|
onMouseLeave,
|
|
onDragStart,
|
|
onDrag,
|
|
onDragEnd
|
|
})
|
|
callbacksRef.current = {
|
|
onClick,
|
|
onMouseEnter,
|
|
onMouseLeave,
|
|
onDragStart,
|
|
onDrag,
|
|
onDragEnd
|
|
}
|
|
|
|
const marker = useMemo(() => {
|
|
const markerInstance = new MapLibreGL.Marker({
|
|
...markerOptions,
|
|
element: document.createElement("div"),
|
|
draggable
|
|
}).setLngLat([longitude, latitude])
|
|
|
|
const handleClick = (e: MouseEvent) => callbacksRef.current.onClick?.(e)
|
|
const handleMouseEnter = (e: MouseEvent) =>
|
|
callbacksRef.current.onMouseEnter?.(e)
|
|
const handleMouseLeave = (e: MouseEvent) =>
|
|
callbacksRef.current.onMouseLeave?.(e)
|
|
|
|
markerInstance.getElement()?.addEventListener("click", handleClick)
|
|
markerInstance
|
|
.getElement()
|
|
?.addEventListener("mouseenter", handleMouseEnter)
|
|
markerInstance
|
|
.getElement()
|
|
?.addEventListener("mouseleave", handleMouseLeave)
|
|
|
|
const handleDragStart = () => {
|
|
const lngLat = markerInstance.getLngLat()
|
|
callbacksRef.current.onDragStart?.({ lng: lngLat.lng, lat: lngLat.lat })
|
|
}
|
|
const handleDrag = () => {
|
|
const lngLat = markerInstance.getLngLat()
|
|
callbacksRef.current.onDrag?.({ lng: lngLat.lng, lat: lngLat.lat })
|
|
}
|
|
const handleDragEnd = () => {
|
|
const lngLat = markerInstance.getLngLat()
|
|
callbacksRef.current.onDragEnd?.({ lng: lngLat.lng, lat: lngLat.lat })
|
|
}
|
|
|
|
markerInstance.on("dragstart", handleDragStart)
|
|
markerInstance.on("drag", handleDrag)
|
|
markerInstance.on("dragend", handleDragEnd)
|
|
|
|
return markerInstance
|
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (!map) return
|
|
|
|
marker.addTo(map)
|
|
|
|
return () => {
|
|
marker.remove()
|
|
}
|
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [map])
|
|
|
|
if (
|
|
marker.getLngLat().lng !== longitude ||
|
|
marker.getLngLat().lat !== latitude
|
|
) {
|
|
marker.setLngLat([longitude, latitude])
|
|
}
|
|
if (marker.isDraggable() !== draggable) {
|
|
marker.setDraggable(draggable)
|
|
}
|
|
|
|
const currentOffset = marker.getOffset()
|
|
const newOffset = markerOptions.offset ?? [0, 0]
|
|
const [newOffsetX, newOffsetY] = Array.isArray(newOffset)
|
|
? newOffset
|
|
: [newOffset.x, newOffset.y]
|
|
if (currentOffset.x !== newOffsetX || currentOffset.y !== newOffsetY) {
|
|
marker.setOffset(newOffset)
|
|
}
|
|
|
|
if (marker.getRotation() !== markerOptions.rotation) {
|
|
marker.setRotation(markerOptions.rotation ?? 0)
|
|
}
|
|
if (marker.getRotationAlignment() !== markerOptions.rotationAlignment) {
|
|
marker.setRotationAlignment(markerOptions.rotationAlignment ?? "auto")
|
|
}
|
|
if (marker.getPitchAlignment() !== markerOptions.pitchAlignment) {
|
|
marker.setPitchAlignment(markerOptions.pitchAlignment ?? "auto")
|
|
}
|
|
|
|
return (
|
|
<MarkerContext.Provider value={{ marker, map }}>
|
|
{children}
|
|
</MarkerContext.Provider>
|
|
)
|
|
}
|
|
|
|
type MarkerContentProps = {
|
|
/** Custom marker content. Defaults to a blue dot if not provided */
|
|
children?: ReactNode
|
|
/** Additional CSS classes for the marker container */
|
|
className?: string
|
|
}
|
|
|
|
function MarkerContent({ children, className }: MarkerContentProps) {
|
|
const { marker } = useMarkerContext()
|
|
|
|
return createPortal(
|
|
<div className={cn("relative cursor-pointer", className)}>
|
|
{children || <DefaultMarkerIcon />}
|
|
</div>,
|
|
marker.getElement()
|
|
)
|
|
}
|
|
|
|
function DefaultMarkerIcon() {
|
|
return (
|
|
<div className="relative h-4 w-4 rounded-full border-2 border-white bg-blue-500 shadow-lg" />
|
|
)
|
|
}
|
|
|
|
type MarkerPopupProps = {
|
|
/** Popup content */
|
|
children: ReactNode
|
|
/** Additional CSS classes for the popup container */
|
|
className?: string
|
|
/** Show a close button in the popup (default: false) */
|
|
closeButton?: boolean
|
|
} & Omit<PopupOptions, "className" | "closeButton">
|
|
|
|
function MarkerPopup({
|
|
children,
|
|
className,
|
|
closeButton = false,
|
|
...popupOptions
|
|
}: MarkerPopupProps) {
|
|
const { marker, map } = useMarkerContext()
|
|
const container = useMemo(() => document.createElement("div"), [])
|
|
const prevPopupOptions = useRef(popupOptions)
|
|
|
|
const popup = useMemo(() => {
|
|
const popupInstance = new MapLibreGL.Popup({
|
|
offset: 16,
|
|
...popupOptions,
|
|
closeButton: false
|
|
})
|
|
.setMaxWidth("none")
|
|
.setDOMContent(container)
|
|
|
|
return popupInstance
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (!map) return
|
|
|
|
popup.setDOMContent(container)
|
|
marker.setPopup(popup)
|
|
|
|
return () => {
|
|
marker.setPopup(null)
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [map])
|
|
|
|
if (popup.isOpen()) {
|
|
const prev = prevPopupOptions.current
|
|
|
|
if (prev.offset !== popupOptions.offset) {
|
|
popup.setOffset(popupOptions.offset ?? 16)
|
|
}
|
|
if (prev.maxWidth !== popupOptions.maxWidth && popupOptions.maxWidth) {
|
|
popup.setMaxWidth(popupOptions.maxWidth ?? "none")
|
|
}
|
|
|
|
prevPopupOptions.current = popupOptions
|
|
}
|
|
|
|
const handleClose = () => popup.remove()
|
|
|
|
return createPortal(
|
|
<div
|
|
className={cn(
|
|
"relative rounded-md border bg-popover p-3 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95",
|
|
className
|
|
)}
|
|
>
|
|
{closeButton && (
|
|
<button
|
|
type="button"
|
|
onClick={handleClose}
|
|
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"
|
|
aria-label="Close popup"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
<span className="sr-only">Close</span>
|
|
</button>
|
|
)}
|
|
{children}
|
|
</div>,
|
|
container
|
|
)
|
|
}
|
|
|
|
type MarkerTooltipProps = {
|
|
/** Tooltip content */
|
|
children: ReactNode
|
|
/** Additional CSS classes for the tooltip container */
|
|
className?: string
|
|
} & Omit<PopupOptions, "className" | "closeButton" | "closeOnClick">
|
|
|
|
function MarkerTooltip({
|
|
children,
|
|
className,
|
|
...popupOptions
|
|
}: MarkerTooltipProps) {
|
|
const { marker, map } = useMarkerContext()
|
|
const container = useMemo(() => document.createElement("div"), [])
|
|
const prevTooltipOptions = useRef(popupOptions)
|
|
|
|
const tooltip = useMemo(() => {
|
|
const tooltipInstance = new MapLibreGL.Popup({
|
|
offset: 16,
|
|
...popupOptions,
|
|
closeOnClick: true,
|
|
closeButton: false
|
|
}).setMaxWidth("none")
|
|
|
|
return tooltipInstance
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (!map) return
|
|
|
|
tooltip.setDOMContent(container)
|
|
|
|
const handleMouseEnter = () => {
|
|
tooltip.setLngLat(marker.getLngLat()).addTo(map)
|
|
}
|
|
const handleMouseLeave = () => tooltip.remove()
|
|
|
|
marker.getElement()?.addEventListener("mouseenter", handleMouseEnter)
|
|
marker.getElement()?.addEventListener("mouseleave", handleMouseLeave)
|
|
|
|
return () => {
|
|
marker.getElement()?.removeEventListener("mouseenter", handleMouseEnter)
|
|
marker.getElement()?.removeEventListener("mouseleave", handleMouseLeave)
|
|
tooltip.remove()
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [map])
|
|
|
|
if (tooltip.isOpen()) {
|
|
const prev = prevTooltipOptions.current
|
|
|
|
if (prev.offset !== popupOptions.offset) {
|
|
tooltip.setOffset(popupOptions.offset ?? 16)
|
|
}
|
|
if (prev.maxWidth !== popupOptions.maxWidth && popupOptions.maxWidth) {
|
|
tooltip.setMaxWidth(popupOptions.maxWidth ?? "none")
|
|
}
|
|
|
|
prevTooltipOptions.current = popupOptions
|
|
}
|
|
|
|
return createPortal(
|
|
<div
|
|
className={cn(
|
|
"rounded-md bg-foreground px-2 py-1 text-xs text-background shadow-md animate-in fade-in-0 zoom-in-95",
|
|
className
|
|
)}
|
|
>
|
|
{children}
|
|
</div>,
|
|
container
|
|
)
|
|
}
|
|
|
|
type MarkerLabelProps = {
|
|
/** Label text content */
|
|
children: ReactNode
|
|
/** Additional CSS classes for the label */
|
|
className?: string
|
|
/** Position of the label relative to the marker (default: "top") */
|
|
position?: "top" | "bottom"
|
|
}
|
|
|
|
function MarkerLabel({
|
|
children,
|
|
className,
|
|
position = "top"
|
|
}: MarkerLabelProps) {
|
|
const positionClasses = {
|
|
top: "bottom-full mb-1",
|
|
bottom: "top-full mt-1"
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"absolute left-1/2 -translate-x-1/2 whitespace-nowrap",
|
|
"text-[10px] font-medium text-foreground",
|
|
positionClasses[position],
|
|
className
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
type MapControlsProps = {
|
|
/** Position of the controls on the map (default: "bottom-right") */
|
|
position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
|
|
/** Show zoom in/out buttons (default: true) */
|
|
showZoom?: boolean
|
|
/** Show compass button to reset bearing (default: false) */
|
|
showCompass?: boolean
|
|
/** Show locate button to find user's location (default: false) */
|
|
showLocate?: boolean
|
|
/** Show fullscreen toggle button (default: false) */
|
|
showFullscreen?: boolean
|
|
/** Additional CSS classes for the controls container */
|
|
className?: string
|
|
/** Callback with user coordinates when located */
|
|
onLocate?: (coords: { longitude: number; latitude: number }) => void
|
|
}
|
|
|
|
const positionClasses = {
|
|
"top-left": "top-2 left-2",
|
|
"top-right": "top-2 right-2",
|
|
"bottom-left": "bottom-2 left-2",
|
|
"bottom-right": "bottom-10 right-2"
|
|
}
|
|
|
|
function ControlGroup({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<div className="flex flex-col rounded-md border border-border bg-background shadow-sm overflow-hidden [&>button:not(:last-child)]:border-b [&>button:not(:last-child)]:border-border">
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ControlButton({
|
|
onClick,
|
|
label,
|
|
children,
|
|
disabled = false
|
|
}: {
|
|
onClick: () => void
|
|
label: string
|
|
children: React.ReactNode
|
|
disabled?: boolean
|
|
}) {
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
aria-label={label}
|
|
type="button"
|
|
className={cn(
|
|
"flex items-center justify-center size-8 hover:bg-accent dark:hover:bg-accent/40 transition-colors",
|
|
disabled && "opacity-50 pointer-events-none cursor-not-allowed"
|
|
)}
|
|
disabled={disabled}
|
|
>
|
|
{children}
|
|
</button>
|
|
)
|
|
}
|
|
|
|
function MapControls({
|
|
position = "bottom-right",
|
|
showZoom = true,
|
|
showCompass = false,
|
|
showLocate = false,
|
|
showFullscreen = false,
|
|
className,
|
|
onLocate
|
|
}: MapControlsProps) {
|
|
const { map } = useMap()
|
|
const [waitingForLocation, setWaitingForLocation] = useState(false)
|
|
|
|
const handleZoomIn = useCallback(() => {
|
|
map?.zoomTo(map.getZoom() + 1, { duration: 300 })
|
|
}, [map])
|
|
|
|
const handleZoomOut = useCallback(() => {
|
|
map?.zoomTo(map.getZoom() - 1, { duration: 300 })
|
|
}, [map])
|
|
|
|
const handleResetBearing = useCallback(() => {
|
|
map?.resetNorthPitch({ duration: 300 })
|
|
}, [map])
|
|
|
|
const handleLocate = useCallback(() => {
|
|
setWaitingForLocation(true)
|
|
if ("geolocation" in navigator) {
|
|
navigator.geolocation.getCurrentPosition(
|
|
(pos) => {
|
|
const coords = {
|
|
longitude: pos.coords.longitude,
|
|
latitude: pos.coords.latitude
|
|
}
|
|
map?.flyTo({
|
|
center: [coords.longitude, coords.latitude],
|
|
zoom: 14,
|
|
duration: 1500
|
|
})
|
|
onLocate?.(coords)
|
|
setWaitingForLocation(false)
|
|
},
|
|
(error) => {
|
|
console.error("Error getting location:", error)
|
|
setWaitingForLocation(false)
|
|
}
|
|
)
|
|
}
|
|
}, [map, onLocate])
|
|
|
|
const handleFullscreen = useCallback(() => {
|
|
const container = map?.getContainer()
|
|
if (!container) return
|
|
if (document.fullscreenElement) {
|
|
document.exitFullscreen()
|
|
} else {
|
|
container.requestFullscreen()
|
|
}
|
|
}, [map])
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"absolute z-10 flex flex-col gap-1.5",
|
|
positionClasses[position],
|
|
className
|
|
)}
|
|
>
|
|
{showZoom && (
|
|
<ControlGroup>
|
|
<ControlButton onClick={handleZoomIn} label="Zoom in">
|
|
<Plus className="size-4" />
|
|
</ControlButton>
|
|
<ControlButton onClick={handleZoomOut} label="Zoom out">
|
|
<Minus className="size-4" />
|
|
</ControlButton>
|
|
</ControlGroup>
|
|
)}
|
|
{showCompass && (
|
|
<ControlGroup>
|
|
<CompassButton onClick={handleResetBearing} />
|
|
</ControlGroup>
|
|
)}
|
|
{showLocate && (
|
|
<ControlGroup>
|
|
<ControlButton
|
|
onClick={handleLocate}
|
|
label="Find my location"
|
|
disabled={waitingForLocation}
|
|
>
|
|
{waitingForLocation ? (
|
|
<Loader2 className="size-4 animate-spin" />
|
|
) : (
|
|
<Locate className="size-4" />
|
|
)}
|
|
</ControlButton>
|
|
</ControlGroup>
|
|
)}
|
|
{showFullscreen && (
|
|
<ControlGroup>
|
|
<ControlButton onClick={handleFullscreen} label="Toggle fullscreen">
|
|
<Maximize className="size-4" />
|
|
</ControlButton>
|
|
</ControlGroup>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function CompassButton({ onClick }: { onClick: () => void }) {
|
|
const { map } = useMap()
|
|
const compassRef = useRef<SVGSVGElement>(null)
|
|
|
|
useEffect(() => {
|
|
if (!map || !compassRef.current) return
|
|
|
|
const compass = compassRef.current
|
|
|
|
const updateRotation = () => {
|
|
const bearing = map.getBearing()
|
|
const pitch = map.getPitch()
|
|
compass.style.transform = `rotateX(${pitch}deg) rotateZ(${-bearing}deg)`
|
|
}
|
|
|
|
map.on("rotate", updateRotation)
|
|
map.on("pitch", updateRotation)
|
|
updateRotation()
|
|
|
|
return () => {
|
|
map.off("rotate", updateRotation)
|
|
map.off("pitch", updateRotation)
|
|
}
|
|
}, [map])
|
|
|
|
return (
|
|
<ControlButton onClick={onClick} label="Reset bearing to north">
|
|
<svg
|
|
ref={compassRef}
|
|
viewBox="0 0 24 24"
|
|
className="size-5 transition-transform duration-200"
|
|
style={{ transformStyle: "preserve-3d" }}
|
|
>
|
|
<path d="M12 2L16 12H12V2Z" className="fill-red-500" />
|
|
<path d="M12 2L8 12H12V2Z" className="fill-red-300" />
|
|
<path d="M12 22L16 12H12V22Z" className="fill-muted-foreground/60" />
|
|
<path d="M12 22L8 12H12V22Z" className="fill-muted-foreground/30" />
|
|
</svg>
|
|
</ControlButton>
|
|
)
|
|
}
|
|
|
|
type MapPopupProps = {
|
|
/** Longitude coordinate for popup position */
|
|
longitude: number
|
|
/** Latitude coordinate for popup position */
|
|
latitude: number
|
|
/** Callback when popup is closed */
|
|
onClose?: () => void
|
|
/** Popup content */
|
|
children: ReactNode
|
|
/** Additional CSS classes for the popup container */
|
|
className?: string
|
|
/** Show a close button in the popup (default: false) */
|
|
closeButton?: boolean
|
|
} & Omit<PopupOptions, "className" | "closeButton">
|
|
|
|
function MapPopup({
|
|
longitude,
|
|
latitude,
|
|
onClose,
|
|
children,
|
|
className,
|
|
closeButton = false,
|
|
...popupOptions
|
|
}: MapPopupProps) {
|
|
const { map } = useMap()
|
|
const popupOptionsRef = useRef(popupOptions)
|
|
const onCloseRef = useRef(onClose)
|
|
onCloseRef.current = onClose
|
|
const container = useMemo(() => document.createElement("div"), [])
|
|
|
|
const popup = useMemo(() => {
|
|
const popupInstance = new MapLibreGL.Popup({
|
|
offset: 16,
|
|
...popupOptions,
|
|
closeButton: false
|
|
})
|
|
.setMaxWidth("none")
|
|
.setLngLat([longitude, latitude])
|
|
|
|
return popupInstance
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (!map) return
|
|
|
|
const onCloseProp = () => onCloseRef.current?.()
|
|
|
|
popup.on("close", onCloseProp)
|
|
|
|
popup.setDOMContent(container)
|
|
popup.addTo(map)
|
|
|
|
return () => {
|
|
popup.off("close", onCloseProp)
|
|
if (popup.isOpen()) {
|
|
popup.remove()
|
|
}
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [map])
|
|
|
|
if (popup.isOpen()) {
|
|
const prev = popupOptionsRef.current
|
|
|
|
if (
|
|
popup.getLngLat().lng !== longitude ||
|
|
popup.getLngLat().lat !== latitude
|
|
) {
|
|
popup.setLngLat([longitude, latitude])
|
|
}
|
|
|
|
if (prev.offset !== popupOptions.offset) {
|
|
popup.setOffset(popupOptions.offset ?? 16)
|
|
}
|
|
if (prev.maxWidth !== popupOptions.maxWidth && popupOptions.maxWidth) {
|
|
popup.setMaxWidth(popupOptions.maxWidth ?? "none")
|
|
}
|
|
popupOptionsRef.current = popupOptions
|
|
}
|
|
|
|
const handleClose = () => {
|
|
popup.remove()
|
|
}
|
|
|
|
return createPortal(
|
|
<div
|
|
className={cn(
|
|
"relative rounded-md border bg-popover p-3 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95",
|
|
className
|
|
)}
|
|
>
|
|
{closeButton && (
|
|
<button
|
|
type="button"
|
|
onClick={handleClose}
|
|
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"
|
|
aria-label="Close popup"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
<span className="sr-only">Close</span>
|
|
</button>
|
|
)}
|
|
{children}
|
|
</div>,
|
|
container
|
|
)
|
|
}
|
|
|
|
type MapRouteProps = {
|
|
/** Optional unique identifier for the route layer */
|
|
id?: string
|
|
/** Array of [longitude, latitude] coordinate pairs defining the route */
|
|
coordinates: [number, number][]
|
|
/** Line color as CSS color value (default: "#4285F4") */
|
|
color?: string
|
|
/** Line width in pixels (default: 3) */
|
|
width?: number
|
|
/** Line opacity from 0 to 1 (default: 0.8) */
|
|
opacity?: number
|
|
/** Dash pattern [dash length, gap length] for dashed lines */
|
|
dashArray?: [number, number]
|
|
/** Callback when the route line is clicked */
|
|
onClick?: () => void
|
|
/** Callback when mouse enters the route line */
|
|
onMouseEnter?: () => void
|
|
/** Callback when mouse leaves the route line */
|
|
onMouseLeave?: () => void
|
|
/** Whether the route is interactive - shows pointer cursor on hover (default: true) */
|
|
interactive?: boolean
|
|
}
|
|
|
|
function MapRoute({
|
|
id: propId,
|
|
coordinates,
|
|
color = "#4285F4",
|
|
width = 3,
|
|
opacity = 0.8,
|
|
dashArray,
|
|
onClick,
|
|
onMouseEnter,
|
|
onMouseLeave,
|
|
interactive = true
|
|
}: MapRouteProps) {
|
|
const { map, isLoaded } = useMap()
|
|
const autoId = useId()
|
|
const id = propId ?? autoId
|
|
const sourceId = `route-source-${id}`
|
|
const layerId = `route-layer-${id}`
|
|
|
|
// Add source and layer on mount
|
|
useEffect(() => {
|
|
if (!isLoaded || !map) return
|
|
|
|
map.addSource(sourceId, {
|
|
type: "geojson",
|
|
data: {
|
|
type: "Feature",
|
|
properties: {},
|
|
geometry: { type: "LineString", coordinates: [] }
|
|
}
|
|
})
|
|
|
|
map.addLayer({
|
|
id: layerId,
|
|
type: "line",
|
|
source: sourceId,
|
|
layout: { "line-join": "round", "line-cap": "round" },
|
|
paint: {
|
|
"line-color": color,
|
|
"line-width": width,
|
|
"line-opacity": opacity,
|
|
...(dashArray && { "line-dasharray": dashArray })
|
|
}
|
|
})
|
|
|
|
return () => {
|
|
try {
|
|
if (map.getLayer(layerId)) map.removeLayer(layerId)
|
|
if (map.getSource(sourceId)) map.removeSource(sourceId)
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [isLoaded, map])
|
|
|
|
// When coordinates change, update the source data
|
|
useEffect(() => {
|
|
if (!isLoaded || !map || coordinates.length < 2) return
|
|
|
|
const source = map.getSource(sourceId) as MapLibreGL.GeoJSONSource
|
|
if (source) {
|
|
source.setData({
|
|
type: "Feature",
|
|
properties: {},
|
|
geometry: { type: "LineString", coordinates }
|
|
})
|
|
}
|
|
}, [isLoaded, map, coordinates, sourceId])
|
|
|
|
useEffect(() => {
|
|
if (!isLoaded || !map || !map.getLayer(layerId)) return
|
|
|
|
map.setPaintProperty(layerId, "line-color", color)
|
|
map.setPaintProperty(layerId, "line-width", width)
|
|
map.setPaintProperty(layerId, "line-opacity", opacity)
|
|
if (dashArray) {
|
|
map.setPaintProperty(layerId, "line-dasharray", dashArray)
|
|
}
|
|
}, [isLoaded, map, layerId, color, width, opacity, dashArray])
|
|
|
|
// Handle click and hover events
|
|
useEffect(() => {
|
|
if (!isLoaded || !map || !interactive) return
|
|
|
|
const handleClick = () => {
|
|
onClick?.()
|
|
}
|
|
const handleMouseEnter = () => {
|
|
map.getCanvas().style.cursor = "pointer"
|
|
onMouseEnter?.()
|
|
}
|
|
const handleMouseLeave = () => {
|
|
map.getCanvas().style.cursor = ""
|
|
onMouseLeave?.()
|
|
}
|
|
|
|
map.on("click", layerId, handleClick)
|
|
map.on("mouseenter", layerId, handleMouseEnter)
|
|
map.on("mouseleave", layerId, handleMouseLeave)
|
|
|
|
return () => {
|
|
map.off("click", layerId, handleClick)
|
|
map.off("mouseenter", layerId, handleMouseEnter)
|
|
map.off("mouseleave", layerId, handleMouseLeave)
|
|
}
|
|
}, [isLoaded, map, layerId, onClick, onMouseEnter, onMouseLeave, interactive])
|
|
|
|
return null
|
|
}
|
|
|
|
type MapClusterLayerProps<
|
|
P extends GeoJSON.GeoJsonProperties = GeoJSON.GeoJsonProperties
|
|
> = {
|
|
/** GeoJSON FeatureCollection data or URL to fetch GeoJSON from */
|
|
data: string | GeoJSON.FeatureCollection<GeoJSON.Point, P>
|
|
/** Maximum zoom level to cluster points on (default: 14) */
|
|
clusterMaxZoom?: number
|
|
/** Radius of each cluster when clustering points in pixels (default: 50) */
|
|
clusterRadius?: number
|
|
/** Colors for cluster circles: [small, medium, large] based on point count (default: ["#22c55e", "#eab308", "#ef4444"]) */
|
|
clusterColors?: [string, string, string]
|
|
/** Point count thresholds for color/size steps: [medium, large] (default: [100, 750]) */
|
|
clusterThresholds?: [number, number]
|
|
/** Color for unclustered individual points (default: "#3b82f6") */
|
|
pointColor?: string
|
|
/** Callback when an unclustered point is clicked */
|
|
onPointClick?: (
|
|
feature: GeoJSON.Feature<GeoJSON.Point, P>,
|
|
coordinates: [number, number]
|
|
) => void
|
|
/** Callback when a cluster is clicked. If not provided, zooms into the cluster */
|
|
onClusterClick?: (
|
|
clusterId: number,
|
|
coordinates: [number, number],
|
|
pointCount: number
|
|
) => void
|
|
}
|
|
|
|
function MapClusterLayer<
|
|
P extends GeoJSON.GeoJsonProperties = GeoJSON.GeoJsonProperties
|
|
>({
|
|
data,
|
|
clusterMaxZoom = 14,
|
|
clusterRadius = 50,
|
|
clusterColors = ["#22c55e", "#eab308", "#ef4444"],
|
|
clusterThresholds = [100, 750],
|
|
pointColor = "#3b82f6",
|
|
onPointClick,
|
|
onClusterClick
|
|
}: MapClusterLayerProps<P>) {
|
|
const { map, isLoaded } = useMap()
|
|
const id = useId()
|
|
const sourceId = `cluster-source-${id}`
|
|
const clusterLayerId = `clusters-${id}`
|
|
const clusterCountLayerId = `cluster-count-${id}`
|
|
const unclusteredLayerId = `unclustered-point-${id}`
|
|
|
|
const stylePropsRef = useRef({
|
|
clusterColors,
|
|
clusterThresholds,
|
|
pointColor
|
|
})
|
|
|
|
// Add source and layers on mount
|
|
useEffect(() => {
|
|
if (!isLoaded || !map) return
|
|
|
|
// Add clustered GeoJSON source
|
|
map.addSource(sourceId, {
|
|
type: "geojson",
|
|
data,
|
|
cluster: true,
|
|
clusterMaxZoom,
|
|
clusterRadius
|
|
})
|
|
|
|
// Add cluster circles layer
|
|
map.addLayer({
|
|
id: clusterLayerId,
|
|
type: "circle",
|
|
source: sourceId,
|
|
filter: ["has", "point_count"],
|
|
paint: {
|
|
"circle-color": [
|
|
"step",
|
|
["get", "point_count"],
|
|
clusterColors[0],
|
|
clusterThresholds[0],
|
|
clusterColors[1],
|
|
clusterThresholds[1],
|
|
clusterColors[2]
|
|
],
|
|
"circle-radius": [
|
|
"step",
|
|
["get", "point_count"],
|
|
20,
|
|
clusterThresholds[0],
|
|
30,
|
|
clusterThresholds[1],
|
|
40
|
|
],
|
|
"circle-stroke-width": 1,
|
|
"circle-stroke-color": "#fff",
|
|
"circle-opacity": 0.85
|
|
}
|
|
})
|
|
|
|
// Add cluster count text layer
|
|
map.addLayer({
|
|
id: clusterCountLayerId,
|
|
type: "symbol",
|
|
source: sourceId,
|
|
filter: ["has", "point_count"],
|
|
layout: {
|
|
"text-field": "{point_count_abbreviated}",
|
|
"text-font": ["Open Sans"],
|
|
"text-size": 12
|
|
},
|
|
paint: {
|
|
"text-color": "#fff"
|
|
}
|
|
})
|
|
|
|
// Add unclustered point layer
|
|
map.addLayer({
|
|
id: unclusteredLayerId,
|
|
type: "circle",
|
|
source: sourceId,
|
|
filter: ["!", ["has", "point_count"]],
|
|
paint: {
|
|
"circle-color": pointColor,
|
|
"circle-radius": 5,
|
|
"circle-stroke-width": 2,
|
|
"circle-stroke-color": "#fff"
|
|
}
|
|
})
|
|
|
|
return () => {
|
|
try {
|
|
if (map.getLayer(clusterCountLayerId))
|
|
map.removeLayer(clusterCountLayerId)
|
|
if (map.getLayer(unclusteredLayerId))
|
|
map.removeLayer(unclusteredLayerId)
|
|
if (map.getLayer(clusterLayerId)) map.removeLayer(clusterLayerId)
|
|
if (map.getSource(sourceId)) map.removeSource(sourceId)
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [isLoaded, map, sourceId])
|
|
|
|
// Update source data when data prop changes (only for non-URL data)
|
|
useEffect(() => {
|
|
if (!isLoaded || !map || typeof data === "string") return
|
|
|
|
const source = map.getSource(sourceId) as MapLibreGL.GeoJSONSource
|
|
if (source) {
|
|
source.setData(data)
|
|
}
|
|
}, [isLoaded, map, data, sourceId])
|
|
|
|
// Update layer styles when props change
|
|
useEffect(() => {
|
|
if (!isLoaded || !map) return
|
|
|
|
const prev = stylePropsRef.current
|
|
const colorsChanged =
|
|
prev.clusterColors !== clusterColors ||
|
|
prev.clusterThresholds !== clusterThresholds
|
|
|
|
// Update cluster layer colors and sizes
|
|
if (map.getLayer(clusterLayerId) && colorsChanged) {
|
|
map.setPaintProperty(clusterLayerId, "circle-color", [
|
|
"step",
|
|
["get", "point_count"],
|
|
clusterColors[0],
|
|
clusterThresholds[0],
|
|
clusterColors[1],
|
|
clusterThresholds[1],
|
|
clusterColors[2]
|
|
])
|
|
map.setPaintProperty(clusterLayerId, "circle-radius", [
|
|
"step",
|
|
["get", "point_count"],
|
|
20,
|
|
clusterThresholds[0],
|
|
30,
|
|
clusterThresholds[1],
|
|
40
|
|
])
|
|
}
|
|
|
|
// Update unclustered point layer color
|
|
if (map.getLayer(unclusteredLayerId) && prev.pointColor !== pointColor) {
|
|
map.setPaintProperty(unclusteredLayerId, "circle-color", pointColor)
|
|
}
|
|
|
|
stylePropsRef.current = { clusterColors, clusterThresholds, pointColor }
|
|
}, [
|
|
isLoaded,
|
|
map,
|
|
clusterLayerId,
|
|
unclusteredLayerId,
|
|
clusterColors,
|
|
clusterThresholds,
|
|
pointColor
|
|
])
|
|
|
|
// Handle click events
|
|
useEffect(() => {
|
|
if (!isLoaded || !map) return
|
|
|
|
// Cluster click handler - zoom into cluster
|
|
const handleClusterClick = async (
|
|
e: MapLibreGL.MapMouseEvent & {
|
|
features?: MapLibreGL.MapGeoJSONFeature[]
|
|
}
|
|
) => {
|
|
const features = map.queryRenderedFeatures(e.point, {
|
|
layers: [clusterLayerId]
|
|
})
|
|
if (!features.length) return
|
|
|
|
const feature = features[0]
|
|
const clusterId = feature.properties?.cluster_id as number
|
|
const pointCount = feature.properties?.point_count as number
|
|
const coordinates = (feature.geometry as GeoJSON.Point).coordinates as [
|
|
number,
|
|
number
|
|
]
|
|
|
|
if (onClusterClick) {
|
|
onClusterClick(clusterId, coordinates, pointCount)
|
|
} else {
|
|
// Default behavior: zoom to cluster expansion zoom
|
|
const source = map.getSource(sourceId) as MapLibreGL.GeoJSONSource
|
|
const zoom = await source.getClusterExpansionZoom(clusterId)
|
|
map.easeTo({
|
|
center: coordinates,
|
|
zoom
|
|
})
|
|
}
|
|
}
|
|
|
|
// Unclustered point click handler
|
|
const handlePointClick = (
|
|
e: MapLibreGL.MapMouseEvent & {
|
|
features?: MapLibreGL.MapGeoJSONFeature[]
|
|
}
|
|
) => {
|
|
if (!onPointClick || !e.features?.length) return
|
|
|
|
const feature = e.features[0]
|
|
const coordinates = (
|
|
feature.geometry as GeoJSON.Point
|
|
).coordinates.slice() as [number, number]
|
|
|
|
// Handle world copies
|
|
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
|
|
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360
|
|
}
|
|
|
|
onPointClick(
|
|
feature as unknown as GeoJSON.Feature<GeoJSON.Point, P>,
|
|
coordinates
|
|
)
|
|
}
|
|
|
|
// Cursor style handlers
|
|
const handleMouseEnterCluster = () => {
|
|
map.getCanvas().style.cursor = "pointer"
|
|
}
|
|
const handleMouseLeaveCluster = () => {
|
|
map.getCanvas().style.cursor = ""
|
|
}
|
|
const handleMouseEnterPoint = () => {
|
|
if (onPointClick) {
|
|
map.getCanvas().style.cursor = "pointer"
|
|
}
|
|
}
|
|
const handleMouseLeavePoint = () => {
|
|
map.getCanvas().style.cursor = ""
|
|
}
|
|
|
|
map.on("click", clusterLayerId, handleClusterClick)
|
|
map.on("click", unclusteredLayerId, handlePointClick)
|
|
map.on("mouseenter", clusterLayerId, handleMouseEnterCluster)
|
|
map.on("mouseleave", clusterLayerId, handleMouseLeaveCluster)
|
|
map.on("mouseenter", unclusteredLayerId, handleMouseEnterPoint)
|
|
map.on("mouseleave", unclusteredLayerId, handleMouseLeavePoint)
|
|
|
|
return () => {
|
|
map.off("click", clusterLayerId, handleClusterClick)
|
|
map.off("click", unclusteredLayerId, handlePointClick)
|
|
map.off("mouseenter", clusterLayerId, handleMouseEnterCluster)
|
|
map.off("mouseleave", clusterLayerId, handleMouseLeaveCluster)
|
|
map.off("mouseenter", unclusteredLayerId, handleMouseEnterPoint)
|
|
map.off("mouseleave", unclusteredLayerId, handleMouseLeavePoint)
|
|
}
|
|
}, [
|
|
isLoaded,
|
|
map,
|
|
clusterLayerId,
|
|
unclusteredLayerId,
|
|
sourceId,
|
|
onClusterClick,
|
|
onPointClick
|
|
])
|
|
|
|
return null
|
|
}
|
|
|
|
export {
|
|
Map,
|
|
useMap,
|
|
MapMarker,
|
|
MarkerContent,
|
|
MarkerPopup,
|
|
MarkerTooltip,
|
|
MarkerLabel,
|
|
MapPopup,
|
|
MapControls,
|
|
MapRoute,
|
|
MapClusterLayer
|
|
}
|
|
|
|
export type { MapRef, MapViewport }
|