BBoxInput

Edits a BBox value, [west, south, east, north], by drawing a rectangle with draw-rectangle, edit, move and delete. A new rectangle replaces the old one, and aspectRatio grows the stored box around its centre to that width over height. It is ShapeInput with kind and tools set for you, so its table holds neither.

Loading preview…

Edits a BBox value, [west, south, east, north], by drawing a rectangle with draw-rectangle, edit, move and delete. A new rectangle replaces the old one, and aspectRatio grows the stored box around its centre to that width over height. It is ShapeInput with kind and tools set for you, so its table holds neither.

Installation

import { BBoxInput } from "@chelone/react/maps/draw";

See the maps guide for the subpaths, the optional packages and MapsProvider.

Props

Prop	Type	Default	Description
allowSelfIntersection	boolean	—	Set to false to flag a shape that crosses itself. Defaults to true, which checks nothing.
aspectRatio	number	—	Width over height of a `BBox` value. The stored box grows around its centre to this ratio and never shrinks, and the rectangle on the map follows it.
className	string	—
defaultCenter	readonly [number, number]	—	`[lat, lng]`. The map centre while the field is empty. Defaults to `[0, 0]`.
disabled	boolean	—	Shows the shape and hides the toolbar; pan and zoom still work.
fitBounds	boolean	—	Frame the first value on the map. The user's own edits never refit. Defaults to true.
height	string \| number	—	In pixels, or any CSS length. Defaults to 300.
helperText	ReactNode	—
label	ReactNode	—	The legend. A string is translated; `false` renders none.
mapStyle	MapStyleInput	—	Defaults to the style from `MapsProvider`.
maxVertices	number	—	Most vertices the shape may have.
minAreaM2	number	—	Smallest area in square metres a polygon may cover.
minVertices	number	—	Fewest vertices the shape may have; a polygon ring counts its distinct vertices. The shape is stored as drawn and the field is flagged.
onCommit	(value: ShapeValue \| null) => void	—	Called with the stored value after each drawing or edit has been written to the form, and again after `refine` writes a changed one.
refine	(value: ShapeValue, options: { signal: AbortSignal }) => ShapeValue \| Promise<ShapeValue \| null> \| null	—	Adjusts the value after the user's own drawing or edit, such as snapping a line to roads. It runs once the edit is in the form, never on load or reset, and a newer edit or an unmount aborts `signal`. A result that is not null and differs is written, unless the field changed meanwhile. A thrown error keeps the value as drawn. A null result is "nothing to change" unless `refineFailedMessage` is set, which a throw also notifies.
refineFailedMessage	string	—	Message key notified as a warning when `refine` resolves to null or throws (an abort excepted), and the value is kept as drawn. `LineStringInput` sets it for `snapToRoads`.
shapeStyle	ShapeStyle	—	Partial over `DEFAULT_SHAPE_STYLE`. Read once.
snapDistance	number	—	Pixels within which the pointer grabs a vertex or snaps. Read once. Defaults to 20.
snappable	boolean	—	Snap to existing coordinates and lines. Read once. Defaults to true.
source	string	—	The form field holding the GeoJSON value.
validate	Validator \| readonly Validator[]	—	Runs after the limits below.
zoom	number	—	Read once at mount. Defaults to 13.