Map Animated Circle

1"use client"
2 
3import { useEffect, useRef, useState } from "react"
4import type mapboxgl from "mapbox-gl"
5 
6import { useMap } from "./hooks"
7import type { MapCoordinates, MapPath } from "./types"
8 
9type AnimationMode = "draw" | "fill"
10 
11type MapAnimatedCircleProps = {
12  id: string
13  center: MapCoordinates
14  radius: number
15  strokeColor?: string
16  strokeWidth?: number
17  strokeOpacity?: number
18  strokeDashArray?: number[]
19  fillColor?: string
20  fillOpacity?: number
21  duration?: number
22  fillDuration?: number
23  autoStart?: boolean
24  loop?: boolean
25  loopDelay?: number
26  animationMode?: AnimationMode
27  segments?: number
28  onDrawComplete?: () => void
29  onFillComplete?: () => void
30  onComplete?: () => void
31}
32 
33const DEFAULT_STROKE_COLOR = "#3b82f6"
34const DEFAULT_STROKE_WIDTH = 2
35const DEFAULT_STROKE_OPACITY = 1
36const DEFAULT_FILL_COLOR = "#3b82f6"
37const DEFAULT_FILL_OPACITY = 0.3
38const DEFAULT_DURATION = 2000
39const DEFAULT_FILL_DURATION = 1000
40const DEFAULT_AUTO_START = true
41const DEFAULT_LOOP = false
42const DEFAULT_LOOP_DELAY = 1000
43const DEFAULT_ANIMATION_MODE: AnimationMode = "draw"
44const DEFAULT_SEGMENTS = 64
45const EARTH_RADIUS_METERS = 6371008.8
46 
47const generateCircleCoordinates = (center: MapCoordinates, radiusMeters: number, segments: number): MapPath => {
48  const [lng, lat] = center
49  const coordinates: MapPath = []
50 
51  const latRadians = (lat * Math.PI) / 180
52  const lngRadians = (lng * Math.PI) / 180
53  const angularDistance = radiusMeters / EARTH_RADIUS_METERS
54 
55  for (let i = 0; i <= segments; i++) {
56    const bearing = (2 * Math.PI * i) / segments
57 
58    const pointLat = Math.asin(
59      Math.sin(latRadians) * Math.cos(angularDistance) +
60        Math.cos(latRadians) * Math.sin(angularDistance) * Math.cos(bearing)
61    )
62 
63    const pointLng =
64      lngRadians +
65      Math.atan2(
66        Math.sin(bearing) * Math.sin(angularDistance) * Math.cos(latRadians),
67        Math.cos(angularDistance) - Math.sin(latRadians) * Math.sin(pointLat)
68      )
69 
70    coordinates.push([(pointLng * 180) / Math.PI, (pointLat * 180) / Math.PI])
71  }
72 
73  return coordinates
74}
75 
76export const MapAnimatedCircle = ({
77  id,
78  center,
79  radius,
80  strokeColor = DEFAULT_STROKE_COLOR,
81  strokeWidth = DEFAULT_STROKE_WIDTH,
82  strokeOpacity = DEFAULT_STROKE_OPACITY,
83  strokeDashArray,
84  fillColor = DEFAULT_FILL_COLOR,
85  fillOpacity = DEFAULT_FILL_OPACITY,
86  duration = DEFAULT_DURATION,
87  fillDuration = DEFAULT_FILL_DURATION,
88  autoStart = DEFAULT_AUTO_START,
89  loop = DEFAULT_LOOP,
90// … truncated