ArcGIS Javascript - Zoom to show all points

Question

I am trying to add some functionality that will zoom the map in/out depending on the points that are returned from a query. So for example, say we're zoomed in on the state of Texas. If I execute a query and the service returns back points that are in Texas AND some located in California, I would like the map to then zoom out and then display both California and Texas. I have been looking through the ArcGIS JS API to see how I could implement it but I'm having trouble figuring out what properties and/or methods to use to accomplish this.

Answer 1

The FeatureSet provided to the QueryTask's onComplete callback has the property features that is an array of Graphics.

The javascript api provides the esri.graphicsExtent(graphics) function that can accept that array of Graphics and calculate their extent. Once the extent has been calculated, map.setExtent(extent) can be used to zoom the map to that extent.

It should be noted that the documentation for esri.graphicsExtent(...) specifies that 'If the extent height and width are 0, null is returned.' This case will occur if the returned Graphics array only has a single point in it, so you'll want to check for it.

Here's an example QueryTask onComplete callback that could be used to zoom the map to the extents of points returned by the query:

function onQueryComplete(returnedPointFeatureSet){
  var featureSet = returnedPointFeatureSet || {};
  var features = featureSet.features || [];

  var extent = esri.graphicsExtent(features); 
  if(!extent && features.length == 1) {
    // esri.getExtent returns null for a single point, so we'll build the extent by hand by subtracting/adding 1 to create x and y min/max values
    var point = features[0];
    extent = new esri.geometry.Extent(point.x - 1, point.y - 1, point.x + 1, point.y + 1, point.spatialReference);
  }

  if(extent) {
    // assumes the esri map object is stored in the globally-scoped variable 'map'
    map.setExtent(extent)
  }
}

Answer 2

I agree, map.setExtent(extent, true) is the way to go here. Another observation: In case we have only a single point it's worth considering simply using map.centerAndZoom(point, ZOOM_LEVEL) instead of creating an extent. Then, we could just have this:

function onQueryComplete(returnedPointFeatureSet){
  var featureSet = returnedPointFeatureSet || {};
  var features = featureSet.features || [];

  var extent = esri.graphicsExtent(features); 
  if(!extent && features.length == 1) {
     var point = features[0];
     map.centerAndZoom(point, 12);
  } 
  else {
     map.setExtent(extent, true);
  }
}

Answer 3

Not a good idea to create an extent from a point that way. If the units are in degrees you could get a huge extent. Instead, you could do a buffer around the point using the geometryEngine

function onQueryComplete(featureSet){
  if (featureSet.features.length) {
    var extent = esri.graphicsUtils.graphicsExtent(featureSet.features); 
    if(!extent && featureSet.features.length == 1 && featureSet.features[0].geometry.type == "point") {
      var point = featureSet.features[0];
      var extent = esri.geometry.geometryEngine.buffer(point.geometry, 1, "meters").getExtent();
    }
    // assumes the esri map object is stored in the globally-scoped variable 'map'
    map.setExtent(extent)
  }
}