This sample demonstrates how to override the default cluster symbol when clustering is enabled on a GeoJSONLayer. Clustering is a method of reducing features in a FeatureLayer, CSVLayer, GeoJSONLayer, WFSLayer, or OGCFeatureLayer by grouping them based on their spatial proximity to one another. Typically, clusters are proportionally sized based on the number of features within each cluster.
Clustering is configured in the featureReduction property of the layer. The feature reduction property gives you control over many cluster properties, including the cluster symbol. This allows you to retain the layer's renderer for styling individual features, but visually indicate clusters with a dedicated symbol.
const clusterConfig = {
type: "cluster",
clusterRadius: "100px",
popupTemplate: {
title: "Cluster summary",
content: "This cluster represents {cluster_count} earthquakes.",
fieldInfos: [
{
fieldName: "cluster_count",
format: {
places: 0,
digitSeparator: true
}
}
]
},
clusterMinSize: "24px",
clusterMaxSize: "60px",
symbol: {
type: "simple-marker",
style: "circle",
color: "#69dcff",
outline: {
color: "rgba(0, 139, 174, 0.5)",
width: 6
}
},
labelingInfo: [
{
deconflictionStrategy: "none",
labelExpressionInfo: {
expression: "Text($feature.cluster_count, '#,###')"
},
symbol: {
type: "text",
color: "#004a5d",
font: {
weight: "bold",
family: "Noto Sans",
size: "12px"
}
},
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 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 Clustering - advanced configuration](/javascript/latest/static/8e49434dce56044812132546eb376276/e1e8c/thumbnail.png)
Clustering - advanced configuration
Clustering - advanced configuration
![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.