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

  • 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 '17 at 14:39
  • There was a typo in the CSS part. I've updated the answer. It should work fine now. – Antonio Falciano Apr 21 '17 at 14:54
  • Thank you once more. with the new css the buttons are disabled but the border remains. – Gamze Apr 21 '17 at 15:08
  • So add also border: none; in the CSS code to make it not visible or directly display: none; – Antonio Falciano Apr 21 '17 at 15:50
  • @Gamze If you consider this answer useful, you could vote it up... thanks! – Antonio Falciano Apr 21 '17 at 16:09

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.