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
CSS
esri/dijit/LayerList | Download source
Properties
Methods
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
load | | Fired when the LayerList widget has fully loaded. |
refresh | | Fired 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
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
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
}
];
Indicates whether the widget has been loaded.
Reference to the map.
Default value: null
Indicates whether to remove underscores from the layer title
Default value: true
Indicates whether to display a legend for the layer items. (Added at v3.15)
Default value: False
Indicates whether to display the opacity slider. (Added at v3.15)
Default value: False
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
CSS Class for uniquely styling the widget.
Default value: esriLayerList
Indicates whether to show the widget.
Default value: true
Method Details
Destroy the LayerList widget. Call this method when the widget is no longer needed by the application.
Reloads all layers and properties that may have changed.
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 the LayerList widget has fully loaded.
Sample:
on(widget, 'load', function(evt){})
Fired when refresh() is called on the widget.
Sample:
on(widget, 'refresh', function(evt){})
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){})