Control Layers in a Tree structure
npm install leaflet.control.layers.tree
A Tree Layers Control for Leaflet.
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.
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.
This plugin is tested with Leaflet 1.9.4 (previously with 1.0.3, 1.1.0, 1.2.0, 1.3.1, 1.4.0, 1.5.1, 1.6.0, 1.7.1). Now also with Leaflet 2.0 alpha!
This plugin supports TypeScript. See file L.Control.Layers.Tree.d.ts
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à!
``javascript`
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 },
/ ... /
]
}
]
},
]
};
`javascript`
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]) }
]
}, {
/ ... /
}
]
}
]
}
The main (and only) 'class' involved in this plugin. It extends 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:
* baseTree:
##### constructor options
* closedSymbol: Symbol displayed on a closed node (that you can click to open). Default '+'.openedSymbol
* : Symbol displayed on a opened node (that you can click to close). Default '−' (−).spaceSymbol
* : Symbol between the closed or opened symbol, and the text. Default ' ' (a normal space).selectorBack
* : Flag to indicate if the selector (+ or −) is _after_ the text. Default 'false'.namedToggle
* : Flag to replace the toggle image (box with the layers image) with the 'name' of the selected base layer. If the name field is not present in the tree for this layer, label is used. See that you can show a different name when control is collapsed than the one that appears in the tree when it is expanded. Your node in the tree can be { label: 'OSM', name: 'OpenStreetMap', layer: layer }. Default 'false'.collapseAll
* : Text for an entry in control that collapses the tree (baselayers or overlays). If empty, no entry is created. Default ''.expandAll
* : Text for an entry in control that expands the tree. If empty, no entry is created. Default ''.labelIsSelector
* : Controls if a label or only the checkbox/radiobutton can toggle layers. If set to both, overlay or base those labels can be clicked on to toggle the layer. Default 'both'.
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
#### setOverlayTree(tree)
Resets the overlay layers tree (like in constructor, an
#### 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.
The layers tree is a normal Objects tree like in the example above. The valid elements are:
* children: Array of children nodes for this node. Nothing special.label
* : Text displayed in the tree for this node. It may contain HTML code.layer
* : The layer itself. You can create with L.tileLayer, L.marker, or however you want.name
* : Text displayed in the toggle when control is minimized. If not present, label is used. It makes sense only when namedToggle is true, and with base layers.radioGroup
* : Text to identify different radio button groups. It is used in the name attribute in the radio button. It is used only in the overlays layers (ignored in the base layers), allowing you to have radio buttons instead of checkboxes. See that radio groups cannot be unselected, so create a 'fake' layer (like L.layersGroup([])) if you want to disable it. Default '' (that means checkbox).collapsed
* : Indicate whether this tree node should be collapsed initially, useful for opening large trees partially based on user input or context. Disabled by default.selectAllCheckbox
* : or Displays a checkbox to select/unselect all overlays in the sub-tree. In case of being a , that text will be the title (tooltip). When any overlay in the sub-tree is clicked, the checkbox goes into indeterminate state (a dash in the box).eventedClasses
* : or
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 careful with unicodes, because not every browser supports them all.
A leaf node without layer attribute is also possible. 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
`javascript``
{label: ''}