<!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>
Solved! Go to Solution.
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(); }
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(); }