Map Arc Animated

1"use client"
2 
3import { useEffect, useRef, useState } from "react"
4import { createPortal } from "react-dom"
5import type mapboxgl from "mapbox-gl"
6import { mapgl } from "./map-library"
7import { useMap } from "./hooks"
8import type { MapCoordinates, MapPath } from "./types"
9 
10type HeadType = "none" | "circle" | "square" | "arrow"
11 
12type MapArcAnimatedProps = {
13  id: string
14  origin: MapCoordinates
15  destination: MapCoordinates
16  color?: string
17  width?: number
18  opacity?: number
19  dashArray?: [number, number]
20  height?: number
21  segments?: number
22  duration?: number
23  autoStart?: boolean
24  loop?: boolean
25  loopDelay?: number
26  headType?: HeadType
27  headSize?: number
28  showOriginMarker?: boolean
29  originMarkerColor?: string
30  showDestinationMarker?: boolean
31  destinationMarkerColor?: string
32  onComplete?: () => void
33}
34 
35const DEFAULT_COLOR = "#3b82f6"
36const DEFAULT_WIDTH = 4
37const DEFAULT_OPACITY = 1
38const DEFAULT_HEIGHT = 0.3
39const DEFAULT_SEGMENTS = 50
40const DEFAULT_DURATION = 2000
41const DEFAULT_AUTO_START = true
42const DEFAULT_LOOP = false
43const DEFAULT_LOOP_DELAY = 500
44const DEFAULT_HEAD_TYPE: HeadType = "circle"
45const DEFAULT_HEAD_SIZE = 16
46const DEFAULT_SHOW_ORIGIN_MARKER = false
47const DEFAULT_SHOW_DESTINATION_MARKER = false
48const MARKER_RADIUS = 8
49 
50type HeadSvgProps = {
51  type: HeadType
52  size: number
53  color: string
54}
55 
56const HeadSvg = ({ type, size, color }: HeadSvgProps) => {
57  if (type === "none") {
58    return null
59  }
60 
61  if (type === "arrow") {
62    return (
63      <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
64        <polygon points="28,16 8,4 8,28" fill={color} />
65      </svg>
66    )
67  }
68 
69  if (type === "square") {
70    return (
71      <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
72        <rect x="4" y="4" width="24" height="24" fill={color} />
73      </svg>
74    )
75  }
76 
77  return (
78    <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
79      <circle cx="16" cy="16" r="12" fill={color} stroke="white" strokeWidth="3" />
80    </svg>
81  )
82}
83 
84const calculateBearing = (from: MapCoordinates, to: MapCoordinates): number => {
85  const dLon = ((to[0] - from[0]) * Math.PI) / 180
86  const lat1 = (from[1] * Math.PI) / 180
87  const lat2 = (to[1] * Math.PI) / 180
88 
89  const y = Math.sin(dLon) * Math.cos(lat2)
90  const x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon)
91 
92  return ((Math.atan2(y, x) * 180) / Math.PI + 360) % 360
93}
94 
95const generateArcPath = (
96  origin: MapCoordinates,
97// … truncated