This sample demonstrates how to add a LayerList widget with custom actions to your application. The actions are created via a function referenced by the listItemCreatedFunction property. This function takes an event object that references the ListItem.
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
const layerList = new LayerList({
view: view,
// executes for each ListItem in the LayerList
listItemCreatedFunction: defineActions
});
async function defineActions(event) {
// The event object contains an item property.
// is is a ListItem referencing the associated layer
// and other properties. You can control the visibility of the
// item, its title, and actions using this object.
const item = event.item;
await item.layer.when();
if (item.title === "US Demographics") {
// An array of objects defining actions to place in the LayerList.
// By making this array two-dimensional, you can separate similar
// actions into separate groups with a breaking line.
item.actionsSections = [
[
{
title: "Go to full extent",
className: "esri-icon-zoom-out-fixed",
id: "full-extent"
},
{
title: "Layer information",
className: "esri-icon-description",
id: "information"
}
],
[
{
title: "Increase opacity",
className: "esri-icon-up",
id: "increase-opacity"
},
{
title: "Decrease opacity",
className: "esri-icon-down",
id: "decrease-opacity"
}
]
];
}
}
Use the trigger-action event to define the behavior of each action returned by the function.
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
layerList.on("trigger-action", (event) => {
// The layer visible in the view at the time of the trigger.
const visibleLayer = USALayer.visible ? USALayer : censusLayer;
// Capture the action id.
const id = event.action.id;
if (id === "full-extent") {
// If the full-extent action is triggered then navigate
// to the full extent of the visible layer.
view.goTo(visibleLayer.fullExtent);
} else if (id === "information") {
// If the information action is triggered, then
// open the item details page of the service layer.
window.open(visibleLayer.url);
} else if (id === "increase-opacity") {
// If the increase-opacity action is triggered, then
// increase the opacity of the GroupLayer by 0.25.
if (demographicGroupLayer.opacity < 1) {
demographicGroupLayer.opacity += 0.25;
}
} else if (id === "decrease-opacity") {
// If the decrease-opacity action is triggered, then
// decrease the opacity of the GroupLayer by 0.25.
if (demographicGroupLayer.opacity > 0) {
demographicGroupLayer.opacity -= 0.25;
}
}
});
You can also specify custom content in the ListItem's panel. This can be any text, HTML node, or widget. For example, this app adds sliders to the panels of the two child group layers of the topmost layer. Each slider updates the opacity of the respective layer.
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
layerList.listItemCreatedFunction = async function (event) {
const item = event.item;
await item.layer.when();
// Adds a slider for updating a group layer's opacity
if(item.children.length > 1 && item.parent){
const slider = new Slider({
min: 0,
max: 1,
precision: 2,
values: [ 1 ],
visibleElements: {
labels: true,
rangeLabels: true
}
});
item.panel = {
content: slider,
className: "esri-icon-sliders-horizontal",
title: "Change layer opacity"
};
slider.on("thumb-drag", (event) => {
const { value } = event;
item.layer.opacity = value;
});
}
}