Leaflet.Control.Layers.Tree

CI NPM version License Leaflet 1.x compatible!

A Tree Layers Control for Leaflet.

Description

This plugin extends Control.Layers allowing a tree structure for the layers layout. In Control.Layers you can only display a flat list of layers (baselayers and overlays), that is usually enough for small sets. If you have a long list of baselayers or overlays, and you want to organize them in a tree (allowing the user collapse and expand branches), this is a good option.

Some live examples here

Installation

Using npm for browserify npm install leaflet.control.layers.tree (and require('leaflet.control.layers.tree')), or just download L.Control.Layers.Tree.js and L.Control.Layers.Tree.css and add a script and link tag for it in your html.

Compatibility

This plugin has been tested with Leaflet 1.0.3, 1.1.0, 1.2.0, 1.3.1., 1.4.0, 1.5.1, 1.6.0 and 1.7.1

This plugin supports TypeScript. See file L.Control.Layers.Tree.d.ts

Usage

  1. Create your layers. Do this as usual.
  2. Create your layers tree, like the one just below.
  3. Create the control and add to the map: L.control.layers.tree(baseTree, overlaysTree, options).addTo(map);
  4. Voilà! 
    var baseTree = {
 label: 'Base Layers',
 children: [
     {
         label: 'World 🗺',
         children: [
             { label: 'OpenStreetMap', layer: osm },
             { label: 'Esri', layer: esri },
             { label: 'Google Satellite', layer: g_s },
             /* ... */
         ]
     },
     {
         label: 'Europe',
         children: [
             { label: 'France', layer: france },
             { label: 'Germany', layer: germany },
             { label: 'Spain', layer: spain },
             /* ... */
         ]
     },
     {
         label: 'USA',
         children: [
             {
                 label: 'General',
                 children: [
                     { label: 'Nautical', layer: usa_naut },
                     { label: 'Satellite', layer: usa_sat },
                     { label: 'Topographical', layer: usa_topo },
                 ]
             },
             {
                 label: 'States',
                 children: [
                     { label: 'CA', layer: usa_ca },
                     { label: 'NY', layer: usa_ny },
                     /* ... */
                 ]
             }
         ]
     },
 ]
};

    small tree sample

var overlaysTree = {
    label: 'Points of Interest',
    selectAllCheckbox: 'Un/select all',
    children: [
        {
            label: 'Europe',
            selectAllCheckbox: true,
            children: [
                {
                    label: 'France',
                    selectAllCheckbox: true,
                    children: [
                        { label: 'Tour Eiffel', layer: L.marker([48.8582441, 2.2944775]) },
                        { label: 'Notre Dame', layer: L.marker([48.8529540, 2.3498726]) },
                        { label: 'Louvre', layer: L.marker([48.8605847, 2.3376267]) },
                    ]
                }, {
                    label: 'Germany',
                    selectAllCheckbox: true,
                    children: [
                        { label: 'Branderburger Tor', layer: L.marker([52.5162542, 13.3776805])},
                        { label: 'Kölner Dom', layer: L.marker([50.9413240, 6.9581201])},
                    ]
                }, {label: 'Spain',
                    selectAllCheckbox: 'De/seleccionar todo',
                    children: [
                        { label: 'Palacio Real', layer: L.marker([40.4184145, -3.7137051])},
                        { label: 'La Alhambra', layer: L.marker([37.1767829, -3.5892795])},
                    ]
                }
            ]
        }, {
            label: 'Asia',
            selectAllCheckbox: true,
            children: [
                {
                    label: 'Jordan',
                    selectAllCheckbox: true,
                    children: [
                        { label: 'Petra', layer: L.marker([30.3292215, 35.4432464]) },
                        { label: 'Wadi Rum', layer: L.marker([29.6233486, 35.4390656]) }
                    ]
                }, {
                /* ... */
                }
            ]
        }
    ]
}

smalloverlay sample

API

L.Control.Layers.Tree

The main (and only) ‘class’ involved in this plugin. It exteds L.Control.Layers, so most of its methods are available. addBaseLayer, addOverlay and removeLayer are non usable in L.Control.Layers.Tree.

L.control.layers.tree(baseTree, overlayTree, options)

Creates the control. The arguments are:

constructor options

See that those strings can be html code, with unicode, images or whatever you want.

setBaseTree(tree)

Resets the base layers tree (like in constructor, an <Object> or <Array>). Internally removes and adds all the layers, so you may be notified if you registered those events. Returns this.

setOverlayTree(tree)

Resets the overlay layers tree (like in constructor, an <Object> or <Array>). Internally removes and adds all the layers, so you may be notified if you registered those events. Returns this.

expandTree(overlays)

This method expands the tree. When overlays is true expands the overlays tree. Otherwise expands the baselayers tree. Returns this.

collapseTree(overlays)

This method collapses the tree. When overlays is true collapses the overlays tree. Otherwise collapses the baselayers tree. Returns this.

expandSelected(overlays)

This method expands only the selected item in the tree. When overlays is true affects the overlays tree. Otherwise affects the baselayers tree. Returns this.

Tricks about the tree

The layers tree is a normal Objects tree like in the example above. The valid elements are:

You can see an example of a baselayers tree (the javascript code) above. You can provide a tree, or an array of trees.

Non leaf nodes (that is, those with children) can also have a layer. In this case you will be able to select the layer, and only the icon will collapse or expand this branch.

You can include HTML code, not only ascii chars, in the label attribute. It will be included as innerHTML. Be carefull with unicodes, because not every browser supports them all.

A leaf node without layer attribute is also posible. Only with label. This can be used to include special commands calling a javascript function, or a separator, or whatever you like. An example of separator node is

{label: '<div class="leaflet-control-layers-separator"></div>'}
This site is open source. Improve this page.