salopez

Help With Dojo DataGrid

Discussion created by salopez on Jun 8, 2010
I am attempting to load data from an ArcGIS Service into a dojo datagrid through the Javascript Extenstion for Google Maps. 

I need help with 2 items. The code below is what I have come up with so far.  (I have uploaded the necessary javascript to run the file as a zip file)

First:
I know that there are errors in my code, however I am not sure what needs to be corrected to make the code work.  ANy suggestions would be appreciated.

Second:
Once I fix the code  I would like to be able to select a row in the column and zoom to the point location.  I have accomplished this using graphics through the javascript api, but have not had success through the javascript extension for Google Maps.

Thanks


<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>Layer Visibility</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 type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAbN-pn87tRTOhN5haEPTrxxRpW7RPLo8OuYpZjwqeJcN2phDsRBT6DioG219lPJG3WTn3zmQqebsjVg" type="text/javascript"></script>
<script src="http://serverapi.arcgisonline.com/jsapi/gmaps/?v=1.6" type="text/javascript" ></script>
<script type="text/javascript" src="./scripts/arcgislinkpacked.js"></script> 
      
<script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("dojox.grid.DataGrid");
      dojo.require("dojo.data.ItemFileReadStore");
      dojo.require("esri.tasks.find");

      var ov;
      var map;
      var grid, store;
      var findTask = null;
      var params = null;
      var mapExtension = null;
      var gOverlays = [];

 
        function init(){
  dojo.connect(grid);
          var type=new ArcGISMapType([new ArcGISTileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer')]);//
          GEvent.addListener(type,'load', function(){
            var map = new GMap2(document.getElementById("map"));
   map.setCenter(new GLatLng(42.75,-71.00), 10);
            map.addControl(new GMapTypeControl());
            map.addControl(new GLargeMapControl());
            map.addControl(new GScaleControl());
 
            map.enableDoubleClickZoom();
            map.enableContinuousZoom();
            map.enableScrollWheelZoom();    
     //Create MapExtension utility class
        mapExtension = new esri.arcgis.gmaps.MapExtension(map);


        // Find Task
        findTask = new esri.arcgis.gmaps.FindTask("http://216.236.253.10/ArcGIS/rest/services/TrafficViewer/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"];
  
  
            var url = 'http://216.236.253.10/ArcGIS/rest/services/TrafficViewer/MapServer';
            ov=new ArcGISMapOverlay(url,{opacity:0.8});
            GEvent.addListener(ov,'load', function(){
              map.addOverlay(ov);
              var service=ov.getMapService();
              var toc='';
              var layers=service.getLayers();
              for (var i=0; i< layers.length; i++){
                toc+='<input type="checkbox" id="layer'+layers[i].id+'"';
                if (layers[i].visible) toc+=' checked="checked"';
                toc+=' onclick="setVis()">'+layers[i].name+'<br/>';
              }
              document.getElementById('toc').innerHTML=toc;
            })
          });  
}
  function executeFind(searchText) {
        // clear map overlays and event listeners using MapExtension removeFromMap
  dojo.byId("results").value;

        // set find parameters
        params.searchText = searchText;

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

      }

      function findCompleteCallback(results) {
    //Create items array to be added to store's data
        var items = []; //all items to be stored in data store
        for (var i=0, il=results.findResults.length; i<il; i++) {
          items.push(results.findResults[i].attributes);  //append each attribute list as item in store
   } 
   
    //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: '*' });         
      }
  
        function setVis(){
          var service = ov.getMapService();
          var layers = service.getLayers();
          for (var i = 0; i < layers.length; i++) {
            var el=document.getElementById('layer'+layers[i].id);
            layers[i].visible=(el.checked===true);
          }
          ov.refresh();
        }
  dojo.addOnLoad(init);
        </script>
    </head>
    <body class="tundra" onload="init()">
       <table>          
Owner name: <input type="text" id="results" size="60" value="Main" />
    <input type="button" value="Search" onclick="executeFind();" /><br />        
           <td valign="top"><div id="toc" style="width:130px;"></div></td>
           <td><div id="map" style="width:600px; height:500px; border:1px solid #000;">
         </tr>
       </table>
         <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">Owner 1</th>
          <th field="STREET">Owner 2</th>
          <th field="LOCATION">Owner 3</th>
        </tr>
      </thead>
    </table>
        
    </body>
</html>]

Attachments

Outcomes