From 509e6a87e6eabc6dbe1394079aebf8550d47b1b0 Mon Sep 17 00:00:00 2001
From: Maidi <mareike.haug@web.de>
Date: Tue, 18 Mar 2025 11:28:59 +0100
Subject: [PATCH 1/2] Make cluster element styleable

Add possibility to edit the styling defaults of the cluster element (the number defining the count of merged markers)
---
 packages/front/src/core/Marker/index.ts | 62 ++++++++++++++++++++-----
 1 file changed, 50 insertions(+), 12 deletions(-)

diff --git a/packages/front/src/core/Marker/index.ts b/packages/front/src/core/Marker/index.ts
index cc96d2751..9b0ae5180 100644
--- a/packages/front/src/core/Marker/index.ts
+++ b/packages/front/src/core/Marker/index.ts
@@ -63,6 +63,7 @@ export interface IGroupedMarkers {
  * Component for Managing Markers along with creating different types of markers. Every marker is a Simple2DMarker. For every marker that needs to be added, you can use the Manager to add the marker and change its look and feel. 📕 [Tutorial](https://docs.thatopen.com/Tutorials/Components/Front/Marker). 📘 [API](https://docs.thatopen.com/api/@thatopen/components-front/classes/Marker).
  */
 export class Marker extends OBC.Component implements OBC.Disposable {
+  
   /**
    * A unique identifier for the component.
    * This UUID is used to register the component within the Components system.
@@ -89,6 +90,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.
@@ -418,25 +437,44 @@ export class Marker extends OBC.Component implements OBC.Disposable {
   private createClusterElement(key: string) {
     const div = document.createElement("div");
     div.textContent = key;
-    div.style.color = "#000000";
-    div.style.background = "#FFFFFF";
-    div.style.fontSize = "1.2rem";
-    div.style.fontWeight = "500";
-    div.style.pointerEvents = "auto";
-    div.style.borderRadius = "50%";
-    div.style.padding = "5px 11px";
-    div.style.textAlign = "center";
-    div.style.cursor = "pointer";
-    // div.style.transition = "all 0.05s";
+
+    const {
+      backgroundColor,
+      textColor,
+      fontSize,
+      fontWeight,
+      borderRadius,
+      padding,
+      textAlign,
+      cursor,
+      hoverBackgroundColor,
+      transition,
+    } = { ...Marker.DEFAULT_CLUSTER_STYLES, ...this.clusterElementStyles };
+
+    Object.assign(div.style, {
+      background: backgroundColor,
+      color: textColor,
+      fontSize,
+      fontWeight,
+      borderRadius,
+      padding,
+      textAlign,
+      cursor,
+      ...(transition && { transition }),
+    });
+
     div.addEventListener("pointerdown", () => {
       this.navigateToCluster(key);
     });
+
     div.addEventListener("pointerover", () => {
-      div.style.background = "#BCF124";
+      div.style.background = hoverBackgroundColor;
     });
+
     div.addEventListener("pointerout", () => {
-      div.style.background = "#FFFFFF";
+      div.style.background = backgroundColor;
     });
+
     return div;
   }
 

From 577b5e2029cb240a474209177d74fec82e77ad6a Mon Sep 17 00:00:00 2001
From: Maidi <mareike.haug@web.de>
Date: Tue, 18 Mar 2025 11:35:25 +0100
Subject: [PATCH 2/2] Remove empty lines

---
 packages/front/src/core/Marker/index.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/front/src/core/Marker/index.ts b/packages/front/src/core/Marker/index.ts
index 9b0ae5180..dc21cade0 100644
--- a/packages/front/src/core/Marker/index.ts
+++ b/packages/front/src/core/Marker/index.ts
@@ -63,7 +63,6 @@ export interface IGroupedMarkers {
  * Component for Managing Markers along with creating different types of markers. Every marker is a Simple2DMarker. For every marker that needs to be added, you can use the Manager to add the marker and change its look and feel. 📕 [Tutorial](https://docs.thatopen.com/Tutorials/Components/Front/Marker). 📘 [API](https://docs.thatopen.com/api/@thatopen/components-front/classes/Marker).
  */
 export class Marker extends OBC.Component implements OBC.Disposable {
-  
   /**
    * A unique identifier for the component.
    * This UUID is used to register the component within the Components system.
@@ -466,15 +465,12 @@ export class Marker extends OBC.Component implements OBC.Disposable {
     div.addEventListener("pointerdown", () => {
       this.navigateToCluster(key);
     });
-
     div.addEventListener("pointerover", () => {
       div.style.background = hoverBackgroundColor;
     });
-
     div.addEventListener("pointerout", () => {
       div.style.background = backgroundColor;
     });
-
     return div;
   }