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
Faryal,
So I am not seeing the issue in the snippet of code you posted. You need to post your complete code.
i have provided the complete code.
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?
any solution to my problem?
Faryal,
I do not see where you provided the full apps code.
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?
Faryal,
Yes HTML is code too. So I need to see all your code.
</head>
<body class="tundra">
<div id="details"
data-dojo-type="dijit.layout.ContentPane" class="roundedCorners"
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" class="roundedCorners" style="height 200px";>
<div data-dojo-type="dijit/layout/ContentPane" class="roundedCorners" title="Area Selection"; selected="true">
<span><b>1. Parameters of Selection</b> </span><br></br>
<input id="c1" class = "Drop" data-dojo-type="dijit/form/ComboBox" value="" onchange="app.zoomRow(document.getElementById('c1').value, 'cd);" style="overflow:auto; width:235px ; " /> <br></br>
<input id="c2" class = "Drop" data-dojo-type="dijit/form/ComboBox" value="" onchange="app.zoomRow(document.getElementById('c2').value, 'cd2');" style="overflow:auto; width:235px;"/><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>
<div id="map"
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>
<body >
<!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;
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>
<body class="tundra">
<div id="details"
data-dojo-type="dijit.layout.ContentPane" class="roundedCorners"
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" class="roundedCorners" style="height 200px";>
<div data-dojo-type="dijit/layout/ContentPane" class="roundedCorners" title="Area Selection"; selected="true">
<span><b>1. Parameters of Selection</b> </span><br></br>
<input id="c1" class = "Drop" data-dojo-type="dijit/form/ComboBox" value="" onchange="app.zoomRow(document.getElementById('c1').value, 'cd);" style="overflow:auto; width:235px ; " /> <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>
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="...." >
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="...." >
</div>
</div>
</div>
<div id="map"
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>
<body >
</html>
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>