'How can I use external buttons instead of the default Layers Control?

Instead of Leaflet default Layers Control with checkbox, I want to use an <a> tag, when I click on it, it shows all associated layers to that button.

I have eight <a> with class and tag, so if I press the button "all", it shows all markers, if I press the button "clubhouses" it shows only clubhouses markers, etc.

Here is my HTML for the buttons

<div class="buttons">
    <div class="buttonsTop">
        <a href="" class="all">ALL</a>
        <a href="" class="clubhouses">CLUBHOUSES</a>
        <a href="" class="bunkers">BUNKERS</a>
        <a href="" class="hangars">HANGARS</a>
    </div>
    <div class="buttonsBottom">
        <a href="" class="facilities">FACILITIES</a>
        <a href="" class="nightclub">NIGHTCLUBS</a>
        <a href="" class="arcades">ARCADES</a>
        <a href="" class="arcades">AUTOSHOPS</a>
    </div>
</div>

javascript leaflet

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How can I use external buttons instead of the default Layers Control?

Sources

Related Questions