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
When visualizing many data points on the map, data points may overlap over each other. The overlap may cause the map may become unreadable and difficult to use. Clustering point data is the process of combining point data that are near each other and representing them on the map as a single clustered data point. As the user zooms into the map, the clusters break apart into their individual data points. When you work with large number of data points, use the clustering processes to improve your user experience.
15
+
When there are many data points on the map, some may overlap over each other. The overlap may cause the map may become unreadable and difficult to use. Clustering point data is the process of combining point data that are near each other and representing them on the map as a single clustered data point. As the user zooms into the map, the clusters break apart into their individual data points. When you work with a large number of data points, the clustering processes can improve the user experience.
Enable clustering in the `DataSource` class by setting the `cluster` option to `true`. Set `clusterRadius` to select nearby points and combines them into a cluster. The value of `clusterRadius` is in pixels. Use `clusterMaxZoom` to specify a zoom level at which to disable the clustering logic. Here is an example of how to enable clustering in a data source.
23
+
Enable clustering in the `DataSource` class by setting the `cluster` option to `true`. Set `clusterRadius` to select nearby points and combines them into a cluster. The value of `clusterRadius` is in pixels. Use `clusterMaxZoom` to specify a zoom level at which to disable the clustering logic. Here's an example of how to enable clustering in a data source.
24
24
25
25
```javascript
26
26
//Create a data source and enable clustering.
@@ -44,8 +44,8 @@ The `DataSource` class provides the following methods related to clustering as w
44
44
45
45
| Method | Return type | Description |
46
46
|--------|-------------|-------------|
47
-
| getClusterChildren(clusterId: number) | Promise<Array<Feature<Geometry, any>\| Shape>>| Retrieves the children of the given cluster on the next zoom level. These children may be a combination of shapes and subclusters. The subclusters will be features with properties matching ClusteredProperties. |
48
-
| getClusterExpansionZoom(clusterId: number) | Promise<number>| Calculates a zoom level at which the cluster will start expanding or break apart. |
47
+
| getClusterChildren(clusterId: number) | Promise<Array<Feature<Geometry, any>\| Shape>>| Retrieves the children of the given cluster on the next zoom level. These children may be a combination of shapes and subclusters. The subclusters are features with properties matching ClusteredProperties. |
48
+
| getClusterExpansionZoom(clusterId: number) | Promise<number>| Calculates a zoom level at which the cluster starts expanding or break apart. |
49
49
| getClusterLeaves(clusterId: number, limit: number, offset: number) | Promise<Array<Feature<Geometry, any>\| Shape>>| Retrieves the points in a cluster. By default the first 10 points are returned. To page through the points, use `limit` to specify the number of points to return, and `offset` to step through the index of points. To return all points, set `limit` to `Infinity` and don't set `offset`. |
50
50
51
51
## Display clusters using a bubble layer
@@ -63,9 +63,9 @@ To display the size of the cluster on top of the bubble, use a symbol layer with
63
63
64
64
## Display clusters using a symbol layer
65
65
66
-
When visualizing data points, the symbol layer automatically hides symbols that overlap each other to ensure a cleaner user interface. This default behavior might be undesirable if you want to show the data points density on the map. However, these settings can be changed. To display all symbols, set the `allowOverlap` option of the Symbol layers `iconOptions` property to `true`.
66
+
When visualizing data points, the symbol layer automatically hides symbols that overlap each other to ensure a cleaner user interface. This default behavior might be undesirable if you want to show the data points density on the map. However, these settings can be changed. To display all symbols, set the `allowOverlap` option of the Symbol layers `iconOptions` property to `true`.
67
67
68
-
Use clustering to show the data points density while keeping a clean user interface. The sample below shows you how to add custom symbols and represent clusters and individual data points using the symbol layer.
68
+
Use clustering to show the data points density while keeping a clean user interface. The following sample shows you how to add custom symbols and represent clusters and individual data points using the symbol layer.
69
69
70
70
<br/>
71
71
@@ -76,7 +76,7 @@ Use clustering to show the data points density while keeping a clean user interf
76
76
77
77
## Clustering and the heat maps layer
78
78
79
-
Heat maps are a great way to display the density of data on the map. This visualization method can handle a large number of data points on its own. If the data points are clustered and the cluster size is used as the weight of the heat map, then the heat map can handle even more data. To achieve this option, set the `weight` option of the heat map layer 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 it will perform much better. However, the smaller the cluster radius, the more accurate the heat map will be, but with fewer performance benefits.
79
+
Heat maps are a great way to display the density of data on the map. This visualization method can handle a large number of data points on its own. If the data points are clustered and the cluster size is used as the weight of the heat map, then the heat map can handle even more data. To achieve this option, set the `weight` option of the heat map layer to `['get', 'point_count']`. When the cluster radius is small, the heat map looks nearly identical to a heat map using the unclustered data points, but it performs better. However, the smaller the cluster radius, the more accurate the heat map is, but with fewer performance benefits.
80
80
81
81
<br/>
82
82
@@ -87,7 +87,7 @@ Heat maps are a great way to display the density of data on the map. This visual
87
87
88
88
## Mouse events on clustered data points
89
89
90
-
When mouse events occur on a layer that contains clustered data points, the clustered data point return to the event as a GeoJSON point feature object. This point feature will have the following properties:
90
+
When mouse events occur on a layer that contains clustered data points, the clustered data point return to the event as a GeoJSON point feature object. This point feature has the following properties:
@@ -105,9 +105,9 @@ This example takes a bubble layer that renders cluster points and adds a click e
105
105
(<a href='https://codepen.io/azuremaps'>@azuremaps</a>) on <a href='https://codepen.io'>CodePen</a>.
106
106
</iframe>
107
107
108
-
## Display cluster area
108
+
## Display cluster area
109
109
110
-
The point data that a cluster represents is spread over an area. In this sample when the mouse is hovered over a cluster, two main behaviors occur. First, the individual data points contained in the cluster will be used to calculate a convex hull. Then, the convex hull will be displayed on the map to show an area. A convex hull is a polygon that wraps a set of points like an elastic band and can be calculated using the `atlas.math.getConvexHull` method. All points contained in a cluster can be retrieved from the data source using the `getClusterLeaves` method.
110
+
The point data that a cluster represents is spread over an area. In this sample when the mouse is hovered over a cluster, two main behaviors occur. First, the individual data points contained in the cluster are used to calculate a convex hull. Then, the convex hull is displayed on the map to show an area. A convex hull is a polygon that wraps a set of points like an elastic band and can be calculated using the `atlas.math.getConvexHull` method. All points contained in a cluster can be retrieved from the data source using the `getClusterLeaves` method.
111
111
112
112
<br/>
113
113
@@ -118,9 +118,9 @@ The point data that a cluster represents is spread over an area. In this sample
118
118
119
119
## Aggregating data in clusters
120
120
121
-
Often clusters are represented using a symbol with the number of points that are within the cluster. But, sometimes it's desirable to customize the style of clusters with additional metrics. With cluster aggregates, custom properties can be created and populated using an [aggregate expression](data-driven-style-expressions-web-sdk.md#aggregate-expression) calculation. Cluster aggregates can be defined in `clusterProperties` option of the `DataSource`.
121
+
Often clusters are represented using a symbol with the number of points that are within the cluster. But, sometimes it's desirable to customize the style of clusters with more metrics. With cluster aggregates, custom properties can be created and populated using an [aggregate expression] calculation. Cluster aggregates can be defined in `clusterProperties` option of the `DataSource`.
122
122
123
-
The following sample uses an aggregate expression. The code calculates a count based on the entity type property of each data point in a cluster. When a user clicks on a cluster, a popup shows with additional information about the cluster.
123
+
The following sample uses an aggregate expression. The code calculates a count based on the entity type property of each data point in a cluster. When a user selects a cluster, a popup shows with additional information about the cluster.
0 commit comments