LayerList widget with actions

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

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

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