diff --git a/src/common/utilities.js b/src/common/utilities.js index 3e094ef..459083d 100644 --- a/src/common/utilities.js +++ b/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) { diff --git a/src/components/Map.jsx b/src/components/Map.jsx index 9271841..febedd6 100644 --- a/src/components/Map.jsx +++ b/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} /> ) diff --git a/src/components/presentational/Map/Clusters.jsx b/src/components/presentational/Map/Clusters.jsx index ad441b1..5a2b414 100644 --- a/src/components/presentational/Map/Clusters.jsx +++ b/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} />}