<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1, maximum-scale=1,user-scalable=no"
    />

    <!--
     ArcGIS API for JavaScript, https://js.arcgis.com
     For more information about the widgets-layerlist-actions sample,
     read the original sample description at developers.arcgis.com.
     https://developers.arcgis.com/javascript/latest/sample-code/widgets-layerlist-actions/index.html
     -->
    <title>
      LayerList widget with actions | Sample | ArcGIS API for JavaScript 4.16
    </title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
      }

      .error {
        color: 	rgb(255,69,0);
      }
			
			.message {
				font-style: italic;
				font-size: 1.2em;
			}
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.16/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.16/"></script>

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/GroupLayer",
        "esri/layers/MapImageLayer",
        "esri/layers/Layer",
        "esri/widgets/LayerList"
      ], function (Map, MapView, GroupLayer, MapImageLayer, Layer, LayerList) {
        // Create layer showing sample data of the United States.

        const USALayer = new MapImageLayer({
          url:
            "http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
          title: "US Sample Data"
        });

        // Create layer showing sample census data of the United States.
        // Set visibility to false so it's not visible on startup.

        const censusLayer = new MapImageLayer({
          url:
            "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer",
          title: "US Sample Census",
          visible: false
        });

        // Create GroupLayer with the two MapImageLayers created above
        // as children layers.

        const demographicGroupLayer = new GroupLayer({
          title: "US Demographics",
          visible: true,
          visibilityMode: "exclusive",
          layers: [USALayer, censusLayer],
          opacity: 0.75
        });

        // Create a map and add the group layer to it

        const map = new Map({
          basemap: "dark-gray-vector",
          layers: [demographicGroupLayer]
        });

        Layer.fromPortalItem({
          portalItem: {
            id: "a5ae5276bb6e4793a82d692d4d15ef98"
          }
        })
          .then((layer) => layer.load())
          .then((layer) => {
            map.add(layer);
          });

        // Add the map to a MapView

        const view = new MapView({
          center: [-98.5795, 39.8282],
          zoom: 4,
          container: "viewDiv",
          map: map
        });

        // Creates actions in the LayerList.

        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;

          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"
                }
              ]
            ];
          }

          if (event.item.layer.portalItem) {
            if (event.item.layer.portalItem.tags.includes("deprecated")) {
							const elem = document.createElement("div");
							elem.classList.add("error");
							elem.classList.add("message");
							elem.innerText = "Item Deprecated";
              item.panel = {
                content: elem,
                className: "esri-icon-notice-triangle error"
              };
            }
          }
        }

        view.when(function () {
          // Create the LayerList widget with the associated actions
          // and add it to the top-right corner of the view.

          const layerList = new LayerList({
            view: view,
            // executes for each ListItem in the LayerList
            listItemCreatedFunction: defineActions
          });

          // Event listener that fires each time an action is triggered

          layerList.on("trigger-action", function (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).catch(function (error) {
                if (error.name != "AbortError") {
                  console.error(error);
                }
              });
            } 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;
              }
            }
          });

          // Add widget to the top right corner of the view
          view.ui.add(layerList, "top-right");
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.