Camera Follow

Animate the camera along a path for immersive fly-through experiences.

Installation

First, make sure you have the base map component installed:

npx shadcn@latest add https://www.terrae.dev/map.json

Then install the camera follow component:

npx shadcn@latest add https://www.terrae.dev/camera-follow.json

Add a navigation marker that follows the camera position. Use marker for the default arrow, or pass a custom React element.

Use the useCameraFollowControl hook to control the animation externally. This provides isPlaying, start, stop, and toggle functions.

const { isPlaying, start, stop, toggle } = useCameraFollowControl()

<MapCameraFollow
  path={route}
  autoStart={isPlaying}
  onComplete={stop}
/>

Property	Type	Default	Description
`path`	[number, number][]	required	Array of coordinates for the camera to follow
`duration`	number	20000	Animation duration in milliseconds
`zoom`	number	14	Camera zoom level during flight
`pitch`	number	60	Camera tilt angle (0-85 degrees)
`autoStart`	boolean	true	Start animation automatically on mount
`loop`	boolean	false	Loop the animation continuously
`loopDelay`	number	1000	Delay before restarting loop in milliseconds
`onComplete`	() => void	-	Callback when animation completes
`marker`	boolean \| ReactNode	-	Navigation marker (true for default arrow, or custom element)
`markerSize`	number	48	Size of the default navigation marker in pixels