Negligible Psychological Misery

    ol-layerlist

    1.1.10 • Public • Published

    OpenLayers LayerSwitcher

    Grouped layer list control with group selection checkbox 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).

    Examples

    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 a type: 'base' property. allowSelection property will enable checkbox to show/hide complete group on map. fold property will allow you to collaspe\expand group. enableOpacitySliders property on layer will enable slider to manage opacity.

    The source for all examples can be found in examples.

    Install

    Browser

    JS

    Load ol-layerlist.js after OpenLayers. The layerswitcher control is available as LayerSwitcher or ol.control.LayerSwitcher.

    <script src="https://unpkg.com/ol-layerlist@1.1.8"></script>

    CSS

    <link rel="stylesheet" href="https://unpkg.com/ol-layerlist@1.1.8/src/ol-layerlist.css" />

    Parcel, Webpack etc.

    NPM package: ol-layerlist.

    JS

    Install the package via npm

    npm install ol-layerlist --save
    

    ⚠️ If you're using the ol package prior to v5 you'll need to install ol-layerlist@v1.1.8.

    CSS

    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

    Table of Contents

    LayerSwitcher

    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.

    setMap

    Set the map instance the control is associated with.

    Parameters

    • map ol.Map The map instance.

    showPanel

    Show the layer panel.

    hidePanel

    Hide the layer panel.

    renderPanel

    Re-draw the layer panel to represent the current state of the layers.

    renderPanel

    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

    forEachRecursive

    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

    uuid

    Static Generate a UUID
    Adapted from http://stackoverflow.com/a/2117523/526860

    Returns String UUID

    toggleFold_

    Fold/unfold layer group

    Parameters

    • lyr
    • li

    License

    MIT (c)

    Install

    npm i ol-layerlist

    DownloadsWeekly Downloads

    7

    Version

    1.1.10

    License

    MIT

    Unpacked Size

    85 kB

    Total Files

    26

    Last publish

    Collaborators

    • munnabhakta