Map Marker Animated

1"use client"
2 
3import { useEffect, useRef, useState } from "react"
4import { useMap } from "./hooks"
5import type { MapPath } from "./types"
6 
7type MapMarkerAnimatedProps = {
8  /** Unique identifier for the marker */
9  id: string
10  /** Array of coordinates [[lng, lat], ...] defining the path */
11  coordinates: MapPath
12  /** Marker color */
13  color?: string
14  /** Marker size (radius in pixels) */
15  size?: number
16  /** Animation duration in milliseconds */
17  duration?: number
18  /** Auto-start animation on mount */
19  autoStart?: boolean
20  /** Loop animation */
21  loop?: boolean
22  /** Show the path/route line */
23  showPath?: boolean
24  /** Path line color */
25  pathColor?: string
26  /** Path line width */
27  pathWidth?: number
28  /** Callback when animation completes */
29  onComplete?: () => void
30}
31 
32export function MapMarkerAnimated({
33  id,
34  coordinates,
35  color = "#3b82f6",
36  size = 10,
37  duration = 5000,
38  autoStart = true,
39  loop = false,
40  showPath = false,
41  pathColor = "#3b82f6",
42  pathWidth = 4,
43  onComplete,
44}: MapMarkerAnimatedProps) {
45  const { map, isLoaded } = useMap()
46  const initializedRef = useRef(false)
47  const [isAnimating, setIsAnimating] = useState(false)
48  const animationFrameRef = useRef<number | undefined>(undefined)
49  const loopTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
50  const onCompleteRef = useRef(onComplete)
51  onCompleteRef.current = onComplete
52 
53  // Initialize marker and path layers
54  useEffect(() => {
55    if (!map || !isLoaded || initializedRef.current) return
56 
57    const markerSourceId = `${id}-marker-source`
58    const markerLayerId = `${id}-marker`
59    const pathSourceId = `${id}-path-source`
60    const pathLayerId = `${id}-path`
61 
62    try {
63      // Add marker source
64      map.addSource(markerSourceId, {
65        type: "geojson",
66        data: {
67          type: "Feature",
68          properties: {},
69          geometry: {
70            type: "Point",
71            coordinates: coordinates[0],
72          },
73        },
74      })
75 
76      // Add marker layer
77      map.addLayer({
78        id: markerLayerId,
79        type: "circle",
80        source: markerSourceId,
81        paint: {
82          "circle-radius": size,
83          "circle-color": color,
84          "circle-stroke-width": 2,
85          "circle-stroke-color": "#ffffff",
86        },
87      })
88 
89      // Add path if enabled
90      if (showPath) {
91        map.addSource(pathSourceId, {
92          type: "geojson",
93          data: {
94            type: "Feature",
95            properties: {},
96// … truncated