Zoom to Query Results

TrevorWeiland · ‎06-04-2013

HELP!
I am working on a JavaScript web page that does two things:
1) Query a rest service for the attribute information from a single record and then presents it in a table.
2) Builds a map and zooms to the results from the query.

I used the "Query State Info without Map" to start with and to accomplish the first task. I added a map (basemap plus a couple of additional layers for display). However, I am unable to extract the geometry from the query results as a point to use when creating the map.

The rest service I'm using for the query is not exposed to the internet so I have reworked and simplified my code (using just the sample code and internet services) to the basics so I can learn what I'm doing and apply it to my actual page:

<!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=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">   <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">   <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css">   <title>Query State Info with Map</title>   <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>   <script>    dojo.require("esri.tasks.query");    dojo.require("esri.map");     var queryTask, query, centerPoint, stateName;     var stateName = "Colorado" /* stateName for QueryTask */     function init() { /* Setup query */     queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5");     query = new esri.tasks.Query();     query.returnGeometry = true;     query.outSpatialReference = new esri.SpatialReference({wkid : 102100});     query.outFields = ["STATE_NAME","SQMI","SUB_REGION"];     query.text = stateName;          queryTask.execute(query, showResults);    }     function showResults(results) {     var s = "";     for (var i=0, il=results.features.length; i<il; i++) {      var featureAttributes = results.features.attributes;      for (att in featureAttributes) {       s = s + "<b>" + att + ":</b> " + featureAttributes[att] + "<br />";      }     }     dojo.byId("info").innerHTML = s; /* Extract Geometry From Query */     centerPoint = new esri.geometry.Point(getPoint(results)); //Does NOT work- Actual use will be a point layer //    centerPoint = [-122.45, 37.75] //fake point for testing /* Build Map */     map = new esri.Map("map",{ basemap: "topo", center:centerPoint, zoom:13 });      map.addLayer(new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer", { "opacity":0.2, spatialReference: map.spatialReference })); /* Add ESRI Census Map */    }    dojo.ready(init);   </script>  </head>  <body class="claro">   <div id="info" style="padding:5px; margin:5px; background-color:#eee;"></div>   <div id="map"></div>  </body> </html>

Can someone please help me understand how to extract the geometry of the results to a variable that can then be used to create a center-point in a map?

Thank you,

AdamSkoog · ‎06-04-2013

A better way to do this would be to zoom to the extent of your graphics and expand a bit to zoom out.

function showResults(results) {         // This takes the graphics array you get back from your query and         // gets the overall extent for them. Make sure return geometry is set to          // true in your query.         var extent = esri.graphicsExtent(results.features);          // Use that to set the extent, 1.5 is something I use in my app, but play with         // it to find a setting you like, setting the second parameter to true will get you an extend         // that is at the closest level of your cached service.         map.setExtent(extent.expand(1.5), true); }

I noticed in your code your map isn't initialized yet at this point. Your map initialize code would change to the
following and you would skip the map.setExtent above.

        map = new esri.Map("map",{ basemap: "topo", extent: extent })

Hopefully this helps you out a bit. 🙂

View solution in original post

AdamSkoog · ‎06-04-2013

A better way to do this would be to zoom to the extent of your graphics and expand a bit to zoom out.

function showResults(results) {         // This takes the graphics array you get back from your query and         // gets the overall extent for them. Make sure return geometry is set to          // true in your query.         var extent = esri.graphicsExtent(results.features);          // Use that to set the extent, 1.5 is something I use in my app, but play with         // it to find a setting you like, setting the second parameter to true will get you an extend         // that is at the closest level of your cached service.         map.setExtent(extent.expand(1.5), true); }

I noticed in your code your map isn't initialized yet at this point. Your map initialize code would change to the
following and you would skip the map.setExtent above.

        map = new esri.Map("map",{ basemap: "topo", extent: extent })

Hopefully this helps you out a bit. 🙂

TrevorWeiland · ‎06-04-2013

I think I inserted your code correctly, however, if I have

var extent = esri.graphicsExtent(results);

anywhere in the "showResults" function, the map fails- even if I don't use extent anywhere else.

JohnGravois · ‎06-04-2013

to solve this problem you have to dig into the results in order to get a reference to the geometry of the returned polygon itself (ie. "results" is a generic featureset, "results.features" is an array of graphics and "results.features.geometry" is a geometry object for a specific graphic, where "i" refers to the index position of the item within an array).

in order to use our utility method to return the extent of a collection of graphics, you would do this

var extent = esri.graphicsExtent(results.features);

here's how to retrieve the same extent by calling the getExtent method of a single polygon geometry object (this works because there was only one graphic in the array)

//features[0] will always be the first item in an array
var extent = results.features[0].geometry.getExtent();

map = new esri.Map("map",{ basemap: "topo", extent: extent });

here's how you use the polygon geometry to retrieve a valid point from within the geometry instead

//in order to call the getPoint method of a polygon geometry object, you have to pass index positions to articulate which ring and specific point you want 
centerPoint = results.features[0].geometry.getPoint(0,0);

map = new esri.Map("map",{ basemap: "topo", center:centerPoint, zoom:13 });

i've always found it really helpful to set breakpoints within the callback so that i can inspect the results and use the console interactively to figure out how to get a reference to exactly what i need so that i can go back afterwards and modify the source code

[ATTACH=CONFIG]24992[/ATTACH]

hopefully all that helps!

AdamSkoog · ‎06-05-2013

jgravois was right, I was typing to fast and forgot to add the features property on there. I editted the post to reflect what it should be.

TrevorWeiland · ‎06-05-2013

thank you both very much.

JohnGravois · ‎06-05-2013

you're very welcome. please feel free to mark Adam's post as the answer.