This sample demonstrates how to enable clustering on a polygon layer representing swimming pool locations in a city. Clustering is configured in the featureReduction property of the layer and setting its type to cluster
.
For a more detailed introduction to clustering, see the Clustering documentation and the Intro to clustering sample.
Without clustering, it is very difficult to see individual pool locations at smaller scales (see the image on the left). The image on the right shows that clustering allows you to view where data exist at small scales. It also makes it easy to see the spatial distribution of pools across the city. Note that individual pool locations are still represented with marker symbols when clustering is enabled.
When clustering polygon or polyline layers, you must define a cluster renderer for clusters to be visible in the view. The cluster renderer should complement the layer's renderer. For example, the cluster renderer in this app is a simple renderer that displays a single symbol for each cluster that matches the color of the simple renderer of the underlying layer.
Use dark colors for code blocks Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// Individual swimming pool locations will be displayed
// as simple markers with a royalblue fill color
layer.renderer = {
type: "simple",
symbol: {
type: "simple-fill",
color: "royalblue",
outline: {
width: 0.5,
color: "rgba(255,255,255,0.3)",
},
},
};
// Polygons will be aggregated into clusters
// and represented as marker symbols
layer.featureReduction = {
type: "cluster",
// Note the symbol type of the cluster renderer must be
// a marker symbol; in this case it matches the color
// of the fill symbol in the layer's renderer
renderer: {
type: "simple",
symbol: {
type: "simple-marker",
color: "royalblue",
outline: {
width: 0.5,
color: "rgba(255,255,255,0.3)",
},
},
},
// cluster visibility will be turned off at this scale
// and features with fill symbols will be displayed
// as defined in the layer's renderer
maxScale: 4514,
};
Best practices for clustering lines and polygons
maxScale
in the feature reduction configuration to disable clustering at larger scales (when zoomed in).RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4