CODEWITHSUNDEEP
leaflet
Kevin Waterson
Kevin Waterson

Reputation: 847

How to assign layer change event to HTML select in leaflet js?

I wish to mimic the radio button functionality of the radio button control with a dropdown select. (I have tried selectLayers plugin, however it has not been updated for 5 years and is not working as expected).

Currently, the HTML select is pressented from the javascript as follows.

var legend = L.control({position: 'topright'});
    legend.onAdd = function (map) {
    var div = L.DomUtil.create('div', 'info legend');
    div.innerHTML = '<select><option value="allCities">All Cities</option><option value="cities">Cities</option><option value="badCities">Bad Cities</option></select>';
    div.firstChild.onmousedown = div.firstChild.ondblclick = L.DomEvent.stopPropagation;
    return div;
};
legend.addTo(map);

How can an .change event be created to change the layer, as is the functionality of the radio buttons?

Fiddle

Upvotes: 0

Views: 1134

Answers (1)

Falke Design
Falke Design

Reputation: 11338

Add your layers to a object and then listen on the change event and add only the layer with the same name as the select value.

var selectLayers = {
    cities, // same as cities: cities
  badCities,
  allCities
}



L.DomEvent.on(div,'change',function(e){
     var select = e.target;
      for(var name in selectLayers){
        selectLayers[name].removeFrom(map);
      }
      selectLayers[select.value].addTo(map);
});

Example: https://jsfiddle.net/falkedesign/23wc9tL4/

Upvotes: 2

Related Questions