supermulticluster
A very fast JavaScript library for geospatial point clustering for browsers and Node.
<script src="https://unpkg.com/supermulticluster@7.0.0/dist/supermulticluster.min.js"></script>
const index = new SuperMulticluster({
radius: 40,
maxZoom: 16
});
// List of Types your Points will be clustered by
const typeList = ['school','business'];
// Where in the point object can this item be found? (ie. what key property)
const accessor = "properties.status.type";
// Load Point Data
index.load(points,typeList,accessor);
// Fetch Clusters
index.getClusters([-180, -85, 180, 85], 2);
Clustering 6 million points in Leaflet:
Install
Install using NPM (npm install supermulticluster
) or Yarn (yarn add supermulticluster
), then:
// import as a ES module
import SuperMulticluster from 'supermulticluster';
// or require in Node / Browserify
const SuperMulticluster = require('supermulticluster');
Or use a browser build directly:
<script src="https://unpkg.com/supermulticluster@7.0.0/dist/supermulticluster.min.js"></script>
Methods
load(points, typeList?, accessor?)
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. |
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 SuperMulticluster({
map: (props) => ({sum: props.myValue}),
reduce: (accumulated, props) => { accumulated.sum += props.sum; }
});
Note that reduce
must not mutate the second argument (props
).
Developing SuperMulticluster
npm install # install dependencies
npm run build # generate dist/supermulticluster.js and dist/supermulticluster.min.js
npm test # run tests