|
1 | 1 | ---
|
2 | 2 | title: Add a heat map layer to a map | Microsoft Azure Maps
|
3 | 3 | description: Learn how to create a heat map. See how to use the Azure Maps Web SDK to add a heat map layer to a map. Find out how to customize heat map layers.
|
4 |
| -author: anastasia-ms |
5 |
| -ms.author: v-stharr |
6 |
| -ms.date: 07/29/2019 |
7 |
| -ms.topic: conceptual |
| 4 | +author: stevemunk |
| 5 | +ms.author: v-munksteve |
| 6 | +ms.date: 10/06/2021 |
| 7 | +ms.topic: how-to |
8 | 8 | ms.service: azure-maps
|
9 | 9 | ms.custom: codepen, devx-track-js
|
10 | 10 | ---
|
11 | 11 |
|
12 |
| -# Add a heat map layer |
| 12 | +# Add a heat map layer to a map |
13 | 13 |
|
14 | 14 | Heat maps, also known as point density maps, are a type of data visualization. They're used to represent the density of data using a range of colors and show the data "hot spots" on a map. Heat maps are a great way to render datasets with large number of points.
|
15 | 15 |
|
@@ -60,14 +60,14 @@ Here's the complete running code sample of the preceding code.
|
60 | 60 |
|
61 | 61 | The previous example customized the heat map by setting the radius and opacity options. The heat map layer provides several options for customization, including:
|
62 | 62 |
|
63 |
| -* `radius`: Defines a pixel radius in which to render each data point. You can set the radius as a fixed number or as an expression. By using an expression, you can scale the radius based on the zoom level, and represent a consistent spatial area on the map (for example, a 5-mile radius). |
64 |
| -* `color`: Specifies how the heat map is colorized. A color gradient is a common feature of heat maps. You can achieve the effect with an `interpolate` expression. You can also use a `step` expression for colorizing the heat map, breaking up the density visually into ranges that resemble a contour or radar style map. These color palettes define the colors from the minimum to the maximum density value. |
| 63 | +- `radius`: Defines a pixel radius in which to render each data point. You can set the radius as a fixed number or as an expression. By using an expression, you can scale the radius based on the zoom level, and represent a consistent spatial area on the map (for example, a 5-mile radius). |
| 64 | +- `color`: Specifies how the heat map is colorized. A color gradient is a common feature of heat maps. You can achieve the effect with an `interpolate` expression. You can also use a `step` expression for colorizing the heat map, breaking up the density visually into ranges that resemble a contour or radar style map. These color palettes define the colors from the minimum to the maximum density value. |
65 | 65 |
|
66 | 66 | You specify color values for heat maps as an expression on the `heatmap-density` value. The color of area where there's no data is defined at index 0 of the "Interpolation" expression, or the default color of a "Stepped" expression. You can use this value to define a background color. Often, this value is set to transparent, or a semi-transparent black.
|
67 | 67 |
|
68 | 68 | Here are examples of color expressions:
|
69 | 69 |
|
70 |
| - | Interpolation color expression | Stepped color expression | |
| 70 | + | Interpolation color expression | Stepped color expression | |
71 | 71 | |--------------------------------|--------------------------|
|
72 | 72 | | \[<br/> 'interpolate',<br/> \['linear'\],<br/> \['heatmap-density'\],<br/> 0, 'transparent',<br/> 0.01, 'purple',<br/> 0.5, '#fb00fb',<br/> 1, '#00c3ff'<br/>\] | \[<br/> 'step',<br/> \['heatmap-density'\],<br/> 'transparent',<br/> 0.01, 'navy',<br/> 0.25, 'green',<br/> 0.50, 'yellow',<br/> 0.75, 'red'<br/>\] |
|
73 | 73 |
|
@@ -114,19 +114,21 @@ The `zoom` expression can only be used in `step` and `interpolate` expressions.
|
114 | 114 |
|
115 | 115 | > [!TIP]
|
116 | 116 | > When you enable clustering on the data source, points that are close to one another are grouped together as a clustered point. You can use the point count of each cluster as the weight expression for the heat map. This can significantly reduce the number of points to be rendered. The point count of a cluster is stored in a `point_count` property of the point feature:
|
| 117 | +> |
117 | 118 | > ```JavaScript
|
118 | 119 | > var layer = new atlas.layer.HeatMapLayer(datasource, null, {
|
119 | 120 | > weight: ['get', 'point_count']
|
120 | 121 | > });
|
121 | 122 | > ```
|
| 123 | +> |
122 | 124 | > If the clustering radius is only a few pixels, there would be a small visual difference in the rendering. A larger radius groups more points into each cluster, and improves the performance of the heatmap.
|
123 | 125 |
|
124 | 126 | ## Next steps
|
125 | 127 |
|
126 | 128 | Learn more about the classes and methods used in this article:
|
127 | 129 |
|
128 | 130 | > [!div class="nextstepaction"]
|
129 |
| -> [HeatMapLayer](/javascript/api/azure-maps-control/atlas.htmlmarker) |
| 131 | +> [HeatMapLayer](/javascript/api/azure-maps-control/atlas.layer.heatmaplayer) |
130 | 132 |
|
131 | 133 | > [!div class="nextstepaction"]
|
132 | 134 | > [HeatMapLayerOptions](/javascript/api/azure-maps-control/atlas.heatmaplayeroptions)
|
|
0 commit comments