Geospatial Field

Composite location picker supporting multiple geospatial coordinate formats.

This component renders an inline Ordnance Survey map that lets users click a location to auto-populate the coordinate inputs across multiple coordinate formats. The map requires the ordnanceSurveyApiKey and ordnanceSurveyApiSecret plugin options to be set — without them the component falls back to plain text inputs.

Requires client-side JavaScript

This component cannot be previewed here — it requires Ordnance Survey API credentials and a running map service that aren't available in the documentation environment.

A multiline text input that accepts raw GeoJSON is available as a fallback when JavaScript is unavailable, but this is not a recommended user journey. This component has a hard client-side JavaScript requirement. If JavaScript availability is a concern, use a progressively enhanced component instead.

We recommend using the map question pattern when asking users to select or draw locations on a map. This pattern provides alternatives so users who cannot use maps are not excluded.

To see the full experience, view our demo form which includes most components.

JSON definition

{
  "type": "GeospatialField",
  "name": "fieldName",
  "title": "Question title",
  "hint": "",
  "shortDescription": "",
  "options": {}
}

Properties

Property	Type	Required	Description
`hint`	`string`	No	Hint text displayed below the field label to help the user answer the question.
`shortDescription`	`string`	No	A short description of the field used in the check-your-answers summary.

Options

Property	Type	Required	Description
`classes`	`string`	No	Additional CSS classes applied to the component.
`condition`	`string`	No	Name of a condition that controls whether this component is shown.
`countries`	`GeospatialFieldOptionsCountry[]`	No
`customValidationMessages`	`object`	No	A map of Joi error codes to custom error messages.
`instructionText`	`string`	No	Alternative text read by screen readers in place of the field title.
`optionalText`	`boolean`	No	When `true`, appends '(optional)' to the field label.
`required`	`boolean`	No	Whether the field must be filled in. Defaults to `true`.

Warning

Requires client-side JavaScript

JSON definition

Properties

Options