Getting appropriate clusterZoom; flyto moving to incorrect location on map

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}