Modified clusters to take in radial gradient as input if specified

src/components/Map.jsx

@@ -313,6 +313,7 @@ class Map extends React.Component {
         styleCluster={this.styleCluster}
         projectPoint={this.projectPoint}
         clusters={allClusters}
+        isRadial={this.props.ui.radial}
         onSelect={this.onClusterSelect}
       />
     )
@@ -352,7 +353,7 @@ class Map extends React.Component {
       <React.Fragment>
         {this.renderTiles()}
         {this.renderMarkers()}
-        {this.renderClusterGradients()}
+        {this.props.ui.radial ? this.renderClusterGradients(): null}
         {isShowingSites ? this.renderSites() : null}
         {this.renderShapes()}
         {this.renderNarratives()}
@@ -399,7 +400,8 @@ function mapStateToProps (state) {
       narratives: state.ui.style.narratives,
       mapSelectedEvents: state.ui.style.selectedEvents,
       shapes: state.ui.style.shapes,
-      eventRadius: state.ui.eventRadius
+      eventRadius: state.ui.eventRadius,
+      radial: state.ui.style.clusters.radial
     },
     features: selectors.getFeatures(state)
   }

src/components/presentational/Map/Clusters.jsx

@@ -7,6 +7,7 @@ function ClusterEvents ({
   projectPoint,
   styleCluster,
   onSelect,
+  isRadial,
   svg,
   clusters
 }) {
@@ -27,7 +28,7 @@ function ClusterEvents ({
     const totalPoints = calculateTotalPoints()
 
     const styles = ({
-      fill: colors.fallbackEventColor,
+      fill: isRadial ? "url('#clusterGradient')" : colors.fallbackEventColor,
       stroke: colors.darkBackground,
       strokeWidth: 0,
       fillOpacity: calcClusterOpacity(pointCount, totalPoints),
@@ -44,7 +45,6 @@ function ClusterEvents ({
           cy='0'
           r={calcClusterSize(pointCount, totalPoints)}
           style={styles}
-          // fill="url('#clusterGradient')"
         />}
       </React.Fragment>
     )

src/components/presentational/Map/DefsClusters.jsx

@@ -4,7 +4,7 @@ const DefsClusters = () => (
   <defs>
     <radialGradient id="clusterGradient">
       <stop offset="10%" stop-color="red"/>
-      <stop offset="100%" stop-color="black"/>
+      <stop offset="90%" stop-color="transparent"/>
     </radialGradient>
   </defs>
 )