I have a drop-down list of counties of each state. When I select a county it should zoom in to that county.
Please help me with this.
@rscheitlin #ArcGIS API for JavaScript
Here is a sample for that:
<!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.17/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/4.17/esri/css/main.css">
<script src="http://js.arcgis.com/4.17/"></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;
}
#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/Search",
"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
) {
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"
});
esriRequest('http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3/query?where=1%3D1&outFields=STATE_NAME&returnGeometry=false&orderByFields=STATE_NAME&returnDistinctValues=true&f=json',
//esriRequest('http://services9.arcgis.com/2882Ggz2LB0PQSyP/arcgis/rest/services/school/FeatureServer/0/query?where=1%3D1&outFields=NAME_OF_THE_SCHOOL%2CEMAIL_ADDRESS_OF_THE_SCHOOL&returnGeometry=false&f=json',
{
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 diname = feat.attributes.NAME_OF_THE_SCHOOL;
// var divalue = feat.attributes.EMAIL_ADDRESS_OF_THE_SCHOOL;
var dataItem = {
id:index,
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: ["*"]
});
app = {
zoomRow: function(id, which){
var cb = registry.byId("stateSelect");
console.info(cb.item.value);
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>
<div id="viewDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'"></div>
</div>
</body>
</html>
Thank you so much. It helped me a lot.