Separate opacity slider for two layer in same mapservice?

ChristopherPollard · ‎06-01-2012

I am trying to create separate opacity sliders for two (or more) layers within the same mapservice.
I tried to modify Public Information Sample
http://tmappsevents.esri.com/website/Public-Information-Map/min/index.html
but was not successful.

I have 7 polygon layers [0,1,2,3,4,5,6] I want user to change the opacity on each of them.
Is there any easy way to do this? It seems setOpacity() can???t be used on esri.layers.ImageParameters.
Any help (or additonal examples) would be much appreciated.
Using ArcGIS server 9.3.1

Thanks,
Chris

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>     <head>         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">         <meta http-equiv="X-UA-Compatible" content="IE=7" />         <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>         <title>Toggle Layers, Identify Only Visible Layers </title>                  <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/dojo/dijit/themes/claro/claro.css">         <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/esri/dijit/css/Popup.css">       <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/redmond/jquery.ui.all.css" rel="Stylesheet" />        <style>   #slider{  width:155px;  height:8px;  border:1px solid #999;  margin-top: 5px;  margin-bottom:15px;  }   </style>            <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.6"></script>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>                  <script type="text/javascript">             dojo.require("esri.map");             dojo.require("esri.dijit.Popup");                          var layer, map, visible = [];             var identifyTask, identifyParams;     $(document).ready(function(){   $("#slider").slider({     value:100,     min:0,     max:100,     step:5,      slide : function(evt, ui){      dynlayer.setOpacity(parseFloat(ui.value/100));   }   });   });                          function init() {                 //setup the popup window                 var popup = new esri.dijit.Popup({                     fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]))                 }, dojo.create("div"));                        var initialExtent = new esri.geometry.Extent({"xmin":-8513951.985121,"ymin":4786968.660565,"xmax":-8248256.864588,"ymax":4996406.126118,"spatialReference":{"wkid":102100}});            //     var initialExtent = new esri.geometry.Extent(-9571474.89, 4592552, -9502681, 4638414, new esri.SpatialReference({             //        wkid: 102100             //    }));                                  map = new esri.Map("map", {                     extent: initialExtent,                     infoWindow: popup                 });                 dojo.place(popup.domNode, map.root);                                  dojo.connect(map, "onLoad", function(map) {                     initIdentify(map);                 });                                  // Attach an onclick listener for each check box.                 // Update layer visiblity when each is checked clicked.                 var checkBoxes = dojo.query('input[type=checkbox]');                     dojo.forEach(checkBoxes, function(cb) {                     dojo.connect(cb, 'onclick', updateDynLayerVisibility);                 });                                  var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer");                 map.addLayer(basemap);                                  //Use the ImageParameters to set the visible layers in the map service during ArcGISDynamicMapServiceLayer construction.                 var imageParameters = new esri.layers.ImageParameters();                 imageParameters.layerIds = [0,1,2,3];                 imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;                 //can also be: LAYER_OPTION_EXCLUDE, LAYER_OPTION_HIDE, LAYER_OPTION_INCLUDE                 dynlayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.dvrpc.org/ArcGIS/rest/services/TCDI/MapServer", {                     "imageParameters": imageParameters                 });                 map.addLayer(dynlayer);             }                          function initIdentify(map) {                  dojo.connect(map, "onClick", executeIdentifyTask);    //create identify tasks and setup parameters                 identifyTask = new esri.tasks.IdentifyTask("http://gis.dvrpc.org/ArcGIS/rest/services/TCDI/MapServer");                  identifyParams = new esri.tasks.IdentifyParameters();                 identifyParams.tolerance = 12;                 identifyParams.returnGeometry = true;   //     identifyParams.layerIds = [0,1,2,3];                 identifyParams.layerIds = dynlayer.visibleLayers;                 identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;                 identifyParams.width = map.width;                 identifyParams.height = map.height;                                  }                          function updateDynLayerVisibility() {                 var inputs = dojo.query(".dyn_item");                 visible = [];                 for (var i = 0, il = inputs.length; i < il; i++) {                     if (inputs.checked) {                         visible.push(inputs.id);                     }                 }                 // If no layers are visible set the array value to = -1                 // and disconnect the identify task                 if (visible.length === 0) {                     visible = [-1];                     map.infoWindow.hide();                 }                 // Update Identifys layers                 identifyParams.layerIds = visible;                 // Update layer visiblity                 dynlayer.setVisibleLayers(visible);             }                          function executeIdentifyTask(evt) {                 if (visible.length === 1 && visible[0] == -1){                     map.infoWindow.clearFeatures();                     map.infoWindow.show(evt.mapPoint);                 } else {                     identifyParams.geometry = evt.mapPoint;                     identifyParams.mapExtent = map.extent;                                          var deferred = identifyTask.execute(identifyParams);                                          deferred.addCallback(function (response) {                         // response is an array of identify result objects                             // return an array of features.                         return dojo.map(response, function (result) {                             var feature = result.feature;                             feature.attributes.layerName = result.layerName;                                            if (result.layerName === 'Year 2002'){         var template = new esri.dijit.PopupTemplate({          title: "<FONT color=#CB2F27><B>{PROJECTNAM}</B></FONT>",          description: "<B>Location:</B>{MUN_NAME}, {CO_NAME} County, {STATE}<br>"        +"<B>Amount: </B>{AMT_WEB}<br>"      +"<B>Year Awarded: </B>{YR}<br>"      +"<B>Project Number: </B>{PROJECTNUM}<br>"      +"<B>Project Type: </B>{PROJECTTYP}<br>"      +"<B>Project Description: </B>{PROJ_DESC}{PROJ_DESC2}{PROJ_DESC3}{PROJ_DESC4}",     mediaInfos: [{        "title": "study area",        "caption": "click for larger image",        "type": "image",        "value": {          "sourceURL": "{PHOTO_TH}",          "linkURL": "{PHOTO}"        }       }]         });            feature.setInfoTemplate(template);    }    else if (result.layerName === 'Year 2003'){           var template = new esri.dijit.PopupTemplate({          title: "<FONT color=#F0BD56><B>{PROJECTNAM}</B></FONT>",          description: "<B>Location:</B>{MUN_NAME}, {CO_NAME} County, {STATE}<br>"        +"<B>Amount: </B>{AMT_WEB}<br>"      +"<B>Year Awarded: </B>{YR}<br>"      +"<B>Project Number: </B>{PROJECTNUM}<br>"      +"<B>Project Type: </B>{PROJECTTYP}<br>"      +"<B>Project Description: </B>{PROJ_DESC}{PROJ_DESC2}{PROJ_DESC3}{PROJ_DESC4}",     mediaInfos: [{        "title": "study area",        "caption": "click for larger image",        "type": "image",        "value": {          "sourceURL": "{PHOTO_TH}",          "linkURL": "{PHOTO}"        }       }]         });            feature.setInfoTemplate(template);    }              return feature;                         });                     });                                          map.infoWindow.setFeatures([deferred]);                     map.infoWindow.show(evt.mapPoint);                 }             }             dojo.addOnLoad(init);         </script>     </head>     <body class="claro">         <div>             Layers: <br />             <input type='checkbox' class='dyn_item' checked='checked' id='0' />Year 2002<br />             <input type='checkbox' class='dyn_item' checked='checked' id='1' />Year 2003<br />    Opacity:<br/>        <div id="slider"> </div>             </div>                  <div id="map" style="width:1200px; height:600px; border:1px solid #000;"></div>              </body> </html>

BenFousek · ‎06-01-2012

You cannot change opacity of sub-layers independently. Opacity only applies to the entire layer. The reason is that AGS creates an image with all visible layers (a composite) every time the map extent changes and places that image as a div in the map's domNode. The opacity of the layer is simply the image's opacity. The api uses the setOpacity method on the layer's domNode. If you gave your layer a unique id, you can change opacity using dojo.style by finding the div in the HTML in firebug. But why? The good folks at esri gave us setOpacity.

The earthquake map uses two separate map services.

The solution is to split layers into multiple map services, or initiate multiple map layers from the same service and set visible sub-layers for each onLoad and then control opacity.

View solution in original post

Anonymous User · ‎06-01-2012

Hi Chris, what if you create a separate instance of a control (i.e. slider that controls the opacity) for each map service/layer added to the map? Each time a layer is added to the map you can create a new instance of a control that controls the opacity of that specific layer. When the layer is removed, you destroy the instance of the control in memory.

BenFousek · ‎06-01-2012

You cannot change opacity of sub-layers independently. Opacity only applies to the entire layer. The reason is that AGS creates an image with all visible layers (a composite) every time the map extent changes and places that image as a div in the map's domNode. The opacity of the layer is simply the image's opacity. The api uses the setOpacity method on the layer's domNode. If you gave your layer a unique id, you can change opacity using dojo.style by finding the div in the HTML in firebug. But why? The good folks at esri gave us setOpacity.

The earthquake map uses two separate map services.

The solution is to split layers into multiple map services, or initiate multiple map layers from the same service and set visible sub-layers for each onLoad and then control opacity.

ChristopherPollard · ‎06-01-2012

Ben,
Thanks for the reply. Option 2 is the way I was thinking of going for this project but wanted to poke around a bit before.
Great explanation on the API, map domNode and image retrieval as well. sometimes I forgot to think about that stuff when I'm wrapped up in a project.

HemingZhu · ‎06-09-2012

Ben,
Thanks for the reply. Option 2 is the way I was thinking of going for this project but wanted to poke around a bit before.
Great explanation on the API, map domNode and image retrieval as well. sometimes I forgot to think about that stuff when I'm wrapped up in a project.

How about create a featurelayer for each polygon layer in the map services and control featurelayer 's opacity(Layer) value?