Animated Polygon
Animated polygons that draw their outline and fill with smooth transitions.
Installation
First, make sure you have the base map component installed:
npx shadcn@latest add https://www.terrae.dev/map.jsonThen install the animated polygon component:
npx shadcn@latest add https://www.terrae.dev/animated-polygon.jsonWith Fill
Use animationMode="draw-then-fill" to first draw the outline, then animate the fill opacity. Set fillColor and fillOpacity to customize the fill appearance.
Animation Modes
The component supports three animation modes:
draw- Only animate the polygon outline (no fill)fill- Show complete outline immediately and animate fill opacitydraw-then-fill- Draw outline first, then animate fill (default)
Properties
| Property | Type | Default | Description |
|---|---|---|---|
id | string | required | Unique identifier for the polygon |
coordinates | [number, number][] | required | Array of coordinates defining polygon vertices |
strokeColor | string | "#3b82f6" | Color of the polygon outline |
strokeWidth | number | 2 | Width of the polygon outline in pixels |
strokeOpacity | number | 1 | Opacity of the polygon outline (0-1) |
fillColor | string | "#3b82f6" | Color of the polygon fill |
fillOpacity | number | 0.3 | Target opacity of the polygon fill (0-1) |
duration | number | 2000 | Duration of outline drawing animation in ms |
fillDuration | number | 1000 | Duration of fill animation in ms |
animationMode | "draw" | "fill" | "draw-then-fill" | "draw-then-fill" | Animation sequence mode |
autoStart | boolean | true | Start animation automatically on mount |
loop | boolean | false | Loop the animation continuously |
loopDelay | number | 1000 | Delay before restarting loop in ms |
onDrawComplete | () => void | undefined | Callback when outline drawing completes |
onFillComplete | () => void | undefined | Callback when fill animation completes |
onComplete | () => void | undefined | Callback when entire animation completes |
Use Cases
Emergency Zones
Visualize wildfire, hurricane, or evacuation boundaries
Risk Assessment
Display flood zones, seismic risk, or hazard areas
Performance Tips
- Keep polygon vertices under 100 points for smooth animation
- Use
animationMode="fill"for simpler animations with less CPU usage - Increase
loopDelayto reduce continuous animation overhead - Use
autoStart=falseand trigger manually for user-initiated animations - Simplify complex polygon shapes using tools like Mapshaper before importing