Circle
Visualize areas and ranges with radius-based circles.
Installation
First, make sure you have the base map component installed:
npx shadcn@latest add https://www.terrae.dev/map.jsonThen install the circle component:
npx shadcn@latest add https://www.terrae.dev/circle.jsonDashed Stroke
Use the dashArray prop to create dashed outlines. The array defines [dash length, gap length] in pixels.
Multiple Circles
Add multiple MapCircle components to display several circles with different styles.
Concentric Circles
Layer circles with the same center but different radii to create concentric rings, useful for visualizing zones or impact ranges.
Draggable
Enable draggable to allow repositioning the circle by dragging. Use onDrag or onDragEnd to capture the new center coordinates.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
center | [number, number] | required | Center point [longitude, latitude] of the circle |
radius | number | required | Radius of the circle in meters |
fillColor | string | "#3b82f6" | Fill color of the circle |
fillOpacity | number | 0 | 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 |
segments | number | 64 | Number of segments for circle smoothness |
draggable | boolean | false | Enable dragging to reposition the circle |
cursor | string | "grab" | Cursor style when hovering over draggable circle |
onDragStart | (center) => void | - | Callback when drag begins |
onDrag | (center) => void | - | Callback during drag with new center coordinates |
onDragEnd | (center) => void | - | Callback when drag ends with final center coordinates |
Use Cases
Radius Search
Show search results within a distance from a point
Coverage Areas
Display service or signal coverage radius