This sample demonstrates how to dynamically vary the size of point clusters based on the sum of a numeric attribute, rather than the average (the default behavior).
This is done by creating an AggregateField using the sum
statistic type and referencing that field in a SizeVariable of a renderer. This renderer must be set on the FeatureReductionCluster.renderer property.
const clusterConfig = {
type: "cluster",
fields: [{
name: "population_total",
alias: "Total population",
onStatisticField: "POP",
statisticType: "sum"
}],
renderer: {
type: "simple",
symbol: {
type: "simple-marker",
style: "circle",
color: symbolColor,
size: 24,
outline: {
color: outlineColor,
width: 1
}
},
visualVariables: [
{
type: "size",
field: "population_total",
stops: [
{ value: 0, size: 8 },
{ value: 100, size: 12 },
{ value: 10000, size: 18 },
{ value: 50000000, size: 48 }
]
}
]
},
clusterRadius: "120px",
// {cluster_count} is an aggregate field containing
// the number of features comprised by the cluster
popupTemplate: {
title: "Cluster summary",
content: "This cluster represents {cluster_count} cities with a total population of <b>{population_total}</b>.",
fieldInfos: [
{
fieldName: "cluster_count",
format: {
places: 0,
digitSeparator: true
}
},
{
fieldName: "population_total",
format: {
places: 0,
digitSeparator: true
}
}
]
},
labelingInfo: [
{
deconflictionStrategy: "none",
labelExpressionInfo: {
expression: `
var value = $feature.population_total;
var num = Count(Text(Round(value)));
if(value == 0){
return "";
}
Decode(num,
4, Text(value / Pow(10, 3), "##.0k"),
5, Text(value / Pow(10, 3), "##k"),
6, Text(value / Pow(10, 3), "##k"),
7, Text(value / Pow(10, 6), "##m"),
8, Text(value / Pow(10, 6), "##m"),
9, Text(value / Pow(10, 6), "##m"),
10, Text(value / Pow(10, 6), "##m"),
Text(value, "#,###")
)
`
},
symbol: {
type: "text",
color: "white",
font: {
weight: "bold",
family: "Noto Sans",
size: "12px"
},
haloColor: symbolColor,
haloSize: 1
},
labelPlacement: "center-center"
}
]
};
Related samples and resources
![Image preview of related sample Intro to clustering](/javascript/latest/static/f1bd515dab6a798739380f9bde51fd70/e1e8c/thumbnail.png)
Intro to clustering
Intro to clustering
![Image preview of related sample Override cluster symbol](/javascript/latest/static/f7a604c32748d47118eee3afaa6da4f1/e1e8c/thumbnail.png)
Override cluster symbol
Override cluster symbol
![Image preview of related sample Clustering - filter popup features](/javascript/latest/static/2ea436ec665782a90a1cfbb97d00b977/e1e8c/thumbnail.png)
Clustering - filter popup features
This sample demonstrates how to filter clustered features within a cluster's popup.
![Image preview of related sample Clustering - generate suggested configuration](/javascript/latest/static/72c8e8c19ea43b3228a637c6be426f8a/e1e8c/thumbnail.png)
Clustering - generate suggested configuration
Clustering - generate suggested configuration
![Image preview of related sample Clustering - query clusters](/javascript/latest/static/742fedbad7099f639b08960469cab55a/e1e8c/thumbnail.png)
Clustering - query clusters
Clustering - query clusters
![Image preview of related sample Popup charts for point clusters](/javascript/latest/static/e3608f47f36f61ee39d0ee6413f55fcd/e1e8c/thumbnail.png)
Popup charts for point clusters
This sample demonstrates how to summarize clustered features using charts within a cluster's popup.
![Image preview of related sample Point clustering with visual variables](/javascript/latest/static/ff07a70eaaca8e1799f712046d9d6b1f/e1e8c/thumbnail.png)
Point clustering with visual variables
Point clustering with visual variables
FeatureReductionCluster
Read the API Reference for more information.