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://terrae.vercel.app/maps/map.jsonThen install the animated polygon component:
npx shadcn@latest add https://terrae.vercel.app/maps/map-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
Service Coverage
Show delivery zones, network coverage, or service areas
Property Boundaries
Highlight parcels, districts, or administrative regions
Conservation Areas
Display protected zones, parks, or wildlife reserves
Urban Planning
Visualize zoning districts or development boundaries
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