Lat Long Field

Paired decimal inputs for collecting WGS84 latitude and longitude coordinates.

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

Preview

This component is progressively enhanced. The coordinate fields work without JavaScript. With JavaScript enabled, an interactive map lets users click to set their location.

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

Enter a latitude and longitude

Latitude

Longitude

Map appears here with JavaScript enabled

JSON definition

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

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.
`customValidationMessage`	`string`	No	A single custom message shown for any validation error on this field.
`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`.

Schema constraints

Property	Type	Description
`latitude`	`object`	Latitude constraints (`min`, `max`).
`longitude`	`object`	Longitude constraints (`min`, `max`).