ShapeInput

Edits a GeoJSON value in a form field by drawing on a map: kind says what the field holds and picks the tools the toolbar shows. Each finished drawing, vertex drag, move or removal is written to the field, and a part the editor cannot hold shows read-only and stays in the value. The named inputs (PointInput, PolygonInput, ...) are this component with kind and tools set for you.

Loading preview…

Edits a GeoJSON value in a form field by drawing on a map: kind says what the field holds and picks the tools the toolbar shows. Each finished drawing, vertex drag, move or removal is written to the field, and a part the editor cannot hold shows read-only and stays in the value. The named inputs (PointInput, PolygonInput, ...) are this component with kind and tools set for you.

Installation

import { ShapeInput } 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	—
kind	ShapeValueKind	—	The kind of value the field holds, which decides what a drawing writes.
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	SourceProp<TRecord>	—	The form field holding the GeoJSON value.
tools	readonly ToolbarTool[]	—	The toolbar buttons, in order. Defaults to the tools that suit `kind`.
validate	Validator \| readonly Validator[]	—	Runs after the limits below.
zoom	number	—	Read once at mount. Defaults to 13.