Hide Table of Contents
esri
esri/arcgis
esri/dijit
esri/dijit/analysis
esri/dijit/geoenrichment
esri/dijit/geoenrichment/ReportPlayer
esri/geometry
esri/layers
esri/renderers
esri/symbols
esri/tasks
esri/tasks/datareviewer
esri/tasks/geoenrichment
esri/tasks/locationproviders
Class: LayerList
[ AMD Module Require | Legacy Module Require ]
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
| Name | Summary |
|---|---|
| new LayerList(options, srcNode) | Create a new LayerList widget using the given DOM node. |
CSS
esri/dijit/LayerList | Download source
Properties
| Name | Type | Summary |
|---|---|---|
| layers | Object[] | An array of operational layers. |
| loaded | Boolean | Indicates whether the widget has been loaded. |
| map | Map | Reference to the map. |
| removeUnderscores | Boolean | Indicates whether to remove underscores from the layer title. |
| showLegend | Boolean | Indicates whether to display a legend for the layer items. |
| showOpacitySlider | Boolean | Indicates whether to display the opacity slider. |
| showSubLayers | Boolean | Indicates whether to show sublayers in the list of layers. |
| theme | String | CSS Class for uniquely styling the widget. |
| visible | Boolean | Indicates whether to show the widget. |
Methods
| Name | Return type | Summary |
|---|---|---|
| destroy() | None | Destroy the LayerList widget. |
| refresh() | None | Reloads all layers and properties that may have changed. |
| startup() | None | Finalizes 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
| Name | Event Object | Summary |
|---|---|---|
| load | Fired when the LayerList widget has fully loaded. | |
| refresh | Fired when refresh() is called on the widget. | |
| toggle | {
layerIndex: < | Fired when the layer is toggled on/off within the widget. |
Constructor Details
Create a new LayerList widget using the given DOM node.
Parameters:
< |
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. |
< |
Required | Reference or id of the HTML element where the widget should be rendered. |
options properties: < |
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. |
< |
Required | Reference to the map. If no map is specified, the value is null. |
< |
Optional | Indicates whether to remove underscores from the layer title. |
< |
Optional | Indicates whether to display a legend for the layer items. Default is false. |
< |
Optional | Indicates whether to display the opacity slider. Default is false. |
< |
Optional | Indicates whether to show sublayers in the list of layers. Note: Prior to version 3.15, this was named sublayers. |
< |
Optional | The CSS class selector used to uniquely style the widget. The default value is esriLayerList. |
< |
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[]
Object[]An array of operational layers. See the object specification table below for the structure of the layers object.
Default value:
nullObject Specifications:
<
layers>< |
Optional | Custom button node that will appear within the layer title. |
< |
Optional | Custom node to insert the content. It displays below the title. |
< |
Required | Layer's feature collection. This is required if a layer is not specified. |
< |
Optional | The layers id. |
< |
Required | The layer object. This is required unless using a feature collection. |
< |
Optional | Indicates whether to display a legend for the layer items. |
< |
Optional | Indicates whether to display the opacity slider. |
< |
Optional | Indicates whether to show sublayers for this layer. Prior to version 3.15, this was named sublayers. |
< |
Optional | The title of the layer. |
< |
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
BooleanIndicates whether the widget has been loaded.
<Boolean
BooleanIndicates whether to remove underscores from the layer title
Default value:
true<Boolean
BooleanIndicates whether to display a legend for the layer items. (Added at v3.15)
Default value:
False<Boolean
BooleanIndicates whether to display the opacity slider. (Added at v3.15)
Default value:
False<Boolean
BooleanIndicates 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:
trueMethod Details
Destroy the LayerList widget. Call this method when the widget is no longer needed by the application.
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 ]
Fired when refresh() is called on the widget.
Sample:
on(widget, 'refresh', function(evt){})