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.ht...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
