Clustering with the ArcGIS Server javascript API)

• About geochalkboard
• Agis javascript API posts
• ArcGIS Server mastery Club
• E-learning courses
• Instructor led courses

Clustering with the ArcGIS Server javascript API

Posted onSeptember 9, 2010. Filed under: ArcGIS Server, JavaScript |

in this post I will describe how you can use a third party
clustering tool in your AGIS javascript API applications. clustering is
an excellent technique for visualizing lots of point data. we 've all
seen applications where there were so far points that they simply
appear as one big blob. clustering takes the individual points and
groups them into clusters and then renders the cluster as one graphic. (in this report, I will describe how to use a third-party cluster tool in your javascript API application)

Those of you using either the agis api for flex or Silverlight have
Easy access to clustering functionality built into the APIs. However,
This hasn't yet been done for the javascript API. Fortunately, globoserve
Was provided with the clustering algorithm from ESRI and created
Sub-classed graphicslayer to provide a third party adding clustering
Your applications. You can get additional information, see
Demonstration, and download the JavaScript files here.(Using Flex and Silverlight built-in APIs, you can easily access the cluster function. However, this is not implemented in Javascript APIs)

I downloaded the JavaScript files and inreceivated them into a simple
Application that displays retail customer data as points on the map.
In the first figure I have displayed all the customer locations
Points on a map. This results in a somewhat cluttered display
Markers.

Next I applied clustering to the customer points which resulted in a much more appealing display.

The clustering algorithm automatically creates the clusters and then re-creates the clusters as you zoom in.

Let's spend a little time discussing how you can easily integrate clustering in your application. Here are the basic steps.

the first thing you'll want to do is download the JavaScript files that you'll need. you can get them here.
there are three files in the download. the first,
Ext. util. delayedTask-nsRemoved.js is a copy of extjsdelayedtask class
with its namespace removed. there is not a whole lot to say about this
file so I won't. globoserve
discusses this file in a bit more detail. the second file,
ESRI. UX. layers. clusterLayer-debug.js does the work of creating the
clusters. in this file, the ESRI. layers. graphicslayer class is extended
to create a new class called ESRI. UX. layers. clusterlayer. in your code
you basically just create a new instance of clusterlayer, pass in some
parameters, and it does work of creating the clusters. there is also a
"-min" version of this file which cuts down the size of the file for
performance reasons.

Now that you 've downloaded the files you can code your application
Take advantage of the clustering. There are a couple requirements.
First, the clustering algorithm uses the basemap's tiling scheme
Its "Grid" which means you will need a tiled basemap. The wkid of
Features Being clustered shoshould also be one of the following:

• Projected: 102100,102
• Geographic: 4326,426 9, 4267
• Or matching the wkid of the basemap

On to the code. I 've created a displaycustomers () function which
Executes when the user clicks the display button. inside this function I
First create a querytask object that points to my customer layer. This
Is a tiled map service. I also create a query object and set several
Parameters. This query object acts as input to the querytask object.
Here we have defined parameters to return the geometry of the features,
Return all records (1 = 1) and specified that we 'd like to return
Address and lastname fields. This is highlighted in green in the figure
Below.

Once the querytask has finished executing a featureset is returned
The callback function which creates a new clusterlayer object. Several
Parameters are supplied for the creation of this object.

• Map-refers to an ESRI. map objects from the AGIS API
• Features-this is just a reference to the featureset that was returned from the querytask execution
• Infowindow-configuration options for the infowindow that will
  Appear when you hover over each individual graphic point. You can see
  An example of this below.
• Flarelimit-the number of "flare graphics" that can appear around a cluster (default is 20)
• Flaredistancefromcenter-the distance in pixels that the flare graphics appear from the center of their cluster.

From there we simply call map. addlayer passing in our new instance
The clusterlayer object. That's pretty much all there is to it. I 've
Required ded some screenshots below to show the flaring and infowindows.
Once again, thanks to Adam at globoserve for creating this really useful functionality that corresponds to you will no doubt use in your applications.

The next session of our mastering the ArcGIS Server javascript API begins October 4th, 2010. We still have seats available.