LayerList widget with actions

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

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
});

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.

  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);

  } 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;
    }
  }
});