0

I am using EasyButton plugin of leaflet (link). More specifically I applied EasyBar which unites several buttons.
Plus, at certain zoom levels, I add/remove various layers with zoomend function (link). Is it possible to apply a function in which I can refer to BOTH button and zoom level? I don't know the formal code way but the idea something like the following:

  map.on('zoomend', onZoomend);
    function onZoomend(){
        if(map.getZoom()<8) else if btn2.enable(){}};

**and here is my code:

map.on('zoomend', onZoomend);
function onZoomend(){

    if(map.getZoom()<8)(){
    map.addControl(info0);
    map.removeControl(info1);       
    map.removeControl(info2);   
    map.removeControl(info3); 
}       

    if(map.getZoom()==8){
    map.addControl(info1);      
    map.removeControl(info2);   
    map.removeControl(info3);   
    }           };
1

I'm not well versed in Leaflet but it looks like you could use their DomUtil hasClass method to inspect whether or not the button has the 'enabled' or 'disabled' class present. Taking a look at the EasyButton github it looks like those classes get added when enable() or disable() is called, respectively.

Here are the enable() and disable() functions directly from the EasyButton GitHub:

enable: function(){
    L.DomUtil.addClass(this.button, 'enabled');
    L.DomUtil.removeClass(this.button, 'disabled');
    this.button.setAttribute('aria-hidden', 'false');
    return this;
  },

  disable: function(){
    L.DomUtil.addClass(this.button, 'disabled');
    L.DomUtil.removeClass(this.button, 'enabled');
    this.button.setAttribute('aria-hidden', 'true');
    return this;
  }

Using your example, it might look like this:

map.on('zoomend', onZoomend); function onZoomend(){ // Do something only if zoom is less than 8 AND button2 has the // 'enabled' class if(map.getZoom()<8) && L.DomUtil.hasClass(this.btn2,'enabled'){ // Your logic }};

It's worth noting that it looks like the 'enabled' and 'disabled' classes don't exist until either of the methods is called at least once.

  • Thank you @AHigh for your answer, but still not working... I tried with ---> else if (L.DomUtil.HasClass(btn2,'enabled')) – Gamze May 2 '17 at 16:20
  • What was the result? The method is hasClass (lower-case 'h'). – AHigh May 2 '17 at 16:23
  • It crashes. I tried with corrected lower-case version too. – Gamze May 2 '17 at 16:29
  • I've edited my answer, you might need to qualify the button class with a 'this'. – AHigh May 2 '17 at 16:36
  • I agree with you the fact that it has to be something with "DomUtil hasClass method". Nevertheless, it still does not work with the edited version. – Gamze May 2 '17 at 16:45

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.