How to use leaflet-geosearch - 10 common examples

}
        }
      }*/
    };
    drawControl = new L.Control.Draw(drawOptions);
    map.addControl(drawControl);

    // add osm basemap
    let openStreetMapMapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    });
    openStreetMapMapnik.addTo(map);

    // add search
    let provider = new OpenStreetMapProvider();

    let searchControl = new GeoSearchControl({
      provider: provider,
    });
    map.addControl(searchControl);

    map.on('click', e =&gt; {
      store.dispatch(unfocusMenu());
      if (self.drawingPoints) {
        store.dispatch(removeGeometry());
        store.dispatch(addGeometry(e.latlng, 'point'));

        // temporary - setting results for identify here since
        // i can't find a good way of getting it in to the identify
        // tool while using leaflet for mapping
        const latlng = [e.latlng.lng, e.latlng.lat];

function onload2 (initState) {
  // Measurement plugin
  if (L.control.polylineMeasure) {
    L.control.polylineMeasure({
    }).addTo(map);
  }

  // Add Geo Search
  var provider = new LeafletGeoSearch.OpenStreetMapProvider()
  var searchControl = new LeafletGeoSearch.GeoSearchControl({
    provider: provider,
    showMarker: false,
    retainZoomLevel: true
  })
  map.addControl(searchControl)

  // Geo location
  L.control.locate({
    keepCurrentZoomLevel: true,
    drawCircle: false,
    drawMarker: false,
    showPopup: false
  }).addTo(map)

  // Scale bar

position[1] = this.props.modalState.longitude

          let newCircle = circle( position,  {radius: this.props.modalState.distance});
          newCircle._createdTime = new Date();
          newCircle._type = 'geolocationModal';
          newCircle.addTo(map);
          setTimeout( () => { map.flyTo(position); map.fitBounds(newCircle.getBounds()) }, 200);
        }

        // save the react component so that the map's events can use the react state
        map.reactContext = this;

        // uncomment to zoom in on the user's location on startup
        //navigator.geolocation.getCurrentPosition( x => map.setView( [x.coords.latitude, x.coords.longitude], 13 ));

        const provider = new OpenStreetMapProvider();
        const searchControl = new GeoSearchControl({
          style: 'bar',
          provider: provider,
          showMarker: false,
          keepResult: true,
          autoClose: true
        });

        const getMapControlOptions = drawnItems => ({ draw: { polygon: false, marker: false, rectangle: false, square: false, circle: true, polyline: false, circlemarker: false }, edit: { featureGroup: drawnItems, edit: false, remove: false } });

        // tile configuration for the map
        tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

        var drawnItems = new featureGroup();
        map.addLayer(drawnItems);

static addSearchControl(map, onLocationSelected) {
        // https://github.com/smeijer/leaflet-geosearch#geosearchcontrol
        const searchControl = new GeoSearchControl({
            provider: new OpenStreetMapProvider(),
            style: 'bar',
            //--------
            // if autoComplete is false, need manually calling provider.search({ query: input.value })
            autoComplete: true,         // optional: true|false  - default true
            autoCompleteDelay: 250,     // optional: number      - default 250
            //--------
            showMarker: false,          // optional: true|false  - default true
            showPopup: false,           // optional: true|false  - default false
            // marker: {                // optional: L.Marker    - default L.Icon.Default
            //     icon: new L.Icon.Default(),
            //     draggable: false,
            // },
            // popupFormat: ({ query, result }) => result.label,   // optional: function    - default returns result label
            // maxMarkers: 1,              // optional: number      - default 1
            retainZoomLevel: true,      // optional: true|false  - default false

}*/
    };
    drawControl = new L.Control.Draw(drawOptions);
    map.addControl(drawControl);

    // add osm basemap
    let openStreetMapMapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    });
    openStreetMapMapnik.addTo(map);

    // add search
    let provider = new OpenStreetMapProvider();

    let searchControl = new GeoSearchControl({
      provider: provider,
    });
    map.addControl(searchControl);

    map.on('click', e =&gt; {
      store.dispatch(unfocusMenu());
      if (self.drawingPoints) {
        store.dispatch(removeGeometry());
        store.dispatch(addGeometry(e.latlng, 'point'));

        // temporary - setting results for identify here since
        // i can't find a good way of getting it in to the identify
        // tool while using leaflet for mapping
        const latlng = [e.latlng.lng, e.latlng.lat];
        const results = geoblaze.identify(self.raster.georaster, latlng);
        store.dispatch(setResults(results));

let newCircle = circle( position,  {radius: this.props.modalState.distance});
          newCircle._createdTime = new Date();
          newCircle._type = 'geolocationModal';
          newCircle.addTo(map);
          setTimeout( () => { map.flyTo(position); map.fitBounds(newCircle.getBounds()) }, 200);
        }

        // save the react component so that the map's events can use the react state
        map.reactContext = this;

        // uncomment to zoom in on the user's location on startup
        //navigator.geolocation.getCurrentPosition( x => map.setView( [x.coords.latitude, x.coords.longitude], 13 ));

        const provider = new OpenStreetMapProvider();
        const searchControl = new GeoSearchControl({
          style: 'bar',
          provider: provider,
          showMarker: false,
          keepResult: true,
          autoClose: true
        });

        const getMapControlOptions = drawnItems => ({ draw: { polygon: false, marker: false, rectangle: false, square: false, circle: true, polyline: false, circlemarker: false }, edit: { featureGroup: drawnItems, edit: false, remove: false } });

        // tile configuration for the map
        tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

        var drawnItems = new featureGroup();
        map.addLayer(drawnItems);

        // add the geolocation search controller

function onload2 (initState) {
  // Measurement plugin
  if (L.control.polylineMeasure) {
    L.control.polylineMeasure({
    }).addTo(map);
  }

  // Add Geo Search
  var provider = new LeafletGeoSearch.OpenStreetMapProvider()
  var searchControl = new LeafletGeoSearch.GeoSearchControl({
    provider: provider,
    showMarker: false,
    retainZoomLevel: true
  })
  map.addControl(searchControl)

  // Geo location
  L.control.locate({
    keepCurrentZoomLevel: true,
    drawCircle: false,
    drawMarker: false,
    showPopup: false
  }).addTo(map)

  // Scale bar
  L.control.scale().addTo(map)

position: 'absolute',
  } as React.CSSProperties,
  center: {
    width: '50px',
    height: '50px',
    position: 'relative',
    top: 'calc(50% - 80px)',
    left: 'calc(50% - 25px)',
  } as React.CSSProperties,
  spinner: {
    margin: 0,
    padding: 0,
  } as React.CSSProperties
};

const provider = new EsriProvider(); // does the search from address to lng and lat 

interface IMapDataProps extends IGenericProps {
  mapProps: any;
  props: {
    searchLocations: boolean;
  };
}

interface IMapDataState extends IGenericState {
  markers: Array<{ position: string[] }>;
  locations: any[];
}

export default class MapData extends GenericComponent {

  static defaultProps = {

position: 'absolute',
  } as React.CSSProperties,
  center: {
    width: '50px',
    height: '50px',
    position: 'relative',
    top: 'calc(50% - 80px)',
    left: 'calc(50% - 25px)',
  } as React.CSSProperties,
  spinner: {
    margin: 0,
    padding: 0,
  } as React.CSSProperties
};

const provider = new EsriProvider(); // does the search from address to lng and lat 

interface IMapDataProps extends IGenericProps {
  mapProps: any;
  props: {
    searchLocations: boolean;
  };
};

interface IMapDataState extends IGenericState {
  markers: Object[];
  locations: any[];
}

export default class MapData extends GenericComponent {

  static defaultProps = {

(async () => {
  async function search(
    provider: BaseProvider,
    options = { query: 'Where is my home?' },
  ) {
    return provider.search(options);
  }

  [
    await search(new OpenStreetMapProvider()),
    await search(new BingProvider({ key: 'BING_API_KEY' })),
    await search(new EsriProvider()),
    await search(new GoogleProvider({ key: 'GOOGLE_MAPS_API_KEY ' })),
  ].forEach(([{ x, y, bounds, label, raw }]) => ({ x, y, bounds, label, raw }));
})();