L.cascadeButtons

A leaflet plugin to create cascade buttons.

DEMO

Requirements

Install

NPM

npm i leaflet-cascade-buttons

Usage Example

Easy way to implements buttons with cascade subgroup buttons where each one can have it functionality.

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

L.cascadeButtons receives two arguments:

Parent properties

| Property | Type | Default | Description | | ------------|--- | -------- | ----------------------------------------- | | icon | String | null | Icon class of Font Icon | | ignoreActiveState | Boolean | false | Flag boolean to ignore clicked button style | | command | Function | null or (expand or collapse if button has childs) | Function to execute when button is clicked | | items | Child properties[] | null | Array of child properties |

Child properties

| Property | Type | Default | Description | | ------------|--- | -------- | ----------------------------------------- | | icon | String | null | Icon class of Font Icon | | command | Function | null or (expand or collapse if button has childs) | Function to execute when button is clicked |

Options

| Option | Type | Default | Description | | ------------|--- | -------- | ----------------------------------------- | | position |String | 'bottomright' | Position of the control. Options: leaflet control positions | | direction |String | 'horizontal' | Stacked direction. Options: 'Vertical' and 'Horizontal' | | className |String | '' | className to customize control |

Font Icons

Can be used with any font icon / custom library like: