Search supplied places or connect an asynchronous geocoding adapter.
import { MapSearch } from '@vrum/ui';
import { MapView } from '@vrum/ui';
<MapView center={[2.3522, 48.8566]} zoom={4} styleUrl="https://demotiles.maplibre.org/style.json" showControls={false}>
<MapSearch
position={"top-left"}
placeholder={"Search Paris, London, Berlin…"}
places={[{"id":"paris","label":"Paris","coordinates":[2.3522,48.8566]},{"id":"london","label":"London","coordinates":[-0.1276,51.5072]},{"id":"berlin","label":"Berlin","coordinates":[13.405,52.52]}]}
limit={5}
flyToZoom={8}
/>
</MapView>| Prop | Type | Default | Description |
|---|---|---|---|
position | MapPosition | "top-left" | position configuration. |
placeholder | string | "Search places…" | Hint shown when no value is entered. |
limit | number | 5 | limit configuration. |
flyToZoom | number | 14 | fly to zoom configuration. |
onSelect | ((result: MapSearchResult) => void) | none | on select configuration. |
onError | ((error: Error) => void) | none | on error configuration. |
search | ((query: string, signal: AbortSignal) => Promise<MapSearchResult[]>) | none | Application geocoding adapter; receives the query and an AbortSignal. |
places | MapSearchResult[] | noPlaces | places configuration. |