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.
supercluster
A very fast JavaScript library for geospatial point clustering for browsers and Node.
<script src="https://unpkg.com/supercluster@7.1.2/dist/supercluster.min.js"></script>
const index = new Supercluster({
radius: 40,
maxZoom: 16
});
index.load(points);
index.getClusters([-180, -85, 180, 85], 2);
Clustering 6 million points in Leaflet:
Install
Install using NPM (npm install supercluster
) or Yarn (yarn add supercluster
), then:
import Supercluster from 'supercluster';
const Supercluster = require('supercluster');
Or use a browser build directly:
<script src="https://unpkg.com/supercluster@7.1.2/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
).
Developing Supercluster
npm install # install dependencies
npm run build # generate dist/supercluster.js and dist/supercluster.min.js
npm test # run tests