From 9a7e5deef7d8e23053deefc6101941ddcfedbc2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9my=20Greinhofer?= <remy.greinhofer@gmail.com>
Date: Sat, 22 Jun 2019 22:18:32 -0500
Subject: [PATCH] Adjust map clusters (#134)

Adjusts the sizes and the colors of the clusters based on the number of
crashes they represent.

Fixes scrapd/scrapdviz#127
Fixes scrapd/scrapdviz#129
---
 components/scrapd-map/component.js | 64 +++++++++++++++++++++++++-----
 1 file changed, 55 insertions(+), 9 deletions(-)

diff --git a/components/scrapd-map/component.js b/components/scrapd-map/component.js
index d4c3ab2..710631c 100644
--- a/components/scrapd-map/component.js
+++ b/components/scrapd-map/component.js
@@ -19,10 +19,7 @@ const MapDiv = styled.div({
 });
 
 const clusterMarkerStyle = {
-  width: 30,
-  height: 30,
   borderRadius: '50%',
-  backgroundColor: '#FC4B51',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
@@ -31,9 +28,44 @@ const clusterMarkerStyle = {
   cursor: 'pointer'
 };
 
-const markerStyle = {
+const clusterMarkerStyleXS = {
+  ...clusterMarkerStyle,
   width: 30,
   height: 30,
+  backgroundColor: '#FF0000'
+};
+
+const clusterMarkerStyleS = {
+  ...clusterMarkerStyle,
+  width: 40,
+  height: 40,
+  backgroundColor: '#BF0000'
+};
+
+const clusterMarkerStyleM = {
+  ...clusterMarkerStyle,
+  width: 50,
+  height: 50,
+  backgroundColor: '#800000'
+};
+
+const clusterMarkerStyleL = {
+  ...clusterMarkerStyle,
+  width: 60,
+  height: 60,
+  backgroundColor: '#400000'
+};
+
+const clusterMarkerStyleXL = {
+  ...clusterMarkerStyle,
+  width: 70,
+  height: 70,
+  backgroundColor: '#000000'
+};
+
+const markerStyle = {
+  width: 20,
+  height: 20,
   borderRadius: '50%',
   backgroundColor: '#FC4B51',
   color: 'white',
@@ -43,11 +75,25 @@ const markerStyle = {
   border: '2px solid #A70308'
 };
 
-const clusterMarker = (coordinates, count) => (
-  <Marker coordinates={coordinates} style={clusterMarkerStyle}>
-    <div>{count}</div>
-  </Marker>
-);
+function clusterMarker(coordinates, count) {
+  let clusterStyle;
+  if (count >= 2 && count <= 4) {
+    clusterStyle = clusterMarkerStyleXS;
+  } else if (count >= 5 && count <= 7) {
+    clusterStyle = clusterMarkerStyleS;
+  } else if (count >= 8 && count <= 11) {
+    clusterStyle = clusterMarkerStyleM;
+  } else if (count >= 12 && count <= 15) {
+    clusterStyle = clusterMarkerStyleL;
+  } else {
+    clusterStyle = clusterMarkerStyleXL;
+  }
+  return (
+    <Marker coordinates={coordinates} style={clusterStyle}>
+      <div>{count}</div>
+    </Marker>
+  );
+}
 
 class ScrapdMap extends React.Component {
   render() {