Adjust map clusters (scrapd#134)

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

Fixes scrapd#127
Fixes scrapd#129

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() {