aWhere Manual
DevelopWidgets

Geometry editor

Set a geometry field in the form that you embed, and read back what the user drew as GeoJSON.

The geometry editor is the field in the Form widget where the user draws a point, a line or a polygon on a map. It has no URL and no messages of its own. You do not embed it directly.

URL and parameters

The field comes from a form that defines it, so the form supplies its parameters. You set them in the form editor or in a form definition that you write yourself.

A component of this kind has component: "geometry-editor", is bound to a GeoJSON field of the table, and has these props.

Parameter (props)MeaningRequired
geometryTypepoint, line-string or polygon. It decides what can be drawn. Without it the field cannot be drawn on. The form editor sets it from the type of the table.Should
webMapIdThe id of the web map shown as the background. Without it, the site's default web map.No
label, placeholderThe text of the field.No
requiredA value must exist before the form can be submitted.No
readonly, disabledShow the shape only, with no drawing tools.No

Messages

The field sends no postMessage. Its value travels with the form.

ValueDirectionShape
The field's valueform to the database, when the user submitsOne GeoJSON geometry, or null when there is no shape.
submittedwidget to your pageNo payload. See Form.

The geometry is one of four kinds.

  • Point when there is one point.
  • MultiPoint when there are several points (a point field can hold many).
  • LineString when the field is line-string.
  • Polygon when the field is polygon.

A position is [longitude, latitude] with at most 9 decimals. A line or polygon field holds one shape.

A value given to the field (when an existing Record is opened) has the same form. The field loads a MultiLineString or MultiPolygon that has one part. With several parts the field stays empty.

Example

The component in a form definition.

{
  "component": "geometry-editor",
  "table": "<id of the table>",
  "field": "geom",
  "props": {
    "label": "Location",
    "geometryType": "point",
    "required": true
  }
}

Embed the form, wait for submitted, then read the Record that was just created through the API to get the geometry that the user drew. The embedding example is in Form.

Notes

  • There is no toolbar when geometryType is not set, or when the field is readonly or disabled.
  • The widget does not tell your page what the user is drawing. To show a shape on a map of your own, use the Map widget and send features.

On this page