MapImageLayer - Toggle sublayer visibility

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
// This layer has four sublayers. You can define the visibility of these layers in the
// sublayers property.
const layer = new MapImageLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
  sublayers: [
    {
      id: 3,
      visible: false
    },
    {
      id: 2,
      visible: true
    },
    {
      id: 1,
      visible: true
    },
    {
      id: 0,
      visible: true
    }
  ]
});

...

/*****************************************************************
* Listen for when buttons on the page have been clicked to turn
* layers on and off in the Map Service. You can find a sublayer
* using mapImageLayer.findSublayerById.
*****************************************************************/
const sublayersElement = document.querySelector(".sublayers");
on(sublayersElement, ".sublayers-item:click", (event) => {
  const id = event.target.getAttribute("data-id");
  if (id) {
    const sublayer = layer.findSublayerById(parseInt(id));
    const node = document.querySelector(".sublayers-item[data-id='" + id + "']");
    sublayer.visible = !sublayer.visible;
    node.classList.toggle("visible-layer");
  }
});