Animated Markers
Animate markers smoothly along paths for real-time tracking and visualization.
Installation
First, make sure you have the base map component installed:
npx shadcn@latest add https://terrae.vercel.app/maps/map.jsonThen install the animated marker component:
npx shadcn@latest add https://terrae.vercel.app/maps/map-marker-animated.jsonProperties
| Property | Type | Default | Description |
|---|---|---|---|
id | string | required | Unique identifier for the marker |
coordinates | Array<[number, number]> | required | Array of [longitude, latitude] coordinates defining the path |
color | string | "#3b82f6" | Marker color |
size | number | 10 | Marker radius in pixels |
duration | number | 5000 | Animation duration in milliseconds |
autoStart | boolean | true | Start animation automatically on mount |
loop | boolean | false | Loop the animation continuously |
showPath | boolean | false | Show the path/route line |
pathColor | string | "#3b82f6" | Path line color |
pathWidth | number | 4 | Path line width in pixels |
onComplete | () => void | undefined | Callback when animation completes |
Restart Animation
Control animation playback by restarting the animation on demand.
Multiple Markers
Animate multiple markers simultaneously by rendering several MapMarkerAnimated components.
Use Cases
Delivery Tracking
Real-time delivery tracking with ETAs and live updates
Ride-Sharing
Live vehicle location updates for ride-sharing apps
Fleet Management
Track and visualize fleet vehicles in real-time
Trip Playback
Historical route playback for past trips and travels
Activity Tracking
Running, cycling, and sports activity visualization
Flight Tracking
Animate aircraft along flight paths and routes
Performance Tips
- Limit the number of simultaneously animated markers
- Use cancelAnimationFrame to stop animations when not needed
- Simplify routes by removing unnecessary intermediate points
- Consider using web workers for complex path calculations
- Throttle updates if animating many markers simultaneously