Dudemullet · March 19, 2017 04:50 · Sep 20, 2016
diff --git a/marker clustering b/marker clustering
@@ -0,0 +1,53 @@
+  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 [];
+  }