Hi all,
I am looking to have something similar to the TOC widget slider but, I would change the layer's opacity by click a bootstrap button. I am looking for a looping javascript that would allow the users to go from 0% - 100% by clicking. I am not really sure how to do this.
Any help is welcome,
thanks,
Alex
Solved! Go to Solution.
Alex,
Here is a sample:
<!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>
<br />
<br />
<div id="map" class="claro" style="width:600px; height:400px; border:1px solid #000;"></div>
</body>
</html>
Hi Alex,
Is this what you are after? Bootstrap checkboxes buttons to toggle layers not working.
I am looking to do something similar to Philip Kral:
If you look at his "layers" tab he has a layer list and on the right of each layer he has a button that allows you to change opacity programmatically. I think that looks very neat. I am a bit too new to programming to completely understand how he succeeded in achieving this opacity button.
Thank you,
Alex
Alex,
Here is a sample:
<!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>
<br />
<br />
<div id="map" class="claro" style="width:600px; height:400px; border:1px solid #000;"></div>
</body>
</html>
Robert that is exactly what I was looking for! Thank you!
IS it possible to use "imageParameter Ids" above to change opacity for each of the layers now?
Thank you,
Alex
Alex,
Sure if your ArcGIS Server is 10.1 or greater than you can do that.