feat: allow applying the tooltip to a specific layer

elements/map/src/components/tooltip.js

@@ -8,6 +8,7 @@ export class EOxMapTooltip extends LitElement {
   static get properties() {
     return {
       feature: { attribute: false, property: true, type: Object },
+      for: { attribute: "for", property: true, type: String },
       propertyTransform: { attribute: false, property: true, type: Function },
     };
   }
@@ -22,6 +23,15 @@ export class EOxMapTooltip extends LitElement {
      */
     this.feature = null;
 
+    /**
+     * The id of the layer the tooltip should apply to (optional).
+     * If none provided, the tooltip renders for the topmost interaction
+     * layer by default.
+     *
+     * @type string
+     */
+    this.for = null;
+
     /**
      * A function to transform properties before rendering.
      *

elements/map/src/helpers/select.js

@@ -49,6 +49,18 @@ export class EOxSelectInteraction {
         options.overlay?.element;
 
       if (this.tooltip) {
+        if (this.tooltip.getAttribute("for")) {
+          setTimeout(() => {
+            Object.keys(this.eoxMap.selectInteractions).forEach((key) => {
+              if (
+                this.eoxMap.selectInteractions[key].selectLayer.get("id") !==
+                this.tooltip.getAttribute("for")
+              ) {
+                this.eoxMap.selectInteractions[key].setActive(false);
+              }
+            });
+          });
+        }
         overlay = new Overlay({
           // @ts-expect-error - Type 'Element' is missing the following properties from type 'HTMLElement'
           element: this.tooltip,

elements/map/stories/map.stories.js

@@ -149,6 +149,9 @@ export const ClickSelect = ClickSelectStory;
  * This renders a list of all feature properties of the currently selected feature.
  * Note that if multiple interactions are registered (e.g. `pointermove` and `singleclick`),
  * the `pointermove` interaction will have higher priority for the tooltip.
+ *
+ * By setting the (optional) `for` attribute on `eox-map-tooltip` and passing a layer id, the interaction layer can be specified; if no `for` attribute is set,
+ * the tooltip renders for the topmost interaction layer by default.
  */
 export const Tooltip = TooltipStory;
 

elements/map/test/cases/hover/display-tooltip-for-layer.js

@@ -0,0 +1,72 @@
+import { html } from "lit";
+import ecoRegionsFixture from "../../fixtures/ecoregions.json";
+import hoverInteractionLayerFixture from "../../fixtures/hoverInteractionLayerId.json";
+import vectorLayerStyleJson from "../../fixtures/hoverInteraction.json";
+import { simulateEvent } from "../../utils/events";
+
+/**
+ * Tests to display tooltip on hover
+ */
+const displayTooltipForLayer = () => {
+  cy.intercept("https://openlayers.org/data/vector/ecoregions.json", (req) => {
+    req.reply(ecoRegionsFixture);
+  });
+  cy.intercept("https://foo.bar/baz.json", (req) => {
+    req.reply(hoverInteractionLayerFixture);
+  });
+  cy.mount(
+    html`<eox-map
+      .layers=${[
+        ...vectorLayerStyleJson,
+        {
+          type: "Vector",
+          properties: {
+            id: "targetLayer",
+          },
+          source: {
+            type: "Vector",
+            format: "GeoJSON",
+            url: "https://foo.bar/baz.json",
+          },
+          interactions: [
+            {
+              type: "select",
+              options: {
+                id: "selectInteraction",
+                condition: "pointermove",
+              },
+            },
+          ],
+        },
+      ]}
+    >
+      <eox-map-tooltip for="targetLayer"></eox-map-tooltip>
+    </eox-map>`,
+  ).as("eox-map");
+  cy.get("eox-map").and(($el) => {
+    const eoxMap = $el[0];
+
+    eoxMap.map.on("loadend", () => {
+      simulateEvent(eoxMap.map, "pointermove", 120, -140);
+    });
+  });
+  cy.get("eox-map")
+    .shadow()
+    .within(() => {
+      cy.get("eox-map-tooltip").should("exist");
+      cy.get("eox-map-tooltip")
+        .shadow()
+        .within(() => {
+          cy.get("ul").should("exist");
+          cy.get("ul").children().should("have.length", 2);
+          cy.get("ul>li").and(($lis) => {
+            assert(
+              $lis[1].textContent.includes("targetLayer"),
+              "includes property from targetLayer",
+            );
+          });
+        });
+    });
+};
+
+export default displayTooltipForLayer;

elements/map/test/cases/hover/index.js

@@ -4,3 +4,4 @@ export { default as addSelectInteraction } from "./add-select-interaction";
 export { default as selectAfterReArrangingLayers } from "./select-after-re-arranging-layers";
 export { default as displayTooltip } from "./display-tooltip";
 export { default as displayTooltipOneLayerVisible } from "./display-tooltip-one-layer-visible";
+export { default as displayTooltipForLayer } from "./display-tooltip-for-layer";

elements/map/test/fixtures/hoverInteractionLayerId.json

@@ -0,0 +1,39 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {
+        "fromLayer": "targetLayer"
+      },
+      "id": 1,
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              49.37329931631518,
+              75.25339585285323
+            ],
+            [
+              30.792756530335794,
+              13.182720975583408
+            ],
+            [
+              131.51801085877827,
+              13.182720975583408
+            ],
+            [
+              150.80216977046496,
+              67.37626215156416
+            ],
+            [
+              49.37329931631518,
+              75.25339585285323
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      }
+    }
+  ]
+}

elements/map/test/tooltip.cy.js

@@ -1,5 +1,9 @@
 import "../src/main";
-import { displayTooltip, displayTooltipOneLayerVisible } from "./cases/hover";
+import {
+  displayTooltip,
+  displayTooltipOneLayerVisible,
+  displayTooltipForLayer,
+} from "./cases/hover";
 
 /**
  * Test suite for the EOX Map to load Tooltip
@@ -15,4 +19,10 @@ describe("tooltip", () => {
    */
   it("displays a tooltip on hover when multiple layers are initialized and only one visible", () =>
     displayTooltipOneLayerVisible());
+
+  /**
+   * Test case to check if the tooltip is correctly rendered for a specific layer
+   * instead of default (topmost)
+   */
+  it("displays a tooltip for a specific layer", () => displayTooltipForLayer());
 });