DEPRECATED: ol3-layerswitcher is now ol-layerswitcher
If you require support for the "old" openlayers
NPM package then you can use the code in the master branch of this repository via:
npm install git+https://github.com/walkermatt/ol3-layerswitcher.git#master
But you probably want to use the ol
package for new projects in which case you want ol-layerswitcher.
OpenLayers LayerSwitcher
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.
Examples
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.
Tests
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.
API
new ol.control.LayerSwitcher(opt_options)
OpenLayers v3/v4 Layer Switcher Control. See the examples for usage.
Parameters:
Name | Type | Description |
---|---|---|
opt_options |
Object |
Control options, extends olx.control.ControlOptions adding: tipLabel String - the button tooltip. |
Extends
ol.control.Control
Methods
showPanel()
Show the layer panel.
hidePanel()
Hide the layer panel.
renderPanel()
Re-draw the layer panel to represent the current state of the layers.
setMap(map)
Set the map instance the control is associated with.
Parameters:
Name | Type | Description |
---|---|---|
map |
ol.Map |
The map instance. |
(static) ol.control.LayerSwitcher.forEachRecursive(lyr,fn)
Static Call the supplied function for each layer in the passed layer group recursing nested groups.
Parameters:
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 |
(static) ol.control.LayerSwitcher.uuid()
Generate a UUID
License
MIT (c) Matt Walker.
Also see
If you find the layer switcher useful you might also like the ol3-popup.