Working on select that selects all events in a cluster; need to configure UI to both zoom and select events

src/common/utilities.js

@@ -180,6 +180,10 @@ export function isLongitude(lng) {
   return !!lng && isFinite(lng) && Math.abs(lng) <= 180;
 }
 
+export function mapClustersToLocations(clusters, locations) {
+  return clusters.map(cl => locations.find(location =>  location.label === cl.properties.id))
+}
+
 export const dateMin = function () {
   return Array.prototype.slice.call(arguments).reduce(function (a, b) {
     return a < b ? a : b

src/components/Map.jsx

@@ -17,6 +17,8 @@ import SelectedEvents from './presentational/Map/SelectedEvents.jsx'
 import Narratives from './presentational/Map/Narratives'
 import DefsMarkers from './presentational/Map/DefsMarkers.jsx'
 
+import { mapClustersToLocations } from '../common/utilities' 
+
 // NB: important constants for map, TODO: make statics
 const supportedMapboxMap = ['streets', 'satellite']
 const defaultToken = 'your_token'
@@ -197,8 +199,19 @@ class Map extends React.Component {
   onClusterSelect (e) {
     const { id } = e.target
     const { longitude, latitude } = e.target.attributes
+    
+    // const clusterLeaves = this.index.getLeaves(parseInt(id), Infinity, 0)
+    // const leavesToLocations = mapClustersToLocations(clusterLeaves, this.props.domain.locations)
+
+    // const locationEvents = leavesToLocations.reduce((acc, loc) => {
+    //   loc.events.forEach(evt => acc.push(evt))
+    //   return acc
+    // }, [])
+    
     const expansionZoom = Math.max(this.index.getClusterExpansionZoom(parseInt(id)), this.index.options.minZoom)
     this.map.flyTo(new L.LatLng(latitude.value, longitude.value), expansionZoom)
+
+    // this.props.methods.onSelect(locationEvents)
   }
 
   getClientDims () {
@@ -282,7 +295,7 @@ class Map extends React.Component {
 
   renderEvents () {
     const individualClusters = this.state.clusters.filter(cl => !cl.properties.cluster)
-    const filteredLocations = individualClusters.map(cl => this.props.domain.locations.find(location => location.label === cl.properties.id))
+    const filteredLocations = mapClustersToLocations(individualClusters, this.props.domain.locations)
     return (
       <Events
         svg={this.svgRef.current}

src/store/initial.js

@@ -50,7 +50,7 @@ const initial = {
       anchor: [31.356397, 34.784818],
       startZoom: 11,
       minZoom: 0,
-      maxZoom: 18,
+      maxZoom: 20,
       bounds: null,
       maxBounds: [[180, -180], [-180, 180]],
       clusterRadius: 20,