Cluster sizes showing up appropriately and unclustering upon zoom; need to nail down styling and add onSelect for clusters

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 () {

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>

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>
     )
   }

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;