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