Custom layer list with LayerListModel | Sample | ArcGIS Maps SDK for JavaScript

This sample combines LayerListModel with the Calcite Design System to build a custom layer list. Each layer has an icon, a description, and a visibility switch. The Show all and Hide all buttons let users control all operational layers at once.

How it works

Load the web map

Load a web map with three operational layers: Parks and Open Space, Trails, and Trailheads.

      <arcgis-map item-id="59a3db1da7744edb9c1818b74d1e954d">
        <arcgis-zoom slot="top-left"></arcgis-zoom>
        <arcgis-expand slot="bottom-left">
          <arcgis-legend></arcgis-legend>
        </arcgis-expand>
      </arcgis-map>

Create the model

Once the view is ready, pass it to the LayerListModel. The model’s operationalItems collection provides each layer’s title and visibility state for the custom controls.

      // Create a model that provides information about the map's operational layers.
      const layerListModel = new LayerListModel({
        view: viewElement.view,
      });

Build the custom layer list

Iterate over the model’s operationalItems collection to create a control for each layer.

For each item, create a Calcite Block using the item’s title and the icon and description defined in layerDetails. Add a Calcite Switch that updates the item’s visible property, and use reactiveUtils.watch() to keep the switch in sync when visibility changes elsewhere.

      for (const item of layerListModel.operationalItems) {
        const details = layerDetails[item.title];
        const block = document.createElement("calcite-block");
        block.heading = item.title;

        // Use default values if the map contains a layer not listed in layerDetails.
        if (details) {
          block.iconStart = details.icon;
          block.description = details.description;
        } else {
          block.iconStart = "layers";
          block.description = "";
        }

        // Add a switch that lets the user show or hide this layer.
        const visibilitySwitch = document.createElement("calcite-switch");
        visibilitySwitch.label = item.title + " visibility";
        visibilitySwitch.slot = "actions-end";
        visibilitySwitch.addEventListener("calciteSwitchChange", function () {
          item.visible = visibilitySwitch.checked;
        });

        // Keep the switch up to date if the layer visibility changes elsewhere.
        reactiveUtils.watch(
          () => item.visible,
          (visible) => {
            visibilitySwitch.checked = visible;
          },
          // Set the switch to the layer's current visibility when it is created.
          { initial: true },
        );

        block.appendChild(visibilitySwitch);
        layerControls.appendChild(block);
      }

Show or hide all layers

The Show all and Hide all buttons set visible to true or false for every item in operationalItems. The watchers update the switches automatically, and the basemap remains visible.

      // The Show all button turns on visibility for every operational layer.
      document.getElementById("show-all").addEventListener("click", function () {
        for (const item of layerListModel.operationalItems) {
          item.visible = true;
        }
      });

      // The Hide all button turns off visibility for every operational layer.
      document.getElementById("hide-all").addEventListener("click", function () {
        for (const item of layerListModel.operationalItems) {
          item.visible = false;
        }
      });