topic Re: how to get desired map through query in ArcGIS JavaScript Maps SDK Questions

how to get desired map through query

FaryalSafdar — Mon, 10 Jul 2017 10:32:53 GMT

is there any way to get a soil map through query. i have populate area in comobox . now i want to populate combobox with the soil map of the selected area. as my soil has legend of different soil. i.e category option of Arcgis .

esriRequest({
url: "http://localhost:6080/arcgis/rest/services/....../query?where=Area_Name ='" + id.toString() + "'&outFields=Soil&returnGeometry=false&orderByFields=Soil&returnDistinctValues=true&f=json",
content:{
f:'json'
},
handleAs:'json',
callbackParamName:'callback',
timeout:15000
})

now the problem is as it has three soil types so combox populate three name and does not display geometry. i want to display whole soil map of the selected area

Re: how to get desired map through query

RobertScheitlin__GISP — Mon, 10 Jul 2017 13:17:06 GMT

Faryal,

Your question is pretty confusing. Probably because your workflow is not very clear. If you want to limit a map service or service layer to only show features that qualify based on a query then you set the layers setdefinitionexpression.

Re: how to get desired map through query

FaryalSafdar — Tue, 11 Jul 2017 06:28:09 GMT

my problem is forexample when in arcgis when we select feature through attributes we use dinstict values it select all values of same name. i want to do this here. i have feature layer which categrorized as mention in the picture. i have added a column map and it has same value like soil map. when i select feature through attributes it has selected all features. but when i did this with arcgis query it returns all values of same name.

Re: how to get desired map through query

RobertScheitlin__GISP — Sat, 11 Dec 2021 09:47:23 GMT

Faryal,

Here is a complete sample that shows how to populate dojo combobox with unique values from a query and once selected it does a second query for unique counties from the selected state and on each choice the only drawn graphic is that one the user selects.

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>Drop Down Test</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.21/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.21/dojo/resources/dojo.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.21/esri/css/esri.css">
  <script src="http://js.arcgis.com/3.21/"></script>
  <style>
    html,
    body,
    #mainWindow {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #FFF;
      overflow: hidden;
      font-family: "Trebuchet MS";
    }
    #header {
      height: 3%;
      overflow: auto;
    }
  </style>

  <script>
    var map;
    require([
      "esri/map",
      "dojo/on",
      "esri/tasks/query",
      "esri/layers/FeatureLayer",
      "dojo/store/Memory",
      "dojo/_base/array",
      "dojo/_base/lang",
      "esri/request",
      "dojo/json",
      "dojo/parser",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dijit/form/Button",
      "dijit/form/ComboBox",
      "dojo/domReady!"
    ], function(
      Map, on, Query, FeatureLayer, Memory, array, lang, esriRequest, json, parser
    ) {
      parser.parse();
      map = new Map("map", {
        basemap: "topo",
        center: [-98.1883, 37.0868],
        zoom: 5
      });

      esriRequest({
        url: 'http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3/query?where=1%3D1&outFields=STATE_NAME&returnGeometry=false&orderByFields=STATE_NAME&returnDistinctValues=true&f=json',
        content:{
          f:'json'
        },
        handleAs:'json',
        callbackParamName:'callback',
        timeout:15000
      }).then(lang.hitch(this,function(response){
        var store2 = new Memory({data:[]});
        dijit.byId("stateSelect").set('store',store2);
        var data = array.map(response.features,lang.hitch(this,function(feat, index){
          var name = feat.attributes.STATE_NAME;
          var value = feat.attributes.STATE_NAME;
          var dataItem = {
            id:index,
            name:name,
            value:value
          };
          return dataItem;
        }));
        store2 = new Memory({data:data});
        dijit.byId("stateSelect").set('store',store2);
      }));

      var States = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3", {
        mode: FeatureLayer.MODE_SELECTION,
        outFields: ["*"]
      });

      var Counties = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2", {
        mode: FeatureLayer.MODE_SELECTION,
        outFields: ["*"]
      });

      map.addLayers([States,Counties]);

      app = {
        zoomRow: function(id, which){
          States.clearSelection();
          Counties.clearSelection();
          var query = new Query();
          var thePoly, theExtent;
          if(which == "State"){
            query.where = "STATE_NAME='" + (id).toString() + "'";
            console.info(query.where);
            query.returnGeometry = true;
            States.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (features) {
              thePoly = features[0].geometry;
              theExtent = thePoly.getExtent().expand(2); //Zoom out slightly from the polygon's extent
              map.setExtent(theExtent);
            });
            esriRequest({
              url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2/query?where=STATE_NAME='" + id.toString() + "'&outFields=NAME&returnGeometry=false&orderByFields=NAME&returnDistinctValues=true&f=json",
              content:{
                f:'json'
              },
              handleAs:'json',
              callbackParamName:'callback',
              timeout:15000
            }).then(lang.hitch(this,function(response){
              var store2 = new Memory({data:[]});
              dijit.byId("countySelect").set('store',store2);
              var data = array.map(response.features,lang.hitch(this,function(feat, index){
                var name = feat.attributes.NAME;
                var dataItem = {
                  id:index,
                  name:name
                };
                return dataItem;
              }));
              store2 = new Memory({data:data});
              dijit.byId("countySelect").set('store',store2);
              document.getElementById('countySelect').value = "Select County";
            }));
          }else if(which == "County"){
            var county = (id).toString();
            county = county.replace(" County", "");
            query.where = "NAME='" + county + "'";
            console.info(query.where);
            query.returnGeometry = true;
            Counties.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (features) {
              thePoly = features[0].geometry;
              theExtent = thePoly.getExtent().expand(2); //Zoom out slightly from the polygon's extent
              map.setExtent(theExtent);
            });
          }
        }
      };

    });
  </script>
</head>

<body class="claro">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="padding:0px;margin:0px;">
    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="overflow:hidden;border:none;border-bottom: 3px solid #CC9900;font-family: Windows;font-size:14pt; color: #FFFFFF;background: #000000; "> Select a State/County and zoom to it on the map:
      <input id="stateSelect" data-dojo-type="dijit/form/ComboBox" value="Select State" onchange="app.zoomRow(document.getElementById('stateSelect').value, 'State');" data-dojo-props="maxHeight: 200" />
      <input id="countySelect" data-dojo-type="dijit/form/ComboBox" value="Select County" onchange="app.zoomRow(document.getElementById('countySelect').value, 'County');" />
      <input type="hidden" name="stateabbr" id="stateabbr" />
    </div>
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width:100%;height:95%;border:none;padding:0px;margin:0px;"></div>
  </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: how to get desired map through query

FaryalSafdar — Mon, 17 Jul 2017 05:02:14 GMT

the query result is like the image. although i have used distinct values = true . but it returns all values. kindly guide me how to solve this problem. it should return only one value.

Re: how to get desired map through query

RobertScheitlin__GISP — Mon, 24 Jul 2017 13:41:48 GMT

Faryal,

Provide your complete code you are using for further assistance.

Re: how to get desired map through query

FaryalSafdar — Tue, 25 Jul 2017 03:49:24 GMT

Thanks Robert for your response. here is my code

esriRequest({
url: "http://localhost:6080/arcgis/rest/services/........./query?where=R_Name ='" + id.toString() + "'&outFields=STE&returnGeometry=false&orderByFields=Soil&returnDistinctValues= true&f=json",
content:{
f:'json'
},
handleAs:'json',
callbackParamName:'callback',
timeout:15000
}).then(lang.hitch(this,function(response){
var store2 = new Memory({data:[]});
dijit.byId("RSoil").set('store',store2);
var data = array.map(response.features,lang.hitch(this,function(feat, index){
var name = feat.attributes.Soil;
var dataItem = {
id:index,
name:name
};
return dataItem;
}));
store2 = new Memory({data:data});

dijit.byId("RSoil").set('store',store2);

document.getElementById('RSoil').value = "Soil";
}));
}
else if(which == "RS"){
var rs = (id).toString();
rs = rs.replace("RS", "");
query.where = "Soil='" + rs + "'";
console.info(query.where);
query.returnGeometry = true;

S_layer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (features) {
if(features[0]){
thePoly = features[0].geometry;
theExtent = thePoly.getExtent().expand(1.8); //Zoom out slightly from the polygon's extent
map.setExtent(theExtent);
}
});

Re: how to get desired map through query

FaryalSafdar — Wed, 26 Jul 2017 05:39:18 GMT

i have provided my code . kindly review it.

Re: how to get desired map through query

RobertScheitlin__GISP — Wed, 26 Jul 2017 12:57:19 GMT

Faryal,

What version of ArcGIS Server are you using? Why do you have outFields=STE when you are only seeming to use the Soil field?

Re: how to get desired map through query

FaryalSafdar — Thu, 27 Jul 2017 04:35:44 GMT

i am using Arcserver 10.2. i have mistakenly write STE it is Soil.

Re: how to get desired map through query

RobertScheitlin__GISP — Thu, 27 Jul 2017 12:59:01 GMT

Faryal,

So I am not seeing the issue in the snippet of code you posted. You need to post your complete code.

Re: how to get desired map through query

FaryalSafdar — Fri, 28 Jul 2017 03:35:17 GMT

i have provided the complete code.

Re: how to get desired map through query

FaryalSafdar — Fri, 28 Jul 2017 05:11:31 GMT

if we categorize the layer into three category and then publish to arcgis server. then we call the layer using javascript api . so is it possible it shows three name?

Re: how to get desired map through query

FaryalSafdar — Tue, 01 Aug 2017 05:44:47 GMT

any solution to my problem?

Re: how to get desired map through query

RobertScheitlin__GISP — Tue, 01 Aug 2017 12:53:19 GMT

Faryal,

I do not see where you provided the full apps code.

Re: how to get desired map through query

FaryalSafdar — Wed, 02 Aug 2017 05:29:44 GMT

sir, i am getting error in this particular snippet. i do not understand what do you mean by full code. did u mean html part?

Re: how to get desired map through query

RobertScheitlin__GISP — Wed, 02 Aug 2017 12:48:13 GMT

Faryal,

Yes HTML is code too. So I need to see all your code.

Re: how to get desired map through query

FaryalSafdar — Thu, 03 Aug 2017 03:38:51 GMT

</head>

<span><b>1. Parameters of Selection</b> </span><br></br>

<input type="hidden" name="stateabbr" id="stateabbr" />
<span><b>2.Soil/Temperature/Elevetaion Map</b> </span><br></br>
<input maxlength = "1" id="RSoil" class = "Drop" data-dojo-type="dijit/form/ComboBox" value="Soil" onchange="app.zoomRow(document.getElementById('RSoil).value, 'RS');"style="overflow:auto; width:235px ; " />

<br>
<button type="button" id="clearall" class = "button" class="btn-default" onclick = ClearAll(); style = "overflow:hidden;padding: 5px 5px; border-radius: 7px;font-size: 12pt; width:235px ; height:40px; font-weight: bold; font-family : Baskerville Old Face;border: 2px solid #808080; background-color: white;">Clear</button>
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="...." >

</div>
<div data-dojo-type="dijit/layout/ContentPane" title="...." >

</div>
</div>

</div>

<body >

Re: how to get desired map through query

FaryalSafdar — Thu, 03 Aug 2017 10:00:28 GMT

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>Soil Suitability Module</title>

<link rel="stylesheet" href="http://js.arcgis.com/3.20/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.20/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.20/esri/css/esri.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script src="http://js.arcgis.com/3.20/"></script>
<style>
html,body,#map,
#mainWindow {
height: 100%;
width: 100%;
margin: 0;


}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Baskerville Old Face";
font-size : 10.8pt;
}
#BasemapToggle {
position: absolute;
top: 10px;
right: 10px;
z-index: 30;
}
#HomeButton {
position: absolute;
top: 95px;
left: 20px;
z-index: 50;
}

</style>

<script>
//declaring variables globally
var map;

var layer1;
var S_layer;
var layer;
var layers = [];
var thePoly, theExtent;

require([
"esri/map",
"esri/dijit/OverviewMap",
"esri/dijit/BasemapToggle",
"esri/dijit/HomeButton",
"dojo/on",
"dojo/dom-style",
"esri/tasks/query",
"esri/domUtils",
"dijit/registry",
"esri/layers/FeatureLayer",
"esri/InfoTemplate",
"esri/symbols/SimpleFillSymbol",
"esri/Color",
"esri/dijit/Popup",
"esri/dijit/PopupTemplate",
"dojo/store/Memory",
"dojo/_base/array",
"dojo/_base/lang",
"esri/request",
"dojo/json",
"esri/graphic",
"dojo/parser",
"esri/dijit/Scalebar",
"dojox/charting/Chart",
"dojox/charting/themes/Dollar",
"esri/dijit/Legend",
"dijit/layout/BorderContainer",
"dijit/layout/AccordionContainer",
"dijit/layout/AccordionPane",
"dijit/layout/ContentPane",
"esri/symbols/SimpleMarkerSymbol",

"esri/symbols/SimpleLineSymbol",
"esri/dijit/PopupTemplate",
"dijit/form/ComboBox",
"dijit/form/TextBox",
"esri/Color",
"esri/config",

"esri/symbols/PictureMarkerSymbol",
"esri/symbols/SimpleFillSymbol",

"dojo/on",
"dojo/dom-class",
"dojo/dom-construct",
"dojo/dom",
"dojo/domReady!"
], function (
Map, OverviewMap, BasemapToggle, HomeButton, on, domStyle, Query, domUtils, registry, FeatureLayer, InfoTemplate,
SimpleFillSymbol,Color,Popup, PopupTemplate, Memory, array, lang, esriRequest, json, Graphic, parser, Scalebar,Chart, theme,
Legend,TextBox, Color, esriConfig, PictureMarkerSymbol, SimpleLineSymbol,PopupTemplate,SimpleFillSymbol, on, domClass, domConstruct,dom
) {

parser.parse();

map = new Map("map", {
basemap: "hybrid",
center: [69.3451, 30.3753],//Longitude and Latitude
zoom:6 ,

});

//adding map
var toggle = new BasemapToggle({
map: map,
basemap: "topo"
}, "BasemapToggle");
toggle.startup();

//adding home button
var home = new HomeButton({
map: map

}, "HomeButton");
home.startup();

// adding overview window
var overviewMap = new esri.dijit.OverviewMap({
map: map ,
basemap: "hybrid"
},dojo.byId("overviewDiv"));
overviewMap.startup();

layer1 = new FeatureLayer("http://localhost:6080/arcgis/rest/services/.................../MapServer/7", {
mode: FeatureLayer.MODE_SELECTION,
outFields: ["*"]
});

S_layer = new FeatureLayer("http://localhost:6080/.........................../0",{
mode: FeatureLayer.MODE_SELECTION,
outFields: ["*"]

});

//adding legend

//legend.startup();

//adding scalebar
var scale = new Scalebar({
map: map,
scalebarUnit: "metric"
});

map.addLayers([layer1,S_layer]);

dijit.byId("c1").attr('readonly', true);
dijit.byId("RSoil").attr('readonly', true);

// zoom to layer function
app = {

zoomRow: function(id, which){

//clearing previous layers for next layer

layer1.clearSelection();
S_layer.clearSelection();

//populating name
esriRequest({
url: "http://localhost:6080/arcgis/rest/services/................../querywhere=1%3D1&outFields=Name&returnGeometry=false&orderByFields=Name&returnDistinctValues=true&f=json",
content:{
f:'json'
},
handleAs:'json',
callbackParamName:'callback',
timeout:15000
}).then(lang.hitch(this,function(response){
var store2 = new Memory({data:[]});
dijit.byId("c1").set('store',store2);
var data = array.map(response.features,lang.hitch(this,function(feat, index){
var name = feat.attributes.Name;

var dataItem = {
id:index,
name:name
};
return dataItem;
}));
store2 = new Memory({data:data});
dijit.byId("c1").set('store',store2);
document.getElementById('c1').value = "";

}));
}
else if(which == "cd"){
var cd1= (id).toString();
cd1= cd.replace(cd", "");
query.where = "Name='" + cd1 + "'";
console.info(query.where);
query.returnGeometry = true;
layer1.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (features) {
if(features[0]){
thePoly = features[0].geometry;
theExtent = thePoly.getExtent().expand(2); //Zoom out slightly from the polygon's extent
map.setExtent(theExtent);

}
});

esriRequest({
url: "http://localhost:6080/arcgis/rest/services/........./query?where=Name ='" + id.toString() + "'&outFields=Soil&returnGeometry=false&orderByFields=Soil&returnDistinctValues= true&f=json",
content:{
f:'json'
},
handleAs:'json',
callbackParamName:'callback',
timeout:15000
}).then(lang.hitch(this,function(response){
var store2 = new Memory({data:[]});
dijit.byId("RSoil").set('store',store2);
var data = array.map(response.features,lang.hitch(this,function(feat, index){
var name = feat.attributes.Soil;
var dataItem = {
id:index,
name:name
};
return dataItem;
}));
store2 = new Memory({data:data});

dijit.byId("RSoil").set('store',store2);

document.getElementById('RSoil').value = "Soil";
}));
}
else if(which == "RS"){
var rs = (id).toString();
rs = rs.replace("RS", "");
query.where = "Soil='" + rs + "'";
console.info(query.where);
query.returnGeometry = true;

S_layer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (features) {
if(features[0]){
thePoly = features[0].geometry;
theExtent = thePoly.getExtent().expand(1.8); //Zoom out slightly from the polygon's extent
map.setExtent(theExtent);
}
});

}

}

};

});

</script>
</head>

<span><b>1. Parameters of Selection</b> </span><br></br>

</div>
<div data-dojo-type="dijit/layout/ContentPane" title="...." >

</div>
</div>

</div>

<body >

</html>

Re: how to get desired map through query

RobertScheitlin__GISP — Sat, 11 Dec 2021 09:47:28 GMT

Faryal,

Wow there was a lot of issue in your code. Here is the code cleaned up. See if this helps you get going on this again:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>Soil Suitability Module</title>
  <!-- <link rel="stylesheet" type="text/css" href="Wstyle.css"> -->
  <link rel="stylesheet" href="http://js.arcgis.com/3.20/dijit/themes/tundra/tundra.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.20/dojo/resources/dojo.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.20/esri/css/esri.css">

  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css"> -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <!--<script src="js/form.js"></script> -->
  <script src="http://js.arcgis.com/3.20/"></script>
  <style>
    html,
    body,
    #map,
    #mainWindow {
      height: 100%;
      width: 100%;
      margin: 0;
      <!-- padding: 0;
      -->
    }

    body {
      background-color: #FFF;
      overflow: hidden;
      font-family: "Baskerville Old Face";
      font-size: 10.8pt;
    }

    #BasemapToggle {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 30;
    }

    #HomeButton {
      position: absolute;
      top: 95px;
      left: 20px;
      z-index: 50;
    }
  </style>


  <script>
    //declaring variables globally
    var map, layer1, S_layer, layer, layers = [], thePoly, theExtent;

    require([
      "esri/map",
      "esri/dijit/OverviewMap",
      "esri/dijit/BasemapToggle",
      "esri/dijit/HomeButton",
      "dojo/on",
      "esri/tasks/query",
      "esri/layers/FeatureLayer",
      "dojo/store/Memory",
      "dojo/_base/array",
      "dojo/_base/lang",
      "esri/request",
      "dojo/json",
      "dojo/parser",
      "dijit/registry",
      "esri/dijit/Scalebar",
      "esri/dijit/Legend",
      "dijit/layout/AccordionContainer",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dijit/form/ComboBox",
      "dojo/domReady!"
    ], function(
      Map, OverviewMap, BasemapToggle, HomeButton, on, Query, FeatureLayer,
      Memory, array, lang, esriRequest, json, parser, registry, Scalebar, Legend
    ) {

      parser.parse();

      map = new Map("mapDiv", {
        basemap: "hybrid",
        center: [69.3451, 30.3753], //Longitude and Latitude
        zoom: 6,
      });

      //adding map
      var toggle = new BasemapToggle({
        map: map,
        basemap: "topo"
      }, "BasemapToggle");
      toggle.startup();

      //adding home button
      var home = new HomeButton({
        map: map
      }, "HomeButton");
      home.startup();

      // adding overview window
      var overviewMap = new OverviewMap({
        map: map,
        basemap: "hybrid"
      }, dojo.byId("overviewDiv"));
      overviewMap.startup();

      layer1 = new FeatureLayer("http://localhost:6080/arcgis/rest/services/.................../MapServer/7", {
        mode: FeatureLayer.MODE_SELECTION,
        outFields: ["*"]
      });

      S_layer = new FeatureLayer("http://localhost:6080/.........................../0", {
        mode: FeatureLayer.MODE_SELECTION,
        outFields: ["*"]
      });

      //adding legend
      //legend.startup();

      //adding scalebar
      var scale = new Scalebar({
        map: map,
        scalebarUnit: "metric"
      });

      map.addLayers([layer1, S_layer]);

      registry.byId("c1").attr('readonly', true);
      registry.byId("RSoil").attr('readonly', true);

      //populating name
      esriRequest({
        url: "http://localhost:6080/arcgis/rest/services/................../querywhere=1%3D1&outFields=Name&returnGeometry=false&orderByFields=Name&returnDistinctValues=true&f=json",
        content: {
          f: 'json'
        },
        handleAs: 'json',
        callbackParamName: 'callback',
        timeout: 15000
      }).then(lang.hitch(this, function(response) {
        var store2 = new Memory({
          data: []
        });
        registry.byId("c1").set('store', store2);
        var data = array.map(response.features, lang.hitch(this, function(feat, index) {
          var name = feat.attributes.Name;
          var dataItem = {
            id: index,
            name: name
          };
          return dataItem;
        }));
        store2 = new Memory({
          data: data
        });
        registry.byId("c1").set('store', store2);
        registry.byId("c1").value = "";
      }));

      // zoom to layer function
      app = {
        zoomRow: function(id, which) {
          //clearing previous layers for next layer
          layer1.clearSelection();
          S_layer.clearSelection();

          if (which == "cd") {
            var cd1 = (id).toString();
            cd1 = cd.replace("cd ", "");
            query.where = "Name='" + cd1 + "'";
            console.info(query.where);
            query.returnGeometry = true;
            layer1.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(features) {
              if (features[0]) {
                thePoly = features[0].geometry;
                theExtent = thePoly.getExtent().expand(2); //Zoom out slightly from the polygon's extent
                map.setExtent(theExtent);

              }
            });
            esriRequest({
              url: "http://localhost:6080/arcgis/rest/services/........./query?where=Name ='" + id.toString() + "'&outFields=Soil&returnGeometry=false&orderByFields=Soil&returnDistinctValues= true&f=json",
              content: {
                f: 'json'
              },
              handleAs: 'json',
              callbackParamName: 'callback',
              timeout: 15000
            }).then(lang.hitch(this, function(response) {
              var store2 = new Memory({
                data: []
              });
              registry.byId("RSoil").set('store', store2);
              var data = array.map(response.features, lang.hitch(this, function(feat, index) {
                var name = feat.attributes.Soil;
                var dataItem = {
                  id: index,
                  name: name
                };
                return dataItem;
              }));
              store2 = new Memory({
                data: data
              });
              registry.byId("RSoil").set('store', store2);
              registry.byId("RSoil").value = "Soil";
            }));
          } else if (which == "RS") {
            var rs = (id).toString();
            rs = rs.replace("RS", "");
            query.where = "Soil='" + rs + "'";
            console.info(query.where);
            query.returnGeometry = true;

            S_layer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(features) {
              if (features[0]) {
                thePoly = features[0].geometry;
                theExtent = thePoly.getExtent().expand(1.8); //Zoom out slightly from the polygon's extent
                map.setExtent(theExtent);
              }
            });
          }
        }
      };
    });
  </script>
</head>

<body class="tundra">
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%; height:100%; margin:0px;">
    <div id="details" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left', splitter:false" style="overflow:auto; width:250px; background-color:white; border:solid thin white;">
      <div data-dojo-type="dijit/layout/AccordionContainer" style="height:200px;">
        <div data-dojo-type="dijit/layout/ContentPane" title="Area Selection" selected="true">
          <span><b>1. Parameters of Selection</b></span>
          <br></br>
          <select id="c1" data-dojo-type="dijit/form/ComboBox" value="" onchange="app.zoomRow(document.getElementById('c1').value, 'cd');" style="overflow:auto; width:235px;"></select>
          <br>
          <input type="hidden" name="stateabbr" id="stateabbr" />
          <span><b>2. Soil/Temperature/Elevetaion Map</b></span>
          <br></br>
          <select id="RSoil" data-dojo-type="dijit/form/ComboBox" value="Soil" onchange="app.zoomRow(document.getElementById('RSoil').value, 'RS');" style="overflow:auto; width:235px;"></select>
          <br>
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" title="...."></div>
        <div data-dojo-type="dijit/layout/ContentPane" title="...."></div>
      </div>
    </div>
    <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow:hidden;">
      <div id="BasemapToggle"></div>
      <div id="HomeButton"></div>
      <div id="infoDiv">
        <div id="legendDiv"></div>
      </div>
    </div>
  </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍