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.
Can someone help me to take a look on the code?
Thank you.
Solved! Go to Solution.
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/Map...", {
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/Map...");
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.
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/Map...", {
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/Map...");
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!