I try to select a State from a drop down menu then auto zoom to the State in map instead of clicking the search button all the time to get the results.
Here is my code in JSFiddle.
Edit fiddle - JSFiddle
Can someone help me to take a look on the code?
Thank you.
May Jeff,
Sure here is the code working:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Select by state</title> <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dojox/grid/resources/Grid.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dojox/grid/resources/claroGrid.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } </style> <script src="http://js.arcgis.com/3.10/"></script> <script> require([ "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/tasks/QueryTask", "esri/tasks/query", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/Color", "dojo/on", "dojo/dom", "dijit/registry", "dojo/_base/array", "dojo/_base/connect", "dojox/grid/DataGrid", "dojo/data/ItemFileReadStore", "dijit/form/Button", "dojo/parser", 'dojo/_base/lang', "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/form/ComboBox", "dojo/domReady!" ], function ( Map, ArcGISDynamicMapServiceLayer, QueryTask, Query, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Color, on, dom, registry, arrayUtils, connect, DataGrid, ItemFileReadStore, Button, parser, lang ) { var queryTask, query; var map, center, zoom; var grid, pageInfo, store; parser.parse(); registry.byId("stateName").on("change", doQuery); var initExtent = new esri.geometry.Extent({ "xmin": -125.0552, "ymin": 38.7130, "xmax": -70.2156, "ymax": 48.4081, "spatialReference": { "wkid": 4326 } }); map = new esri.Map("map", { extent: initExtent }); var censusMapLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer", { id: "usa" }); map.addLayer(censusMapLayer); //Create Find Task using the URL of the map service to search queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/2"); function doQuery() { console.info("got here"); //create the query var query = new Query(); query.returnGeometry = true; query.outFields = ["*"]; query.outSpatialReference = map.spatialReference; query.where = "(STATE_NAME) = ('" + dom.byId("stateName").value + "')"; queryTask.execute(query, showResults); } function showResults(results) { map.graphics.clear(); var symbol = new SimpleFillSymbol( SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([98, 194, 204]), 2), new Color([98, 194, 204, 0.5]) ); //create array of attributes var items = arrayUtils.map(results.features, function (result) { var graphic = result; graphic.setSymbol(symbol); map.graphics.add(graphic); return result.attributes; }); //Create data object to be used in store var data = { identifier: "STATE_NAME", //This field needs to have unique values label: " STATE", //Name field for display. Not pertinent to a grid but may be used elsewhere. items: items }; //Create data store and bind to grid. store = new ItemFileReadStore({ data: data }); var grid = registry.byId("grid"); grid.setStore(store); grid.on("rowclick", onRowClickHandler); //Zoom back to the initial map extent // map.centerAndZoom(center, zoom); var extent = esri.graphicsExtent(map.graphics.graphics); map.setExtent(extent, true); grid.resize(); } //Zoom to the parcel when the user clicks a row function onRowClickHandler(evt) { var clickedTaxLotId = evt.grid.getItem(evt.rowIndex).STATE_NAME; var selectedTaxLot = arrayUtils.filter(map.graphics.graphics, function (graphic) { return ((graphic.attributes) && graphic.attributes.STATE_NAME === clickedTaxLotId); }); if (selectedTaxLot.length) { map.setExtent(selectedTaxLot[0].geometry.getExtent(), true); } } }); </script> </head> <body class="claro"> <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%;height:100%;margin:0;"> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="height:40px;"> <table width="100%"> <tr> <td align="center"> <select id="stateName" dojoType="dijit.form.ComboBox"> <!--working with search button--> <option>Choose State</option> <option>Arkansas</option> <option>Kansas</option> <option>California</option> <option>Florida</option> <option>Nevada</option> </select> </td> </tr> </table> </div> <div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit/layout/ContentPane" style="border:1px solid #000;"></div> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" style="height:150px;"> <table data-dojo-type="dojox/grid/DataGrid" data-dojo-id="grid" id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'"> <thead> <tr> <th field="STATE_NAME">State Name</th> <th field="STATE_FIPS">State FIPS</th> </tr> </thead> </table> </div> </div> </body> </html>
When using AMD you have to make sure your functions that you are calling from dijits are in scope. Normally you would just add the event to the dijit in the code and not in the html.
Thank you very much. It works!
Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
