Search code examples
javascriptbing-mapspushpin

How to display certain amounts of PushPins on a Bing Map according to the zoom level?

In my web application a PushPin represents a device located in a region, it displays PushPins on a Bing Map depending on two operations:

  • One is that when the user wants to display of all the devices registered.

  • The second one is when the sever sends a signal to the web site that a particular device must be shown.

The thing is that there are several devices in a region and when the map is zoomed out at level 5 they all look quite messy.

Is there a way to limit the amount of exisiting PushPins displayed on a Bing Map depending on the zoom level? Like at level 5 only show one PushPin and on higher zoom level increase the amount displayed, so that at level 15 all existing PushPins are shown.

I tried the EnableShapeDisplayThreshold method, but it seems that only works for polylines and polygons, not PushPins.

Any help will be appreciated. Thanks in advance.

Solution

  • What you want to do is to use is called clustering, it's grouping the marker (pushpins) depending on the level of zoom and current map view.

    Reference:

    Based on the method you're currently using (EnableShapeDisplayThreshold), I assume that you're using v6.3 so you should be able to use the VEShapeLayer.SetClusteringConfiguration() method:

    http://msdn.microsoft.com/en-us/library/cc966930.aspx

    Sample code:

    Here in action : http://msdn.microsoft.com/en-us/library/cc980909.aspx