AnsweredAssumed Answered

Separate opacity slider for two layer in same mapservice?

Question asked by map12 on Jun 1, 2012
Latest reply on Jun 9, 2012 by hzhu
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[i].checked) {                         visible.push(inputs[i].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>

Outcomes