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

<MapProvider center={{ lat: 50.096406, lng: 14.463071 }} id="map-example"> <SearchInput /> <Map /> </MapProvider>

<MapProvider center={{ lat: 50.096406, lng: 14.463071 }} id="map-example">
    <SearchInput />
    <Map />
</MapProvider>

Result

Loading...