Rectangle
Draw a rectangle on the map
<Rectangle
position={{ lon: 100.49, lat: 13.76 }}
size={{ width: 0.03, height: 0.02 }}
fillColor="rgba(0, 255, 0, 0.3)"
lineColor="green"
lineWidth={2}
editable
/>Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
position | Location | Yes | - | Top-left corner coordinates |
size | Size | Location | Yes | - | Size in degrees or bottom-right corner |
ref | Ref<RectangleRef> | No | - | Ref for imperative control |
title | string | No | - | Hover tooltip text |
detail | string | No | - | Popup text when clicked |
popup | PopupOptions | No | - | Popup configuration |
visibleRange | Range | No | All zoom levels | Zoom range visibility |
lineWidth | number | No | 3 | Border width in pixels |
lineColor | string | No | Preset color | Border color |
fillColor | string | No | Preset color | Fill color |
lineStyle | "Solid" | "Dashed" | "Dot" | No | "Solid" | Border style |
clickable | boolean | No | false | Show pointer cursor |
draggable | boolean | No | false | Allow dragging |
editable | boolean | No | false | Allow corner editing |
zIndex | number | No | 0 | Stacking order |
onClick | (rectangle: SphereRectangle) => void | No | - | Click handler |
onDrag | (rectangle: SphereRectangle) => void | No | - | Drag handler |
onDrop | (rectangle: SphereRectangle) => void | No | - | Drop handler |