This sample demonstrates how to dynamically vary the size of 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/fc479d6273a98b010ce55c0034e30750/e1e8c/thumbnail.png)
Intro to clustering
Intro to clustering
![Image preview of related sample Override cluster symbol](/javascript/latest/static/f991fa54f9cf3904190baa615b1d482e/e1e8c/thumbnail.png)
Override cluster symbol
Override cluster symbol
![Image preview of related sample Clustering - filter popup features](/javascript/latest/static/50c3b5a936aeddb3db0980f744644a95/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/eb2d6a44bde5b4170a6b1de2acce859a/e1e8c/thumbnail.png)
Clustering - generate suggested configuration
Clustering - generate suggested configuration
![Image preview of related sample Clustering - query clusters](/javascript/latest/static/6a49a67d1dfec5d8acef4fda7b62505e/e1e8c/thumbnail.png)
Clustering - query clusters
Clustering - query clusters
![Image preview of related sample Popup charts for clusters](/javascript/latest/static/50c3b5a936aeddb3db0980f744644a95/e1e8c/thumbnail.png)
Popup charts for clusters
This sample demonstrates how to summarize clustered features using charts within a cluster's popup.
![Image preview of related sample Clustering with visual variables](/javascript/latest/static/15d49bba0ce0db75b5c138f7a8a5f7cf/e1e8c/thumbnail.png)
Clustering with visual variables
Clustering with visual variables
FeatureReductionCluster
Read the Core API Reference for more information.