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) => (
-
- {count}
-
-);
+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 (
+
+ {count}
+
+ );
+}
class ScrapdMap extends React.Component {
render() {