0

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.

2

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.

| improve this answer | |
  • 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. – Joshua Dickerson Jan 21 '16 at 15:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.