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 features 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/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 Cluster size based on the sum of a field](/javascript/latest/static/8f531a7afafe18d144f9d4e51db11ed2/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/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.
FeatureReductionCluster
Read the Core API Reference for more information.