From 0577728e015a972376a48ef0551d94f5269f860e Mon Sep 17 00:00:00 2001
From: silvester-pari <silvester.pari@eox.at>
Date: Thu, 31 Aug 2023 08:40:17 +0200
Subject: [PATCH] feat: spread all overlay properties to overlay generation

---
 elements/map/index.html                  | 5 ++++-
 elements/map/src/select.ts               | 9 +++++----
 elements/map/test/hoverInteraction.cy.ts | 4 +++-
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/elements/map/index.html b/elements/map/index.html
index 6ea2af413..18c5cd306 100644
--- a/elements/map/index.html
+++ b/elements/map/index.html
@@ -29,7 +29,10 @@
       ]);
       document.querySelector("eox-map").addSelect("regions", {
         id: "selectInteraction",
-        tooltip: "eox-map-tooltip",
+        overlay: {
+          element: "eox-map-tooltip",
+          offset: [0, 30],
+        },
         condition: "pointermove",
         layer: {
           type: "Vector",
diff --git a/elements/map/src/select.ts b/elements/map/src/select.ts
index 48c601608..0773ead30 100644
--- a/elements/map/src/select.ts
+++ b/elements/map/src/select.ts
@@ -19,7 +19,7 @@ export async function addSelect(
     throw Error(`Interaction with id: ${options.id} already exists.`);
   }
 
-  const tooltip: EOxMapTooltip = EOxMap.querySelector(options.tooltip);
+  const tooltip: HTMLElement = EOxMap.querySelector(options.overlay?.element);
 
   let overlay: Overlay;
   let selectedFid: string | number = null;
@@ -28,11 +28,12 @@ export async function addSelect(
 
   if (tooltip) {
     overlay = new Overlay({
-      element: tooltip,
       position: undefined,
       offset: [0, -30],
       positioning: "top-center",
       className: "eox-map-tooltip",
+      ...options.overlay,
+      element: EOxMap.querySelector(options.overlay.element),
     });
     map.addOverlay(overlay);
   }
@@ -105,8 +106,8 @@ export async function addSelect(
 
         if (overlay) {
           overlay.setPosition(feature ? event.coordinate : null);
-          if (feature) {
-            tooltip.renderContent(feature.getProperties());
+          if (feature && (<EOxMapTooltip>tooltip).renderContent) {
+            (<EOxMapTooltip>tooltip).renderContent(feature.getProperties());
           }
         }
 
diff --git a/elements/map/test/hoverInteraction.cy.ts b/elements/map/test/hoverInteraction.cy.ts
index 3c91ff5ee..ad1c87c68 100644
--- a/elements/map/test/hoverInteraction.cy.ts
+++ b/elements/map/test/hoverInteraction.cy.ts
@@ -27,7 +27,9 @@ describe("select interaction with hover", () => {
       eoxMap
         .addSelect("regions", {
           id: "selectInteraction",
-          tooltip: "eox-map-tooltip",
+          overlay: {
+            element: "eox-map-tooltip",
+          },
           condition: "pointermove",
           layer: {
             type: "Vector",