7.3 Querying ArcGIS Server

Often times you will want to query a point data ArcGIS map service to return only points that fall within a buffer. In this tutorial, we will allow users to click anywhere in your maproom to map the metro stops that fall within a given radius buffer.

Setting up

A map service has already been created that has all the metro stops in LA:

We will be querying this map service to find which stops fall within a given buffer radius.

Methodology

By default, ArcGIS Server does not offer a way to query a point layer by a circular buffer.  The documentation lists the following as possible spatial filters:

  • points (but no buffer)
  • envelopes (rectangular bounding boxes)
  • polygons (as an array of coordinates)
Because of this limitation, the work around for this tutorial is to generate a rough polygon that resembles a circular distance buffer around a given point.

Global Variables

Continue from the maproom created in Tutorial 7.2.

Now, declare some global variables:

Function to calculate distance between 2 points

Add the following function to calculate the distance between 2 points.  This will be used when calculating the coordinates for vertices of the “circular” buffer generated:

(function courtesy of this website)

Setting up the Draw Metro Stops within Buffer Function

Now create the drawMetroWithinBuffer function. This function takes two inputs: center and radius to draw a buffer. It then queries the ArcGIS server layer to return all points within that buffer.

The next function we need to create is the getStops function. This function queries ArcGIS server for the stops that are within the buffer zone.

Adding calls in to run the functions to draw metro stops

Now let’s add the function calls within the initialize function to generate the stops.  For now, hard code it so that it draws a buffer at the center of the map, by a 2km buffer:

Allow user interaction: draggable buffer

Wouldn’t it be cool if the user could move the buffer to a desired location?  Add a draggable icon at the center of the buffer, and add an event listener that redraws the buffer (and metro stops) at the new location:

 

Add some stats

As a final step, we also want to provide some summary statistics of what was found within the 2KM buffer zone.  Let’s let the user know how many metro stops fall within the buffer.

First, create a DIV element that will display the metro count.  Add the highlighted line right below the input checkbox:

Next, in the getStops function, add the jQuery call to add the count:

Final Code Sample

Leave a Reply