Map Camera Follow

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 MarkerState = {
11  position: [number, number]
12  bearing: number
13}
14 
15type MapCameraFollowProps = {
16  path: MapPath
17  duration?: number
18  zoom?: number
19  pitch?: number
20  autoStart?: boolean
21  loop?: boolean
22  loopDelay?: number
23  marker?: boolean | ReactNode
24  markerSize?: number
25  onComplete?: () => void
26}
27 
28const DEFAULT_DURATION = 20000
29const DEFAULT_ZOOM = 14
30const DEFAULT_PITCH = 60
31const DEFAULT_LOOP_DELAY = 1000
32const DEFAULT_MARKER_SIZE = 48
33 
34const calculateBearing = (from: [number, number], to: [number, number]): number => {
35  const dLon = ((to[0] - from[0]) * Math.PI) / 180
36  const lat1 = (from[1] * Math.PI) / 180
37  const lat2 = (to[1] * Math.PI) / 180
38 
39  const y = Math.sin(dLon) * Math.cos(lat2)
40  const x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon)
41 
42  return ((Math.atan2(y, x) * 180) / Math.PI + 360) % 360
43}
44 
45const interpolatePosition = (path: MapPath, progress: number): [number, number] => {
46  const totalSegments = path.length - 1
47  const segmentProgress = progress * totalSegments
48  const segmentIndex = Math.min(Math.floor(segmentProgress), totalSegments - 1)
49  const segmentFraction = segmentProgress - segmentIndex
50 
51  const start = path[segmentIndex]
52  const end = path[segmentIndex + 1]
53 
54  return [start[0] + (end[0] - start[0]) * segmentFraction, start[1] + (end[1] - start[1]) * segmentFraction]
55}
56 
57const DefaultNavigationMarker = ({ size }: { size: number }) => {
58  return (
59    <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
60      <path d="M24 4L8 40L24 32L40 40L24 4Z" fill="#3b82f6" stroke="white" strokeWidth="2" strokeLinejoin="round" />
61    </svg>
62  )
63}
64 
65export const MapCameraFollow = ({
66  path,
67  duration = DEFAULT_DURATION,
68  zoom = DEFAULT_ZOOM,
69  pitch = DEFAULT_PITCH,
70  autoStart = true,
71  loop = false,
72  loopDelay = DEFAULT_LOOP_DELAY,
73  marker,
74  markerSize = DEFAULT_MARKER_SIZE,
75  onComplete,
76}: MapCameraFollowProps) => {
77  const { map, isLoaded } = useMap()
78 
79  const animationFrameRef = useRef<number | undefined>(undefined)
80  const loopTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
81  const startTimeRef = useRef(0)
82// … truncated