Point clustering

This sample demonstrates how to enable point clustering on a feature layer in a web map.

How to use the sample

Clone the sample repo and copy this widget's folder (within widgets) to the client/your-extensions/widgets folder of your Experience Builder installation.

How it works

The property clusterConfig defines the cluster properties such as the clusterRadius, which determines each cluster's region for including features.

clusterConfig = {
type: "cluster",
clusterRadius: "100px",
popupTemplate: {
  content: "This cluster represents <b>{cluster_count}</b> points.",
  fieldInfos: [{
    fieldName: "cluster_count",
    format: {
      digitSeparator: true,
      places: 0
    }
  }]
},
  clusterMinSize: "24px",
  clusterMaxSize: "60px",
        labelingInfo: [{
          deconflictionStrategy: "none",
          labelExpressionInfo: {
            expression: "Text($feature.cluster_count, '#,###')"
          },
       
          labelPlacement: "center-center",
        }]

}

onCheckBoxChange function handles the logic for the Checkbox component and sets the state based on the value and passes this to the clusterSwitch function.

 onCheckBoxChange = (e) => {
  const valueState = e.target.value
   this.setState({ 
    clusterStatus: valueState 
    },  () => {
      this.clusterSwitch(this.state.clusterStatus);
      })
}

The clusterSwitch function controls the display of the cluster. If this.state.clusterStatus is true, then enable clustering. Otherwise, turn off the clustering for the layer by setting it to null.

clusterSwitch = (e) => {
  if (this.state.clusterStatus){ 
       this.state.jimuMapView.jimuLayerViews[this.state.clusterLayer].layer.featureReduction = this.clusterConfig
    } 
    if (!this.state.clusterStatus)
   
      this.state.jimuMapView.jimuLayerViews[this.state.clusterLayer].layer.featureReduction = this.state.clusterStatus ? this.clusterConfig : null

}

The activeViewChangeHandler function handles a couple of things. It checks if there is a JimuMapView and if it contains layers. If it does contain layers then it will set the state for map view, the data source and the error tip to display the widget. If there is a JimuMapView without layers, then it will display the WidgetPlaceHolder component.

   activeViewChangeHandler = (jmv: JimuMapView) => {
  if (jmv) {
  const jimuLayerViews = jmv.jimuLayerViews;
  const jimuLayerViewIds = Object.keys(jimuLayerViews)[0];
  const layerViewId = jimuLayerViewIds;

    if (layerViewId === undefined) {
      jmv = null;
      return
    }

  this.setState({
     jimuMapView: jmv,
     clusterLayer: jimuLayerViewIds,
     errorTip: false
    })
 } else {
  this.setState({
    jimuMapView: undefined,
    clusterLayer: undefined,
    errorTip: true,
    clusterStatus: false
  })

 }
}