Grouped layer list control for an OpenLayer map.
To be shown in the layer switcher layers should have a title
property; base
layers should have a type
property set to base
. Group layers
(ol.layer.Group
) can be used to visually group layers together; a group with
a fold
property set to either open
or close
will be displayed with a
toggle. See Examples for usage.
Compatible with OpenLayers version 3, 4, 5 and 6 (see note in Install - Parcel,
Webpack etc. regarding installing the appropriate version
of ol-layerswitcher
for OpenLayers).
The examples demonstrate usage and can be viewed online thanks to raw.githack.com:
- Basic usage
- Create a layer switcher control. Each layer to be displayed in the layer switcher has a
title
property as does each Group; each base map layer has atype: 'base'
property. See the comments in examples/layerswitcher.js for other layer/ group options includingcombine
andfold
.
- Create a layer switcher control. Each layer to be displayed in the layer switcher has a
- Add layer
- Add a layer to an existing layer group after the layer switcher has been added to the map.
- Scrolling
- Demonstrate the panel scrolling vertically, control the height of the layer switcher by setting the
max-height
(see examples/scroll.css) and it's position relative to the bottom of the map (see the.layer-switcher.shown
selector in src/ol-layerswitcher.css).
- Demonstrate the panel scrolling vertically, control the height of the layer switcher by setting the
- Side bar
- Demonstrates rendering the layer tree into a Turbo87/sidebar-v2 pane. This uses the static method
LayerSwitcher.renderPanel
which can be used to render the layer tree to any arbitrary HTML element.
- Demonstrates rendering the layer tree into a Turbo87/sidebar-v2 pane. This uses the static method
- Collapse groups
- Demonstrates setting the
fold
property of a Group to allow the group to be collapsed.
- Demonstrates setting the
- Selectable Groups
- Demonstrates setting the
groupSelectStyle
option which determines if groups have a checkbox and how toggling a groups visibility affects it's children. The demo includes the ability to change thegroupSelectStyle
to easily see the affect of the different values.
- Demonstrates setting the
- Bundling with
ol
package (Browserify, Parcel, Webpack...)- To use the layer switcher with the
ol
package and a module bundler such as Browserify, Parcel, Webpack etc. see ol-layerswitcher-examples.
- To use the layer switcher with the
The source for all examples can be found in examples.
Load ol-layerswitcher.js
after OpenLayers. The layerswitcher control is available as LayerSwitcher
or ol.control.LayerSwitcher
.
<script src="https://unpkg.com/ol-layerswitcher@3.5.0"></script>
<link rel="stylesheet" href="https://unpkg.com/ol-layerswitcher@3.5.0/src/ol-layerswitcher.css" />
NPM package: ol-layerswitcher.
Install the package via npm
npm install ol-layerswitcher --save
ol
package prior to v5 you'll need to install ol-layerswitcher@v2.0.0
.
The CSS file ol-layerswitcher.css
can be found in ./node_modules/ol-layerswitcher/src
To use the layerswitcher with the ol
package and a module bundler such as Parcel, Webpack etc. see ol-layerswitcher-examples.
To run the tests you'll need to install the dependencies via npm
. In the root of the repository run:
npm install
Then run the tests by opening test/index.html in a browser.
Extends ol/control/Control~Control
OpenLayers Layer Switcher Control. See the examples for usage.
Parameters
opt_options
Object Control options, extends ol/control/Control~Control#options adding:opt_options.tipLabel
String the button tooltip.opt_options.groupSelectStyle
String either'none'
- groups don't get a checkbox,'children'
(default) groups have a checkbox and affect child visibility or'group'
groups have a checkbox but do not alter child visibility (like QGIS).opt_options.reverse
boolean Reverse the layer order. Defaults to true.
Set the map instance the control is associated with.
Parameters
map
ol/Map~Map The map instance.
Show the layer panel.
Hide the layer panel.
Re-draw the layer panel to represent the current state of the layers.
Static Re-draw the layer panel to represent the current state of the layers.
Parameters
map
ol/Map~Map The OpenLayers Map instance to render layers forpanel
Element The DOM Element into which the layer tree will be renderedoptions
Static Call the supplied function for each layer in the passed layer group recursing nested groups.
Parameters
lyr
ol/layer/Group~LayerGroup The layer group to start iterating from.fn
Function Callback which will be called for eachol/layer/Base~BaseLayer
found underlyr
. The signature forfn
is the same asol/Collection~Collection#forEach
Static Generate a UUID Adapted from http://stackoverflow.com/a/2117523/526860
Returns String UUID
MIT (c) Matt Walker.
If you find the layer switcher useful you might also like the ol-popup.
npm run build
# Open ./tests/ in browser
# Open examples and manually test
# Update version number in `package.json`, `bower.json` and `README.md`
# Determine new version number (check current with `git tag --list`, check npm and GitHub)
git tag vX.Y.Z
git push origin master --tags
npm publish