separate overlapping pushpins that are added dynamically on a bing map

Question

I am trying to create a bing map and adding a pushpin to the map by creating new pushpin using following

new Microsoft.Maps.Pushpin(locs[i], pushpinOptions);

where the locs array contains all the latitudes and longitudes of different location which are populated using a AJAX call and since the number of the locations to show on map varies from 2 to 20 I cannot pass the latitudes and longitudes in the bing map REST API call as the URL becomes too big.

I have already tried to pass 'dcl=1' parameter in the REST API and its not working since its not a static map. I am following this tutorial but it is for static map ie where all data for the map to render is passed in the REST API to bing which is not feasible in my case. I have also tried but this but I need to separate pushpins when they are rendered. Is there any way to separate overlapping pushpins that are added dynamically on a bing map?

Answer 1

The short answer is there is no built in option for this. Pushpins are rendered where the coordinate is. Rendering such that they do not collide would be very difficult, especially if you have a lot of overlapping pushpins. What is normally done in these scenarios is to implement clustering. Clustering takes overlapping pushpins, groups them together and represents them as a single pushpin that may look different to indicate that it is a cluster. The benefit of this is you can access all the data that is in the cluster and render it in a number of different ways, such as using an infobox and creating a list of all the pushpins that are in the cluster. Here is a good is a good module for Bing Maps V7 that provides this functionality: http://bingmapsv7modules.codeplex.com/wikipage?title=Client%20Side%20Clustering

To get the code go to the source code tab and press download.