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",
        fields: [
          new AggregateField({
            name: "aggregateCount",
            statisticType: "count"
          })
        ],
        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 indicate a definite boundary between clusters. Clusters always aggregate in screen space using a cluster radius. The actual geographic region that each cluster represents as aggregate points varies in size depending on the density and dispersion of points. One cluster may aggregate points from an area much larger than a neighboring cluster.

By default, the style of a cluster, it's size and color, are predetermined by the JS API's internal rendering engine to effectively summarize the underlying point data making up the cluster.

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

Binning

Bins aggregate points in a grid of rectangular bins created from geohashes. Bins always represent aggregated data in geographic space. The boundaries of each bin are discrete so there is no ambiguity regarding the geographic region of a bin's size and shape. Bins can be styled in the same way a layer can be styled. You can create 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.