LatLngInput

Edits a latitude and a longitude held in two form fields, latSource and lngSource, by typing or by clicking a map. A click or a pin drag writes both fields rounded to 6 decimals and calls onPositionChange; typing never calls it.

Loading preview…

Edits a latitude and a longitude held in two form fields, latSource and lngSource, by typing or by clicking a map. A click or a pin drag writes both fields rounded to 6 decimals and calls onPositionChange; typing never calls it.

Installation

import { LatLngInput } from "@chelone/react/maps";

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

Props

Prop	Type	Default	Description
className	string	—
defaultPosition	readonly [number, number]	—	`[lat, lng]`. The map centre while either field is empty. Defaults to `[0, 0]`.
disabled	boolean	—	Disables both text fields and the pin; pan and zoom still work.
height	string \| number	—	In pixels, or any CSS length. Defaults to 300.
helperText	string	—
label	string \| false	—	The legend. A string is translated; `false` renders none.
latSource	SourceProp<TRecord>	—	The form field holding the latitude.
latValidate	Validator \| readonly Validator[]	—	Run after the -90..90 range check.
lngSource	SourceProp<TRecord>	—	The form field holding the longitude.
lngValidate	Validator \| readonly Validator[]	—	Run after the -180..180 range check.
mapStyle	MapStyleInput	—	Defaults to the style from `MapsProvider`.
onPositionChange	(lat: number, lng: number) => void	—	Called with the new position after a click or a pin drag, never for typing or a reset.
zoom	number	—	Read once at mount. Defaults to 13.