Search
Add an address search bar to your map with geocoding powered by OpenStreetMap Nominatim.
The MapSearch component adds a floating search bar on the map. It uses the Nominatim geocoding API (OpenStreetMap) — free and no API key required. Type an address, select a result, and the map animates to the location.
Nominatim is free for reasonable use. For production apps with high traffic, consider self-hosting Nominatim or switching to a commercial geocoding provider.
Basic Example
Search for any address worldwide. A marker is placed at the selected location.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
position | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-left" | Position of the search bar on the map. |
placeholder | string | "Search address..." | Placeholder text displayed in the input field. |
zoom | number | 14 | Zoom level applied when flying to a search result. |
onSelect | (result: { longitude: number; latitude: number; displayName: string }) => void | — | Callback fired when the user selects a result from the dropdown. |
className | string | — | Additional CSS classes for the container. |