Searching markers with Leaflet.Control.Search from drop down list - Javascript Leaflet

Javascript examples for Leaflet:Marker

  1. HOME
  2. Javascript
  3. Leaflet
  4. Marker

Description

Searching markers with Leaflet.Control.Search from drop down list

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Leaflet selector control for marker clusters</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script> 
      <link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css"> 
      <script type="text/javascript" src="http://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script> 
      <link rel="stylesheet" type="text/css" href="http://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css"> 
      <link rel="stylesheet" type="text/css" href="http://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css"> 
      <script type="text/javascript" src="http://dl.dropboxusercontent.com/u/23920803/infographics/2016/2016.01.14_the_growing_of_Minsk/GeoJSON/villagesGeoJson.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//from   w w w .  j  a  va2s  .c o  m
var map = L.map('map', {
  center: [53.905, 27.562],
  zoom: 11
});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var markerClusterLayer = L.markerClusterGroup();
var markerLayer = L.geoJson(firstVillages, {
   onEachFeature: function(feature, layer) {
  var popup = '';
  if (feature.properties.name) {
     popup += '<b>' + feature.properties.name + '</b>';
   }
   if (feature.properties.size) {
      popup += '<br/>' + feature.properties.size;
  }
  layer.bindPopup(popup);
   }
});
var selector = L.control({
  position: 'topleft'
});
selector.onAdd = function(map) {
  var div = L.DomUtil.create('div', 'mySelector');
  div.innerHTML = '<select id = "marker_select"><option value = "init">(test)</option></select>';
  return div;
};
selector.addTo(map);
markerLayer.eachLayer(function(layer) {
  var optionElement = document.createElement("option");
  optionElement.innerHTML = layer.feature.properties.name;
  optionElement.value = layer._leaflet_id;
  L.DomUtil.get("marker_select").appendChild(optionElement);
});
var marker_select = L.DomUtil.get("marker_select");
L.DomEvent.addListener(marker_select, 'click', function(e) {
  L.DomEvent.stopPropagation(e);
});
L.DomEvent.addListener(marker_select, 'change', changeHandler);
function changeHandler(e) {
  if (e.target.value == "init") {
    map.closePopup();
  } else {
    var selected = markerLayer.getLayer(e.target.value);
    markerClusterLayer.zoomToShowLayer(selected, function() {
      selected.openPopup();
    })
  }
}
markerClusterLayer.addLayer(markerLayer);
map.addLayer(markerClusterLayer);
    }

      </script> 
   </head> 
   <body> 
      <div id="map" style="width:500px; height:500px"></div>  
   </body>
</html>

Related Tutorials