Hi all,
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>
Any ideas are welcome,
Thank you,
Alex
Solved! Go to Solution.
Alex,
When I helped you with your previous question on one button opacity for layers, I got interested in doing a proof of concept for the sublayer opacity capability.
The map service has to supportsDynamicLayers (which requires ArcGIS Server 10.1 or higher) Documentation link
Here is the JSFiddle link
Alex,
When I helped you with your previous question on one button opacity for layers, I got interested in doing a proof of concept for the sublayer opacity capability.
The map service has to supportsDynamicLayers (which requires ArcGIS Server 10.1 or higher) Documentation link
Here is the JSFiddle link
Robert,
That is really excellent work! I will dig in your script today. That is exactly what I am looking for here.
Thanks,
Alex