[GIS] EasyButton hide/show in leaflet

javascriptleaflet

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);

Best Answer

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.

Related Question