feat(front): Make cluster element customizable (#578)

* Make cluster element styleable

Add possibility to edit the styling defaults of the cluster element (the number defining the count of merged markers)

* Remove empty lines

---------

Co-authored-by: Antonio González Viegas <[email protected]>

Author: maidi29

packages/front/src/core/Marker/index.ts

@@ -89,6 +89,24 @@ export class Marker extends OBC.Component implements OBC.Disposable {
    */
   autoCluster = true;
 
+  private static readonly DEFAULT_CLUSTER_STYLES = {
+    backgroundColor: "#FFFFFF",
+    textColor: "#000000",
+    fontSize: "1.2rem",
+    fontWeight: "500",
+    borderRadius: "50%",
+    padding: "5px 11px",
+    textAlign: "center",
+    cursor: "pointer",
+    hoverBackgroundColor: "#BCF124",
+    transition: undefined,
+  };
+
+  // Customizable cluster element styles
+  clusterElementStyles: Partial<typeof Marker.DEFAULT_CLUSTER_STYLES> = {
+    ...Marker.DEFAULT_CLUSTER_STYLES,
+  };
+
   /**
    * A Map containing the markers grouped by world UUID.
    * Each world can have its own set of markers.
@@ -425,10 +443,10 @@ export class Marker extends OBC.Component implements OBC.Disposable {
     div.style.padding = "5px 11px";
     div.style.textAlign = "center";
     div.addEventListener("pointerover", () => {
-      div.style.background = "#BCF124";
+      div.style.background = hoverBackgroundColor;
     });
     div.addEventListener("pointerout", () => {
-      div.style.background = "#FFFFFF";
+      div.style.background = backgroundColor;
     });
     return div;
   };