Binning - basic configuration

Explore in the sandboxView live

This sample demonstrates how to enable binning on a FeatureLayer. Binning is a method of aggregating points in a FeatureLayer, CSVLayer, GeoJSONLayer, WFSLayer, or OGCFeatureLayer by grouping them in predefined bins. Bins are generated using geohashes.

Binning is configured on the featureReduction property of the layer. This property allows you to define a renderer, popupTemplate and labels that summarize the features that fall within each bin's boundaries. Bins do not have a default renderer, so you must define a renderer to see the bins.

Configure binning
Use dark colors for code blocksCopy
      const featureReduction = {
        type: "binning",
        fixedBinLevel: 6,
        labelsVisible: true,
        labelingInfo: [
          new LabelClass({
            minScale: 144448,
            maxScale: 0,
            deconflictionStrategy: "none",
            symbol: {
              type: "text",  // autocasts as new TextSymbol()
              color: "white",
              font: {
                family: "Noto Sans",
                size: 10,
                weight: "bold"
              },
              haloColor: colors[4],
              haloSize: 0.5
            },
            labelExpressionInfo: {
              expression: "Text($feature.aggregateCount, '#,###')"
            }
          })
        ],
        popupEnabled: true,
        popupTemplate: {
          title: "Car crashes",
          content: "{aggregateCount} car crashes occurred in this area."
        },
        renderer: {
          type: "simple",
          symbol: {
            type: "simple-fill",
            color: [0, 255, 71, 1],
            outline: null,
            outline: {
              color: "rgba(153, 31, 23, 0.3)",
              width: 0.3,
            },
          },
          visualVariables: [
            {
              type: "color",
              field: "aggregateCount",
              legendOptions: {
                title: "Number of crashes"
              },
              stops: [
                { value: 0, color: colors[0] },
                { value: 25, color: colors[1] },
                { value: 75, color: colors[2] },
                { value: 200, color: colors[3] },
                { value: 300, color: colors[4] }
              ]
            }
          ]
        }
      };

Binning only applies to layers with point geometries in a MapView.

Binning versus clustering

Conceptually, binning is very similar to clustering. Both, in addition to heatmaps, are methods for visualizing densities of points. The following are key differences to consider when choosing a method of feature reduction.

Clustering

Clustering aggregates points into clusters that don't communicate a definite boundary between clusters. The region that each cluster uses to aggregate points varies depending on the density and dispersion of points. One cluster may aggregate points from an area much larger than a neighboring cluster.

The style of a cluster, it's size and color, are predetermined by the rendering engine and effectively summarize the underlying point data making up the cluster. This style cannot be modified.

Clusters dynamically explode to smaller clusters as the user zooms in and coalesce to larger clusters as the user zooms out.

Binning

Bins aggregates points into geohashes of equal area and size. The boundaries are discrete and obvious so there is no ambiguity to the area used to aggregate points to bins.

Bins can be styled in the same way a layer can be styled. You can use aggregate fields to style the bins using any renderer that can be applied to a polygon FeatureLayer.

Bins are static and do not regenerate as the user zooms in and out in the map.