ZoomIn to county

Question

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

AkhilaM · Answer

Thank you so much. It helped me a lot.

rscheitlin · Answer

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