Leaflet-cascade-buttons NPM

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