Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
89 lines (78 sloc) 4.08 KB
<!DOCTYPE html>
<html lang="en">
<title>Weighted Heat Map Layer - 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 which defines the intensity of each data point based on a property." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, heatmap, heat map, heatmaps, heat maps, density, layer, thermatic" />
<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', {
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();
//Load a data set of points, in this case earthquake data from the USGS.
//Create a heatmap and add it to the map.
map.layers.add(new atlas.layer.HeatMapLayer(datasource, null, {
weight: [
['exponential', 2], //Using an exponential interpolation since earthquake magnitudes are on an exponential scale.
['get', 'mag'],
0, 0,
6, 1 //Any earthquake above a magnitude of 6 will have a weight of 1
radius: [
0, 2,
22, 200
color: [
0, 'rgba(33,102,172,0)',
0.2, 'rgb(103,169,207)',
0.4, 'rgb(209,229,240)',
0.6, 'rgb(253,219,199)',
0.8, 'rgb(239,138,98)',
1, 'rgb(178,24,43)'
}), 'labels');
<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">Weighted Heat Map Layer</h1></legend>
This sample shows how to create a heat map which defines the intensity of each data point based on a property.
In this case the "mag" property is used to specify the weight of each data point.
Additionally ann expression has been added to the radius property so that it changes based on the zoom level of the map.
<br /><br />
<b>Tip:</b> When working with larger data sets, enable clustering on the data source and set the weight to ['get', 'point_count'] to get improved performance.
You can’t perform that action at this time.