MapWithSearch
An address search over a map: a <GeocodingInput> on addressSource above a map with a pin on latSource and lngSource. Picking a result fills all three fields and moves the pin. Clicking the map or dragging the pin writes the address of that spot, unless the service finds none, and the lookup runs only after such a gesture, never on mount and never after a pick, so a picked address is never overwritten. Needs the optional maplibre-gl peer.
An address search over a map: a <GeocodingInput> on addressSource above a map with a pin on latSource and lngSource. Picking a result fills all three fields and moves the pin. Clicking the map or dragging the pin writes the address of that spot, unless the service finds none, and the lookup runs only after such a gesture, never on mount and never after a pick, so a picked address is never overwritten. Needs the optional maplibre-gl peer.
Installation
import { MapWithSearch } from "@chelone/react/maps/osm";See the maps guide for the subpaths, the optional packages and MapsProvider.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| addressSource | SourceProp<TRecord> | — | The form field holding the address text. |
| className | string | — | |
| height | string | number | — | In pixels, or any CSS length. Defaults to 400. |
| latSource | SourceProp<TRecord> | — | The form field holding the latitude. |
| lngSource | SourceProp<TRecord> | — | The form field holding the longitude. |
| provider | GeocodingProvider | — | Defaults to the `geocoder` of `MapsProvider`. One of the two is required. |
| zoom | number | — | Read once at mount. Defaults to 13. |