Animated Lines
Animate line paths being drawn on the map with smooth transitions.
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 line component:
npx shadcn@latest add https://terrae.vercel.app/maps/map-line-animated.jsonAnimation Speed
Adjust the duration prop to control how fast the line is drawn. Lower values create faster animations, while higher values produce slower, more cinematic reveals. Enable loop for continuous playback.
Dashed Lines
Create dashed animated lines using the dashArray prop. The array defines the pattern as [dash length, gap length] in pixels.
Multiple Lines
Animate multiple lines simultaneously by adding multiple MapAnimatedLine components. Each line can have different colors, durations, and start times.
Custom Marker Icons
Use custom icons from Lucide or any React component as markers by passing them to the markerIcon prop. This example shows four parallel routes with rocket icons moving in the same direction.
With Checkpoints
Animate a route with checkpoint markers that get checked off as the line reaches them. Uses the onComplete callback to reset and loop the animation. Useful for delivery tracking, multi-stop routes, or progress visualizations.
Real-World Routing
Integrate with OSRM (Open Source Routing Machine) to fetch actual road-based routes and animate them. This example demonstrates a Paris bike tour using OSRM's cycling profile, which calculates realistic paths following bike lanes and roads rather than straight lines between points.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
id | string | required | Unique identifier for the route |
path | Array<[number, number]> | required | Array of [longitude, latitude] pairs |
color | string | "#3b82f6" | Route line color |
width | number | 4 | Route line width in pixels |
opacity | number | 1 | Route line opacity (0-1) |
dashArray | [number, number] | - | Dash pattern [dash length, gap length] for dashed lines |
duration | number | 3000 | Animation duration in milliseconds |
showMarker | boolean | true | Show animated marker moving along route |
markerColor | string | "#3b82f6" | Marker circle color (used when markerIcon is not provided) |
markerIcon | ReactNode | undefined | Custom marker icon (e.g., Lucide icon component) |
markerBorderless | boolean | false | Remove border/outline from marker |
autoStart | boolean | true | Auto-start animation on mount |
loop | boolean | false | Loop animation continuously |
onComplete | () => void | undefined | Callback when animation completes |
Use Cases
Delivery Tracking
Progressive route display for logistics and delivery tracking
Turn-by-Turn Directions
Animated path reveal for navigation and directions
Storytelling Tours
Journey progression for tours and storytelling applications
Fleet Management
Vehicle path history and real-time fleet visualization
Sports Tracking
Running, cycling, and activity route visualization
Trip Playback
Historical route playback for trips and travels
Performance Tips
- Simplify routes with many points by removing unnecessary coordinates
- Limit the number of simultaneously animating routes (3-5 recommended)
- Use longer durations for smoother animations with less CPU usage
- Disable marker with
showMarker=falsefor better performance - Consider using
autoStart=falseand trigger manually