Leaflet - geosearch click

by Alex Azuero

HTML

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/assets/css/leaflet.css">
<div id="map"></div>

CSS

#map {
  height: 400px;
}

JavaScript

/* Initialize basic map */
  var map = L.map('map').setView([52.0852378,5.3846249], 9);
L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  }).addTo(map);

  /* Create searchcontrols */

  var GeoSearchControl = window.GeoSearch.GeoSearchControl;
  var OpenStreetMapProvider = window.GeoSearch.OpenStreetMapProvider;
  var provider = new OpenStreetMapProvider({});

  //  Define search controls
  var searchControl = new GeoSearchControl({
    provider: provider,
    style: 'bar',
    showMarker: true,
    marker: {
      draggable: true
  },
    autoClose: true,
    keepResult: true,
  });
  
  // Add searchbar to the map
  map.addControl(searchControl);

  /* Create new layer for markers  */
  map.on('geosearch/showlocation', function(e) {
    $("#lat").val(e.location.y);
    $("#lng").val(e.location.x);

  });

/*map.on('click', function(e) {
    var newMarker = new L.marker(e.latlng).addTo(map);
    $("#lat").val(e.location.y);
    $("#lng").val(e.location.x);

  });
*/
map.on('geosearch/marker/dragend', function(e) {
    $("#lat").val(parseFloat(e.location.lat));
    $("#lng").val(parseFloat(e.location.lng));
  });