The LayerList widget provides an interface for users to toggle layer visibility. The style can be completely changed and skinned to match your own map design.
JavaScript HTML CSS
Latest commit 485a3fd Aug 13, 2015 @driskull driskull #11
Permalink
Failed to load latest commit information.
js #11 Aug 13, 2015
.jshintrc cleanup Apr 20, 2015
README.md fixes Jun 15, 2015
index.html #11 Aug 13, 2015
license.txt Create license.txt Apr 9, 2014
map.html Update map.html -so we can test adding layers after map is loaded. Jun 23, 2015

README.md

LayerList Widget

Features

The LayerList widget provides list of layers that allows the toggling of layer visibility. The style can be completely changed and skinned to match your own map design.

Purpose

  • This widget is meant to be simple. It's general purpose is for the end user to toggle layer visibility.
  • A legend isn't included along side each layer. Use the legend widget for displaying information about the layers.
  • There are options to specify a node for a button and/or custom content. These nodes will allow you to do your app's configuration of the layer or put custom content, like a transperency slider, underneath the layer's title.

Known Issues

  • Toggling of Mapservice, KML and WMS sublayers outside of the widget is not supported.
  • Out of scale range for sublayers not supported.

View it live

Quickstart

var map = response.map;
    //var layers = arcgisUtils.getLayerList(response);

    myWidget = new LayerList({
      map: map,
      //layers: layers
    }, "LayerList");
    myWidget.startup();

New to Github? Get started here.

Setup

Set your dojo config to load the module.

var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));
var dojoConfig = {
    // The locationPath logic below may look confusing but all its doing is
    // enabling us to load the api from a CDN and load local modules from the correct location.
    packages: [{
        name: "application",
        location: package_path + '/js'
    }]
};

Require module

Include the module for the LayerList.

require(["application/LayerList", ... ], function(LayerList, ... ){ ... });

Constructor

LayerList(options, srcNode);

Options (Object)

property required type value description
theme string esriLayerList CSS Class for uniquely styling the widget.
map x Map null ArcGIS JS Map
layers x Object[] null Operational Layers (Layer Example)
visible Boolean true Show the widget
removeUnderscores Boolean true Removes underscores from the layer title
subLayers Boolean true Show sublayers in the list of layers

Layers Object

This is what the layers array should look like.

layers = [
    {
        layer: LayerObject // required unless featureCollection.
        featureCollection: featureCollection, // required unless layerObject. if the layer is a feature collection, should match AGOL feature collection response and not have a layerObject.
        subLayers: true, // optional
        content: <domNode>, // optional
        button: <domNode>, // optional
        visibility: true, // optional
        id: "my_layer" // optional
    },
    {
        ...
    }
];

Properties

property type description
theme string CSS Class for uniquely styling the widget.
map Map ArcGIS JS Map
layers Array Array of layers
visible Boolean Show the widget
loaded Boolean If the widget has been loaded.
removeUnderscores Boolean

Methods

startup

startup(): Start the widget.

destroy

destroy(): Destroy the widget.

refresh

refresh(): reload all layers and properties that may have changed.

Events

load

Example

on(widget, 'load', function(evt){…})

refresh

Example

on(widget, 'refresh', function(evt){…})

toggle

Example

on(widget, 'toggle', function(evt){…})

Event Object

{
    layerIndex: Integer,
  subLayerIndex: Integer,
    visible: Boolean
}

Requirements

  • Notepad or HTML editor
  • A little background with Javascript
  • Experience with the ArcGIS Javascript API would help.

Resources

Issues

Find a bug or want to request a new feature? Please let us know by submitting an issue.

Contributing

Anyone and everyone is welcome to contribute.

Licensing

Copyright 2012 Esri

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

A copy of the license is available in the repository's license.txt file.