Skip to content

Instantly share code, notes, and snippets.

@Dudemullet
Forked from i-tu/marker clustering
Created March 19, 2017 04:50
Show Gist options
  • Save Dudemullet/d3d156abfdfa92ebaed8378f7178631c to your computer and use it in GitHub Desktop.
Save Dudemullet/d3d156abfdfa92ebaed8378f7178631c 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 [];
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment