mapbox/supercluster

supercluster

A very fast JavaScript library for geospatial point clustering for browsers and Node.

const index = new Supercluster({radius: 40, maxZoom: 16});
index.load(points);

const clusters = index.getClusters([-180, -85, 180, 85], 2);

Clustering 6 million points in Leaflet:

Supercluster was built to power clustering in Mapbox GL JS. Read about how it works on the Mapbox blog.

Install

Install using NPM (npm install supercluster) or Yarn (yarn add supercluster), then:

// import as a ES module in Node
import Supercluster from 'supercluster';

// import from a CDN in the browser:
import Supercluster from 'https://esm.run/supercluster';

Or use it with an ordinary script tag in the browser:

<script src="https://unpkg.com/[email protected]/dist/supercluster.min.js"></script>

Methods

load(points)

Loads an array of GeoJSON Feature objects. Each feature's geometry must be a GeoJSON Point or MultiPoint — a MultiPoint is clustered as an individual point per coordinate, each inheriting the feature's properties and id. Once loaded, index is immutable.

getClusters(bbox, zoom)

For the given bbox array ([westLng, southLat, eastLng, northLat]) and integer zoom, returns an array of clusters and points as GeoJSON Feature objects.

getTile(z, x, y)

For a given zoom and x/y coordinates, returns a geojson-vt-compatible JSON tile object with cluster/point features.

getChildren(clusterId)

Returns the children of a cluster (on the next zoom level) given its id (cluster_id value from feature properties).

getLeaves(clusterId, limit = 10, offset = 0)

Returns all the points of a cluster (given its cluster_id), with pagination support: limit is the number of points to return (set to Infinity for all points), and offset is the amount of points to skip (for pagination).

getClusterExpansionZoom(clusterId)

Returns the zoom on which the cluster expands into several children (useful for "click to zoom" feature) given the cluster's cluster_id.

Options

Property map/reduce options

In addition to the options above, Supercluster supports property aggregation with the following two options:

• map: a function that returns cluster properties corresponding to a single point.
• reduce: a reduce function that merges properties of two clusters into one.

Example of setting up a sum cluster property that accumulates the sum of myValue property values:

const index = new Supercluster({
    map: (props) => ({sum: props.myValue}),
    reduce: (accumulated, props) => { accumulated.sum += props.sum; }
});

The map/reduce options must satisfy these conditions to work correctly:

• map must return a new object, not existing properties of a point, otherwise it will get overwritten.
• reduce must not mutate the second argument (props).

TypeScript

Install @types/supercluster for the TypeScript type definitions:

npm install @types/supercluster --save-dev 

Developing Supercluster

npm install       # install dependencies
npm run build     # generate dist/supercluster.js and dist/supercluster.min.js
npm test          # run tests