Hi
I want to use a FindTask to select a feature (polygon or point) using an ID field and zoom to the feature being searched when I click on the search button. This sample on ArcGIS API for JavaScript Sandbox does it but I don't want the table show below the map. I only want to show the search on the top and the map. Can anyone help please by modifying the the code?
Thanks
<!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>Display Find Task results in Dojo DataGrid</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/tasks/FindTask",
"esri/tasks/FindParameters",
"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",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(
Map, FindTask, FindParameters, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
Color, on, dom, registry, arrayUtils, connect, DataGrid, ItemFileReadStore, Button, parser
) {
var findTask, findParams;
var map, center, zoom;
var grid, store;
parser.parse();
registry.byId("search").on("click", doFind);
center = [-83.266, 42.568];
zoom = 11;
map = new esri.Map("map", {
basemap: "streets",
center: center,
zoom: zoom
});
//Create Find Task using the URL of the map service to search
findTask = new FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/TaxParcel/TaxParcelQuery/MapServer/");
map.on("load", function () {
//Create the find parameters
findParams = new FindParameters();
findParams.returnGeometry = true;
findParams.layerIds = [0];
findParams.searchFields = ["OWNERNME1", "OWNERNME2"];
findParams.outSpatialReference = map.spatialReference;
console.log("find sr: ", findParams.outSpatialReference);
});
function doFind() {
//Set the search text to the value in the box
findParams.searchText = dom.byId("ownerName").value;
findTask.execute(findParams, showResults);
}
function showResults(results) {
//This function works with an array of FindResult that the task returns
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, function (result) {
var graphic = result.feature;
graphic.setSymbol(symbol);
map.graphics.add(graphic);
return result.feature.attributes;
});
//Create data object to be used in store
var data = {
identifier : "PARCELID", //This field needs to have unique values
label : "PARCELID", //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);
}
//Zoom to the parcel when the user clicks a row
function onRowClickHandler(evt) {
var clickedTaxLotId = evt.grid.getItem(evt.rowIndex).PARCELID;
var selectedTaxLot = arrayUtils.filter(map.graphics.graphics, function (graphic) {
return ((graphic.attributes) && graphic.attributes.PARCELID === 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;">
Owner name: <input type="text" id="ownerName" size="60" value="Katz" />
<button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" >Search
</button>
</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="PARCELID">Parcel ID</th>
<th field="OWNERNME1" >Owner 1</th>
<th field="OWNERNME2">Owner 2</th>
<th field="RESYRBLT ">Year Built</th>
<th field="SITEADDRESS" width="100%">Address</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
</html>
Solved! Go to Solution.
So here is my version with the unneeded requires and functions removed and it zooms to all the returned features:
<!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>Display Find Task results in Dojo DataGrid</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/tasks/FindTask",
"esri/tasks/FindParameters",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/Color",
"dojo/on",
"dojo/dom",
"dijit/registry",
"dojo/_base/array",
"dojo/_base/connect",
"dijit/form/Button",
"dojo/parser",
"esri/graphicsUtils",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(
Map, FindTask, FindParameters, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
Color, on, dom, registry, arrayUtils, connect, Button, parser, graphicsUtils
) {
var findTask, findParams;
var map, center, zoom;
parser.parse();
registry.byId("search").on("click", doFind);
center = [-83.266, 42.568];
zoom = 11;
map = new esri.Map("map", {
basemap: "streets",
center: center,
zoom: zoom
});
//Create Find Task using the URL of the map service to search
findTask = new FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/TaxParcel/TaxParcelQuery/MapServer/");
map.on("load", function () {
//Create the find parameters
findParams = new FindParameters();
findParams.returnGeometry = true;
findParams.layerIds = [0];
findParams.searchFields = ["OWNERNME1", "OWNERNME2"];
findParams.outSpatialReference = map.spatialReference;
console.log("find sr: ", findParams.outSpatialReference);
});
function doFind() {
//Set the search text to the value in the box
findParams.searchText = dom.byId("ownerName").value;
findTask.execute(findParams, showResults);
}
function showResults(results) {
//This function works with an array of FindResult that the task returns
map.graphics.clear();
var symbol = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2),
new Color([255, 0, 0, 0.5])
);
//create array of attributes
var items = arrayUtils.map(results, function (result) {
var graphic = result.feature;
graphic.setSymbol(symbol);
map.graphics.add(graphic);
return result.feature;
});
var myFeatureExtent = graphicsUtils.graphicsExtent(items);
map.setExtent(myFeatureExtent, 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;">
Owner name: <input type="text" id="ownerName" size="60" value="Katz" />
<button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" >Search
</button>
</div>
<div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit/layout/ContentPane" style="border:1px solid #000;"></div>
</div>
</body>
</html>
Hi Hab,
Below is an example on how to do this. The app will zoom to the first result found from the FindTask.
<!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>Display Find Task results in Dojo DataGrid</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/tasks/FindTask",
"esri/tasks/FindParameters",
"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",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(
Map, FindTask, FindParameters, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
Color, on, dom, registry, arrayUtils, connect, DataGrid, ItemFileReadStore, Button, parser
) {
var findTask, findParams;
var map, center, zoom;
var grid, store;
parser.parse();
registry.byId("search").on("click", doFind);
center = [-83.266, 42.568];
zoom = 11;
map = new esri.Map("map", {
basemap: "streets",
center: center,
zoom: zoom
});
//Create Find Task using the URL of the map service to search
findTask = new FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/TaxParcel/TaxParcelQuery/MapServer/");
map.on("load", function () {
//Create the find parameters
findParams = new FindParameters();
findParams.returnGeometry = true;
findParams.layerIds = [0];
findParams.searchFields = ["OWNERNME1", "OWNERNME2"];
findParams.outSpatialReference = map.spatialReference;
});
function doFind() {
//Set the search text to the value in the box
findParams.searchText = dom.byId("ownerName").value;
findTask.execute(findParams, 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])
);
var graphic = results[0].feature;
graphic.setSymbol(symbol);
map.graphics.add(graphic);
map.setExtent(map.graphics.graphics[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;">
Owner name: <input type="text" id="ownerName" size="60" value="Katz" />
<button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" >Search
</button>
</div>
<div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit/layout/ContentPane" style="border:1px solid #000;"></div>
</div>
</body>
</html>
So here is my version with the unneeded requires and functions removed and it zooms to all the returned features:
<!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>Display Find Task results in Dojo DataGrid</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/tasks/FindTask",
"esri/tasks/FindParameters",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/Color",
"dojo/on",
"dojo/dom",
"dijit/registry",
"dojo/_base/array",
"dojo/_base/connect",
"dijit/form/Button",
"dojo/parser",
"esri/graphicsUtils",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(
Map, FindTask, FindParameters, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
Color, on, dom, registry, arrayUtils, connect, Button, parser, graphicsUtils
) {
var findTask, findParams;
var map, center, zoom;
parser.parse();
registry.byId("search").on("click", doFind);
center = [-83.266, 42.568];
zoom = 11;
map = new esri.Map("map", {
basemap: "streets",
center: center,
zoom: zoom
});
//Create Find Task using the URL of the map service to search
findTask = new FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/TaxParcel/TaxParcelQuery/MapServer/");
map.on("load", function () {
//Create the find parameters
findParams = new FindParameters();
findParams.returnGeometry = true;
findParams.layerIds = [0];
findParams.searchFields = ["OWNERNME1", "OWNERNME2"];
findParams.outSpatialReference = map.spatialReference;
console.log("find sr: ", findParams.outSpatialReference);
});
function doFind() {
//Set the search text to the value in the box
findParams.searchText = dom.byId("ownerName").value;
findTask.execute(findParams, showResults);
}
function showResults(results) {
//This function works with an array of FindResult that the task returns
map.graphics.clear();
var symbol = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2),
new Color([255, 0, 0, 0.5])
);
//create array of attributes
var items = arrayUtils.map(results, function (result) {
var graphic = result.feature;
graphic.setSymbol(symbol);
map.graphics.add(graphic);
return result.feature;
});
var myFeatureExtent = graphicsUtils.graphicsExtent(items);
map.setExtent(myFeatureExtent, 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;">
Owner name: <input type="text" id="ownerName" size="60" value="Katz" />
<button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" >Search
</button>
</div>
<div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit/layout/ContentPane" style="border:1px solid #000;"></div>
</div>
</body>
</html>
Thanks Jake and Robert, both codes can do the job, however the correct answer choice accepts only one answer.
Thanks for this useful bit of code, I have integrated successfully in my app.
However, rather than using a content pane, I would prefer a cleaner look and feel.
I would like to use something like the geocoder search box seen here: ArcGIS API for JavaScript | Simple Geocoding
Is this possible?
Any direction appreciated.
Thanks,
PW