This sample shows how to work with the sublayers of a MapImageLayer and toggle their visibility. The properties of individual sublayers are handled in thesublayers property of the layer.
// 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");
}
});