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", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/dijit/HomeButton", "dojo/domReady!" ], function( Map, FindTask, FindParameters, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Color, on, dom, registry, arrayUtils, connect, DataGrid, ItemFileReadStore, Button, parser, Tiled,ArcGISDynamicMapServiceLayer,HomeButton ) { var findTask, findParams; var map, center, zoom; var grid, store; var layerConfig = { urlTiled: "http://localhost:6080/arcgis/rest/services/v1/BaseMap42114/MapServer", urlInfo: "http://localhost:6080/arcgis/rest/services/aggiemap_beta/beta_MapInfo/MapServer", urlV1Info: "http://localhost:6080/arcgis/rest/services/v1/MapInfo/MapServer", qBldg: "http://localhost:6080/arcgis/rest/services/v1/MapInfo/MapServer/6" }; parser.parse(); registry.byId("search").on("click", doFind); center = [-96.345680, 30.612473]; zoom = 16; map = new esri.Map("map", { basemap: "topo", center: center, zoom: zoom }); var tiled = new Tiled(layerConfig.urlTiled); var tamuInfo = new ArcGISDynamicMapServiceLayer(layerConfig.urlV1Info); map.addLayers([tiled,tamuInfo]); var home = new HomeButton({ map: map }, "HomeButton"); home.startup(); findTask = new FindTask(layerConfig.urlV1Info); map.on("load", function () { //Create the find parameters findParams = new FindParameters(); findParams.returnGeometry = true; findParams.layerIds = [11, 0, 1, 2, 6]; findParams.searchFields = ["Name", "Number", "MapDisplay", "Address", "BldgName"]; 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("searchText").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); } } });
<div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit/layout/ContentPane" style="border:0px"><div id="HomeButton"></div> <div id="mapMenu"><img src="http://localhost/images/drawerlogol.png"><div id="mapMenuSub"><input type="text" id="searchText" size="30" /><button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" >Search</button> <table data-dojo-type="dojox/grid/DataGrid" data-dojo-id="grid" id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'"> <thead> <tr> <th field="MapDisplay" width="100%">Results</th> </tr> </thead> </table> </div> </div> </div>
Solved! Go to Solution.
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", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/dijit/HomeButton", "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, Tiled,ArcGISDynamicMapServiceLayer,HomeButton
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", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/dijit/HomeButton", "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, Tiled,ArcGISDynamicMapServiceLayer,HomeButton