Home
%3CLINGO-SUB%20id%3D%22lingo-sub-1005685%22%20slang%3D%22en-US%22%3EClustering%20point%20data%20in%20Azure%20Maps%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1005685%22%20slang%3D%22en-US%22%3E%3CP%3EIoT%20solutions%20developers%20using%20location%20data%20from%20thousands%20of%20devices%20usually%20end%20up%20with%20large%20data%20sets%2C%20presenting%20them%20with%20particular%20issues.%20First%2C%20when%20map%20data%20is%20displayed%2C%20users%20have%20trouble%20seeing%20it%20because%20there%20is%20too%20much%20data%3A%20pins%20will%20be%20hidden%20by%20other%20pins%2C%20overlays%20will%20overlay%20each%20other%2C%20literally.%20Secondly%2C%20large%20data%20sets%20may%20cause%20performance%20issues%3A%20you%20must%20have%20experienced%20slow%20maps%20rendering%20on%20some%20platforms%20when%20trying%20to%20display%20too%20much%20data.%20The%20most%20common%20way%20to%20address%20these%20two%20issues%20is%20by%20clustering%E2%80%94or%20aggregating%20data.%3C%2FP%3E%0A%3CP%3EAzure%20Maps%20offers%20the%20ability%20to%20cluster%20large%20data%20sets%20in%20many%20different%20ways%20so%20that%20end%20users%20can%20quickly%20extract%20insights%20from%20their%20maps%20while%20IoT%20developers%20can%20avoid%20spending%20long%20hours%20deciphering%2C%20filtering%20and%20displaying%20data.%3C%2FP%3E%0A%3CP%3EWatch%20the%20Channel%209%20IoT%20Show%2C%20%3CA%20href%3D%22https%3A%2F%2Fchannel9.msdn.com%2FShows%2FInternet-of-Things-Show%2FClustering-point-data-in-Azure-Maps%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%22%3EPoint%20clustering%20map%20data%20with%20Azure%20Maps%3C%2FA%3E%2C%20for%20some%20great%20live%20demos%20of%20Azure%20Maps%20clustering%20capabilities%20using%20the%20SDK%20samples%3A%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%20style%3D%22text-align%3A%20center%3B%22%3E%3CIFRAME%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FbL-fmux-rn0%22%20width%3D%22560%22%20height%3D%22315%22%20frameborder%3D%220%22%20allowfullscreen%3D%22allowfullscreen%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%22%3E%3C%2FIFRAME%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ERead%20on%20for%20the%20basics%20of%20how%20to%20enable%20clustering%20in%20Azure%20Maps%20and%20for%20highlights%20of%20useful%20clustering%20techniques.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH3%20id%3D%22toc-hId-1053076275%22%20id%3D%22toc-hId-1053076275%22%3ECluster%20options%20for%20radius-based%20clustering%3C%2FH3%3E%0A%3CP%3ETo%20use%20clustering%20in%20Azure%20Maps%2C%20you%20will%20want%20to%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3Eset%20the%20cluster%20option%20on%20the%20DataSource%20class%20to%20true%2C%3C%2FLI%3E%0A%3CLI%3Eset%20the%20pixel%20radius%20from%20which%20nearby%20points%20will%20be%20combined%20into%20a%20single%20cluster%20with%20clusterRadius%2C%3C%2FLI%3E%0A%3CLI%3Eset%20the%20zoom%20level%20that%20will%20specify%20when%20to%20disable%20the%20clustering%20logic%20using%20the%20clusterMaxZoom%20option.%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3E%2F%2FCreate%20a%20data%20source%20and%20enable%20clustering.%0Avar%20datasource%20%3D%20new%20atlas.source.DataSource(null%2C%20%7B%0A%20%20%20%20%20%20%2F%2FTell%20the%20data%20source%20to%20cluster%20point%20data.%0A%20%20%20%20%20%20cluster%3A%20true%2C%0A%0A%20%20%20%20%20%20%2F%2FThe%20radius%20in%20pixels%20to%20cluster%20points%20together.%0A%20%20%20%20%20%20clusterRadius%3A%2045%2C%0A%0A%20%20%20%20%20%20%2F%2FThe%20maximum%20zoom%20level%20in%20which%20clustering%20occurs.%0A%20%20%20%20%20%20%2F%2FIf%20you%20zoom%20in%20more%20than%20this%2C%20all%20points%20are%20rendered%20as%20symbols.%0A%20%20%20%20%20%20clusterMaxZoom%3A%2015%0A%7D)%3B%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EFull%20%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fazure%2Fazure-maps%2Fclustering-point-data-web-sdk%23enabling-clustering-on-a-data-source%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%22%3Edocumentation%3C%2FA%3E%20for%20radius-based%20clustering.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH3%20id%3D%22toc-hId--754378188%22%20id%3D%22toc-hId--754378188%22%3EPoint%20clusters%20in%20bubble%20layer%3C%2FH3%3E%0A%3CP%3EA%20bubble%20layer%20is%20a%20great%20way%20to%20render%20clustered%20points.%20You%20can%20easily%20scale%20the%20radius%20and%20change%20the%20color%20theme%20based%20on%20the%20number%20of%20points%20in%20the%20cluster%20by%20using%20an%20expression.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F156843iABA3EC54A328C6F4%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Maps%20Cluster%201.png%22%20title%3D%22Maps%20Cluster%201.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EFull%20%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fazure%2Fazure-maps%2Fclustering-point-data-web-sdk%23display-clusters-using-a-bubble-layer%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%22%3Edocumentation%3C%2FA%3E%20and%20%3CA%20href%3D%22https%3A%2F%2Fazuremapscodesamples.azurewebsites.net%2F%3Fsample%3DPoint%2520Clusters%2520in%2520Bubble%2520Layer%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%22%3Edemo%20sample%3C%2FA%3E%26nbsp%3Bfor%20clustering%20in%20a%20bubble%20layer.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH3%20id%3D%22toc-hId-1733134645%22%20id%3D%22toc-hId-1733134645%22%3EDisplay%20clusters%20in%20a%20symbol%20layer%3C%2FH3%3E%0A%3CP%3EYou%20can%20also%20use%20a%20symbol%20layer%20to%20display%20data.%20Again%2C%20the%20goal%20is%20surface%20insights%20more%20easily%20for%20the%20user.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F156844iAA57AF17F67FD898%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22MapsCluster2.png%22%20title%3D%22MapsCluster2.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EFull%20%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fazure%2Fazure-maps%2Fclustering-point-data-web-sdk%23display-clusters-using-a-symbol-layer%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%22%3Edocumentation%3C%2FA%3E%20and%20%3CA%20href%3D%22https%3A%2F%2Fazuremapscodesamples.azurewebsites.net%2F%3Fsample%3DDisplay%2520clusters%2520with%2520a%2520Symbol%2520Layer%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%22%3Edemo%20sample%3C%2FA%3E%26nbsp%3Bfor%20clustering%20in%20a%20symbol%20layer.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH3%20id%3D%22toc-hId--74319818%22%20id%3D%22toc-hId--74319818%22%3ECluster%20aggregates%3C%2FH3%3E%0A%3CP%3ESometimes%20you%20will%20want%20to%20customize%20the%20style%20of%20clusters%20based%20on%20some%20metric%2C%20like%20the%20total%20revenue%20of%20all%20points%20within%20a%20cluster.%20Azure%20Maps%20offers%20a%20cluster%20aggregates%20custom%20properties%20feature%20that%20can%20be%20created%20and%20populated%20using%20an%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fazure%2Fazure-maps%2Fdata-driven-style-expressions-web-sdk%23aggregate-expression%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%22%3Eaggregate%20expression%3C%2FA%3E%26nbsp%3Bcalculation.%3C%2FP%3E%0A%3CP%3EThe%20following%20sample%20uses%20an%20aggregate%20expression%20to%20calculate%20a%20count%20based%20on%20the%20entity%20type%20property%20(grocery%20store%2C%20restaurant%2C%20school%2C%20etc.)%20of%20each%20data%20point%20in%20a%20cluster.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F156841iD5A571DFBB1FB74B%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22MapsCluster4.png%22%20title%3D%22MapsCluster4.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EFull%20%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fazure%2Fazure-maps%2Fclustering-point-data-web-sdk%23aggregating-data-in-clusters%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%22%3Edocumentation%3C%2FA%3E%20and%20%3CA%20href%3D%22https%3A%2F%2Fazuremapscodesamples.azurewebsites.net%2F%3Fsample%3DCluster%2520aggregates%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%22%3Edemo%20sample%3C%2FA%3E%26nbsp%3Bfor%20using%20cluster%20aggregates.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH3%20id%3D%22toc-hId--1881774281%22%20id%3D%22toc-hId--1881774281%22%3EClustered%20Heat%20Maps%3C%2FH3%3E%0A%3CP%3E%3CSPAN%3EHeat%20maps%20are%20a%20great%20way%20to%20display%20the%20density%20of%20data%20on%20the%20map.%20This%20visualization%20can%20handle%20a%20large%20number%20of%20data%20points%20on%20its%20own%2C%20but%20it%20can%20handle%20even%20more%20data%20if%20the%20data%20points%20are%20clustered%20and%20the%20cluster%20size%20is%20used%20as%20the%20weight%20of%20the%20heat%20map%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F156875i9C348FCD9AD1C633%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22ClusterMaps5.png%22%20title%3D%22ClusterMaps5.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%3EFull%20%3C%2FSPAN%3E%3CA%20style%3D%22font-family%3A%20inherit%3B%20background-color%3A%20%23ffffff%3B%22%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fazure%2Fazure-maps%2Fclustering-point-data-web-sdk%23clustering-and-the-heat-maps-layer%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%22%3Edocumentation%3C%2FA%3E%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%3E%20and%20%3C%2FSPAN%3E%3CA%20style%3D%22font-family%3A%20inherit%3B%20background-color%3A%20%23ffffff%3B%22%20href%3D%22https%3A%2F%2Fazuremapscodesamples.azurewebsites.net%2F%3Fsample%3DCluster%2520weighted%2520Heat%2520Map%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%22%3Edemo%20sample%3C%2FA%3E%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%3E%26nbsp%3Bfor%20clustered%20heat%20maps.%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH3%20id%3D%22toc-hId-605738552%22%20id%3D%22toc-hId-605738552%22%3EClustered%20Pie%20Chart%20HTML%20Markers%3C%2FH3%3E%0A%3CP%3EClustered%20Pie%20Chart%20HTML%20Markers%20use%20cluster%20aggregates%20to%20surface%20useful%20information%20to%20the%20user%20without%20them%20having%20to%20even%20click%20on%20them.%20In%20this%20example%2C%20pie%20charts%20are%20used%20to%20show%20the%20number%20of%20gas%20stations%2C%20grocery%20stores%2C%20restaurants%2C%20and%20schools.%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F156842i613C7BEDC3C6C321%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22MapsCluster3.png%22%20title%3D%22MapsCluster3.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fazuremapscodesamples.azurewebsites.net%2F%3Fsample%3DClustered%2520Pie%2520Chart%2520HTML%2520Markers%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%22%3EDemo%20sample%3C%2FA%3E%26nbsp%3Bfor%20using%20clustered%20Pie%20Chart%20HTML%20Markers.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH3%20id%3D%22toc-hId--1201715911%22%20id%3D%22toc-hId--1201715911%22%3E...%20And%20more!%3C%2FH3%3E%0A%3CP%3EYou%20can%20find%20even%20more%20ways%20to%20cluster%20data%20in%20Azure%20Maps%20in%20the%20%3CA%20href%3D%22https%3A%2F%2Faka.ms%2FIoTShow%2FMapsClustering%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Edocumentation%3C%2FA%3E%20and%20on%20the%20%3CA%20href%3D%22https%3A%2F%2Fazuremapscodesamples.azurewebsites.net%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%22%3ESDK%20samples%20site%3C%2FA%3E.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-1005685%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F156875i9C348FCD9AD1C633%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22ClusterMaps5.png%22%20title%3D%22ClusterMaps5.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3CSPAN%20style%3D%22font-family%3A%20inherit%3B%22%3EHave%20you%20experienced%20navigating%20a%20map%20to%20visualize%20points%20of%20interest%20meta%20data%20and%20ending%20up%20with%20a%20real%20mess%20of%20pins%20and%20overlays%3F%20Azure%20Maps%20makes%20IoT%20solutions%20developers%20life%20easier%20allowing%20them%20to%20deliver%20a%20clean%20and%20efficient%20experience%20to%20maps%20users.%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-TEASER%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1005685%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EAzure%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EAzure%20IoT%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EAzure%20maps%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3Edemo%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EIoT%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E

IoT solutions developers using location data from thousands of devices usually end up with large data sets, presenting them with particular issues. First, when map data is displayed, users have trouble seeing it because there is too much data: pins will be hidden by other pins, overlays will overlay each other, literally. Secondly, large data sets may cause performance issues: you must have experienced slow maps rendering on some platforms when trying to display too much data. The most common way to address these two issues is by clustering—or aggregating data.

Azure Maps offers the ability to cluster large data sets in many different ways so that end users can quickly extract insights from their maps while IoT developers can avoid spending long hours deciphering, filtering and displaying data.

Watch the Channel 9 IoT Show, Point clustering map data with Azure Maps, for some great live demos of Azure Maps clustering capabilities using the SDK samples:

 

 

Read on for the basics of how to enable clustering in Azure Maps and for highlights of useful clustering techniques.

 

Cluster options for radius-based clustering

To use clustering in Azure Maps, you will want to

  • set the cluster option on the DataSource class to true,
  • set the pixel radius from which nearby points will be combined into a single cluster with clusterRadius,
  • set the zoom level that will specify when to disable the clustering logic using the clusterMaxZoom option.

 

//Create a data source and enable clustering.
var 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 maximum zoom level in which clustering occurs.
      //If you zoom in more than this, all points are rendered as symbols.
      clusterMaxZoom: 15
});

 

Full documentation for radius-based clustering.

 

Point clusters in bubble layer

A bubble layer is a great way to render clustered points. You can easily scale the radius and change the color theme based on the number of points in the cluster by using an expression.

 

Maps Cluster 1.png

Full documentation and demo sample for clustering in a bubble layer.

 

Display clusters in a symbol layer

You can also use a symbol layer to display data. Again, the goal is surface insights more easily for the user.

 

MapsCluster2.png

Full documentation and demo sample for clustering in a symbol layer.

 

Cluster aggregates

Sometimes you will want to customize the style of clusters based on some metric, like the total revenue of all points within a cluster. Azure Maps offers a cluster aggregates custom properties feature that can be created and populated using an aggregate expression calculation.

The following sample uses an aggregate expression to calculate a count based on the entity type property (grocery store, restaurant, school, etc.) of each data point in a cluster.

 

MapsCluster4.png

Full documentation and demo sample for using cluster aggregates.

 

Clustered Heat Maps

Heat maps are a great way to display the density of data on the map. This visualization can handle a large number of data points on its own, but it can handle even more data if the data points are clustered and the cluster size is used as the weight of the heat map

 

ClusterMaps5.png

Full documentation and demo sample for clustered heat maps.

 

Clustered Pie Chart HTML Markers

Clustered Pie Chart HTML Markers use cluster aggregates to surface useful information to the user without them having to even click on them. In this example, pie charts are used to show the number of gas stations, grocery stores, restaurants, and schools. 

 

MapsCluster3.png

Demo sample for using clustered Pie Chart HTML Markers.

 

... And more!

You can find even more ways to cluster data in Azure Maps in the documentation and on the SDK samples site.