React-Leaflet Search Box Implementation

Question

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.

Answer 1

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>
  );
}