Changed back to normal opacities instead of radial gradients; could add a var that's read from the config to determine styling: radial gradient || normal opacity

src/common/utilities.js

@@ -169,11 +169,11 @@ export function calcOpacity (num) {
 }
 
 export function calcClusterOpacity (pointCount, totalPoints) {
-  return Math.min(0.8, 0.08 + (pointCount / totalPoints) * 50)
+  return Math.min(0.85, 0.08 + (pointCount / totalPoints) * 50)
 }
 
 export function calcClusterSize (pointCount, totalPoints) {
-  return Math.min(50, 10 + (pointCount / totalPoints) * 75)
+  return Math.min(50, 10 + (pointCount / totalPoints) * 250)
 }
 
 export function isLatitude (lat) {

src/components/presentational/Map/Clusters.jsx

@@ -27,9 +27,9 @@ function ClusterEvents ({
     const totalPoints = calculateTotalPoints()
 
     const styles = ({
-      // fill: colors.fallbackEventColor,
-      // stroke: colors.darkBackground,
-      // strokeWidth: 0,
+      fill: colors.fallbackEventColor,
+      stroke: colors.darkBackground,
+      strokeWidth: 0,
       fillOpacity: calcClusterOpacity(pointCount, totalPoints),
     })
 
@@ -44,7 +44,7 @@ function ClusterEvents ({
           cy='0'
           r={calcClusterSize(pointCount, totalPoints)}
           style={styles}
-          fill="url('#myGradient')"
+          // fill="url('#clusterGradient')"
         />}
       </React.Fragment>
     )

src/components/presentational/Map/DefsClusters.jsx

@@ -2,10 +2,9 @@ import React from 'react'
 
 const DefsClusters = () => (
   <defs>
-    <radialGradient id="myGradient">
-      <stop offset="10%" stop-color="red" />
-      <stop offset="95%" stop-color="black" />
-      {/* <stop offset="95%" stop-color="red" /> */}
+    <radialGradient id="clusterGradient">
+      <stop offset="10%" stop-color="red"/>
+      <stop offset="100%" stop-color="black"/>
     </radialGradient>
   </defs>
 )