Modified cluster styling to have gradients

src/components/Map.jsx

@@ -16,6 +16,7 @@ import Clusters from './presentational/Map/Clusters.jsx'
 import SelectedEvents from './presentational/Map/SelectedEvents.jsx'
 import Narratives from './presentational/Map/Narratives'
 import DefsMarkers from './presentational/Map/DefsMarkers.jsx'
+import DefsClusters from './presentational/Map/DefsClusters.jsx'
 
 import { mapClustersToLocations } from '../common/utilities'
 
@@ -328,6 +329,14 @@ class Map extends React.Component {
     )
   }
 
+  renderClusterGradients () {
+    return (
+      <Portal node={this.svgRef.current}>
+        <DefsClusters />
+      </Portal>
+    )
+  }
+
   renderMarkers () {
     return (
       <Portal node={this.svgRef.current}>
@@ -343,6 +352,7 @@ class Map extends React.Component {
       <React.Fragment>
         {this.renderTiles()}
         {this.renderMarkers()}
+        {this.renderClusterGradients()}
         {isShowingSites ? this.renderSites() : null}
         {this.renderShapes()}
         {this.renderNarratives()}

src/components/presentational/Map/Clusters.jsx

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

src/components/presentational/Map/DefsClusters.jsx

@@ -0,0 +1,13 @@
+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>
+  </defs>
+)
+
+export default DefsClusters