<!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>Feature Layer Only Map</title>
<link rel="stylesheet" href="http://desktop101.ksrsac.com/KSRSAC/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}
#header {
background-image: url(http://desktop101.ksrsac.com/KSRSAC/LefttPane/images/banner.jpg);
background-repeat: repeat-x;
border: solid 4px #224a54;
color: #FFF;
font-size: 18pt;
text-align: left;
font-weight: 700;
height: 70px;
margin: 2px;
}
#leftPane {
background-color: #FFF;
color: #3f3f3f;
border: solid 2px #224a54;
width: 20%;
margin: 5px;
padding: 2px;
}
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.dijitTabInnerDiv {
background-color: #ecefe4;
}
#tabs {
padding: 5px;
}
#HomeButton {
position: absolute;
top: 200px;
left: 280px;
z-index: 50;
}
</style>
<script>
dojoConfig = {
parseOnLoad: true
}
</script>
<script src="http://desktop101.ksrsac.com/KSRSAC/arcgis_js_api/library/3.9/3.9/js/dojo/dojo/dojo.js"></script>
<script src="http://js.arcgis.com/3.9/"></script>
<script>
require([
"dojo/dom-construct",
"esri/map",
"esri/layers/FeatureLayer",
"esri/geometry/Extent",
"esri/InfoTemplate",
"esri/dijit/HomeButton",
"esri/dijit/OverviewMap",
"dojo/parser",
"dojo/store/Memory",
"dijit/form/ComboBox",
"esri/tasks/QueryTask",
"esri/tasks/Query",
"dijit/layout/BorderContainer",
"dijit/layout/TabContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function (
domConstruct,
Map,
FeatureLayer,
Extent,
InfoTemplate,
HomeButton,
OverviewMap,
parser,
Memory,
ComboBox
) {
parser.parse();
var bounds = new Extent({
"xmin": 7583508.66876001,
"ymin": 754519.306341084,
"xmax": 10843390.8045407,
"ymax": 4451565.92247309,
"spatialReference": {
"wkid": 3857
}
});
var map = new Map("map", {
extent: bounds
});
var url = "http://164.100.133.66/ArcGIS/rest/services/Basemap/StateBasemap/MapServer/6";
var template = new InfoTemplate("Tank Information System", "<tr>State Name: <td>${STATE}</tr></td><br><tr>Objectid:<td>${OBJECTID}</tr></td><br><tr>Shape length:<td>${Shape_Length}</tr></td><br><tr>Shape Area:<td>${Shape_Area}sq Meters</tr></td>");
var fl = new FeatureLayer(url, {
id: "6",outFields: ["*"],
infoTemplate: template
});
//var overviewMapDijit = new OverviewMap({ map: map, visible: true});
var home = new HomeButton({
map: map
}, "HomeButton");
//QUERY TASK FOR DROP DOWN
function init() {
queryTask = new esri.tasks.QueryTask("http://164.100.133.66/ArcGIS/rest/services/Basemap/StateBasemap/MapServer/6");
var query = new Query();
query = new esri.tasks.Query();
query.returnGeometry = false;
query.outFields = ["STATE"];
query.where = "STATE<> ''";
queryTask.execute(query, populateList);
}
function populateList(results) {
//Populate the ComboBox with unique values
var zone;
var values = [];
var testVals = {};
//Add option to display all zoning types to the ComboBox
values.push({name: "ALL"
})
//Loop through the QueryTask results and populate an array
//with the unique values
var features = results.features;
dojo.forEach(features, function (feature) {
zone = feature.attributes.STATE;
if (!testVals[zone]) {
testVals[zone] = true;
values.push({ name: zone});
}
});
//Create a ItemFileReadStore and use it for the
//ComboBox's data source
var dataItems = {
identifier: 'name',
label: 'name',
items: values
};
var store = new Memory({data: dataItems});
dijit.byId("mySelect").store = store;
}
map.addLayer(fl);
//overviewMapDijit.startup();
home.startup();
init.startup();
dojo.addOnLoad(init);
});
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
<div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
<div id="title">"Tank Information System"
</div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" id="leftPane" data-dojo-props="region:'left'">
<div data-dojo-type="dijit.layout.TabContainer">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Table of Content', selected:'true'">
Content for the first tab
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Search'">
Content for the second tab
<select id="mySelect" dojoType="ComboBox" style="width:200px;font-size:16px;"
autoComplete="true"
forceValidOption="false"
value="Select Zoning Type"
onchange="applyLayerDef(this)" >
</select>
</div>
</div>
</div>
<div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>
<div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
<span id="dataSource">
</span>
</div>
<div id="HomeButton"></div>
</div>
</body>
</html>
