Data Grid With zoom

BillShockley — Fri, 11 May 2012 13:46:34 GMT

I'm a newbie to the java scripting world and I am working on a sample script called 'Data Grid With zoom.'

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/fl_zoomgrid.html

I got it to work great with a polygon Mapservice layer....but I want it to zoom to a point layer.

here is my code so far:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">  <html>    <head>      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>      <meta http-equiv="X-UA-Compatible" content="IE=7" />      <title>Add zoom button to DataGrid</title>      <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">  <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dojox/grid/resources/Grid.css">     <style type="text/css">       body,html,#main{margin:0;padding:0;height:100%;width:100%;}       #map{padding:0;border:solid 1px;}     </style>      <script type="text/javascript">       var djConfig = { parseOnLoad:true };     </script>      <script type="text/javascript" src=       "http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.6">     </script>      <script type="text/javascript">       dojo.require("dijit.dijit");       dojo.require("esri.map");       dojo.require("esri.layers.FeatureLayer");       dojo.require("dojo.parser");       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");       dojo.require("dijit.form.Button");       dojo.require("dijit.form.TextBox");       dojo.require("dojox.grid.DataGrid");       dojo.require("dojo.data.ItemFileReadStore");        var map;       var subLayer;       function init() {         var initExtent = new esri.geometry.Extent({"xmin": -10913674.45,"ymin": 4147095.58,"xmax": -10806662.61,"ymax":4246463.72,"spatialReference":{"wkid":102100}});         map = new esri.Map("map",{           extent:initExtent         });         dojo.connect(map,"onLoad",function(){           dojo.connect(dijit.byId('map'), 'resize', map,map.resize);           });         map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer"));   map.addLayer(new esri.layers.ArcGISDynamicMapServiceLayer("http://pse-gis:8399/arcgis/rest/services/Oklahoma_Bill/MapServer",{"opacity":0.5}));   map.addLayer(new esri.layers.ArcGISDynamicMapServiceLayer("http://pse-gis:8399/arcgis/rest/services/Oklahoma_Bill/MapServer/29",{"opacity":0.5}));          var maxOffset = function maxOffset(map, pixelTolerance) {           return Math.floor(map.extent.getWidth() / map.width) * pixelTolerance;         };          //add the states demographic data - replaced with Substation data - outfields are case sensitive   subLayer = new esri.layers.FeatureLayer("http://pse-gis:8399/arcgis/rest/services/Oklahoma_Bill/MapServer/29",{           mode:esri.layers.FeatureLayer.MODE_SELECTION,           maxAllowableOffset:maxOffset(map,0),           outFields:["Name ","OBJECTID"]         });          //define a selection symbol           var highlightSymbol = new esri.symbol.SimpleFillSymbol().setColor( new dojo.Color([0,0,0,.25]));         subLayer.setSelectionSymbol(highlightSymbol);           dojo.connect(subLayer,'onLoad',function(layer){                var query = new esri.tasks.Query();               query.where = "1=1";                layer.queryFeatures(query,function(featureSet){             var items = dojo.map(featureSet.features,function(feature){               return feature.attributes;             });             var data = {                 identifier:"OBJECTID",                 items:items};             store = new dojo.data.ItemFileReadStore({data:data});            grid.setStore(store);             grid.setSortIndex(1,"true"); //sort on the state name                     });         });          map.addLayers([subLayer]);          //modify the grid so only the STATE_NAME field is sortable         grid.canSort = function(col){ if(Math.abs(col) == 2) { return true; } else { return false; } };       }      function makeZoomButton(id){       var zBtn = "<div dojoType='dijit.form.Button'><img src='images/zoom.png'";       zBtn = zBtn + " width='18' height='18'";       zBtn = zBtn + " onClick=\"zoomRow('"+id+"')\"></div>";       return zBtn;     }       function zoomRow(id){       subLayer.clearSelection();   var query = new esri.tasks.Query();       query.objectIds = [id];       subLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW,function(features){         //zoom to the selected feature--to change zoom level adjust expand #          var stateExtent = features[0].geometry.getExtent().expand(1.0);           map.setExtent(stateExtent);       }); }  dojo.addOnLoad(init); </script>   </head>   <body class="claro">     <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" style="width:50%; height:70%;">       <div id="map" dojotype="dijit.layout.ContentPane" region="center" >       </div>       <div dojotype="dijit.layout.ContentPane" region="bottom"style="height:155px" >   List of Outages.  Click an outage to zoom to.         <table dojotype="dojox.grid.DataGrid" jsid="grid" id="grid" selectionMode="none">          <thead>             <tr>               <th field="OBJECTID" formatter="makeZoomButton" width="35px">      <img alt="+" src="images/zoom.png"/>      </th>               <th field="Name " width="100px">Name</th>               <!--<th field="NUMBER_ " width="100px">Station Number</th>-->             </tr>           </thead>         </table>       </div>     </div>   </body> </html>

This map service layer is a point layer - http://pse-gis:8399/arcgis/rest/services/Oklahoma_Bill/MapServer/29 (this is on an Intranet so I don't think you can view it) and its fields are:

Fields:
OBJECTID ( Type: esriFieldTypeOID, Alias: OBJECTID )
Name ( Type: esriFieldTypeString, Alias: Name , Length: 50 )
SHAPE ( Type: esriFieldTypeGeometry, Alias: SHAPE )

What do I need to modify to make it work with a point layer?

Any help is much appreciated.

Bill

Re: Data Grid With zoom

ReneRubalcava — Fri, 11 May 2012 14:10:34 GMT

To zoom to a point, it's easier to use the maps centerAndZoom method
http://help.arcgis.com/EN/webapi/javascript/arcgis/help/jsapi/map.htm#centerAndZoom

map.centerAndZoom(graphic.geometry, 17)

Re: Data Grid With zoom

BillShockley — Fri, 11 May 2012 14:33:39 GMT

To zoom to a point, it's easier to use the maps centerAndZoom method
http://help.arcgis.com/EN/webapi/javascript/arcgis/help/jsapi/map.htm#centerAndZoom
map.centerAndZoom(graphic.geometry, 17)

Hey Hey...that did it. Thanks.

topic Data Grid With zoom in ArcGIS JavaScript Maps SDK Questions

Data Grid With zoom

Re: Data Grid With zoom

Re: Data Grid With zoom