3

I am using EasyButton plugin of leaflet (link). More specifically I applied EasyBar which unites several buttons. At certain zoom levels, I would like the buttons to collapse, in other words displaying only one button.

I have seen examples but couldn't succeed to apply in mine.
Here is my code:
So, how can I "hide" buttons (3,4,5,6) except one (2) in certain zoom levels?

 var btn2 = L.easyButton ({position: 'topright', 
  states: [{
    stateName: 'NoSources2',
    icon:'<span>masquer le nombre de resources</span>',
      title: 'NoSources' ,
      onClick: function(control) {
                map.removeLayer(NoSources);
                control.state('NoSources1')},
    },
    {
     stateName: 'NoSources1',
    icon: '<span>voir le nombre de resources</span>',
    title: 'NoSources',
    onClick: function(control)  {
    map.addLayer(NoSources);
    control.state('NoSources2')}, 
  }]
});
btn2.addTo(map);



var btn3 = L.easyButton ({position: 'topright', 
  states: [{
    stateName: 'altitude2',
    icon:'<span>masquer l`altitude des chapelles</span>',
      title: 'altitude' ,
      onClick: function(control) {
                map.removeLayer(altitude);
                control.state('altitude1')},
    },
    {
        stateName: 'altitude1',
    icon: '<span>voir l`altitude des chapelles</span>',
    title: 'altitude',
    onClick: function(control)  {
    map.addLayer(altitude);
    control.state('altitude2')}, 
  }]
});
btn3.addTo(map);


var btn4 = L.easyButton ({position: 'topright', 
  states: [{
    stateName: 'orientation1',
    icon:'<span>masquer l`orientation des chapelles</span>',
      title: 'orientation1' ,
      onClick: function(control) {
                map.removeLayer(orientation);
                control.state('orientation2')},
    },
    {
        stateName: 'orientation2',
    icon: '<span>voir l`orientation des chapelles</span>',
    title: 'orientation1',
    onClick: function(control)  {
    map.addLayer(orientation);
    control.state('orientation1')}, 
  }]
});
btn4.addTo(map);

var btn5 = L.easyButton ({position: 'topright', 
  states: [{
    stateName: 'cyclique1',
    icon:'<span>masquer l`info des temps cyclique</span>',
      title: 'cyclique' ,
      onClick: function(control) {
                map.removeLayer(cyclicTime);
                control.state('cyclique2')},
    },
    {
        stateName: 'cyclique2',
    icon: '<span>voir l`info des temps cyclique</span>',
    title: 'cyclique',
    onClick: function(control)  {
    map.addLayer(cyclicTime);
    control.state('cyclique1')}, 
  }]
});
btn5.addTo(map);

var btn6 = L.easyButton ({position: 'topright', 
  states: [{
    stateName: 'linear1',
    icon:'<span>masquer l`info des temps linéaire</span>',
      title: 'linear' ,
      onClick: function(control) {
                map.removeLayer(linearTime);
                control.state('linear2')},
    },
    {
        stateName: 'linear2',
    icon: '<span>voir l`info des temps linéaire</span>',
    title: 'linear',
    onClick: function(control)  {
    map.addLayer(linearTime);
    control.state('linear1')}, 
  }]
});
btn6.addTo(map);


var buttons = [btn4, btn3, btn2, btn6, btn5];
// build a toolbar with them
L.easyBar(buttons, {position: 'topright'}).addTo(map);

1 Answer 1

2

You should simply adapt the "Fancier Disable" example on your specific needs. In detail, you should create a listener associated to your map when the map zoom changes (zoomend event) like in the attached example:

Javascript:

// listeners for disabling buttons
map.on('zoomend', function(e) {

  var max = 15, // zoom limit to disable buttons
      current = map.getZoom();

  if (current < max) {
    btn3.enable();
    btn4.enable();
    btn5.enable();
    btn6.enable();
  }
  if (current >= max) {
    btn3.disable();
    btn4.disable();
    btn5.disable();
    btn6.disable();
  }

});

CSS:

.leaflet-bar.disabled,
.leaflet-bar button.disabled {
  opacity: 0;
  border: none;
}

Note: the CSS above is necessary in order to hide the buttons, otherwise we would get the same effect of the "Simple disable" example.

6
  • Thank you. I applied the code you provided. The result is that the buttons get grayish and disabled from use but do not collapse .
    – Gamze
    Apr 21, 2017 at 14:39
  • There was a typo in the CSS part. I've updated the answer. It should work fine now. Apr 21, 2017 at 14:54
  • Thank you once more. with the new css the buttons are disabled but the border remains.
    – Gamze
    Apr 21, 2017 at 15:08
  • So add also border: none; in the CSS code to make it not visible or directly display: none; Apr 21, 2017 at 15:50
  • @Gamze If you consider this answer useful, you could vote it up... thanks! Apr 21, 2017 at 16:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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