I'm POC-ing clusters with Mabpox-gl-js v0.45.
I would like to customize my cluster's properties (actual default values are point_count and point_count_abbreviated). Each of my points (one for each city) have a surface property (an integer) which I want to sum when points are clustered.
I see in mapbox's sources a reference to a reduce function to calculate custom properties:
SuperCluster.prototype = {
options: {
minZoom: 0, // min zoom to generate clusters on
// .....
log: false, // whether to log timing info
// a reduce function for calculating custom cluster properties
reduce: null, // function (accumulated, props) { accumulated.sum += props.sum; }
// initial properties of a cluster (before running the reducer)
initial: function () { return {}; }, // function () { return {sum: 0}; },
// properties to use for individual points when running the reducer
map: function (props) { return props; } // function (props) { return {sum: props.my_value}; },
},
But I don't see any mention about it on the documentation. How can I set these options?
Mapbox seems not to publish these interface (see cluster's documentation) and no mention are done on provided exemple:
map.addSource("earthquakes", {
type: "geojson",
// Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
// from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
data: "/mapbox-gl-js/assets/earthquakes.geojson",
cluster: true,
clusterMaxZoom: 14, // Max zoom to cluster points on
clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
});
Someone gave me a workaround : do not use the embedded supecluster, but create your own and use it as a source :
var myCluster = supercluster({
radius: 40,
maxZoom: 16,
reduce: function(p) { /* I can use reduce/map/... functions! */ }
});
// My clustered source is created without Mapbox's clusters since I managed my clusters outside Mapbox library.
map.addSource("earthquakes", {
type: "geojson",
data : {
"type" : "FeatureCollection",
"features" : []
}
});
function loadRemoteGeoJson() {
var features
// Do what you want, when you want to retrieve remote features...
// ...
// In the end set features into your supercluster
myCluster.load(features)
pushClusterIntoMapbox(map)
}
// Function to call when you load remote data AND when you zoom in or out !
function pushClusterIntoMapbox(map) {
// I maybe should be bounded here...
var clusters = myCluster.getClusters([ -180.0000, -90.0000, 180.0000, 90.0000 ], Math
.floor(map.getZoom()))
// My colleague advice me to use http://turfjs.org as helper but I think it's quite optionnal
var features = turf.featureCollection(clusters)
map.getSource("earthquakes").setData(features)
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With