Skip to content
Advertisement

leaflet input search outside of the div map (re-make)

i have a little problem, i’m working on Leaflet maps and i have no idea how could i do that my input search, shows the same results as the input search inside the map, i have looking for answers and some examples, even in the same leaflet documentation, and i cant find anything clear, i hope you can help me with this. the Js code, creates the input search on the map but i need to do my input search outside the map does the same.

<input id="search" type="search" class="sb-search-input" name="Search" autocomplete="off" placeholder="Enter your search term..." id="search" required=""/>
<div id="mapid" class="col-md-12" style="height: 400px;"></div>

      let map = L.map("mapid").setView([-33.45, -70.666667], 4);

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution:
    '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);

var searchText = L.esri.Geocoding.geosearch().addTo(map);

//adding layer groups on the search control
var results = L.layerGroup().addTo(map);

searchText.on("results", function (data) {
  results.clearLayers();

  for (var i = data.results.length - 1; i >= 0; i--) {
    results.addLayer(L.marker(data.results[i].latlng));

    console.log(data.results[i].latlng);
  }
});

Advertisement

Answer

well thanks everyone hahah, i could do it, but the problem now is that disorder my bootstrap, well anyway here it’s the solution.

var searchText = L.esri.BootstrapGeocoder.search({  
 //here we call the input id.
  inputTag: 'search',
  placeholder: 'ex. LAX',
}).addTo(map);
//adding layer groups on the search control
var results = L.layerGroup().addTo(map);

searchText.on('results', function(data){

  results.clearLayers();

  for (var i = data.results.length - 1; i >= 0; i--) {

    results.addLayer(L.marker(data.results[i].latlng));    
    console.log(data.results[i].latlng);
  }
})
Advertisement