Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

This sample demonstrates how to use a slider to explore and filter a layer while point clustering is enabled in a MapView. Clustering is enabled via the featureReduction property of the FeatureLayer.

layer.featureReduction = {
  type: "cluster"
};

Since a layer's featureReduction property is independent of its renderer, the symbol and popupTemplate of the cluster graphics can be used to summarize features comprising the cluster. See Clustering styles and configurations for more information about the various ways clusters can summarize the points they represent.

The layer in this sample visualizes global power plants with a UniqueValueRenderer. When clustering is enabled, each cluster is assigned the symbol of the most common uniqueValueInfo among the features in the cluster.

Filters on clustered layer views filter the underlying features and recompute the clusters client-side. The updated clusters only display information complying with the filter including the number of features and the predominant category of the renderer, in this case fuel type.

Because the FeatureLayerView renders using the GPU, rendering and filtering updates happen quickly so you can update a filter as the user slides a slider thumb.

const slider = new Slider({
  min: 0,
  max: 2000,
  values: [ 0 ],
  container: document.getElementById("sliderDiv"),
  rangeLabelsVisible: true,
  precision: 0
});

// filter features by power plant capacity when the user
// drags the slider thumb. If clustering is enabled,
// clusters will recompute and render based on the number
// and type of features that satisfy the filter where clause

slider.on(["thumb-change", "thumb-drag"], function(
  event
) {
  layerView.filter = {
    where: "capacity_mw >= " + event.value
  };
});

Related samples and resources

• Clustered points
• Filter clustered points
• Point clustering with visual variables
• Filter features by attribute
• API reference - FeatureReductionCluster