Change Bootstrap Switch Depending on Leaflet Layer Zoom

Question

I have this JSFiddle that as you can see has two tile layers. I have set the minZoom of the 'Example Layer' to 5 so that it only loads once you have zoomed in that far.

The issue is, using Bootstrap Switch I cannot get the switch for the 'Example Layer' to be disabled until the user zooms in to zoom 5 in this case and then the layer would be visible.

The ideal solution would add a tooltip to show on to the switch whilst it is disabled that advises the user to zoom in further to view the layer.

Answer 1

This may provide a partial answer. Use the map event listener to listen for zoomend to toggle the state of your bootstrap switch.

map.on('zoomend', function (e) {
 // enable/disable based on zoom level
 if (map.getZoom()>=5) {
 $("[name='my-checkbox2']").bootstrapSwitch('disabled',false);
 }
 else if (map.getZoom()<5) {
 $("[name='my-checkbox2']").bootstrapSwitch('disabled',true);
 }});

See the updated JSFiddle. I also set the initial state of the button to 'disabled'. When you zoom to level 5 or higher the button will become enabled, and when zoom level goes back below 5 the button will be disabled once again.

• Joshua Dickerson: That's an excellent answer, thanks. I had tried an event listener but hadn't figured that bit out. I won't mark as accepted yet as it would be great if when the switch was disabled a tooltip told the user why this was the case.