clavijojuan / L.cascadeButtons

A leaflet plugin to create cascade buttons like controls

Home Page:https://vibrant-perlman-43d7a4.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

L.cascadeButtons

A leaflet plugin to create cascade buttons.

image


Requirements

  • Leaflet
  • Some Font Icons

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:

  • The first is an array that contains every parent button and it children's.
  • The second is an object with control options

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:

  • font awesome
  • boostrap icons
  • primeIcons
  • custom

About

A leaflet plugin to create cascade buttons like controls

https://vibrant-perlman-43d7a4.netlify.app/

License:MIT License


Languages

Language:JavaScript 80.1%Language:CSS 19.9%