Animated Footprint
Animated footprint steps that walk along a path on the map.
Installation
First, make sure you have the base map component installed:
npx shadcn@latest add https://www.terrae.dev/map.jsonThen install the footprint component:
npx shadcn@latest add https://www.terrae.dev/animated-footprint.jsonSpacing
Use stepSpacing to control the distance between footprints in meters. Smaller values create denser footprints, while larger values spread them further apart.
Size
Use the size prop to control how large the footprint icons appear. Larger sizes work well for close-up street-level views, while smaller sizes suit wider area overviews.
Stagger Delay
Use staggerDelay to control the pace of the walking animation. Higher values create a slower, more leisurely pace. This example uses 800ms between steps.
Control
Use the useFootprintControl hook with autoStart={false} to start and reset the animation programmatically.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
path | MapPath | required | Array of [longitude, latitude] coordinates defining the walking path |
id | string | "footprint" | Unique identifier for the footprint instance |
color | string | #000000 | Footprint icon color |
size | number | 20 | Footprint icon size in pixels |
stepSpacing | number | 48 | Distance between footprint steps in meters |
staggerDelay | number | 200 | Delay in milliseconds between each step appearing |
duration | number | 400 | Fade-in animation duration in milliseconds |
autoStart | boolean | true | Start animation automatically when the component mounts |
loop | boolean | false | Restart animation after all steps are shown |
className | string | - | Custom CSS class applied to each footprint element |
Tips
- For long paths with many steps, consider increasing
stepSpacingto reduce the number of markers and improve performance. - Use larger
sizevalues (24-32) for street-level zoom (16+) and smaller values (14-18) for wider area views (zoom 12-14). - The
loopprop is useful for demos and presentations, but consider disabling it for production to avoid continuous animation cycles.
Use Cases
Walking Tours
Visualize walking routes through cities and landmarks
Hiking Trails
Animate trail paths for outdoor and nature applications