I am trying to create an opacity control button that would allow users to modify opacity for each layer within an ArcGIS dynamic layer (for instance layer0, layer1, layer3). I have a script that runs fine for the whole ArcGISDynamicLayer:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<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="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://js.arcgis.com/3.11/"></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];
imageParameters.layerOption = ImageParameters.LAYER_OPTION_SHOW;
layer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map...", {
"imageParameters": imageParameters
});
map.addLayer(layer);
on(dom.byId("opacity"), "click", updateOpacity);
function updateOpacity() {
var cOp = layer.opacity;
console.info(cOp);
if (cOp < 0.9999999999999999) {
layer.setOpacity(cOp + 0.1);
} else {
layer.setOpacity(0.1);
}
}
});
</script>
</head>
<body>
This sample loads an ArcGISDynamicMapServiceLayer and presents a button to adjust the map services opacity.
<br />
<br />Layer List :
<button type="button" class="btn btn-default btn-xs" title="Adjust opacity" id="opacity"><span class="glyphicon glyphicon-adjust"></span>
</button>
<button type="button" class="btn btn-default btn-xs" title="Adjust opacity" id="opacity2"><span class="glyphicon glyphicon-adjust"></span>
</button>
<br />
<br />
<div id="map" class="claro" style="width:600px; height:400px; border:1px solid #000;"></div>
</body>
</html>
