example

.gitignore

@@ -1 +0,0 @@
-examples/*

examples/L.cascadeButtons.css

@@ -0,0 +1,59 @@
+.hidden {
+    visibility: hidden !important;
+}
+
+.leaflet-control-cascadeButtons{
+    background-color: transparent;
+    justify-content: center;
+    width: auto;
+    height: auto;
+    border:none;
+}
+
+.leaflet-control-cascadeButtons button{
+    border-radius: 2px;
+    border: none;
+    background-color:#fff;
+    box-shadow: 0 1px 5px rgb(0 0 0 / 65%);
+    height: 30px;
+    width: 30px;
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+    margin: 3px;
+    padding:2px;
+}
+
+.leaflet-control-cascadeButtons button:hover{
+    background-color:#f4f4f4;;
+}
+
+.vertical {
+    display: flex;
+    flex-direction: column;
+}
+
+.horizontal {
+    display: flex;
+    align-items: row-reverse;
+}
+
+.right {
+    align-items: flex-end;
+}
+
+.row-reverse {
+    flex-direction: row-reverse;
+}
+
+.col-reverse {
+    flex-direction: column-reverse;
+}
+
+.bottom {
+    align-items: flex-end;
+}
+
+.activeButton{
+    box-shadow: 0 0 1px 3px #C2CB00 !important;
+}

examples/L.cascadeButtons.js

@@ -0,0 +1,94 @@
+L.Control.cascadeButtons = L.Control.extend({
+    options: {
+        position: 'bottomright',
+        direction: 'horizontal',
+        className: ''
+    },
+
+    initialize: function(buttons, options){
+        L.Util.setOptions(this, options);
+        this._buttons = buttons;
+    },
+
+    onAdd: function (map){
+        const className = (this.options.className) ? this.options.className : 'leaflet-control-cascadeButtons';
+        const directionClass = this.buildDirection(this.options.direction);
+        const toolBar = L.DomUtil.create('div', `${className} ${directionClass}`);
+
+        this._buttons.forEach((button)=>{
+
+            const directionClass = this.buildDirection(this.getOposite(this.options.direction));
+            const container = L.DomUtil.create('div', `${directionClass}`);
+            toolBar.append(container);
+
+            const mainButton = L.DomUtil.create('button', `${button.icon}`);
+            mainButton.setAttribute("type", "button");
+            mainButton.setAttribute("aria-expanded", "false");
+            container.append(mainButton);
+
+            if(button.items && button.items.length>0){
+
+                button.items.forEach((item)=>{
+                    const childButton = L.DomUtil.create('button',`${item.icon} hidden`);
+                    childButton.setAttribute("type", "button");
+                    childButton.setAttribute("aria-expanded", "false");
+                    container.append(childButton);
+                    childButton.addEventListener('click', () => item.command());
+                })
+
+                mainButton.addEventListener('click', function(){
+                    container.childNodes.forEach( (child, index) => {
+                        if(index!==0) child.classList.toggle('hidden');
+                    });
+
+                    const isAriaExpanded = JSON.parse(mainButton.getAttribute("aria-expanded"));
+                    mainButton.setAttribute('aria-expanded', !isAriaExpanded);
+
+                    (!button.ignoreActiveState) ? mainButton.classList.toggle('activeButton') : '';
+                })
+            } 
+            else {
+                mainButton.addEventListener('click', function(){
+                    (!button.ignoreActiveState) ? mainButton.classList.toggle('activeButton') : '';
+                    button.command();
+                })
+            }
+        })
+
+        L.DomEvent.disableClickPropagation(toolBar);
+
+        return toolBar;
+    },
+
+    buildDirection: function(direction){
+
+        if(direction === "vertical"){
+            if((this.options.position).includes('left')){
+                if(this.options.position.includes('bottom')) direction = direction + ' col-reverse'
+            }
+            if((this.options.position).includes('right')){
+                if(this.options.position.includes('bottom')) direction = direction + ' col-reverse'
+                direction = direction + ' right';
+            }
+        }
+        else if(direction === "horizontal"){
+            if((this.options.position).includes('top')){
+                if(this.options.position.includes('right')) direction = direction + ' row-reverse';
+            }
+            if((this.options.position).includes('bottom')){
+                if(this.options.position.includes('right')) direction = direction + ' row-reverse';
+                direction = direction + ' bottom'
+            }
+        }
+
+        return direction
+    },
+
+    getOposite: function(direction){
+        return (direction === "vertical") ? "horizontal" : "vertical"
+    }
+})
+
+L.cascadeButtons = function(buttons, options){
+    return new L.Control.cascadeButtons(buttons, options);  
+}

examples/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Example</title>
+
+    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./L.cascadeButtons.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+</head>
+<body>
+    <div id="map"></div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="./L.cascadeButtons.js"></script>
+    <script src="index.js"></script>
+</body>
+</html>

examples/index.js

@@ -0,0 +1,113 @@
+var map = L.map('map').setView([51.505, -0.09], 13);
+L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+}).addTo(map);
+
+/// VERTICAL
+
+new L.cascadeButtons([
+    {icon: 'fas fa-home', ignoreActiveState:true , command: () =>{console.log('test') }},
+    {icon: 'fas fa-home', items:[
+        {icon: 'fas fa-home', command: () =>{console.log('hola')}},
+        {icon: 'fas fa-home', command: () =>{console.log('hola')}},
+        {icon: 'fas fa-globe', command: () =>{console.log('hola')}},
+    ]},
+    {icon: 'fas fa-home', items: [
+        {icon: 'fas fa-home', command: () =>{console.log('hola')}},
+        {icon: 'fas fa-globe', command: () =>{console.log('hola')}},
+    ]},
+], {position:'topleft', direction:'vertical'}).addTo(map);
+
+new L.cascadeButtons([
+    {icon: 'fas fa-home', ignoreActiveState:true , command: () =>{console.log('test') }},
+    {icon: 'fas fa-home', items:[
+        {icon: 'fas fa-home', command: () =>{console.log('hola')}},
+        {icon: 'fas fa-home', command: () =>{console.log('hola')}},
+        {icon: 'fas fa-globe', command: () =>{console.log('hola')}},
+    ]},
+    {icon: 'fas fa-home', items: [
+        {icon: 'fas fa-home', command: () =>{console.log('hola')}},
+        {icon: 'fas fa-globe', command: () =>{console.log('hola')}},
+    ]},
+], {position:'bottomright', direction:'vertical'}).addTo(map);
+
+new L.cascadeButtons([
+    {icon: 'fas fa-home', ignoreActiveState:true , command: () =>{console.log('test') }},
+    {icon: 'fas fa-home', items:[
+        {icon: 'fas fa-home', command: () =>{console.log('hola')}},
+        {icon: 'fas fa-home', command: () =>{console.log('hola')}},
+        {icon: 'fas fa-globe', command: () =>{console.log('hola')}},
+    ]},
+    {icon: 'fas fa-home', items: [
+        {icon: 'fas fa-home', command: () =>{console.log('hola')}},
+        {icon: 'fas fa-globe', command: () =>{console.log('hola')}},
+    ]},
+], {position:'topright', direction:'vertical'}).addTo(map);
+
+new L.cascadeButtons([
+    {icon: 'fas fa-home', ignoreActiveState:true , command: () =>{console.log('test') }},
+    {icon: 'fas fa-home', items:[
+        {icon: 'fas fa-home', command: () =>{console.log('hola')}},
+        {icon: 'fas fa-home', command: () =>{console.log('hola')}},
+        {icon: 'fas fa-globe', command: () =>{console.log('hola')}},
+    ]},
+    {icon: 'fas fa-home', items: [
+        {icon: 'fas fa-home', command: () =>{console.log('hola')}},
+        {icon: 'fas fa-globe', command: () =>{console.log('hola')}},
+    ]},
+], {position:'bottomleft', direction:'vertical'}).addTo(map);
+
+
+//// HORIZONTAL
+
+new L.cascadeButtons([
+    {icon: 'fas fa-home', ignoreActiveState:true , command: () =>{console.log('test') }},
+    {icon: 'fas fa-home', items:[
+        {icon: 'fas fa-home', command: () =>{console.log('hola')}},
+        {icon: 'fas fa-home', command: () =>{console.log('hola')}},
+        {icon: 'fas fa-globe', command: () =>{console.log('hola')}},
+    ]},
+    {icon: 'fas fa-home', items: [
+        {icon: 'fas fa-home', command: () =>{console.log('hola')}},
+        {icon: 'fas fa-globe', command: () =>{console.log('hola')}},
+    ]},
+], {position:'topleft', direction:'horizontal'}).addTo(map);
+
+new L.cascadeButtons([
+    {icon: 'fas fa-home', ignoreActiveState:true , command: () =>{console.log('test') }},
+    {icon: 'fas fa-home', items:[
+        {icon: 'fas fa-home', command: () =>{console.log('hola')}},
+        {icon: 'fas fa-home', command: () =>{console.log('hola')}},
+        {icon: 'fas fa-globe', command: () =>{console.log('hola')}},
+    ]},
+    {icon: 'fas fa-home', items: [
+        {icon: 'fas fa-home', command: () =>{console.log('hola')}},
+        {icon: 'fas fa-globe', command: () =>{console.log('hola')}},
+    ]},
+], {position:'bottomright', direction:'horizontal'}).addTo(map);
+
+new L.cascadeButtons([
+    {icon: 'fas fa-home', ignoreActiveState:true , command: () =>{console.log('test') }},
+    {icon: 'fas fa-home', items:[
+        {icon: 'fas fa-home', command: () =>{console.log('hola')}},
+        {icon: 'fas fa-home', command: () =>{console.log('hola')}},
+        {icon: 'fas fa-globe', command: () =>{console.log('hola')}},
+    ]},
+    {icon: 'fas fa-home', items: [
+        {icon: 'fas fa-home', command: () =>{console.log('hola')}},
+        {icon: 'fas fa-globe', command: () =>{console.log('hola')}},
+    ]},
+], {position:'topright', direction:'horizontal'}).addTo(map);
+
+new L.cascadeButtons([
+    {icon: 'fas fa-home', ignoreActiveState:true , command: () =>{console.log('test') }},
+    {icon: 'fas fa-home', items:[
+        {icon: 'fas fa-home', command: () =>{console.log('hola')}},
+        {icon: 'fas fa-home', command: () =>{console.log('hola')}},
+        {icon: 'fas fa-globe', command: () =>{console.log('hola')}},
+    ]},
+    {icon: 'fas fa-home', items: [
+        {icon: 'fas fa-home', command: () =>{console.log('hola')}},
+        {icon: 'fas fa-globe', command: () =>{console.log('hola')}},
+    ]},
+], {position:'bottomleft', direction:'horizontal'}).addTo(map);

examples/styles.css

@@ -0,0 +1,5 @@
+html, body, #map {
+    height: 100%;
+    width: 100%;
+    margin:0;
+}