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 and 5 (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 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 a type: 'base' property.
• 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).
• 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.
• Collapse groups
  • Demonstrates using the fold property with a Group to allow the group to be collapsed
• 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.

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/[email protected]"></script>

<link rel="stylesheet" href="https://unpkg.com/[email protected]/src/ol-layerswitcher.css" />

NPM package: ol-layerswitcher.

Install the package via npm

npm install ol-layerswitcher --save

⚠️ If you're using the ol package prior to v5 you'll need to install [email protected].

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.

• LayerSwitcher
  • setMap
  • showPanel
  • hidePanel
  • renderPanel
  • renderPanel
  • forEachRecursive
  • uuid

Extends ol.control.Control

OpenLayers Layer Switcher Control. See the examples for usage.

Parameters

• opt_options Object Control options, extends olx.control.ControlOptions adding:
  tipLabel String - the button tooltip.

Set the map instance the control is associated with.

Parameters

• map ol.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 The OpenLayers Map instance to render layers for
• panel Element The DOM Element into which the layer tree will be rendered

Static Call the supplied function for each layer in the passed layer group recursing nested groups.

Parameters

• 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 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.