This sample demonstrates how to add a LayerList widget with custom actions to your application. The actions are created via a function passed to the listItemCreatedFunction property. This function takes an event object that references the ListItem.
var layerList = new LayerList({
view: view,
// executes for each ListItem in the LayerList listItemCreatedFunction: defineActions
});
functiondefineActions(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.var item = event.item;
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.
layerList.on("trigger-action", function(event) {
// The layer visible in the view at the time of the trigger.var visibleLayer = USALayer.visible ? USALayer : censusLayer;
// Capture the action id.var 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);
} elseif (id === "information") {
// If the information action is triggered, then// open the item details page of the service layer.window.open(visibleLayer.url);
} elseif (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;
}
} elseif (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;
}
}
});