Getting appropriate clusterZoom; flyto moving to incorrect location on map

src/common/utilities.js

@@ -74,8 +74,8 @@ export function insetSourceFrom (allSources) {
     if (!event.sources) {
       sources = []
     } else {
-      sources = event.sources.map(src => {
-        const id = typeof src === 'object' ? src.id : src
+      sources = event.sources.map(id => {
+        // const id = typeof src === 'object' ? src.id : src
         return allSources.hasOwnProperty(id) ? allSources[id] : null
       })
     }

src/components/Map.jsx

@@ -27,6 +27,7 @@ class Map extends React.Component {
     super()
     this.projectPoint = this.projectPoint.bind(this)
     this.locationToGeoJSON = this.locationToGeoJSON.bind(this)
+    this.onClusterSelect = this.onClusterSelect.bind(this)
     this.svgRef = React.createRef()
     this.map = null
     this.index = null
@@ -188,6 +189,14 @@ class Map extends React.Component {
     return feature
   }
 
+  onClusterSelect (e) {
+    const { id } = e.target
+    const { longitude, latitude } = e.target.attributes
+    const { x, y } = this.projectPoint([latitude.value, longitude.value])
+    const expansionZoom = Math.max(this.index.getClusterExpansionZoom(parseInt(id)), this.index.options.minZoom)
+    this.map.flyTo([x, y], expansionZoom)
+  }
+
   getClientDims () {
     const boundingClient = document.querySelector(`#${this.props.ui.dom.map}`).getBoundingClientRect()
 
@@ -296,7 +305,7 @@ class Map extends React.Component {
         projectPoint={this.projectPoint}
         clusters={allClusters}
         numClusters={allClusters.length}
-        // onSelect={() => {}}
+        onSelect={this.onClusterSelect}
       />
     )
   }

src/components/presentational/Map/Clusters.jsx

@@ -6,13 +6,15 @@ import { calcOpacity, calcClusterSize } from '../../../common/utilities'
 function ClusterEvents ({
   projectPoint,
   styleCluster,
-  // onSelect,
+  onSelect,
   svg,
   clusters,
   numClusters,
 }) {
   function renderClusterBySize (cluster) {
     const { point_count: pointCount, cluster_id: clusterId } = cluster.properties
+    const { coordinates } = cluster.geometry
+    const [longitude, latitude] = coordinates
 
     const styles = ({
       fill: colors.fallbackEventColor,
@@ -26,6 +28,8 @@ function ClusterEvents ({
         {<circle
           class='cluster-event-marker'
           id={clusterId}
+          longitude={longitude}
+          latitude={latitude}
           cx='0'
           cy='0'
           r={calcClusterSize(pointCount, numClusters)}
@@ -67,7 +71,7 @@ function ClusterEvents ({
       <g
         className={'cluster-event'}
         transform={`translate(${x}, ${y})`}
-        // onClick={this.props.onSelect}
+        onClick={(e) => onSelect(e)}
       >
         {renderClusterBySize(cluster)}
         {extraRender ? extraRender() : null}

src/store/initial.js

@@ -49,11 +49,11 @@ const initial = {
     map: {
       anchor: [31.356397, 34.784818],
       startZoom: 11,
-      minZoom: 6,
+      minZoom: 2,
       maxZoom: 18,
       bounds: null,
       maxBounds: [[180, -180], [-180, 180]],
-      clusterRadius: 50,
+      clusterRadius: 20,
     },
     timeline: {
       dimensions: {