marker clustering

  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 [];
  }