You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/azure-maps/map-add-heat-map-layer.md
+38-24Lines changed: 38 additions & 24 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,31 +13,35 @@ ms.custom: codepen
13
13
14
14
# Add a heat map layer
15
15
16
-
Heat maps, also known as point density maps, are a type of data visualization used to represent the density of data using a range of colors. They're often used to show the data "hot spots" on a map and are a great way to render large point data sets. For example, rendering tens of thousands of points within the map view as symbols, covers most of the map area and would result in many symbols overlapping each other, making it difficult to gain much insight into the data. However, visualizing this same data set as a heat map makes it easy to see where the point data is the densest and the relative density to other areas. There are many scenarios in which heat maps, are used. Here are few examples;
16
+
Heat maps, also known as point density maps, are a type of data visualization used to represent the density of data by using a range of colors. They're often used to show the data "hot spots" on a map, and are a great way to render large point datasets.
17
17
18
-
- Temperature data is commonly rendered as heat map as it provides approximations for what the temperature between two data points.
19
-
- Rendering data for noise sensors as a heat map not only shows the intensity of the noise where the sensor is but can also provide insights into the dissipation over a distance. The noise level at any one site may not be high, however if the noise coverage area from multiple sensors overlaps, it's possible that this overlapping area may experience higher noise levels, and thus would be visible in the heat map.
20
-
- Visualizing a GPS trace that includes the speed as a weighted height map where the intensity of each data point is based on the speed is a great way to see where the vehicle was speeding.
18
+
For example, rendering tens of thousands of points within the map view as symbols covers most of the map area. This likely results in many symbols overlapping each other, making it difficult to gain much insight into the data. However, visualizing this same dataset as a heat map makes it easy to see where the point data is the densest, and the relative density to other areas.
19
+
20
+
You can use heat maps in many different scenarios, including:
21
+
22
+
-**Temperature data**: Provides approximations for what the temperature is between two data points.
23
+
-**Data for noise sensors**: Shows not only the intensity of the noise where the sensor is, but can also provide insights into the dissipation over a distance. The noise level at any one site might not be high. But if the noise coverage area from multiple sensors overlaps, it's possible that this overlapping area might experience higher noise levels, and thus would be visible in the heat map.
24
+
-**GPS trace**: Includes the speed as a weighted height map, where the intensity of each data point is based on the speed. For example, this provides a way to see where a vehicle was speeding.
21
25
22
26
> [!TIP]
23
-
> Heat map layers by default will render the coordinates of all geometries in a data source. To limit the layer so that it only renders point geometry features, set the `filter` property of the layer to `['==', ['geometry-type'], 'Point']` or `['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']]` if you want to include MultiPoint features as well.
27
+
> Heat map layers by default render the coordinates of all geometries in a data source. To limit the layer so that it only renders point geometry features, set the `filter` property of the layer to `['==', ['geometry-type'], 'Point']`. If you want to include MultiPoint features as well, set the `filter` property of the layer to `['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']]`.
To render a data source of points as a heat map, pass your data source into an instance of the `HeatMapLayer` class and add it to the map as shown here.
35
+
To render a data source of points as a heat map, pass your data source into an instance of the `HeatMapLayer` class, and add it to the map.
32
36
33
-
In the following code, each heat point has a radius of 10 pixels at all zoom levels. When adding the heat map layer to the map, this sample inserts it below the label layer to create a better user experience as the labels are clearly visible above the heat map. The data in this sample is sourced from the [USGS Earthquake Hazards Program](https://earthquake.usgs.gov/) and represents significant earthquakes that have occurred in the last 30 days.
37
+
In the following code, each heat point has a radius of 10 pixels at all zoom levels. When you add the heat map layer to the map, this sample inserts it below the label layer, to create a better user experience. The labels are clearly visible above the heat map. The data in this sample is sourced from the [USGS Earthquake Hazards Program](https://earthquake.usgs.gov/), and represents significant earthquakes that have occurred in the last 30 days.
34
38
35
39
```javascript
36
40
//Create a data source and add it to the map.
37
41
var datasource =newatlas.source.DataSource();
38
42
map.sources.add(datasource);
39
43
40
-
//Load a data set of points, in this case earthquake data from the USGS.
44
+
//Load a dataset of points, in this case earthquake data from the USGS.
Below is the complete running code sample of the above functionality.
54
+
Here's the complete running code sample of the preceding code.
51
55
52
56
<br/>
53
57
54
58
<iframeheight='500'scrolling='no'title='Simple Heat Map Layer'src='//codepen.io/azuremaps/embed/gQqdQB/?height=500&theme-id=0&default-tab=js,result&embed-version=2&editable=true'frameborder='no'allowtransparency='true'allowfullscreen='true'style='width: 100%;'>See the Pen <a href='https://codepen.io/azuremaps/pen/gQqdQB/'>Simple Heat Map Layer</a> by Azure Maps (<a href='https://codepen.io/azuremaps'>@azuremaps</a>) on <a href='https://codepen.io'>CodePen</a>.
55
59
</iframe>
56
60
57
-
## Customizing the heat map layer
61
+
## Customize the heat map layer
62
+
63
+
The previous example customized the heat map by setting the radius and opacity options. The heat map layer provides several options for customization, including:
58
64
59
-
The previous example customized the heat map by setting the radius and opacity options. The heat map layer provides several options for customization;
65
+
*`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).
66
+
*`color`: Specifies how the heat map is colorized. A color gradient is a common feature of heat maps, and 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.
60
67
61
-
*`radius`: Defines a pixel radius in which to render each data point. The radius can be set as a fixed number or as an expression. Using an expression, it's possible to scale the radius based on the zoom level, that appears to represent a consistent spatial area on the map (for example, 5-mile radius).
62
-
*`color`: Specifies how the heat map is colorized. A color gradient is often used for heat maps and can be achieved with an `interpolate` expression. Using a `step` expression for colorizing the heat map breaks up the density visually into ranges that more so resembles a contour or radar style map. These color palettes define the colors from the minimum to the maximum density value. Color values for heat maps are specified as an expression on the `heatmap-density` value. The color at index 0 in an interpolation expression or the default color of a step expression, defines the color of the area where there's no data and can be used to define a background color. Many prefer to set this value to transparent or a semi-transparent black. Here are examples of color expressions;
68
+
You specify color values for heat maps as an expression on the `heatmap-density` value. The color at index 0 in an interpolation expression, or the default color of a step expression, defines the color of the area where there's no data. You can use this to define a background color. Often, this value is set to transparent, or a semi-transparent black.
69
+
70
+
Here are examples of color expressions:
63
71
64
-
| Interpolation Color Expression| Stepped Color Expression|
-`opacity`: Specifies how opaque or transparent the heat map layer is.
69
-
-`intensity`: Applies a multiplier to the weight of each data point to increase the overall intensity of the heatmap and helps to make the small differences in the weight of data points become easier to visualize.
70
-
-`weight`: By default, all data points have a weight of 1, thus all data points are weighted equally. The weight option acts as a multiplier and can be set as a number or an expression. If a number is set as the weight, say 2, it would be the equivalent of placing each data point on the map twice, thus doubling the density. Setting the weight option to a number renders the heat map in a similar way to using the intensity option. However, if an expression is used, the weight of each data point can be based on the properties of each data point. Take earthquake data as an example, each data point represents an earthquake. An important metric each earthquake data point has, is a magnitude value. Earthquakes happen all the time, but most have a low magnitude and aren't even felt. Using the magnitude value in an expression to assign the weight to each data point will allow more significant earthquakes to be better represented within the heat map.
71
-
- Besides the base layer options; min/max zoom, visible and filter, there's also a `source` option if you want to update the data source and `source-layer` option if your data source is a vector tile source.
77
+
-`intensity`: Applies a multiplier to the weight of each data point to increase the overall intensity of the heatmap. This helps to make the small differences in the weight of data points easier to visualize.
78
+
-`weight`: By default, all data points have a weight of 1, and are weighted equally. The weight option acts as a multiplier, and you can set it as a number or an expression. If a number (for example, 2) is set as the weight, it's the equivalent of placing each data point on the map twice, thus doubling the density. Setting the weight option to a number renders the heat map in a similar way to using the intensity option.
72
79
73
-
Here is a tool to test out the different heat map layer options.
80
+
However, if you use an expression, the weight of each data point can be based on the properties of each data point. For example, suppose that each data point represents an earthquake. An important metric each earthquake data point has is a magnitude value. Earthquakes happen all the time, but most have a low magnitude, and aren't even felt. By using the magnitude value in an expression to assign the weight to each data point, you get a better representation of the significance of earthquakes within the heat map.
81
+
-`source` and `source-layer`: Enable you to update the data source.
82
+
83
+
Here's a tool to test out the different heat map layer options.
74
84
75
85
<br/>
76
86
@@ -79,7 +89,11 @@ Here is a tool to test out the different heat map layer options.
79
89
80
90
## Consistent zoomable heat map
81
91
82
-
By default, the radii of data points rendered in the heat map layer have a fixed pixel radius for all zoom levels. As the map is zoomed, the data aggregates together and the heat map layer looks different. A `zoom` expression can be used to scale the radius for each zoom level such that each data point covers the same physical area of the map. This will make the heat map layer look more static and consistent. Each zoom level of the map has twice as many pixels vertically and horizontally as the previous zoom level. Scaling the radius such that it doubles with each zoom level will create a heat map that looks consistent on all zoom levels. This can be accomplished by using the `zoom` with a base 2 `exponential interpolation` expression as shown in the sample below. Zoom the map to see how the heat map scales with the zoom level.
92
+
By default, the radii of data points rendered in the heat map layer have a fixed pixel radius for all zoom levels. As you zoom the map, the data aggregates together and the heat map layer looks different.
93
+
94
+
Use a `zoom` expression to scale the radius for each zoom level, such that each data point covers the same physical area of the map. This makes the heat map layer look more static and consistent. Each zoom level of the map has twice as many pixels vertically and horizontally as the previous zoom level.
95
+
96
+
Scaling the radius so that it doubles with each zoom level creates a heat map that looks consistent on all zoom levels. To do this, use the `zoom` with a base 2 `exponential interpolation` expression, as shown in the following sample. Zoom the map to see how the heat map scales with the zoom level.
83
97
84
98
<br/>
85
99
@@ -89,13 +103,13 @@ By default, the radii of data points rendered in the heat map layer have a fixed
89
103
</iframe>
90
104
91
105
> [!TIP]
92
-
> By enabling clustering on the data source, points that are close to one another are grouped together as a clustered point. The point count of each cluster can be used as the weight expression for the heat map and significantly reduce the number of points that have to be render. The point count of a cluster is stored in a `point_count` property of the point feature as shown below.
106
+
> 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, and significantly reduce the number of points that have to be rendered. The point count of a cluster is stored in a `point_count` property of the point feature:
> If the clustering radius is only a few pixels there will be little visual difference the rendering. A larger radius will group more points into each cluster and improve the performance of the heatmap, but have the a more noticeable the differences will be.
112
+
> If the clustering radius is only a few pixels, there's little visual difference in the rendering. A larger radius groups more points into each cluster, and improves the performance of the heatmap.
99
113
100
114
## Next steps
101
115
@@ -113,4 +127,4 @@ For more code examples to add to your maps, see the following articles:
113
127
> [Create a data source](create-data-source-web-sdk.md)
0 commit comments