I would like to click on a sidebar/menu icon, and when I do the layerswitcher Icon should appear.

enter image description here

Right now the layerswitcher is always displayed. I know how to make it disappear with the command

display: none !important;

I should establish a connection between the layerswitcher and the menu icon.

The menu works, so when I click their pops out a menu. The code of the sidebar menu in html is:

    <div id="side-menu" class="side-nav">
  <a href="#" class="btn-close"
  onclick="closeSlideMenu()">&times; </a>
  <a href="#">Building</a>
  <a href="#">about</a>
  <button class="dropdown-btn">
  <div class="dropdown-container">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>


It is connected to a click event in js, where the code is: function openSlideMenu(){ document.getElementById('side-menu').style.width = '150px'; } function closeSlideMenu(){ document.getElementById('side-menu').style.width = '0'; }

The js code of the layerswitcher is:

 var overlayMaps= "building": riskByg};
 var byg=L.control.layers(null, overlayMaps).addTo(map);

I assume it has something to do with the connection of my sidemenu in html. But right now I can only connect to a link, and I want to connect it to an icon.

1 Answer 1


Initially just define layer control, do not add it to the map:

var byg = L.control.layers(null, overlayMaps);

When you want to to show it, add it to the map


and when you want to hide it, remove it from the map:

  • I have removed the layerswitcher function from the map. When I click the menu icon, i have made it possible to make the icon appear on the map. But I don't know how to remove it. my code is as follow: /* Open and close side bar */ function openSlideMenu(){ document.getElementById('side-menu',byg.addTo(map)).style.width = '150px'; } function closeSlideMenu(){ document.getElementById('side-menu').style.width = '0'; }
    – N.Juul
    Dec 10, 2018 at 10:46
  • Just add byg.remove() call to your closeSlideMenu() function: closeSlideMenu(){document.getElementById('side-menu').style.width = '0';byg.remove();}.
    – TomazicM
    Dec 10, 2018 at 16:04

Your Answer

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

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