Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Toggle layer visibility
Explore in the sandbox
Open in CodePen
View live sample
Description
This sample demonstrates how to explicitly create a list of layers in a map service. The list is comprised of HTML checkboxes that you can use to toggle the layers' visibility.
The function updateLayerVisibility() contains the logic that turns the layers on and off. It loops through each layer in the list, records whether the layer should be visible depending on the checkbox status, and updates the visibility accordingly using ArcGISDynamicMapServiceLayer.setVisibleLayers().
If you are interested in creating a layer list automatically from all the layers in the map service, see the sample Dynamically create layer list.
Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Explicitly Create Map Service Layer List</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
<script src="https://js.arcgis.com/3.46/"></script>
<script>
var map;
require([
"esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ImageParameters",
"dojo/dom",
"dojo/on",
"dojo/query",
"dojo/domReady!"
],
function (Map, ArcGISDynamicMapServiceLayer, ImageParameters, dom, on, query) {
var layer, visibleLayerIds = [];
map = new Map("map");
//Use the ImageParameters to set the visibleLayerIds layers in the map service during ArcGISDynamicMapServiceLayer construction.
var imageParameters = new ImageParameters();
imageParameters.layerIds = [2]; // states
imageParameters.layerOption = ImageParameters.LAYER_OPTION_SHOW;
//can also be: LAYER_OPTION_EXCLUDE, LAYER_OPTION_HIDE, LAYER_OPTION_INCLUDE
layer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/",
{"imageParameters": imageParameters});
map.addLayer(layer);
on(dom.byId("layer0CheckBox"), "change", updateLayerVisibility);
on(dom.byId("layer1CheckBox"), "change", updateLayerVisibility);
function updateLayerVisibility () {
var inputs = query(".list_item");
var inputCount = inputs.length;
//in this application layer 2 is always on.
visibleLayerIds = [2];
for (var i = 0; i < inputCount; i++) {
if (inputs[i].checked) {
visibleLayerIds.push(inputs[i].value);
}
}
if (visibleLayerIds.length === 0) {
visibleLayerIds.push(-1);
}
layer.setVisibleLayers(visibleLayerIds);
}
});
</script>
</head>
<body>
This sample loads an ArcGISDynamicMapServiceLayer and presents check boxes for only the layers that should be toggled on and off by users. <br />
<br />
Layer List : <span id="layer_list"><input type='checkbox' class='list_item' id='layer0CheckBox' value=0 />Cities
<input type='checkbox' class='list_item' id='layer1CheckBox' value=1 />Highways
</span><br />
<br />
<div id="map" class="claro" style="width:600px; height:400px; border:1px solid #000;"></div>
</body>
</html>