Display leaflet layerswitcher on click event

Question

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

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">
    bygning
  </button>
  <div class="dropdown-container">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>

</div>

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.

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

byg.addTo(map);

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

byg.remove();