Polygon
Draw filled polygons on the map.
Installation
First, make sure you have the base map component installed:
npx shadcn@latest add https://terrae.vercel.app/maps/map.jsonThen install the polygon component:
npx shadcn@latest add https://terrae.vercel.app/maps/map-polygon.jsonOutline Only
Set fillOpacity=0 to create an outline-only polygon without fill.
Dashed Stroke
Use the dashArray prop to create dashed outlines. The array defines [dash length, gap length] in pixels.
Multiple Polygons
Add multiple MapPolygon components to display several polygons with different styles.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
coordinates | [number, number][] | required | Array of [longitude, latitude] points defining the polygon |
fillColor | string | "#3b82f6" | Fill color of the polygon |
fillOpacity | number | 0.4 | Fill opacity (0-1) |
strokeColor | string | "#3b82f6" | Stroke/outline color |
strokeWidth | number | 2 | Stroke width in pixels |
strokeOpacity | number | 1 | Stroke opacity (0-1) |
dashArray | [number, number] | - | Dash pattern [dash, gap] for dashed strokes |
Use Cases
Geofencing
Define boundaries for location-based triggers
Coverage Areas
Display service coverage or delivery zones
Property Boundaries
Show land parcels or property lines
Restricted Zones
Highlight no-fly zones or restricted areas