MapImageLayer - Toggle sublayer visibility

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

This sample shows how to work with the sublayers of a MapImageLayer and toggle their visibility. The properties of individual sublayers are handled in the sublayers property of the layer.

// This layer has four sublayers. You can define the visibility of these layers in the
// sublayers property.
var 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.
*****************************************************************/
var sublayersElement = document.querySelector(".sublayers");
on(sublayersElement, ".sublayers-item:click", function(event) {
  var id = event.target.getAttribute("data-id");
  if (id) {
    var sublayer = layer.findSublayerById(parseInt(id));
    var node = document.querySelector(".sublayers-item[data-id='" + id + "']");
    sublayer.visible = !sublayer.visible;
    node.classList.toggle("visible-layer");
  }
});