Search input
Simple Search input using mapy.cz suggestion API. Suggestions are shown as a dropdown with icons and basic information about the result (Like "Praha - capital city, Czechia"). When result is selected, map is automatically updated to point position.
How to use it
import { MapProvider, Map, SearchInput } from 'mapy-cz-react';
<MapProvider center={{ lat: 50.096406, lng: 14.463071 }} id="map-example">
<SearchInput />
<Map />
</MapProvider>;
Props
Name | Type | Default | Description | Required |
---|---|---|---|---|
className | string | "" | Class names applied to input component | ❌ |
disableGeolocation | bool | false | Flag disabling geolocation of input value on submit | ❌ |
disableSuggest | bool | false | Flag disabling suggestion dropdown | ❌ |
inputComp | string\elementType | "input" | Custom Input component to be used | ❌ |
inputValue | string | undefined | Value of input. With onValueChange handler prop makes component controled. | ❌ |
onSuggestItemSelect | func | undefined | Callback called after suggestion | ❌ |
onValueChange | func | undefined | Setter for input value. With inputValue prop makes component controled | ❌ |
Example
Live Editor
Result
Loading...