supercluster

What is supercluster?

Supercluster is a fast, multi-purpose spatial clustering library for JavaScript. It is designed to handle large sets of geographical points and efficiently cluster them for visualization on maps. It is particularly useful for applications that need to display a large number of points on a map without overwhelming the user with too much information.

What are supercluster's main functionalities?

Creating a Cluster

This feature allows you to create a cluster from a set of geographical points. The code sample demonstrates how to initialize Supercluster, load points into it, and retrieve clusters for a specific zoom level and bounding box.

const Supercluster = require('supercluster');
const points = [
  { type: 'Feature', properties: {}, geometry: { type: 'Point', coordinates: [-73.97, 40.77] } },
  { type: 'Feature', properties: {}, geometry: { type: 'Point', coordinates: [-73.88, 40.78] } }
];
const index = new Supercluster({ radius: 40, maxZoom: 16 });
index.load(points);
const clusters = index.getClusters([-180, -85, 180, 85], 2);
console.log(clusters);

Getting Cluster Expansion Zoom

This feature allows you to get the zoom level at which a cluster expands into its constituent points. The code sample demonstrates how to initialize Supercluster, load points into it, and retrieve the expansion zoom level for a specific cluster.

const Supercluster = require('supercluster');
const points = [
  { type: 'Feature', properties: {}, geometry: { type: 'Point', coordinates: [-73.97, 40.77] } },
  { type: 'Feature', properties: {}, geometry: { type: 'Point', coordinates: [-73.88, 40.78] } }
];
const index = new Supercluster({ radius: 40, maxZoom: 16 });
index.load(points);
const zoom = index.getClusterExpansionZoom(1);
console.log(zoom);

Other packages similar to supercluster

kdbush

KDBush is a very fast static spatial index for 2D points based on a flat KD-tree. It is useful for nearest neighbor queries and is often used in conjunction with Supercluster for efficient spatial indexing. Compared to Supercluster, KDBush is more focused on indexing and querying points rather than clustering them.

rbush

RBush is a high-performance JavaScript library for 2D spatial indexing of points and rectangles. It uses a R-tree data structure, which is optimized for spatial queries. While RBush can be used for clustering, it is more general-purpose and not as specialized for clustering large sets of points as Supercluster.

geocluster

Geocluster is a simple and lightweight library for clustering geographical points. It uses a different algorithm compared to Supercluster and is more suitable for smaller datasets. Geocluster is easier to use but may not perform as well as Supercluster for very large datasets.

README

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/supercluster@8.0.0/dist/supercluster.min.js"></script>

Methods

load(points)

Loads an array of GeoJSON Feature objects. Each feature's geometry must be a GeoJSON Point. 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

Option	Default	Description
minZoom	0	Minimum zoom level at which clusters are generated.
maxZoom	16	Maximum zoom level at which clusters are generated.
minPoints	2	Minimum number of points to form a cluster.
radius	40	Cluster radius, in pixels.
extent	512	(Tiles) Tile extent. Radius is calculated relative to this value.
nodeSize	64	Size of the KD-tree leaf node. Affects performance.
log	false	Whether timing info should be logged.
generateId	false	Whether to generate ids for input features in vector tiles.

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