Building with supercluster; working on map refactor

src/components/Map.jsx

@@ -1,6 +1,7 @@
 /* global L */
 import React from 'react'
 import { Portal } from 'react-portal'
+import Supercluster from 'supercluster'
 
 import { connect } from 'react-redux'
 import * as selectors from '../selectors'
@@ -23,8 +24,10 @@ class Map extends React.Component {
   constructor () {
     super()
     this.projectPoint = this.projectPoint.bind(this)
+    this.locationToGeoJSON = this.locationToGeoJSON.bind(this)
     this.svgRef = React.createRef()
     this.map = null
+    this.index = null
     this.state = {
       mapTransformX: 0,
       mapTransformY: 0
@@ -93,7 +96,7 @@ class Map extends React.Component {
 
     map.keyboard.disable()
     map.zoomControl.remove()
-
+    map.on('moveend', () => this.updateClusters());
     map.on('move zoomend viewreset moveend', () => this.alignLayers())
     map.on('zoomstart', () => { if (this.svgRef.current !== null) this.svgRef.current.classList.add('hide') })
     map.on('zoomend', () => { if (this.svgRef.current !== null) this.svgRef.current.classList.remove('hide') })
@@ -102,6 +105,46 @@ class Map extends React.Component {
     this.map = map
   }
 
+  // createClusterIcon(feature, latlng) {
+  //   if (!feature.properties.cluster) return L.marker(latlng);
+
+  //   const count = feature.properties.point_count;
+  //   const size =
+  //       count < 100 ? 'small' :
+  //       count < 1000 ? 'medium' : 'large';
+  //   const icon = L.divIcon({
+  //       html: `<div><span>${  feature.properties.point_count_abbreviated  }</span></div>`,
+  //       className: `marker-cluster marker-cluster-${  size}`,
+  //       iconSize: L.point(40, 40)
+  //   });
+  //   return L.marker(latlng, {icon});
+  // }
+
+  initializeSupercluster (locations) {
+    const { map: mapConf } = this.props.app
+    if (locations.length === 0) return
+    const geoJSON = locations.map(this.locationToGeoJSON)
+    // initialize supercluster
+    const index = new Supercluster({
+      radius: 40,
+      maxZoom: mapConf.maxZoom,
+      minZoom: mapConf.minZoom
+    }).load(geoJSON)
+    // Empty Layer Group that will receive the clusters data on the fly.
+    var markers = L.geoJSON(geoJSON, {}).addTo(this.map);
+    markers.id = 'clusters'
+    this.index = index
+  }
+
+  updateClusters () {
+    var bounds = this.map.getBounds();
+    var bbox = [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()];
+    var zoom = this.map.getZoom();
+    var clusters = this.index.getClusters(bbox, zoom);
+    // markers.clearLayers();
+    // markers.addData(clusters);
+  }
+
   alignLayers () {
     const mapNode = document.querySelector('.leaflet-map-pane')
     if (mapNode === null) return { transformX: 0, transformY: 0 }
@@ -127,6 +170,19 @@ class Map extends React.Component {
     }
   }
 
+  locationToGeoJSON (location) {
+    const { x, y } = this.projectPoint([location.latitude, location.longitude])
+    const feature = {
+      type: 'Feature',
+      properties: {},
+      geometry: {
+        type: 'Point',
+        coordinates: [x, y]
+      }
+    }
+    return feature
+  }
+
   getClientDims () {
     const boundingClient = document.querySelector(`#${this.props.ui.dom.map}`).getBoundingClientRect()
 
@@ -189,6 +245,15 @@ class Map extends React.Component {
     )
   }
 
+  renderClusters () {
+    if (this.index === null) return
+    var bounds = this.map.getBounds();
+    var bbox = [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()];
+    var zoom = this.map.getZoom();
+    var clusters = this.index.getClusters(bbox, zoom);
+    console.info(this.map)
+    console.info('CLUSTERS: ', clusters)
+  }
   /**
    * Determines additional styles on the <circle> for each location.
    * A location consists of an array of events (see selectors). The function
@@ -241,6 +306,7 @@ class Map extends React.Component {
 
   render () {
     const { isShowingSites } = this.props.app.flags
+    this.initializeSupercluster(this.props.domain.locations)
     const classes = this.props.app.narrative ? 'map-wrapper narrative-mode' : 'map-wrapper'
     const innerMap = this.map ? (
       <React.Fragment>
@@ -250,6 +316,7 @@ class Map extends React.Component {
         {this.renderShapes()}
         {this.renderNarratives()}
         {this.renderEvents()}
+        {/* {this.renderClusters()} */}
         {this.renderSelected()}
       </React.Fragment>
     ) : null