From 5020e738118bfb68eaeace8298965064befc7d7c Mon Sep 17 00:00:00 2001
From: efarooqui <efarooqui@pandora.com>
Date: Wed, 30 Sep 2020 11:21:37 -0700
Subject: [PATCH] Cluster sizes showing up appropriately and unclustering upon
 zoom; need to nail down styling and add onSelect for clusters

---
 src/common/utilities.js                       |  2 +-
 src/components/Map.jsx                        |  1 -
 .../presentational/Map/Clusters.jsx           | 23 ++++++++-----------
 src/scss/map.scss                             |  4 ++--
 4 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/src/common/utilities.js b/src/common/utilities.js
index 3690363..e78bfdc 100644
--- a/src/common/utilities.js
+++ b/src/common/utilities.js
@@ -169,7 +169,7 @@ export function calcOpacity (num) {
 }
 
 export function calcClusterSize (pointCount, numClusters) {
-  return Math.min(50, 10 + (pointCount / numClusters) * 20)
+  return Math.min(50, 10 + (pointCount / numClusters) * 10)
 }
 
 export const dateMin = function () {
diff --git a/src/components/Map.jsx b/src/components/Map.jsx
index f31b389..add532c 100644
--- a/src/components/Map.jsx
+++ b/src/components/Map.jsx
@@ -322,7 +322,6 @@ class Map extends React.Component {
 
   render () {
     const { isShowingSites } = this.props.app.flags
-    console.info(this.state.clusters)
     const classes = this.props.app.narrative ? 'map-wrapper narrative-mode' : 'map-wrapper'
     const innerMap = this.map ? (
       <React.Fragment>
diff --git a/src/components/presentational/Map/Clusters.jsx b/src/components/presentational/Map/Clusters.jsx
index c738520..c1ab621 100644
--- a/src/components/presentational/Map/Clusters.jsx
+++ b/src/components/presentational/Map/Clusters.jsx
@@ -12,30 +12,25 @@ function ClusterEvents ({
   numClusters,
 }) {
   function renderClusterBySize (cluster) {
-    const { point_count, cluster_id } = cluster.properties
-
-    const size = calcClusterSize(point_count, numClusters)
-
-    const width = `${size}px`
-    const height = `${size}px`
+    const { point_count: pointCount, cluster_id: clusterId } = cluster.properties
 
     const styles = ({
-      fill: 'blue',
+      fill: colors.fallbackEventColor,
       stroke: colors.darkBackground,
       strokeWidth: 0,
-      fillOpacity: calcOpacity(point_count),
-      width,
-      height
+      fillOpacity: calcOpacity(pointCount),
     })
 
     return (
       <React.Fragment>
-        <path
+        {<circle
           class='cluster-event-marker'
-          id={cluster_id}
-          d="M 8 0 A 8 8 0 1 1 8 -1.959434878635765e-15 L 0 0  L 8 0 Z"
+          id={clusterId}
+          cx='0'
+          cy='0'
+          r={calcClusterSize(pointCount, numClusters)}
           style={styles}
-        />
+        />}
       </React.Fragment>
     )
   }
diff --git a/src/scss/map.scss b/src/scss/map.scss
index 6e3121a..9d23009 100644
--- a/src/scss/map.scss
+++ b/src/scss/map.scss
@@ -191,8 +191,8 @@
 
 .cluster-event-marker {
   pointer-events: all !important;
-  fill: $event_default;
-  stroke-width: 0;
+  // fill: $event_default;
+  // stroke-width: 0;
 
   &.red {
     fill: red;