Skip to content

Instantly share code, notes, and snippets.

@i-tu
Created September 20, 2016 08:59
Show Gist options
  • Star 27 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save i-tu/05e79737adfe36935ec869125a686f82 to your computer and use it in GitHub Desktop.
Save i-tu/05e79737adfe36935ec869125a686f82 to your computer and use it in GitHub Desktop.
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 [];
}
@helloravi
Copy link

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

@jonathanroze
Copy link

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