how to get desired map through query

FaryalSafdar · ‎07-10-2017

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

RobertScheitlin__GISP · ‎07-27-2017

Faryal,

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

FaryalSafdar · ‎07-27-2017

i have provided the complete code.

FaryalSafdar · ‎07-27-2017

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?

FaryalSafdar · ‎07-31-2017

any solution to my problem?

RobertScheitlin__GISP · ‎08-01-2017

Faryal,

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

FaryalSafdar · ‎08-01-2017

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?

RobertScheitlin__GISP · ‎08-02-2017

Faryal,

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

FaryalSafdar · ‎08-02-2017

</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 >

FaryalSafdar · ‎08-03-2017

<!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&return...",
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>

<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 ; " />

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

</div>
</div>

</div>

<body >

</html>

RobertScheitlin__GISP · ‎08-03-2017

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&return...",
        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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍