Map Line Animated

1"use client"
2 
3import { useEffect, useRef, useState, type ReactNode } from "react"
4import { createPortal } from "react-dom"
5import type mapboxgl from "mapbox-gl"
6import { mapgl } from "./map-library"
7import { useMap } from "./hooks"
8import type { MapPath } from "./types"
9 
10type MapLineAnimatedProps = {
11  id: string
12  path: MapPath
13  color?: string
14  width?: number
15  opacity?: number
16  dashArray?: [number, number]
17  duration?: number
18  showMarker?: boolean
19  markerColor?: string
20  markerIcon?: ReactNode
21  markerBorderless?: boolean
22  autoStart?: boolean
23  loop?: boolean
24  onComplete?: () => void
25}
26 
27const DEFAULT_COLOR = "#3b82f6"
28const DEFAULT_WIDTH = 4
29const DEFAULT_OPACITY = 1
30const DEFAULT_DURATION = 3000
31const DEFAULT_SHOW_MARKER = true
32const DEFAULT_MARKER_COLOR = "#3b82f6"
33const DEFAULT_MARKER_BORDERLESS = false
34const DEFAULT_AUTO_START = true
35const DEFAULT_LOOP = false
36const LOOP_RESTART_DELAY_MS = 500
37 
38export const MapLineAnimated = ({
39  id,
40  path,
41  color = DEFAULT_COLOR,
42  width = DEFAULT_WIDTH,
43  opacity = DEFAULT_OPACITY,
44  dashArray,
45  duration = DEFAULT_DURATION,
46  showMarker = DEFAULT_SHOW_MARKER,
47  markerColor = DEFAULT_MARKER_COLOR,
48  markerIcon,
49  markerBorderless = DEFAULT_MARKER_BORDERLESS,
50  autoStart = DEFAULT_AUTO_START,
51  loop = DEFAULT_LOOP,
52  onComplete,
53}: MapLineAnimatedProps) => {
54  const { map, isLoaded } = useMap()
55 
56  const initializedRef = useRef(false)
57  const styleLoadedRef = useRef(false)
58  const animationFrameRef = useRef<number | undefined>(undefined)
59  const htmlMarkerRef = useRef<mapboxgl.Marker | null>(null)
60  const markerElementRef = useRef<HTMLDivElement | null>(null)
61  const startTimeRef = useRef<number>(0)
62  const durationRef = useRef(duration)
63  const pathRef = useRef(path)
64  const colorRef = useRef(color)
65  const widthRef = useRef(width)
66  const opacityRef = useRef(opacity)
67  const dashArrayRef = useRef(dashArray)
68  const showMarkerRef = useRef(showMarker)
69  const markerColorRef = useRef(markerColor)
70  const markerBorderlessRef = useRef(markerBorderless)
71  const markerIconRef = useRef(markerIcon)
72  const onCompleteRef = useRef(onComplete)
73  const autoStartRef = useRef(autoStart)
74 
75  durationRef.current = duration
76  pathRef.current = path
77  colorRef.current = color
78  widthRef.current = width
79  opacityRef.current = opacity
80  dashArrayRef.current = dashArray
81  showMarkerRef.current = showMarker
82  markerColorRef.current = markerColor
83  markerBorderlessRef.current = markerBorderless
84// … truncated