Perfect, works like a charm, Thanks so much Jerome. Now only if I knew a quick way to have the pop-ups for my POI layer show on the map, any ideas would be greatly appreciated. <script>var dojoConfig = { parseOnLoad:true }</script>
<script src="http://js.arcgis.com/3.7/"></script>
<script>
dojo.require("esri.map");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("esri.tasks.find");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.Button");
dojo.require("esri.dijit.Legend");
var findTask, findParams;
var map, center, zoom;
var grid, store;
function init() {
dojo.connect(grid, "onRowClick", onRowClickHandler);
center = [-98.544, 29.47];
zoom = 11;
map = new esri.Map("map", {
basemap: "hybrid",
center: center,
zoom: zoom
});
var transMapLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer", {
id: "trans"
});
var mainMapLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://mapservices2.bexar.org/arcgis/rest/services/Historic/Historic_POI/MapServer", {
id: "1896"
});
map.addLayers([transMapLayer, mainMapLayer]);
//Create Find Task using the URL of the map service to search
findTask = new esri.tasks.FindTask("http://mapservices2.bexar.org/arcgis/rest/services/Historic/Historic_POI/MapServer");
dojo.connect(map, "onLoad", function() {
//Create the find parameters
findParams = new esri.tasks.FindParameters();
findParams.returnGeometry = true;
findParams.layerIds = [0];
findParams.searchFields = [ "Name", "Owner", "Category"];
findParams.outSpatialReference = map.spatialReference;
console.log("find sr: ", findParams.outSpatialReference);
});
dojo.connect(map, "onLayersAddResult", function(result) {
var legend = new esri.dijit.Legend({
map:map,
layerInfos:[{layer:mainMapLayer,title:"San Antonio Points of Interest 1896"}],
arrangement:esri.dijit.Legend.ALIGN_RIGHT
},"legendDiv");
legend.startup();
});
}
function doFind() {
//Set the search text to the value in the box
findParams.searchText = dojo.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 esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 25, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([0, 255, 0, 0.25]));
//create array of attributes
var items = dojo.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: "OBJECTID", //This field needs to have unique values
label: "OBJECTID", //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 dojo.data.ItemFileReadStore({ data:data });
var grid = dijit.byId('grid');
grid.setStore(store);
//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 = grid.getItem(evt.rowIndex).OBJECTID;
var selectedTaxLot;
var distance = 100;
dojo.forEach(map.graphics.graphics,function(graphic){
if((graphic.attributes) && graphic.attributes.OBJECTID === clickedTaxLotId){
selectedTaxLot = graphic.geometry;
return;
}
});
var newExtent = new esri.geometry.Extent({
"xmin": selectedTaxLot.x - distance,
"ymin": selectedTaxLot.y - distance,
"xmax": selectedTaxLot.x + distance,
"ymax": selectedTaxLot.y + distance,
"spatialReference": {
"wkid": 102100
}
});
map.setExtent(newExtent);
console.log(map.graphics.graphics);
}
dojo.ready(init);
</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;">
Point of Interest: <input type="text" id="ownerName" size="20" value="Koehler" />
<button data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ doFind();}, value:"Search"'>
Search
</button>
</div>
<div data-dojo-props="region:'left'" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Legend'" style="width:18%; border:1px solid #000;">
<div id="legendDiv"></div>
</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="Name" width="50%">Point of Interest</th>
<th field="Category">Category</th>
<th field="Owner">Owner</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
</html>
