Currently I have this leaflet.js map

<div id="myMap" style="width: 100%; height:300px;"></div>

<script>
// This setup the leafmap object by linking the map() method to the map id (in <div> html element)
var map = L.map('myMap', {
center: [14.599512, 120.984222],
zoom: 13,
// minZoom: 1.5,
//  maxZoom: 1.5
});

// Start adding controls as follow... L.controlName().addTo(map);

// Control 1: This add the OpenStreetMap background tile
L.tileLayer('http://{s}.tile.osm/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="">OpenStreetMap</a> contributors'
}).addTo(map);


// Control 2: This add a scale to the map
L.control.scale().addTo(map);

// Control 3: This add a Search bar
var searchControl = new L.esri.Controls.Geosearch().addTo(map);


var results = new L.LayerGroup().addTo(map);

searchControl.on('results', function(data){
    results.clearLayers();
    for (var i = data.results.length - 1; i >= 0; i--) {
    results.addLayer(L.marker(data.results[i].latlng));
    }
});

this is the current output of this code.

This is working fine as of now. But What I'm trying to do is to make a search box outside the leaflet map. When the user type some places on the search box outside the map, the map will automatically find the value of searchbox.

This is my current mdb html code I don't have idea how to do that.

  <!--Grid row-->
   <div class="row">
     <div class="col-md-12">
        <div class="md-form mb-0">
            <input type="text" id="proj_loc" name="proj_loc" class="form-control">
            <label for="proj_loc" class="">Location</label>
         </div>
       </div>
   </div>
   <!--Grid row-->

Currently I have this leaflet.js map

<div id="myMap" style="width: 100%; height:300px;"></div>

<script>
// This setup the leafmap object by linking the map() method to the map id (in <div> html element)
var map = L.map('myMap', {
center: [14.599512, 120.984222],
zoom: 13,
// minZoom: 1.5,
//  maxZoom: 1.5
});

// Start adding controls as follow... L.controlName().addTo(map);

// Control 1: This add the OpenStreetMap background tile
L.tileLayer('http://{s}.tile.osm/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm/copyright">OpenStreetMap</a> contributors'
}).addTo(map);


// Control 2: This add a scale to the map
L.control.scale().addTo(map);

// Control 3: This add a Search bar
var searchControl = new L.esri.Controls.Geosearch().addTo(map);


var results = new L.LayerGroup().addTo(map);

searchControl.on('results', function(data){
    results.clearLayers();
    for (var i = data.results.length - 1; i >= 0; i--) {
    results.addLayer(L.marker(data.results[i].latlng));
    }
});

this is the current output of this code.

This is working fine as of now. But What I'm trying to do is to make a search box outside the leaflet map. When the user type some places on the search box outside the map, the map will automatically find the value of searchbox.

This is my current mdb html code I don't have idea how to do that.

  <!--Grid row-->
   <div class="row">
     <div class="col-md-12">
        <div class="md-form mb-0">
            <input type="text" id="proj_loc" name="proj_loc" class="form-control">
            <label for="proj_loc" class="">Location</label>
         </div>
       </div>
   </div>
   <!--Grid row-->

• javascript
• leaflet
• esri

Share Improve this question Follow asked Oct 11, 2019 at 7:12 King RGKing RG 51022 gold badges1313 silver badges2828 bronze badges 1

• This thread gives me an answer stackoverflow./questions/15919227/… – King RG Commented Oct 11, 2019 at 9:18

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Please check Leaflet Control Search Plugin for adding search control.

map.addControl( new L.Control.Search({
    container: 'findbox',
    layer: markersLayer,
    initial: false,
    collapsed: false
}) );

For example please check this You will get full code here

Hope this will help you.