Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
77 lines (64 sloc) 3.67 KB
<!DOCTYPE html>
<html lang="en">
<title>Cluster weighted Heat Map - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="This sample shows how to create a heat map that uses clustering on the data source to improve performance for large data sets. " />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, heatmap, heat map, heatmaps, heat maps, density, layer, thermatic, clustering, superclusterer" />
<meta name="author" content="Microsoft Azure Maps" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="" type="text/css" />
<script src=""></script>
<script type='text/javascript'>
var map, datasource;
function GetMap() {
//Point the Azure Maps domain to the US Azure Gov Cloud domain.
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-97, 39],
zoom: 3,
style: 'grayscale_dark',
view: 'Auto',
//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
//Wait until the map resources are ready.'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: 15
//Create a heatmap and add it to the map.
map.layers.add(new atlas.layer.HeatMapLayer(datasource, null, {
//Set the weight to the point_count property of the data points.
weight: ['get', 'point_count'],
//Optionally adjust the radius of each heat point.
radius: 20
}), 'labels');
//Load a data set of points, in this case earthquake data from the USGS.
<body onload="GetMap()">
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend><h1 style="font-size:16px">Cluster weighted Heat Map</h1></legend>
This sample shows how to create a heat map that uses clustering on the data source to improve performance for large data sets.
This is accomplished by turning on clustering on the data source and setting the heat map weight to ['get', 'point_count'].
When the cluster radius is small, the heat map will look nearly identical to a heat map using the unclustered data points but will perform much better.
However, the smaller the cluster radius, the more accurate the heat map will be but with less of a performance benefit.
You can’t perform that action at this time.