feat: add hover interaction pointer cursor

elements/map/package.json

@@ -7,10 +7,12 @@
     "flatgeobuf": "^3.35.0",
     "lit": "^3.0.2",
     "ol": "^10.2.0",
+    "ol-ext": "^4.0.24",
     "ol-stac": "^1.0.0-beta.10",
     "proj4": "^2.9.2"
   },
   "devDependencies": {
+    "@types/ol-ext": "github:siedlerchr/types-ol-ext#a76d90780322f405e6fd4ac1756cb7de89ac387b",
     "@types/proj4": "^2.5.4",
     "vite": "^5.0.2"
   },

elements/map/src/helpers/select.js

@@ -5,6 +5,7 @@ import Feature from "ol/Feature";
 import RenderFeature from "ol/render/Feature";
 import VectorLayer from "ol/layer/Vector";
 import { createEmpty, extend, isEmpty } from "ol/extent";
+import Hover from "ol-ext/interaction/Hover";
 
 /**
  * @typedef {import('../main').EOxMap} EOxMap
@@ -215,6 +216,23 @@ export class EOxSelectInteraction {
       }
     };
     eoxMap.map.getLayerGroup().on("change", changeLayerListener);
+
+    /**
+     * Sets up the ol-ext Hover interaction
+     * for the selection layer
+     * and passes the `options.hover` object
+     */
+    this.hover = new Hover({
+      ...options.hover,
+      layers: [this.selectLayer],
+    });
+    this.hover.setActive(this.active);
+    this.eoxMap.map.addInteraction(this.hover);
+    if (options.condition === "click") {
+      this.hover.on("enter", () => {
+        this.hover.setCursor("pointer");
+      });
+    }
   }
 
   /**
@@ -223,6 +241,7 @@ export class EOxSelectInteraction {
    */
   setActive(active) {
     this.active = active;
+    this.hover?.setActive(active);
   }
 
   /**

elements/map/types.ts

@@ -113,6 +113,7 @@ export type SelectOptions = Omit<
   modify?: boolean;
   type?: string;
   geometryFunction?: import("ol/interaction/Draw").GeometryFunction;
+  hover?: import("ol-ext/interaction/Hover").Options;
 };
 
 export type ControlOptions = import("ol/control/Control").Options;