VEShapeLayer.SetClusteringConfiguration(type, options) Method

  • Article

You are not viewing the latest version of the AJAX control. Bing Maps AJAX V7 is the recommended JavaScript control for Bing Maps. If you need this documentation, it is available in as a CHM or PDF download.

Sets the method for determining which pushpins are clustered as well as how the cluster is displayed.

VEShapeLayer.SetClusteringConfiguration(type, options);

Parameters

Name Description

type

A VEClusteringType Enumeration specifying which shapes to cluster. Required.

options

A VEClusteringOptions Class object specifying how the pushpin cluster is displayed. Optional.

Remarks

If the VEClusteringOptions.Icon Property is specified, it is used to display clustered icons. If the Icon property is not specified, the default cluster icon is used.

The SetClusteringConfiguration settings are used when the map is panned, zoomed, or shapes are added or removed from the shape layer.

If clustering is configured for the shape layer, then shapes created by importing data into the shape layer using the VEMap.ImportShapeLayerData Method are clustered.

The SetClusteringConfiguration settings are ignored when the map mode is set to VEMapMode.Mode3D.

Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title>Pushpin Clustering</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

      <script type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>

      <script type="text/javascript">
         
         var map = null;

         var p1 = new VELatLong(45.0118,-111.06687);
         var p2 = new VELatLong(45.0117,-111.06687);
         var p3 = new VELatLong(45.0116,-111.06687);
         var p4 = new VELatLong(45.0115,-111.06687);

         var layer = null;         

         function GetMap()
         {  
            map = new VEMap('myMap');
            
            map.LoadMap();

    
         }

         function AddLayer()
         {     
            layer = new VEShapeLayer();
            layer.SetTitle("Clustered Pushpins");
            
            p1Shape = new VEShape(VEShapeType.Pushpin, p1);
            p2Shape = new VEShape(VEShapeType.Pushpin, p2);
            p3Shape = new VEShape(VEShapeType.Pushpin, p3);
            p4Shape = new VEShape(VEShapeType.Pushpin, p4);

            // Add the pushpins to the map
            layer.AddShape(p1Shape);
            layer.AddShape(p2Shape);
            layer.AddShape(p3Shape);
            layer.AddShape(p4Shape);

            //Specifying clustering
            layer.SetClusteringConfiguration(VEClusteringType.Grid);
            
            map.AddShapeLayer(layer);

            //Set the map view and zoom out to see the clustering
            map.SetMapView(new Array(p1, p2, p3, p4));
            map.SetZoomLevel(14);
            
        }
        
        function GetClusteredShapes()
        {  
           var clusterShapes = new Array();
           clusterShapes = layer.GetClusteredShapes(VEClusteringType.Grid);
           alert("The pushpins can be clustered into " + clusterShapes.length + " shapes.");

           if(clusterShapes.length != 0)
           {
              var cluster1Count = clusterShapes[0].Shapes.length;
              alert("There are " + cluster1Count + " pushpins in the first cluster.");
           }
           
        }

      </script>
   </head>
   <body onload="GetMap();">
      <div id='myMap' style="position:relative; width:600px; height:400px;"></div>
      <input type="button" name="btnAddLayer" value="Add Clustered Pushpins" onclick="AddLayer();"/>
      <input type="button" name="btnGetClusteredShapes" value="Get the Clustered Shapes" onclick="GetClusteredShapes();"/>
   </body>
</html>

See Also

Reference

VEShapeLayer.SetClusteringConfiguration(algorithm, options) Method