How to do clustering in Azure Maps based on the count of Pins?

Question

How to do clustering in Azure Maps based on the count of Pins?

Arjun Ramesh 51

We have implemented clustering as shown below. However we want to enable clustering only when the count is greater than 5. So there should not be clustering when the pin count is 1-5 and we should be able to see all the individual pins. (For eg; if cluster size is 3, instead of cluster bubble, we should be seeing all the 3 pins individually).

Note: we have implemented clustering using Bubble Layer (with this example as reference https://samples.azuremaps.com/bubble-layer/point-clusters-in-bubble-layer)

Please let us know if there is any way to achieve the clustering based on pin count.

0 comments

1 answer

Your answer

Answer 1

This capability is not currently exposed in the API, however, doing some digging, the dependency library used for clustering now supports this feature and under the hood of Azure Maps it is possible to enable this, it just hasn't been exposed through the officially supported API yet. That said, it is possible to override this setting using some undocumented code. Here is how I managed to do this:

   //Create a data source and add it to the map.  
   datasource = new atlas.source.DataSource(null, {  
   //Tell the data source to cluster point data.  
   cluster: true,  
     
   //The radius in pixels to cluster points together.  
   clusterRadius: 45,  
     
   //The maximium zoom level in which clustering occurs.  
   //If you zoom in more than this, all points are rendered as symbols.  
   clusterMaxZoom: 15   
   });  
   map.sources.add(datasource);  
     
   //Override hidden property of supercluster to set the min points to group into a cluster.  
   map.map.getSource(datasource.getId()).workerOptions.superclusterOptions.minPoints = 5;

I'll reach out to the Azure Maps team internally and let them know this capability is available and ask that they consider exposing it through the official API.

Update

I'm not really sure how you are getting those errors. That error sounds like you are trying to set this override before the map is ready to be accessed. Make sure you create the data source/set this override within the maps ready event handler. Otherwise, the map object isn't ready to be accessed.

Here is a full sample. I tried clearing/setting data on the data source in different ways via the console and was unable to get any errors to be thrown.

   <!DOCTYPE html>  
   <html lang="en">  
   <head>  
       <title></title>  
     
       <meta charset="utf-8" />      
       <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />  
     
       <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->  
       <link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" rel="stylesheet" />  
       <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>  
     
       <script>  
           var map, datasource;  
     
           //GeoJSON feed of all earthquakes from the past 30 days. Sourced from the USGS.  
           var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson';  
     
           //Find more earthquake data feeds here: https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php  
     
           function GetMap() {  
               //Initialize a map instance.  
               map = new atlas.Map('myMap', {  
                   center: [-97, 39],  
                   zoom: 3,  
                   view: 'Auto',  
     
                   //Add authentication details for connecting to Azure Maps.  
                   authOptions: {  
     
                       authType: 'subscriptionKey',  
                       subscriptionKey: '[YOUR_AZURE_MAPS_KEY]'  
                   }  
               });   
     
               //Wait until the map resources are ready.  
               map.events.add('ready', function () {  
     
                   //Create a data source and add it to the map.  
                   datasource = new atlas.source.DataSource(null, {  
                       //Tell the data source to cluster point data.  
                       cluster: true,  
     
                       //The radius in pixels to cluster points together.  
                       clusterRadius: 45,  
     
                       //The maximium zoom level in which clustering occurs.  
                       //If you zoom in more than this, all points are rendered as symbols.  
                       clusterMaxZoom: 15   
                   });  
                   map.sources.add(datasource);  
   				  
   				//Override hidden property of supercluster to set the min points to group into a cluster.  
   				map.map.getSource(datasource.getId()).workerOptions.superclusterOptions.minPoints = 5;  
                     
                   //Create a bubble layer for rendering clustered data points.  
                   var clusterBubbleLayer = new atlas.layer.BubbleLayer(datasource, null, {  
                       //Scale the size of the clustered bubble based on the number of points in the cluster.  
                       radius: [  
                           'step',  
                           ['get', 'point_count'],  
                           20,         //Default of 20 pixel radius.  
                           100, 30,    //If point_count >= 100, radius is 30 pixels.  
                           750, 40     //If point_count >= 750, radius is 40 pixels.  
                       ],  
            
                       //Change the color of the cluster based on the value on the point_cluster property of the cluster.  
                       color: [  
                           'step',  
                           ['get', 'point_count'],  
                           'rgba(0,255,0,0.8)',            //Default to green.   
                           100, 'rgba(255,255,0,0.8)',     //If the point_count >= 100, color is yellow.  
                           750, 'rgba(255,0,0,0.8)'        //If the point_count >= 100, color is red.  
                       ],  
                       strokeWidth: 0,  
                       filter: ['has', 'point_count'] //Only rendered data points which have a point_count property, which clusters do.  
                   });  
     
                   //Add a click event to the layer so we can zoom in when a user clicks a cluster.  
                   map.events.add('click', clusterBubbleLayer, clusterClicked);  
     
                   //Add mouse events to change the mouse cursor when hovering over a cluster.  
                   map.events.add('mouseenter', clusterBubbleLayer, function () {  
                       map.getCanvasContainer().style.cursor = 'pointer';  
                   });  
     
                   map.events.add('mouseleave', clusterBubbleLayer, function () {  
                       map.getCanvasContainer().style.cursor = 'grab';  
                   });  
     
                   //Add the clusterBubbleLayer and two additional layers to the map.  
                   map.layers.add([  
                       clusterBubbleLayer,  
     
                       //Create a symbol layer to render the count of locations in a cluster.  
                       new atlas.layer.SymbolLayer(datasource, null, {  
                           iconOptions: {  
                               image: 'none' //Hide the icon image.  
                           },  
                           textOptions: {  
                               textField: ['get' , 'point_count_abbreviated'],  
                               offset: [0, 0.4]  
                           }  
                       }),  
     
                       //Create a layer to render the individual locations.  
                       new atlas.layer.SymbolLayer(datasource, null, {  
                           filter: ['!', ['has', 'point_count']] //Filter out clustered points from this layer.  
                       })  
                   ]);  
     
                   //Retrieve a GeoJSON data set and add it to the data source.   
                   datasource.importDataFromUrl(earthquakeFeed);  
               });  
           }  
     
           function clusterClicked(e) {  
               if (e && e.shapes && e.shapes.length > 0 && e.shapes[0].properties.cluster) {  
                   //Get the clustered point from the event.  
                   var cluster = e.shapes[0];  
     
                   //Get the cluster expansion zoom level. This is the zoom level at which the cluster starts to break apart.  
                   datasource.getClusterExpansionZoom(cluster.properties.cluster_id).then(function (zoom) {  
     
                       //Update the map camera to be centered over the cluster.   
                       map.setCamera({  
                           center: cluster.geometry.coordinates,  
                           zoom: zoom,  
                           type: 'ease',  
                           duration: 200  
                       });  
                   });  
               }  
           }  
       </script>  
   </head>  
   <body onload="GetMap()">  
       <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>  
   </body>  
   </html>

To further help debug;

What browser are you using?
How are you accessing Azure Maps Web SDK (script URL to version 1 or 2, or NPM package). If NPM package, make sure it's the latest version.
Does this error occur when loading things up, or later when you do something to the map/data source (change map style, clear datasource...)

Arjun Ramesh 51 Reputation points

2022-11-09T05:55:48.007+00:00

Hi @rbrundritt ,
Thanks for the response. We tried the solution that you suggested, however cluster is still not breaking apart when size is less than 5. It is same as before. In the console we could see that the minPoints property has changed from 2 to 5, however there is no difference to the clustering.

This is what was tried:

AzureMapComponent.map.map.getSource(this.dataSource.getId()).workerOptions.superclusterOptions.minPoints = 5; console.log(AzureMapComponent.map.map.getSource(this.dataSource.getId()).workerOptions.superclusterOptions.minPoints);

Could you please confirm if this solution will work on our end as well, or should it be made officially available in order for the clustering based on minPoints to work?

Note: we are using Bubble Layer to display the clusters and map comes from azure IndoorManager using tilesetID.
rbrundritt 20,451 Reputation points Volunteer Moderator

2022-11-09T15:34:57.423+00:00

Be sure to make this call right after creating the data source and adding it to the map. Also, it's possible this might get wiped out if you set the options on the data source at a later point in your app.
Arjun Ramesh 51 Reputation points

2022-11-10T09:00:17.807+00:00

@rbrundritt
On running the same piece of code again, could see that it is throwing following error in the console.

Also, we are making this call right after adding the datasource to the map, and we are not setting options in the datasource later on (2 functionalities used later in the app are datasource.add() and datasource.clear()).
rbrundritt 20,451 Reputation points Volunteer Moderator

2022-11-10T20:10:49.313+00:00

For some reason the forums are throwing an error when I try to respond with a new message. As such I updated my original post with more information.
Arjun Ramesh 51 Reputation points

2022-11-14T14:14:32.167+00:00

Hi @rbrundritt ,
The suggestions provided worked. The error was getting thrown due to overriding the minPoints property before adding data source to the map. Clustering based on count was not working because somewhere minPoints was getting reset back to default, not sure why. But was able to figure it out and setting the value for minPoints where it is getting reset resolved the issue.

Thanks for your response, it helped a lot in debugging the issue.