Map Circle

1"use client"
2 
3import type mapboxgl from "mapbox-gl"
4 
5import { useEffect, useId, useRef } from "react"
6import { useMap } from "./hooks"
7import type { MapCoordinates, MapPath } from "./types"
8 
9type MapCircleProps = {
10  center: MapCoordinates
11  radius: number
12  fillColor?: string
13  fillOpacity?: number
14  strokeColor?: string
15  strokeWidth?: number
16  strokeOpacity?: number
17  dashArray?: [number, number]
18  segments?: number
19  draggable?: boolean
20  cursor?: string
21  onDragStart?: (center: MapCoordinates) => void
22  onDrag?: (center: MapCoordinates) => void
23  onDragEnd?: (center: MapCoordinates) => void
24}
25 
26const DEFAULT_FILL_COLOR = "#3b82f6"
27const DEFAULT_FILL_OPACITY = 0
28const DEFAULT_STROKE_COLOR = "#3b82f6"
29const DEFAULT_STROKE_WIDTH = 2
30const DEFAULT_STROKE_OPACITY = 1
31const DEFAULT_SEGMENTS = 64
32const EARTH_RADIUS_METERS = 6371008.8
33 
34const generateCircleCoordinates = (center: MapCoordinates, radiusMeters: number, segments: number): MapPath => {
35  const [lng, lat] = center
36  const coordinates: MapPath = []
37 
38  const latRadians = (lat * Math.PI) / 180
39  const lngRadians = (lng * Math.PI) / 180
40  const angularDistance = radiusMeters / EARTH_RADIUS_METERS
41 
42  for (let i = 0; i <= segments; i++) {
43    const bearing = (2 * Math.PI * i) / segments
44 
45    const pointLat = Math.asin(
46      Math.sin(latRadians) * Math.cos(angularDistance) +
47        Math.cos(latRadians) * Math.sin(angularDistance) * Math.cos(bearing)
48    )
49 
50    const pointLng =
51      lngRadians +
52      Math.atan2(
53        Math.sin(bearing) * Math.sin(angularDistance) * Math.cos(latRadians),
54        Math.cos(angularDistance) - Math.sin(latRadians) * Math.sin(pointLat)
55      )
56 
57    coordinates.push([(pointLng * 180) / Math.PI, (pointLat * 180) / Math.PI])
58  }
59 
60  return coordinates
61}
62 
63export const MapCircle = ({
64  center,
65  radius,
66  fillColor = DEFAULT_FILL_COLOR,
67  fillOpacity = DEFAULT_FILL_OPACITY,
68  strokeColor = DEFAULT_STROKE_COLOR,
69  strokeWidth = DEFAULT_STROKE_WIDTH,
70  strokeOpacity = DEFAULT_STROKE_OPACITY,
71  dashArray,
72  segments = DEFAULT_SEGMENTS,
73  draggable = false,
74  cursor,
75  onDragStart,
76  onDrag,
77  onDragEnd,
78}: MapCircleProps) => {
79  const { map, isLoaded } = useMap()
80  const id = useId()
81  const sourceId = `circle-source-${id}`
82  const fillLayerId = `circle-fill-layer-${id}`
83  const strokeLayerId = `circle-stroke-layer-${id}`
84  const initializedRef = useRef(false)
85  const isDraggingRef = useRef(false)
86 
87  const centerRef = useRef(center)
88  const radiusRef = useRef(radius)
89// … truncated