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.

score 22 · Accepted Answer · edited Jan 03 '18 at 23:11

22

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)
  }
}

edited Jan 03 '18 at 23:11

iCode

1,254
1
13
16

answered Aug 04 '12 at 01:45

shrichards

1,341
2
13
15

1

Excellent. Didn't realize esri had those utility functions. – John F. Aug 04 '12 at 11:33
Another question. Using the information you've provided, I am able to change the extent. However, with certain points that are spread out, it seems it zooms in but I can't see some of the exterior points. If I zoom out slightly, then I see them. Is there an offset that I need to account for before I set the extent on the map? – John F. Aug 06 '12 at 14:30
4

The map may be making an adjustment based on the tiles in the tile cache. If so, the `setExtent` function takes a second (optional) boolean arg that when true guarantees that the full extent is displayed on the map. If that doesn't do the trick, you can slightly increase the size of the extent using the `extent.expand(factor)` before providing it to the setExtent method. – shrichards Aug 06 '12 at 16:27
Documentation has moved to https://developers.arcgis.com/en/javascript/jsapi/namespace_esri-amd.html – Robert Claypool Sep 09 '13 at 08:18
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 or transform the map point into a screen point, add 1 pixel to the extent and transform it back to map point – Below the Radar Feb 28 '20 at 13:38

score 5 · Answer 2 · answered May 21 '13 at 09:20

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);
  }
}

Below the Radar · Answer 3 · 2020-02-28T13:54:09.367

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)
  }
}

ArcGIS Javascript - Zoom to show all points

3 Answers3