Map Animated Footprint

1"use client"
2 
3import { useEffect, useMemo, useRef, useState } from "react"
4import { createPortal } from "react-dom"
5import type mapboxgl from "mapbox-gl"
6import { Footprints } from "lucide-react"
7import { mapgl } from "./map-library"
8import { useMap } from "./hooks"
9import type { MapPath, MapCoordinates } from "./types"
10 
11type FootprintStep = {
12  coordinates: MapCoordinates
13  bearing: number
14  isLeft: boolean
15}
16 
17type MarkerEntry = {
18  marker: mapboxgl.Marker
19  element: HTMLDivElement
20}
21 
22type FootprintControl = {
23  start: () => void
24  reset: () => void
25  isActive: boolean
26}
27 
28type FootprintProps = {
29  entry: MarkerEntry
30  step: FootprintStep
31  color: string
32  size: number
33  className?: string
34}
35 
36type MapAnimatedFootprintProps = {
37  path: MapPath
38  id?: string
39  color?: string
40  size?: number
41  stepSpacing?: number
42  staggerDelay?: number
43  duration?: number
44  autoStart?: boolean
45  loop?: boolean
46  className?: string
47}
48 
49const footprintControls = new Map<string, FootprintControl>()
50 
51const DEFAULT_COLOR = "#000000"
52const DEFAULT_SIZE = 20
53const DEFAULT_STEP_SPACING = 48
54const DEFAULT_STAGGER_DELAY = 200
55const DEFAULT_DURATION = 400
56const METERS_PER_DEGREE_LATITUDE = 111320
57const LATERAL_OFFSET = 0.4
58 
59const approximateDistance = (from: MapCoordinates, to: MapCoordinates) => {
60  const latitudeRadians = (from[1] * Math.PI) / 180
61  const deltaX = (to[0] - from[0]) * Math.cos(latitudeRadians) * METERS_PER_DEGREE_LATITUDE
62  const deltaY = (to[1] - from[1]) * METERS_PER_DEGREE_LATITUDE
63 
64  return Math.sqrt(deltaX ** 2 + deltaY ** 2)
65}
66 
67const approximateBearing = (from: MapCoordinates, to: MapCoordinates) => {
68  const latitudeRadians = (from[1] * Math.PI) / 180
69  const deltaX = (to[0] - from[0]) * Math.cos(latitudeRadians)
70  const deltaY = to[1] - from[1]
71 
72  return ((Math.atan2(deltaX, deltaY) * 180) / Math.PI + 360) % 360
73}
74 
75const interpolateCoordinate = (from: MapCoordinates, to: MapCoordinates, fraction: number): MapCoordinates => {
76  return [from[0] + (to[0] - from[0]) * fraction, from[1] + (to[1] - from[1]) * fraction]
77}
78 
79const generateSteps = (path: MapPath, stepSpacing: number): FootprintStep[] => {
80  if (path.length < 2) {
81    return []
82  }
83 
84  const steps: FootprintStep[] = []
85  let distanceAccumulated = 0
86  let stepIndex = 0
87 
88  for (let segmentIndex = 0; segmentIndex < path.length - 1; segmentIndex++) {
89    const fromCoordinate = path[segmentIndex]
90    const toCoordinate = path[segmentIndex + 1]
91// … truncated