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
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",
          icon: "zoom-out-fixed",
          id: "full-extent",
        },
        {
          title: "Layer information",
          icon: "information",
          id: "information",
        },
      ],
      [
        {
          title: "Increase opacity",
          icon: "chevron-up",
          id: "increase-opacity",
        },
        {
          title: "Decrease opacity",
          icon: "chevron-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
32
33
34
35
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).catch((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;
    }
  }
});

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
layerList.listItemCreatedFunction = async function (event) {
  const { item } = event;
  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,
      icon: "sliders-horizontal",
      title: "Change layer opacity",
    };

    // Watch the slider's values array and update the layer's opacity
    reactiveUtils.watch(
      () => slider.values.map((value) => value),
      (values) => (item.layer.opacity = values[0]),
    );
  }
};