Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
componentWillReceiveProps(nextProps) {
if (nextProps.lastRequestedUserLocationAt > this.props.lastRequestedUserLocationAt) {
this.centerMapToUser(nextProps.currentLocation);
}
if (nextProps.lastUpdated > this.props.lastUpdated) {
const markers = this.createMarkersForLocations(nextProps);
if (markers && Object.keys(markers)) {
const clusters = {};
Object.keys(markers).forEach(categoryKey => {
// Recalculate cluster trees
const cluster = supercluster({
radius: 60,
maxZoom: 16,
});
cluster.load(markers[categoryKey]);
clusters[categoryKey] = cluster;
});
this.setState({
clusters
});
}
}
}
getZoomLevel(region = this.state.region) {
// http://stackoverflow.com/a/6055653
const angle = region.longitudeDelta;
// 0.95 for finetuning zoomlevel grouping
return Math.round(Math.log(360 / angle) / Math.LN2);
}
createMarkersForRegion() {
const padding = 0.25;
if (this.state.clusters && this.state.clusters[this.props.selectedOfferType]) {
const markers = this.state.clusters[this.props.selectedOfferType].getClusters([
this.state.region.longitude - (this.state.region.longitudeDelta * (0.5 + padding)),
this.state.region.latitude - (this.state.region.latitudeDelta * (0.5 + padding)),
this.state.region.longitude + (this.state.region.longitudeDelta * (0.5 + padding)),
this.state.region.latitude + (this.state.region.latitudeDelta * (0.5 + padding)),
], this.getZoomLevel());
return markers.map(marker => this.renderMarker(marker));
}
return [];
}
@saberking
Copy link

saberking commented Jan 25, 2017

Thank you for this really helpful gist, saved me a few days of tearing out my hair!

@helloravi
Copy link

helloravi commented Mar 30, 2017

For those who want to install super cluster this is the command npm install git+ssh://github.com/mapbox/supercluster --save

@jonathanroze
Copy link

jonathanroze commented Aug 1, 2017

Do you know how to implement it with react-native-maps ? thx

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment