Community

Urgent - Using Dojo DataGrid with ArcGIS JavaScript Extension for Google Maps

2283
1
06-01-2010 05:13 AM
StephenLopez
by
New Contributor II
‎06-01-2010 05:13 AM
I am attempting to implement the dojo datagrid using the find task thorugh the ArcGIS JavaScript Extension for Google Maps.  I have successfully created a map using the Javascript API that zooms to a point when you click on a row in the datagrid, but am having difficulty making this work within the Google Maps framework.  I have posted my code, I know there are arrors, but I am having a hard time getting them worked out, even using Firebug to help me. 
Any help would be appreciated.  If you would like to see my successful implementation for the javascript api I can post that as well, just let me know.

Thanks.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html debug=true>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Find Task:  Add each find result to map and to an html table</title>
     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dojox/grid/resources/tundraGrid.css">
    <script type="text/javascript">
      djConfig = {
        parseOnLoad:true
      }
    </script>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAbN-pn87tRTOhN5haEPTrxxRpW7RPLo8OuYpZjwqeJcN2phD..." type="text/javascript"></script>
    <script src="http://serverapi.arcgisonline.com/jsapi/gmaps/?v=1.6" type="text/javascript" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js" type="text/javascript"></script>
    <script type="text/javascript">
   dojo.require("dojox.grid.DataGrid");
      dojo.require("dojo.data.ItemFileReadStore");
     
   var gmap = null;
      var findTask = null;
      var params = null;
      var mapExtension = null;
      var gOverlays = [];

      function initialize() {
   dojo.connect(grid, "onRowClick", onRowClickHandler);
        // GMap construction
        gmap = new GMap2(document.getElementById('gmap'));
        gmap.addMapType(G_NORMAL_MAP);
        gmap.addMapType(G_SATELLITE_MAP);
        gmap.addControl(new GLargeMapControl());
        gmap.addControl(new GMapTypeControl());
        gmap.setCenter(new GLatLng(42.75, -71.00), 11); // USA (Point)
        gmap.enableScrollWheelZoom();


        //Create MapExtension utility class
        mapExtension = new esri.arcgis.gmaps.MapExtension(gmap);


        // Find Task
        findTask = new esri.arcgis.gmaps.FindTask("http://216.236.253.10/ArcGIS/rest/services/TrafficCounts/MapServer");

        // You can execute a task and listen for the complete event or use the callback to get the results
        GEvent.addListener(findTask, "executecomplete", function() {
          //console.debug("'find task complete' event fired!!!");
        });

        // Find Parameters
        params = new esri.arcgis.gmaps.FindParameters();
        params.layerIds = [0];
        params.searchFields = ["STREET","LOCATION"];
      }

      function executeFind(searchText) {
        // clear map overlays and event listeners using MapExtension removeFromMap
        mapExtension.removeFromMap(gOverlays);
        dojoById('results').value;

        // set find parameters
        params.searchText = searchText;

        // execute find task
        findTask.execute(params, findCompleteCallback);

      }

      function findCompleteCallback(results) {
   var items = []; //all items to be stored in data store
        for (var i=0, il=results.findResults.length; i<il; i++) {
          items.push(results.findResult.feature.attributes);  //append each attribute list as item in store  
    var findResult = results.findResults;
  
        }   
 
        //Create data object to be used in store
        var data = {
          identifier: "STATNUM",  //This field needs to have unique values
          label: "STATNUM", //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 });
        grid.setStore(store);
        grid.setQuery({ STATNUM: '*' });
        
      }
  
   //Zoom to the parcel when the user clicks a row
      function onRowClickHandler(evt){
        var clickedTaxLotId = grid.getItem(evt.rowIndex).STATNUM;
        var selectedTaxLot;
        for (var i=0, il=map.graphics.graphics.length; i<il; i++) {
          var currentGraphic = map.graphics.graphics;
          if ((currentGraphic.attributes) && currentGraphic.attributes.STATNUM == clickedTaxLotId){
            selectedTaxLot = currentGraphic;
            break;
          }
        }}

   dojo.addOnLoad(init);
    </script>

  </head>

  <body onload="initialize();" onunload="GUnload();">
  <table width="100%" height="100%">
    <tr>
      <td align="center">

        <table>
          <tr align="left">
            <td>
              Search Street Name:  <input type="text" id="searchString" value="Main" size="10"/><input id="executeFind" type="button" value="Execute Find" onclick="executeFind(document.getElementById('searchString').value);" /> 
            </td>
          </tr>

          <tr align="left" valign="top">
            <td>
              <div id="gmap" style="width: 500px; height:500px;"></div>
            </td>
          </tr>
          <tr align="left" valign="top">
        <table dojoType="dojox.grid.DataGrid" jsid="grid" id="grid" rowsPerPage="5" rowSelector="20px" style="height:300px; width:600px">
      <thead>
        <tr>
          <th field="STATNUM">Tax lot ID</th>
          <th field="TOWN">Town</th>
          <th field="STREET">Street</th>
          <th field="LOCATION">Location</th>
        </tr>
      </thead>
    </table>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  </body>
</html>
0 Kudos
1 Reply
AdamPfister
by Esri Contributor
Esri Contributor
‎06-02-2010 05:10 AM
First, try to use the CODE tags when posting code.  Otherwise it's unreadable without some effort. 

The first error I get in Firebug is 
dojo.addOnLoad(init);


This is pretty easy because you have no function named "init".  Change it to:
dojo.addOnLoad(initialize);


Next, I see "grid is not defined" at this line:
dojo.connect(grid, "onRowClick", onRowClickHandler);


It looks like you have no "grid" variable declared.

Start with that.
0 Kudos