L.cascadeButtons

A leaflet plugin to create cascade buttons.

!image

$3

-----------------------------------------------------------------------------------

Requirements

Leaflet

Some Font Icons

Install

$3



npm i leaflet-cascade-buttons

  



Usage Example



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

javascript

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:

The first is an array that contains every parent button and it children's.

The second is an object with control options

$3

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

$3

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

$3

| 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:

font awesome

boostrap icons

primeIcons

custom