Are there any resources showing a search box implementation with react-leaflet?
I'd like to have my map pins populate upon a search result that would query and retrieve my existing data.
ie:
const names = [
{name: 'Joe', location: '40.734621, -73.989341 '},
{name: 'Seth', location: '45.77621, -73.789654 '},
]
Then, after searching for Joe or Seth, the map would populate with the location coordinates.
I found examples for leaflet.js but couldn't find any examples spun with react-leaflet.
Take a look at leaflet-geosearch
Install it with npm install --save leaflet-geosearch
Then you just need to build a component with it:
import { GeoSearchControl, OpenStreetMapProvider } from 'leaflet-geosearch';
class Search extends MapControl {
createLeafletElement() {
return GeoSearchControl({
provider: new OpenStreetMapProvider(),
style: 'bar',
showMarker: true,
showPopup: false,
autoClose: true,
retainZoomLevel: false,
animateZoom: true,
keepResult: false,
searchLabel: 'search'
});
}
}
export default Search;
And use your component in your Map:
render() {
return (
<Map>
(...)
<Search />
</Map>
);
}