The code is below , in this code when i try to add widgets the home widget code is treated as search widget and search widget code is treated as home widget code. Why this is happening?? what's the reason behind??
After this i want to add more widgets like Base map Gallery widget , layer list widget,Direct Line Measurement3D and Area Measurement 3D widget, but unfortunately i am fail to do this.
<!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/4.9/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
<script src="https://js.arcgis.com/4.9/"></script>
<style>
html,
body,
#mainWindow {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
font-family: "Trebuchet MS";
}
#header {
height: 32px;
overflow:visible;
border:none;border-bottom: 3px solid #CC9900;
font-family: Windows;
font-size:14pt;
color: #FFFFFF;
background: #000000;
z-index: 99;
line-height: 32px;
}
.searchDiv {
float: right;
z-index: 99;
}
.homeDiv{
float: right;
z-index:99;
}
.galleryDiv{
float: left;
z-index:99;
}
#viewDiv {
width: 100%;
height: calc(100% - 32px);
border: none;padding:0px;
margin: 0px;
}
</style>
<script>
var map;
require([
"esri/Map",
"esri/views/MapView",
"dojo/on",
"esri/tasks/support/Query",
"esri/layers/FeatureLayer",
"dojo/store/Memory",
"dojo/_base/array",
"dojo/_base/lang",
"esri/request",
"dojo/parser",
"dijit/registry",
"esri/widgets/Home",
"esri/widgets/Search",
"esri/widgets/LayerList",
"esri/widgets/BasemapGallery",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/Button",
"dijit/form/ComboBox",
"dojo/domReady!"
], function(
Map, MapView, on, Query, FeatureLayer, Memory, array, lang, esriRequest, parser, registry, Search, Home, LayerList, BasemapGallery
) {
parser.parse();
map = new Map({
basemap: "topo"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-98.1883, 37.0868],
zoom: 5
});
var searchWidget = new Search({
view: view,
container: "searchDiv"
});
view.ui.add(searchDiv,"top-left");
var homeWidget = new Home({
view: view,
container: "homeDiv"
});
var layer = new LayerList({
view: view,
container: "galleryDiv"
});
view.ui.add(layer,"top-right");
var search1 = new Home({
view : view,
container: "search1Div"
});
view.ui.add(search1,"top-right");
esriRequest('http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3/query?where=1%3D1&outF...',
{
responseType:'json',
timeout:15000
}).then(lang.hitch(this,function(response){
var store2 = new Memory({data:[]});
registry.byId("stateSelect").set('store',store2);
var data = array.map(response.data.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});
registry.byId("stateSelect").set('store',store2);
}));
var States = new FeatureLayer({
url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3",
outFields: ["*"]
});
var Counties = new FeatureLayer({
url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2",
outFields: ["*"]
});
//map.addMany([States,Counties]);
app = {
zoomRow: function(id, which){
var sym = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [255, 0, 0, 0.5],
outline: { // autocasts as new SimpleLineSymbol()
color: [128, 128, 128, 1],
width: "0.5px"
}
}, gra;
view.graphics.removeAll();
var query = States.createQuery();
var thePoly, theExtent;
if(which == "State"){
query.outFields=[];
query.outSpatialReference = view.spatialReference;
query.where = "STATE_NAME='" + (id).toString() + "'";
console.info(query.where);
query.returnGeometry = true;
States.queryFeatures(query).then(function(response){
gra = response.features[0];
gra.symbol = sym;
view.graphics.add(gra);
thePoly = gra.geometry;
theExtent = thePoly.extent.expand(2); //Zoom out slightly from the polygon's extent
view.goTo(theExtent);
});
esriRequest("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",
{
responseType: "json",
timeout:15000
}).then(lang.hitch(this,function(response){
var store2 = new Memory({data:[]});
registry.byId("countySelect").set('store',store2);
var data = array.map(response.data.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("countySelect").set('store',store2);
document.getElementById('countySelect').value = "Select County";
}));
}else if(which == "County"){
query = Counties.createQuery();
var county = (id).toString();
county = county.replace(" County", "");
query.where = "NAME='" + county + "'";
query.returnGeometry = true;
query.outFields=[];
query.outSpatialReference = view.spatialReference;
Counties.queryFeatures(query).then(function(response){
gra = response.features[0];
gra.symbol = sym;
view.graphics.add(gra);
thePoly = gra.geometry;
theExtent = thePoly.extent.expand(2); //Zoom out slightly from the polygon's extent
view.goTo(theExtent);
});
}
}
};
});
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false">
<div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'"> 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');" data-dojo-props="maxHeight: 200" />
<input type="hidden" name="stateabbr" id="stateabbr" />
<div id="searchDiv" class='searchDiv'></div>
<div id="homeDiv" class='homeDiv'></div>
<div id="galleryDiv" class='galleryDiv'></div>
<div id="search1Div" class='search1Div'></div>
</div>
<div id="viewDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'"></div>
</div>
</body>
</html>