0

Currently i try to use Booststrap switch with leaflet to show/mask layer+legend. 1rst step is ok, i can use checkboxes inside modal windows. I have a problem when 2 or more checkboxes are activated, layers are stacked on each other, same for my legend. Can someone show me the way to use booststrap switch buttons to show only one layer and deactivate all others (including the one used in the background during the loading page)?

Demo fiddle here

Code for one layer with Boostrap Switch. Show / mask only this layer, not all layers :

$("[name='checkboxL1']").bootstrapSwitch({
  onSwitchChange: function(event, state) {

    if (state) map1.addLayer(OSM2);
    else map1.removeLayer(OSM2);
  }
});

Thank you for excusing my English, I'm not native ...

arzlo
  • 1

1 Answers1

0

I found how to add buttons.

<div class="col-md-12 text-left">
 <input id='checkboxL1'type="radio" name="GroupedSwitches" data-size="mini"data-off-text="False" data-on-text="True" checked="false"class ="bs">&nb1a</div>

However, layerscant be displayed two or more times and they always overlap

Update fiddle here

arzlo
  • 1