Hide Table of Contents
esri/dijit/util
esri/layer/pixelFilters
esri/process
esri/support
esri/workers
Class: LayerList

require(["esri/dijit/LayerList"], function(LayerList) { /* code goes here */ });

Description

(Added at v3.14)
(Currently in beta)
The LayerList widget provides a list of layers that allows the toggling of layer visibility.

NOTE: Toggling of map services, KML and WMS sublayers outside of the widget is not supported, in addition to sublayers that are out of scale range.

Samples

Search for samples that use this class.

Constructors

NameSummary
new LayerList(options, srcNode)Create a new LayerList widget using the given DOM node.

CSS

esri/dijit/LayerList | Download source

Properties

NameTypeSummary
layersObject[]An array of operational layers.
loadedBooleanIndicates whether the widget has been loaded.
mapMapReference to the map.
removeUnderscoresBooleanIndicates whether to remove underscores from the layer title.
showLegendBooleanIndicates whether to display a legend for the layer items.
showOpacitySliderBooleanIndicates whether to display the opacity slider.
showSubLayersBooleanIndicates whether to show sublayers in the list of layers.
themeStringCSS Class for uniquely styling the widget.
visibleBooleanIndicates whether to show the widget.

Methods

NameReturn typeSummary
destroy()NoneDestroy the LayerList widget.
refresh()NoneReloads all layers and properties that may have changed.
startup()NoneFinalizes the creation of the LayerList widget.

Events

[ On Style Events | Connect Style Event ]
All On Style event listeners receive a single event object. Additionally, the event object also contains a 'target' property whose value is the object which fired the event.

Events

NameEvent ObjectSummary
loadFired when the LayerList widget has fully loaded.
refreshFired when refresh() is called on the widget.
toggle
{
  layerIndex: <Number>,
  subLayerIndex: <Number>,
  visible: <Boolean>
}
Fired when the layer is toggled on/off within the widget.
Constructor Details

new LayerList(options, srcNode)

Create a new LayerList widget using the given DOM node.
Parameters:
<Object> options Required Set of options used to specify LayerList options. This parameter is required but can be null or an empty object. See the options properties below for details.
<Node | String> srcNode Required Reference or id of the HTML element where the widget should be rendered.
options properties:
<Object[]> layers Required An array of operational layers. An example of one can be seen here. If no layers are specified, the value is Null . Refer to the layers property for additional information on this.
<Map> map Required Reference to the map. If no map is specified, the value is null.
<Boolean> removeUnderscores Optional Indicates whether to remove underscores from the layer title.
<Boolean> showLegend Optional Indicates whether to display a legend for the layer items. Default is false.
<Boolean> showOpacitySlider Optional Indicates whether to display the opacity slider. Default is false.
<Boolean> showSubLayers Optional Indicates whether to show sublayers in the list of layers. Note: Prior to version 3.15, this was named sublayers.
<String> theme Optional The CSS class selector used to uniquely style the widget. The default value is esriLayerList.
<Boolean> visible Optional Indicates whether to show the LayerList widget. Default value is true.
Sample:
require([
  "esri/map", "esri/dijit/LayerList", ... 
], function(Map, LayerList, ...) {
  var map = new Map(...);
  var layerList = new LayerList({
    map: map,
    showLegend: true,
    showSubLayers: false,
    showOpacitySlider: true,
    layers: []
  },"layerListDom");
});
Property Details

<Object[]> layers

An array of operational layers. See the object specification table below for the structure of the layers object.
Default value: null
Object Specifications:
<layers>
<Node | String> button Optional Custom button node that will appear within the layer title.
<Node | String> content Optional Custom node to insert the content. It displays below the title.
<Layer> featureCollection Required Layer's feature collection. This is required if a layer is not specified.
<String> id Optional The layers id.
<Layer> layer Required The layer object. This is required unless using a feature collection.
<Boolean> showLegend Optional Indicates whether to display a legend for the layer items.
<Boolean> showOpacitySlider Optional Indicates whether to display the opacity slider.
<Boolean> showSubLayers Optional Indicates whether to show sublayers for this layer. Prior to version 3.15, this was named sublayers.
<String> title Optional The title of the layer.
<Boolean> visibility Optional Indicates whether to set the default visibility.
Sample:
layers = [
    {
        layer: Layer object // 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.
        showSubLayers: true, // optional, show sublayers for this layer. Defaults to the widget's 'showSubLayers' property.
        showLegend: true, // optional, display a legend for the layer items.
        content: <domNode>, // optional, custom node to insert content. It appears below the title.
        showOpacitySlider: true, // optional, display the opacity slider for layer items.
        button: <domNode>, // optional, custom button node that will appear within the layer title.
        visibility: true, // optionally set the default visibility
        id: "my_layer" // optionally set the layer's id
    },
    {
        //additional layer
    }
];

<Boolean> loaded

Indicates whether the widget has been loaded.

<Map> map

Reference to the map.
Default value: null

<Boolean> removeUnderscores

Indicates whether to remove underscores from the layer title
Default value: true

<Boolean> showLegend

Indicates whether to display a legend for the layer items. (Added at v3.15)
Default value: False

<Boolean> showOpacitySlider

Indicates whether to display the opacity slider. (Added at v3.15)
Default value: False

<Boolean> showSubLayers

Indicates whether to show sublayers in the list of layers. NOTE: Prior to version 3.15, this property was named, sublayers. (Added at v3.15)
Default value: true

<String> theme

CSS Class for uniquely styling the widget.
Default value: esriLayerList

<Boolean> visible

Indicates whether to show the widget.
Default value: true
Method Details

destroy()

Destroy the LayerList widget. Call this method when the widget is no longer needed by the application.

refresh()

Reloads all layers and properties that may have changed.

startup()

Finalizes the creation of the LayerList widget. Call startup() after creating the widget when you are ready for user interaction.
Sample:
var layerList = new LayerList({
   map: map,   
   layers: []
   });
layerList.startup();
Event Details
[ On Style Events | Connect Style Event ]

load

Fired when the LayerList widget has fully loaded.
Sample:
on(widget, 'load', function(evt){})

refresh

Fired when refresh() is called on the widget.
Sample:
on(widget, 'refresh', function(evt){})

toggle

Fired when the layer is toggled on/off within the widget.
Event Object Properties:
<Number> layerIndex The layer index number.
<Number> subLayerIndex The sublayer index number.
<Boolean> visible Whether the layer is visible.
Sample:
on(widget, 'toggle', function(evt){})
Show Modal