Customizing Pushpin Clustering with Virtual Earth Map Control API

In a previous blog post I showed you how to cluster pushpins with the Virtual Earth Map Control.  Here is a link to that post:

Clustering Pushpins with the Virtual Earth Map Control API

I wanted to extend on the details of that post and show you some more advanced customizations you can do with the Virtual Earth v6.2 Map Control API.  For instance, you can customize the popup window for each cluster as well as the icon. 

As you saw in the first post, the VEShapeLayer.SetClusteringConfiguration method takes in a parameter that specifies the clustering algorithm and we used the built-in VEClusteringType.Grid default clustering algorithm. There is also a second optional parameter to this method that takes a VEClusteringOptions type.  The VEClusteringOptions type has two properties Icon and a Callback. The VEClusteringOptions.Icon property allows you to specify a custom icon for the cluster using a VECustomIconSpecification. For example the following code will use “pin_green.gif” as a custom icon for clusters when clusters are drawn instead of the default cluster icon:

var options =  new VEClusteringOptions();
var customIcon = new VECustomIconSpecification();
customIcon.Image = "pin_green.gif";

shapeLayer.SetClusteringConfiguration(VEClusteringType.Grid, options);

The VEClusteringOptions.Callback property allows you to specify a callback function which will get called whenever clusters are rendered.  This gives you further flexibility to customize clustering.  The callback takes an array of VEClusterSpecification objects which provide information about the clusters. For example, the following code sets the clustering callback to a function called “clusteringCallback”:

var options =  new VEClusteringOptions();
options.Callback = clusteringCallback;

shapeLayer.SetClusteringConfiguration(VEClusteringType.Grid, options);

Here is the implementation of clusteringCallback which receives an array clusters every time clusters are rendered.  The function iterates through the clusters and overrides the content of the Title and Description of the popup for this cluster with custom text.

function clusteringCallback(clusters)
   for (var i=0; i < clusters.length; ++i)
      var cluster = clusters[i];
      var clusterShape = cluster.GetClusterShape();
      clusterShape.SetTitle("This is my Cluster #" + i);
      clusterShape.SetDescription("This cluster has " + cluster.Shapes.length + " shapes in it!");

The picture below shows the result of clustering the pushpins with the custom icon and the custom popup content:


You can see the complete running example and code here:

Virtual Earth Map Control API Pushpin Clustering Sample #2

For more details on clustering, see the Virtual Earth Map Control SDK 6.2

(Note: This post is also posted at the Virtual Earth Platform Team Blog)

Comments (0)

Skip to main content