From 68e243146db6d4e0ee38543f0efbf1750735d957 Mon Sep 17 00:00:00 2001
From: Alexander Korotkov <alexander@development.tec4med.com>
Date: Fri, 13 Mar 2020 18:37:10 +0200
Subject: [PATCH 1/3] #635 - Background color configuration for the cluster
 marker

---
 packages/markerclustererplus/src/cluster-icon.ts    | 8 ++++++++
 packages/markerclustererplus/src/markerclusterer.ts | 1 +
 2 files changed, 9 insertions(+)

diff --git a/packages/markerclustererplus/src/cluster-icon.ts b/packages/markerclustererplus/src/cluster-icon.ts
index d2e1f882..4b8b8c05 100644
--- a/packages/markerclustererplus/src/cluster-icon.ts
+++ b/packages/markerclustererplus/src/cluster-icon.ts
@@ -120,6 +120,12 @@ export interface ClusterIconStyle {
    * @default `"0 0"`
    */
   backgroundPosition?: string;
+    /**
+   * The background color for the cluster marker
+   *
+   * @default `"#00A2D3"`
+   */
+  backgroundColor?: string;
 }
 
 /**
@@ -437,6 +443,8 @@ export class ClusterIcon extends OverlayViewSafe {
       left: coercePixels(pos.x),
       width: coercePixels(this.style.width),
       height: coercePixels(this.style.height),
+      'background-color': this.style.backgroundColor,
+      '--background-color': this.style.backgroundColor,
       cursor: "pointer",
       position: "absolute",
       "-webkit-user-select": "none",
diff --git a/packages/markerclustererplus/src/markerclusterer.ts b/packages/markerclustererplus/src/markerclusterer.ts
index 819d97e5..52a9d493 100644
--- a/packages/markerclustererplus/src/markerclusterer.ts
+++ b/packages/markerclustererplus/src/markerclusterer.ts
@@ -1182,6 +1182,7 @@ export class MarkerClusterer extends OverlayViewSafe {
       fontStyle: "normal",
       fontFamily: "Arial,sans-serif",
       backgroundPosition: "0 0",
+      backgroundColor: "#00A2D3",
       ...overrides
     };
   }

From 3718ce954891b015aafa5f950d963f3915119187 Mon Sep 17 00:00:00 2001
From: Alexander Korotkov <alexander@development.tec4med.com>
Date: Fri, 13 Mar 2020 18:53:37 +0200
Subject: [PATCH 2/3] 635 linter fixes

---
 packages/markerclustererplus/src/cluster-icon.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/markerclustererplus/src/cluster-icon.ts b/packages/markerclustererplus/src/cluster-icon.ts
index 4b8b8c05..32814404 100644
--- a/packages/markerclustererplus/src/cluster-icon.ts
+++ b/packages/markerclustererplus/src/cluster-icon.ts
@@ -120,7 +120,7 @@ export interface ClusterIconStyle {
    * @default `"0 0"`
    */
   backgroundPosition?: string;
-    /**
+  /**
    * The background color for the cluster marker
    *
    * @default `"#00A2D3"`
@@ -443,8 +443,8 @@ export class ClusterIcon extends OverlayViewSafe {
       left: coercePixels(pos.x),
       width: coercePixels(this.style.width),
       height: coercePixels(this.style.height),
-      'background-color': this.style.backgroundColor,
-      '--background-color': this.style.backgroundColor,
+      "background-color": this.style.backgroundColor,
+      "--background-color": this.style.backgroundColor,
       cursor: "pointer",
       position: "absolute",
       "-webkit-user-select": "none",

From daff37c4113f78fd197252d9819e109c3f4a32f3 Mon Sep 17 00:00:00 2001
From: Alexander Korotkov <alexander@development.tec4med.com>
Date: Fri, 13 Mar 2020 19:04:27 +0200
Subject: [PATCH 3/3] 635 - was changed default value for the background color;
 updated examples

---
 .../examples/advanced_example.html                   | 12 ++++--------
 packages/markerclustererplus/src/cluster-icon.ts     |  2 +-
 packages/markerclustererplus/src/markerclusterer.ts  |  2 +-
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/packages/markerclustererplus/examples/advanced_example.html b/packages/markerclustererplus/examples/advanced_example.html
index 27348cea..601c76fa 100644
--- a/packages/markerclustererplus/examples/advanced_example.html
+++ b/packages/markerclustererplus/examples/advanced_example.html
@@ -43,7 +43,6 @@
 
 
       .custom-clustericon {
-        background: var(--cluster-color);
         color: #FFF;
         border-radius: 100%;
         font-weight: bold;
@@ -62,7 +61,7 @@
         transform: translate(-50%, -50%);
         top: 50%;
         left: 50%;
-        background: var(--cluster-color);
+        background: var(--background-color);
         opacity: 0.2;
         border-radius: 100%;
       }
@@ -76,16 +75,13 @@
       }
 
       .custom-clustericon-1 {
-        --cluster-color: #00A2D3;
+        --background-color: #00A2D3;
       }
 
       .custom-clustericon-2 {
-        --cluster-color: #FF9B00;
+        --background-color: #FF9B00;
       }
 
-      .custom-clustericon-3 {
-        --cluster-color: #FF6969;
-      }
     </style>
 
     <script src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
@@ -188,7 +184,7 @@
           {
             width: 50,
             height: 50,
-            className: 'custom-clustericon-3'
+            backgroundColor: '#FF6969'
           }
         ],
       ];
diff --git a/packages/markerclustererplus/src/cluster-icon.ts b/packages/markerclustererplus/src/cluster-icon.ts
index 32814404..785fcd5a 100644
--- a/packages/markerclustererplus/src/cluster-icon.ts
+++ b/packages/markerclustererplus/src/cluster-icon.ts
@@ -123,7 +123,7 @@ export interface ClusterIconStyle {
   /**
    * The background color for the cluster marker
    *
-   * @default `"#00A2D3"`
+   * @default `"transparent"`
    */
   backgroundColor?: string;
 }
diff --git a/packages/markerclustererplus/src/markerclusterer.ts b/packages/markerclustererplus/src/markerclusterer.ts
index 52a9d493..849e6513 100644
--- a/packages/markerclustererplus/src/markerclusterer.ts
+++ b/packages/markerclustererplus/src/markerclusterer.ts
@@ -1182,7 +1182,7 @@ export class MarkerClusterer extends OverlayViewSafe {
       fontStyle: "normal",
       fontFamily: "Arial,sans-serif",
       backgroundPosition: "0 0",
-      backgroundColor: "#00A2D3",
+      backgroundColor: "transparent",
       ...overrides
     };
   }