Select to view content in your preferred language

Clear ArcGISDynamicMapServiceLayer layer def before displaying a different definition

3218
1
Jump to solution
03-20-2013 08:55 AM
MikeOnzay
Frequent Contributor
I've modified this sample to see if there is a way to change the display of an ArcGISDynamicMapService layer that uses layer definitions. I'm changing the definition through a drop down menu. The previous state boundary does not clear before drawing a new state. I've looked through the forums and the API and tried different ideas. Nothing seems to work. Of course, it could just be that my advanced novice skills are not just advanced enough and I am missing something obvious. 🙂

I know that I could use feature layers but in my own project some of my features are just too big and will actually crash the browser. Using a dynamic service is much faster.

I tried to create a jsfiddle instead of posting the code but I could not figure out how to make the drop down menu work. So, I've posted both.

http://jsfiddle.net/mapguymike/aThtT/

<!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>     <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">     <!--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>Create Map with Custom ArcGISDynamicMapServiceLayer Layer Definitions</title>      <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">      <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>     <script>       dojo.require("esri.map");        var map, layer, state = 'Iowa';        function init() {         map = new esri.Map("map", {           basemap: "streets",           center: [-98.258, 38.236],           zoom: 4         });  }    function changeLayerVisibility(){   console.log('inside clv');   var layerIdsArr = map.layerIds;   layer = map.getLayer(layerIdsArr["census"]);   layer.hide();  }    function addMap(state){           var imageParameters = new esri.layers.ImageParameters();          var layerDefs = [];         layerDefs[5] = "STATE_NAME='" + state + "'";         imageParameters.layerDefinitions = layerDefs;          imageParameters.layerIds = [5];         imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;         imageParameters.transparent = true;          var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer", {"imageParameters":imageParameters, id:"census"});          map.addLayer(dynamicMapServiceLayer);   layer.show();       }        dojo.ready(init);     </script>   </head>   <body class="claro">     <div id="map" style="width:900px; height:600px;"></div>  <div style="position:absolute;top:10px;right:250px;z-index:999;">         <form><select id="ddbox"  onClick="changeLayerVisibility()" onChange="addMap(this.value)" data-dojo-type="dijit.form.Select">             <option value = "" selected="selected">Select...</option>             <option value="Oregon" id = "1">Oregon</option>             <option value="Colorado"  id = "2">Colorado</option>    <option value="Iowa"  id = "3">Iowa</option>    <option value="Alabama"  id = "4">Alabama</option>    <option value="Maine"  id = "5">Maine</option>   </select></form>     </div>    </body> </html>
0 Kudos
1 Solution

Accepted Solutions
MikeOnzay
Frequent Contributor
I solved it. Works in 3.4 too. I had to use a combination of hide,show and refresh. This post on GIS stack exchange helped get me on track. http://bit.ly/1035f0m. My code refreshes without needing a pan/zoom as this post suggests.

I only posted the part of my code that really changed from my original question. The changeLayerVisibility function was deleted.

function init() {         map = new esri.Map("map", {     basemap: "oceans",    center: [-98.0, 38.0],    zoom: 4,    sliderOrientation: "horizontal"     });        //set the parameters of the service here. Limit the service to show only a specific layer.   var imageParameters = new esri.layers.ImageParameters();   imageParameters.layerIds = [5];   imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;    //Takes a URL to a non cached map service.                 dmslayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer",{"imageParameters":imageParameters});                 map.addLayer(dmslayer);   dmslayer.hide(); // hide the layer initially       }     function addMap(dropdown){   //console.log(dropdown);   //create the layer definition here   var layerDefs = [];   layerDefs[5] = "STATE_NAME = '" + dropdown + "'";                 dmslayer.setLayerDefinitions(layerDefs);   dmslayer.refresh();   dmslayer.show();        }

View solution in original post

0 Kudos
1 Reply
MikeOnzay
Frequent Contributor
I solved it. Works in 3.4 too. I had to use a combination of hide,show and refresh. This post on GIS stack exchange helped get me on track. http://bit.ly/1035f0m. My code refreshes without needing a pan/zoom as this post suggests.

I only posted the part of my code that really changed from my original question. The changeLayerVisibility function was deleted.

function init() {         map = new esri.Map("map", {     basemap: "oceans",    center: [-98.0, 38.0],    zoom: 4,    sliderOrientation: "horizontal"     });        //set the parameters of the service here. Limit the service to show only a specific layer.   var imageParameters = new esri.layers.ImageParameters();   imageParameters.layerIds = [5];   imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;    //Takes a URL to a non cached map service.                 dmslayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer",{"imageParameters":imageParameters});                 map.addLayer(dmslayer);   dmslayer.hide(); // hide the layer initially       }     function addMap(dropdown){   //console.log(dropdown);   //create the layer definition here   var layerDefs = [];   layerDefs[5] = "STATE_NAME = '" + dropdown + "'";                 dmslayer.setLayerDefinitions(layerDefs);   dmslayer.refresh();   dmslayer.show();        }
0 Kudos