Grouped layer list control for an OpenLayer v3/v4 map.
All layers should have a title
property and base layers should have a type
property set to base
. Group layers (ol.layer.Group
) can be used to visually group layers together. See examples/layerswitcher.js for usage.
The examples demonstrate usage and can be viewed online thanks to RawGit:
- 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.
- 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/ol3-layerswitcher.css).
- Demonstrate the panel scrolling vertically, control the height of the layer switcher by setting the
- Browserify
- Example of using ol3-layerswitcher with Browserify (see examples/browserify/README.md for details of building.
The source for all examples can be found in 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.
OpenLayers v3/v4 Layer Switcher Control. See the examples for usage.
Name | Type | Description |
---|---|---|
opt_options |
Object |
Control options, extends olx.control.ControlOptions adding: tipLabel String - the button tooltip. |
ol.control.Control
Show the layer panel.
Hide the layer panel.
Re-draw the layer panel to represent the current state of the layers.
Set the map instance the control is associated with.
Name | Type | Description |
---|---|---|
map |
ol.Map |
The map instance. |
Static Call the supplied function for each layer in the passed layer group recursing nested groups.
Name | Type | Description |
---|---|---|
lyr |
ol.layer.Group |
The layer group to start iterating from. |
fn |
function |
Callback which will be called for each ol.layer.Base found under lyr . The signature for fn is the same as ol.Collection#forEach |
Generate a UUID
MIT (c) Matt Walker.
If you find the layer switcher useful you might also like the ol3-popup.