<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7, IE=8, IE=9, IE=10"> <!--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>Pending Case Files</title> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dojox/grid/resources/Grid.css"> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dojox/grid/resources/claroGrid.css"> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } </style> <script>var dojoConfig = { parseOnLoad:true }</script> <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></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.Popup"); dojo.require("esri.dijit.InfoWindow"); var findTask, findParams; var map, center, zoom; var grid, store; var identifyTask, identifyParams; function init() { //setup the popup window var popup = new esri.dijit.Popup({ fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25])) }, dojo.create("div")); dojo.connect(grid, "onRowClick", onRowClickHandler); center = [-123.000, 45.487]; zoom = 11; map = new esri.Map("map", { basemap: "streets", center: center, zoom: zoom, infoWindow: popup, }); var landBaseLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://mtbachelor.co.washington.or.us/arcgis/rest/services/joe/caseFiles_poly/MapServer", {opacity:.7}); map.addLayer(landBaseLayer); //Create Find Task using the URL of the map service to search findTask = new esri.tasks.FindTask("http://mtbachelor.co.washington.or.us/arcgis/rest/services/joe/caseFiles_poly/MapServer/"); dojo.connect(map, "onLoad", function() { //Create the find parameters findParams = new esri.tasks.FindParameters(); findParams.returnGeometry = true; findParams.layerIds = [0]; findParams.searchFields = ["CPO","NUMBER_KEY","FIRST_NAME"]; findParams.outSpatialReference = map.spatialReference; console.log("find sr: ", findParams.outSpatialReference); mapReady(map); }); } function doFind() { //Set the search text to the value in the box findParams.searchText = dojo.byId("caseFile").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.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([98,194,204]), 2), new dojo.Color([98,194,204,0.5])); //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: "NUMBER_KEY", //This field needs to have unique values. Change to NUMBER_KEY after dissolved. label: "NUMBER_KEY", //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).NUMBER_KEY; var selectedTaxLot; dojo.forEach(map.graphics.graphics,function(graphic){ if((graphic.attributes) && graphic.attributes.NUMBER_KEY === clickedTaxLotId){ selectedTaxLot = graphic; return; } }); var taxLotExtent = selectedTaxLot.geometry.getExtent().expand(7); map.setExtent(taxLotExtent); } function mapReady(map) { dojo.connect(map,"onClick",executeIdentifyTask); //create identify tasks and setup parameters identifyTask = new esri.tasks.IdentifyTask("http://mtbachelor.co.washington.or.us/arcgis/rest/services/joe/caseFiles_poly/MapServer"); identifyParams = new esri.tasks.IdentifyParameters(); identifyParams.tolerance = 3; identifyParams.returnGeometry = true; identifyParams.layerIds = [0]; identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL; identifyParams.width = map.width; identifyParams.height = map.height; } function executeIdentifyTask(evt) { identifyParams.geometry = evt.mapPoint; identifyParams.mapExtent = map.extent; var deferred = identifyTask.execute(identifyParams); deferred.addCallback(function(response) { // response is an array of identify result objects // Let's return an array of features. return dojo.map(response, function(result) { var feature = result.feature; feature.attributes.layerName = result.layerName; if(result.layerName === 'Pending Case Files') { console.log(feature.attributes.NUMBER_KEY); var template = new esri.InfoTemplate("", "Case Number: ${NUMBER_KEY} <br/>CPO: ${CPO} <br/> Class: ${CLASS} <br/> Type: ${SUB_TYPE} <br/>Comment Period Ends: ${EndCommentDate} <br/> <br/> Description: ${DESCRIPTION} <br/> <br/> Applicant: ${NAME}"); feature.setInfoTemplate(template); } return feature; }); }); // InfoWindow expects an array of features from each deferred // object that you pass. If the response from the task execution // above is not an array of features, then you need to add a callback // like the one above to post-process the response and return an // array of features. map.infoWindow.setFeatures([ deferred ]); map.infoWindow.show(evt.mapPoint); } 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:80px;"> Case File, CPO, or Applicant: <input type="text" id="caseFile" size="25" value="CPO" /> <button data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ doFind();}, value:"Search"'> 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:'10px'"> <thead> <tr> <th field="NUMBER_KEY">Case File</th> <th field="CPO">CPO</th> <th field="NAME" width="100%">Applicant</th> </tr> </thead> </table> </div> </body> </html>
Solved! Go to Solution.
map = new esri.Map("map", { basemap: "streets", center: center, zoom: zoom, infoWindow: popup, //no commas on last object pair });
Thanks Guys! It runs like a champ now.
I'll be sure to use the jslint site in the future too.
Sincerely,