Rewrote opacity alg for clusters

src/common/utilities.js

@@ -168,8 +168,12 @@ export function calcOpacity (num) {
   return base + (Math.min(0.5, 0.08 * (num - 1)))
 }
 
-export function calcClusterSize (pointCount, numClusters) {
-  return Math.min(50, 10 + (pointCount / numClusters) * 10)
+export function calcClusterOpacity (pointCount, totalPoints) {
+  return Math.min(0.8, 0.08 + (pointCount / totalPoints) * 50)
+}
+
+export function calcClusterSize (pointCount, totalPoints) {
+  return Math.min(50, 10 + (pointCount / totalPoints) * 75)
 }
 
 export function isLatitude (lat) {

src/components/Map.jsx

@@ -78,7 +78,7 @@ class Map extends React.Component {
      * Creates a Leaflet map and a tilelayer for the map background
      */
     const { map: mapConf } = this.props.app
-    console.info(mapConf.maxBounds)
+
     const map =
       L.map(this.props.ui.dom.map)
         .setView(mapConf.anchor, mapConf.startZoom)
@@ -312,7 +312,6 @@ class Map extends React.Component {
         styleCluster={this.styleCluster}
         projectPoint={this.projectPoint}
         clusters={allClusters}
-        numClusters={allClusters.length}
         onSelect={this.onClusterSelect}
       />
     )

src/components/presentational/Map/Clusters.jsx

@@ -1,26 +1,36 @@
 import React from 'react'
 import { Portal } from 'react-portal'
 import colors from '../../../common/global.js'
-import { calcOpacity, calcClusterSize } from '../../../common/utilities'
+import { calcClusterOpacity, calcClusterSize } from '../../../common/utilities'
 
 function ClusterEvents ({
   projectPoint,
   styleCluster,
   onSelect,
   svg,
-  clusters,
-  numClusters
+  clusters
 }) {
+  function calculateTotalPoints () {
+    return clusters.reduce((total, cl) => {
+      if (cl && cl.properties) {
+        total += cl.properties.point_count
+      }
+      return total
+    }, 0)
+  }
+
   function renderClusterBySize (cluster) {
     const { point_count: pointCount, cluster_id: clusterId } = cluster.properties
     const { coordinates } = cluster.geometry
     const [longitude, latitude] = coordinates
 
+    const totalPoints = calculateTotalPoints()
+
     const styles = ({
       fill: colors.fallbackEventColor,
       stroke: colors.darkBackground,
       strokeWidth: 0,
-      fillOpacity: calcOpacity(pointCount)
+      fillOpacity: calcClusterOpacity(pointCount, totalPoints)
     })
 
     return (
@@ -32,7 +42,7 @@ function ClusterEvents ({
           latitude={latitude}
           cx='0'
           cy='0'
-          r={calcClusterSize(pointCount, numClusters)}
+          r={calcClusterSize(pointCount, totalPoints)}
           style={styles}
         />}
       </React.Fragment>