feat: spread all overlay properties to overlay generation

EOX-A · Aug 31, 2023 · 0577728 · 0577728
1 parent 1396850
commit 0577728
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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",