This sample demonstrates how to represent clusters as pie charts. This is done by calling the createRendererForClustering method in the pieChart smart mapping module.
This method returns a list of aggregate fields and a renderer. Both of these objects must be set on the FeatureReductionCluster object for the charts to properly render.
async function generateClusterConfig(layer){
// generates default labelingInfo
const { labelingInfo, clusterMinSize } = await clusterLabelCreator
.getLabelSchemes({ layer, view })
.then(labelSchemes => labelSchemes.primaryScheme );
const labelSymbol = labelingInfo[0].symbol;
labelSymbol.color = labelSymbol.haloColor.clone();
labelSymbol.haloColor = [255,255,255,0.3];
labelSymbol.font.size = 10;
const { renderer, fields } = await pieChartRendererCreator
.createRendererForClustering({
layer,
shape: "donut"
});
renderer.holePercentage = 0.66;
const fieldInfos = fields.map( field => {
return {
fieldName: field.name,
label: field.alias,
format: {
places: 0,
digitSeparator: true
}
}
});
// maps the field names for the popup chart
const fieldNames = fieldInfos.map(field => {
return field.fieldName
});
const popupTemplate = {
content: [{
type: "text",
text: "This cluster represents <b>{cluster_count}</b> features."
},
{
type: "media",
mediaInfos: [{
title: "311 Reports",
type: "pie-chart",
value: {
fields: fieldNames
}
}]
},
{
type: "fields"
}],
fieldInfos
};
return {
type: "cluster",
popupTemplate,
labelingInfo,
clusterMinSize,
fields,
renderer
};
}
Clustering is enabled via the featureReduction property of the FeatureLayer.
layer.when()
.then(generateClusterConfig)
.then((featureReduction) => {
layer.featureReduction = featureReduction;
Clustering is a method of aggregating points in a FeatureLayer, CSVLayer, GeoJSONLayer, WFSLayer, or OGCFeatureLayer by grouping them in clusters defined by screen space.
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 Cluster size based on the sum of a field](/javascript/latest/static/01fee1f6ed7909afb5d52bf6e2917931/e1e8c/thumbnail.png)
Cluster size based on the sum of a field
Cluster size based on the sum of a field
![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 Clustering - advanced configuration](/javascript/latest/static/8cd19e0991dde22cad561955e60e30c8/e1e8c/thumbnail.png)
Clustering - advanced configuration
Clustering - advanced configuration
![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.
FeatureReductionCluster
Read the API Reference for more information.