Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ArcGIS Javascript - Zoom to show all points

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.

like image 984
John F. Avatar asked Aug 03 '12 18:08

John F.


People also ask

How do I change the zoom level in ArcGIS?

To set the maximum and minimum zoom levels for layer visibility, drag one or both handles on the slider. Labels such as Country, City, and Building can assist you in choosing the best zoom levels. To set a more precise scale, click the drop-down arrows and choose a predefined zoom level.

Is ArcGIS API for JavaScript free?

The JavaScript API is hosted by Esri and is available for free use, please read the Terms of Use - FAQ for more info.

How do you zoom in ArcGIS online?

When using the Zoom In or Zoom Out tools, click on the map or click and drag to create a box to which to zoom. Using the Continuous Zoom/Pan tool, click and drag down on the display to zoom in, or drag up on the display to zoom out. Right-click the Continuous Zoom/Pan tool to pan the map.

What is ArcGIS API for JavaScript?

The ArcGIS API for JavaScript is a lightweight way to embed maps and tasks in web applications. You can get these maps from ArcGIS Online, your own ArcGIS Server or others' servers.


2 Answers

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)
  }
}
like image 73
shrichards Avatar answered Sep 28 '22 00:09

shrichards


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);
  }
}
like image 44
ADi3ek Avatar answered Sep 28 '22 01:09

ADi3ek