How to use supercluster - 10 common examples

export default function (options) {
    options = extend(Object.create(defaultOptions), options);
    const clustered = new Supercluster({
        minZoom: options.minZoom,
        maxZoom: options.maxZoom,
        radius: options.radius,
        extent: options.extent,
        nodeSize: options.nodeSize,
        map: options.map,
        reduce: options.reduce
    }).load(JSON.parse(fs.readFileSync(options.input)).features);

    if (options.logPerformance) {
        console.log(`Finished clustering at ${performance.now()}`);
    }
    if (fs.existsSync(options.output)) {
        // Clear previous MBTiles, if it exists
        fs.unlinkSync(options.output);
    }

const createClusters = (data, mapBox, radius = 60, zoom) => {
  if (!data || !data.features || !_.isArray(data.features)) {
    throw new Error("Data cannot be empty");
  }

  if (!mapBox) {
    throw new Error("Mapbox instance must be provided");
  }

  const superC = new Supercluster({
    radius,
    maxZoom: mapBox.getMaxZoom()
  });

  const featureList = getFeatureList(data);
  superC.load(featureList);
  if (!zoom) {
    zoom = mapBox.getZoom();
  }
  let boundary = _.isEmpty(featureList)
    ? [0, 0, 0, 0]
    : _.flatten(calculateBoundary(data).toArray());
  // in case of all points at the same location,
  // extends its coords by 200 meters radius to make superC work.
  boundary = extendBounds(boundary, RADIUS_TO_EXTENDS);

getItems(): Object[] {
    // supercluster().load() is expensive and we want to run it only
    // when necessary and not for every frame.
    const newObjects = this.getAllObjects();
    if (newObjects !== this._lastObjects) {
      this._superCluster = new Supercluster(this.getClusterOptions());
      this._superCluster.load(
        newObjects.map(object => point(this.getObjectCoordinates(object), { object }))
      );
      this._lastObjects = newObjects;
    }

    const clusters = this._superCluster.getClusters(
      [-180, -90, 180, 90],
      Math.round(this.getZoom())
    );

    return clusters.map(
      ({
        geometry: { coordinates },
        properties: { cluster, point_count: pointCount, cluster_id: clusterId, object }
      }) =>

}

        // Init maps
        const { lng, lat, zoom } = this.props.map.viewport;
        this.map = new mapboxgl.Map({
            container: this.mapContainer,
            style: 'mapbox://styles/mapbox/streets-v9',
            center: [lng, lat],
            zoom,
            attributionControl: false,
            logoPosition: 'bottom-right',
        }).addControl(new mapboxgl.AttributionControl({
            compact: true,
        }));

        this.cluster = supercluster({
            radius: clusterRadius,
            maxZoom: clusterMaxZoom,
        });

        // Add nav control buttons to the map
        this.initControls();

        // Attach events to map.on
        this.onMapLoad();
    }

clusterize(dataset) {
    this.index = new SuperCluster({ // eslint-disable-line new-cap
      extent: this.props.extent,
      minZoom: this.props.minZoom,
      maxZoom: this.props.maxZoom,
      radius: this.props.radius || (this.dimensions[0] * .045), // 4.5% of screen width
    })

    // get formatted GeoPoints for cluster
    const rawData = dataset.map(item => itemToGeoJSONFeature(item, this.props.accessor))

    // load geopoints into SuperCluster
    this.index.load(rawData)

    const data = this.getClusters(this.state.region)
    this.setState({ data })
  }

}
        return Math.max(accumulated.largestClusterSize, properties.clusterTotalSum);
      }
    }
  ];

  // Add base aggregations to the passed aggregations
  let finalAggs = [];
  if (clientAggregations && clientAggregations.length > 0) {
    finalAggs = lodash.concat(baseAggregations, clientAggregations);
  } else {
    finalAggs = baseAggregations;
  }

  // Supercluster with property aggregation
  let cluster = supercluster({
    radius: clusterRadius,
    maxZoom: clusterMaxZoom,
    initial: function () {
      let retVal = {};

      // Add aggregations passed to the function
      lodash.forEach(finalAggs, (agg) => {
        retVal[agg.key] = agg.initial;
      });

      return retVal;
    },
    map: function (properties) {
      let retVal = lodash.cloneDeep(properties);

      // Map over any properties that do not require transformations

init(map: mapboxgl.Map, gl: WebGLRenderingContext) {
    this.tileIndex = new Supercluster({
      maxZoom: 17,
      extent: EXTENT,
      radius: 50 * EXTENT / 512,
    });
    this.tileIndex.load(this.geoJSON);

    this.initDrawCircleCommand();
    this.initDrawTextCommand();
    this.initDrawDebugSDFCommand();
    this.initGlyphAtlas();
  }

}

export class Cluster extends React.Component {
  public static defaultProps = {
    radius: 60,
    minZoom: 0,
    maxZoom: 16,
    extent: 512,
    nodeSize: 64,
    log: false,
    zoomOnClick: false,
    zoomOnClickPadding: 20
  };

  public state: State = {
    superC: supercluster({
      radius: this.props.radius,
      maxZoom: this.props.maxZoom,
      minZoom: this.props.minZoom,
      extent: this.props.extent,
      nodeSize: this.props.nodeSize,
      log: this.props.log
    }),
    clusterPoints: []
  };

  private featureClusterMap = new WeakMap<
    GeoJSON.Feature,
    React.ReactElement
  >();

  public UNSAFE_componentWillMount() {

const getClusterer = memoize(({clusterRadius, geoJSON}) => {
  return new Supercluster({
    maxZoom: 20,
    radius: clusterRadius,
    reduce: (accumulated, props) => {
      accumulated.points = [...accumulated.points, ...props.points]
    },
    map: props => ({points: [props.data]})
  }).load(geoJSON);
}, clusterResolver);