@geospatial-sdk/openlayers 0.0.5-dev.50 → 0.0.5-dev.51

package/dist/map/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const GEOSPATIAL_SDK_PREFIX = "--geospatial-sdk-";
+//# sourceMappingURL=constants.d.ts.map

package/dist/map/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../lib/map/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,qBAAqB,sBAAsB,CAAC"}

package/dist/map/constants.js

@@ -0,0 +1 @@
+export const GEOSPATIAL_SDK_PREFIX = "--geospatial-sdk-";

package/dist/map/create-map.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-map.d.ts","sourceRoot":"","sources":["../../lib/map/create-map.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,eAAe,EACf,cAAc,EAEf,MAAM,sBAAsB,CAAC;AAC9B,OAAO,GAAG,MAAM,WAAW,CAAC;AAC5B,OAAO,IAAI,MAAM,YAAY,CAAC;AAC9B,OAAO,KAAK,MAAM,mBAAmB,CAAC;AAsCtC,wBAAsB,WAAW,CAAC,UAAU,EAAE,eAAe,GAAG,OAAO,CAAC,KAAK,CAAC,CAyN7E;AAED,wBAAgB,gBAAgB,CAC9B,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,eAAe,EAC3B,aAAa,EAAE,MAAM,EACrB,kBAAkB,EAAE,eAAe,QAgBpC;AAED,wBAAgB,UAAU,CAAC,SAAS,EAAE,cAAc,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,IAAI,CAkC3E;AAED;;;;GAIG;AACH,wBAAsB,oBAAoB,CACxC,OAAO,EAAE,UAAU,EACnB,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,GAC5B,OAAO,CAAC,GAAG,CAAC,CAKd;AAED;;;;GAIG;AACH,wBAAsB,mBAAmB,CACvC,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,UAAU,GAClB,OAAO,CAAC,GAAG,CAAC,CAQd"}
+{"version":3,"file":"create-map.d.ts","sourceRoot":"","sources":["../../lib/map/create-map.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EACV,eAAe,EACf,cAAc,EAEf,MAAM,sBAAsB,CAAC;AAC9B,OAAO,GAAG,MAAM,WAAW,CAAC;AAC5B,OAAO,IAAI,MAAM,YAAY,CAAC;AAC9B,OAAO,KAAK,MAAM,mBAAmB,CAAC;AAsCtC,wBAAsB,WAAW,CAAC,UAAU,EAAE,eAAe,GAAG,OAAO,CAAC,KAAK,CAAC,CAyN7E;AAED,wBAAgB,gBAAgB,CAC9B,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,eAAe,EAC3B,aAAa,EAAE,MAAM,EACrB,kBAAkB,EAAE,eAAe,QAgBpC;AAED,wBAAgB,UAAU,CAAC,SAAS,EAAE,cAAc,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,IAAI,CAkC3E;AAED;;;;GAIG;AACH,wBAAsB,oBAAoB,CACxC,OAAO,EAAE,UAAU,EACnB,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,GAC5B,OAAO,CAAC,GAAG,CAAC,CAKd;AAED;;;;GAIG;AACH,wBAAsB,mBAAmB,CACvC,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,UAAU,GAClB,OAAO,CAAC,GAAG,CAAC,CASd"}

package/dist/map/create-map.js

@@ -1,4 +1,4 @@
-import { removeSearchParams, } from "@geospatial-sdk/core";
+import { defaultStyle, removeSearchParams, } from "@geospatial-sdk/core";
 import Map from "ol/Map.js";
 import View from "ol/View.js";
 import TileLayer from "ol/layer/Tile.js";
@@ -9,7 +9,6 @@ import VectorSource from "ol/source/Vector.js";
 import GeoJSON from "ol/format/GeoJSON.js";
 import { fromLonLat, transformExtent } from "ol/proj.js";
 import { bbox as bboxStrategy } from "ol/loadingstrategy.js";
-import { defaultStyle } from "./styles.js";
 import VectorTileLayer from "ol/layer/VectorTile.js";
 import OGCMapTile from "ol/source/OGCMapTile.js";
 import OGCVectorTile from "ol/source/OGCVectorTile.js";
@@ -20,6 +19,7 @@ import { MapboxVectorLayer } from "ol-mapbox-style";
 import { handleEndpointError, tileLoadErrorCatchFunction, } from "./handle-errors.js";
 import VectorTile from "ol/source/VectorTile.js";
 import { canDoIncrementalUpdate, updateLayerProperties, } from "./layer-update.js";
+import { initHoverLayer } from "./feature-hover.js";
 const GEOJSON = new GeoJSON();
 const WFS_MAX_FEATURES = 10000;
 export async function createLayer(layerModel) {
@@ -291,5 +291,6 @@ export async function resetMapFromContext(map, context) {
         const layer = await createLayer(layerModel);
         map.addLayer(layer);
     }
+    initHoverLayer(map);
     return map;
 }

package/dist/map/feature-hover.d.ts

@@ -0,0 +1,7 @@
+import type Map from "ol/Map.js";
+import VectorLayer from "ol/layer/Vector.js";
+import VectorSource from "ol/source/Vector.js";
+export declare function initHoverLayer(map: Map): void;
+export declare function getHoverLayer(map: Map): VectorLayer<VectorSource>;
+export declare function clearHoverLayer(map: Map): void;
+//# sourceMappingURL=feature-hover.d.ts.map

package/dist/map/feature-hover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature-hover.d.ts","sourceRoot":"","sources":["../../lib/map/feature-hover.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,GAAG,MAAM,WAAW,CAAC;AACjC,OAAO,WAAW,MAAM,oBAAoB,CAAC;AAC7C,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAiB/C,wBAAgB,cAAc,CAAC,GAAG,EAAE,GAAG,QA+DtC;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,GAAG,GAAG,WAAW,CAAC,YAAY,CAAC,CAEjE;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,GAAG,QAMvC"}

package/dist/map/feature-hover.js

@@ -0,0 +1,71 @@
+import { GEOSPATIAL_SDK_PREFIX } from "./constants.js";
+import VectorLayer from "ol/layer/Vector.js";
+import VectorSource from "ol/source/Vector.js";
+import { defaultHighlightStyle, FeaturesHoverEventType, } from "@geospatial-sdk/core";
+import GeoJSON from "ol/format/GeoJSON.js";
+import { unByKey } from "ol/Observable.js";
+const GEOJSON = new GeoJSON();
+const hoverLayerKey = `${GEOSPATIAL_SDK_PREFIX}hover-layer`;
+const unsubscribeKey = `${GEOSPATIAL_SDK_PREFIX}hover-unsub`;
+export function initHoverLayer(map) {
+    if (map.get(hoverLayerKey)) {
+        clearHoverLayer(map);
+    }
+    // create layer & add on top of everything else
+    const hoverLayer = new VectorLayer({
+        source: new VectorSource({
+            features: [],
+            useSpatialIndex: false,
+        }),
+        style: defaultHighlightStyle,
+    });
+    map.set(hoverLayerKey, hoverLayer);
+    hoverLayer.setMap(map);
+    // store original cursor style in order to change it later
+    const originalCursorStyle = map.getTargetElement()?.style.cursor ?? "";
+    const layerFilter = (layer) => layer !== hoverLayer && layer.get(`${GEOSPATIAL_SDK_PREFIX}enable-hover`);
+    const unKey = map.on("pointermove", async (event) => {
+        // skip hit detection if the view is moving as it can have an impact on performance
+        if (map.getView().getInteracting() || map.getView().getAnimating()) {
+            return;
+        }
+        // change cursor if above a feature
+        const hasFeature = map.hasFeatureAtPixel(event.pixel, {
+            layerFilter,
+        });
+        if (map.getTargetElement()) {
+            map.getTargetElement().style.cursor = hasFeature
+                ? "pointer"
+                : originalCursorStyle;
+        }
+        const hoveredSource = hoverLayer.getSource();
+        hoveredSource.clear(true);
+        if (!hasFeature) {
+            return;
+        }
+        // add hovered feature to the layer
+        const hovered = map.getFeaturesAtPixel(event.pixel, {
+            layerFilter,
+        });
+        hoveredSource.addFeature(hovered[0]);
+        // dispatch event if subscribed to
+        if (map.get(FeaturesHoverEventType)) {
+            const { features } = GEOJSON.writeFeaturesObject(hovered);
+            map.dispatchEvent({
+                type: FeaturesHoverEventType,
+                features: features ?? [],
+            });
+        }
+    });
+    map.set(unsubscribeKey, unKey);
+}
+export function getHoverLayer(map) {
+    return map.get(hoverLayerKey);
+}
+export function clearHoverLayer(map) {
+    const hoverLayer = getHoverLayer(map);
+    hoverLayer.setMap(null);
+    hoverLayer.dispose();
+    map.set(hoverLayerKey, null);
+    unByKey(map.get(unsubscribeKey));
+}

package/dist/map/get-features.d.ts

@@ -0,0 +1,12 @@
+import Map from "ol/Map.js";
+import { Pixel } from "ol/pixel.js";
+import type { Feature } from "geojson";
+import TileWMS from "ol/source/TileWMS.js";
+import ImageWMS from "ol/source/ImageWMS.js";
+import { Coordinate } from "ol/coordinate.js";
+import { MapBrowserEvent } from "ol";
+export declare function getFeaturesFromVectorSources(olMap: Map, pixel: Pixel): Feature[];
+export declare function getGFIUrl(source: TileWMS | ImageWMS, map: Map, coordinate: Coordinate): string | null;
+export declare function getFeaturesFromWmsSources(olMap: Map, coordinate: Coordinate): Promise<Feature[]>;
+export declare function readFeaturesAtPixel(map: Map, event: MapBrowserEvent<PointerEvent>): Promise<Feature<import("geojson").Geometry, import("geojson").GeoJsonProperties>[]>;
+//# sourceMappingURL=get-features.d.ts.map

package/dist/map/get-features.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-features.d.ts","sourceRoot":"","sources":["../../lib/map/get-features.ts"],"names":[],"mappings":"AACA,OAAO,GAAG,MAAM,WAAW,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,KAAK,EAAE,OAAO,EAAqB,MAAM,SAAS,CAAC;AAE1D,OAAO,OAAO,MAAM,sBAAsB,CAAC;AAC3C,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,OAAO,EAAE,eAAe,EAAE,MAAM,IAAI,CAAC;AAIrC,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,GAAG,EACV,KAAK,EAAE,KAAK,GACX,OAAO,EAAE,CAOX;AAED,wBAAgB,SAAS,CACvB,MAAM,EAAE,OAAO,GAAG,QAAQ,EAC1B,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,GACrB,MAAM,GAAG,IAAI,CAWf;AAED,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,GAAG,EACV,UAAU,EAAE,UAAU,GACrB,OAAO,CAAC,OAAO,EAAE,CAAC,CA2BpB;AAOD,wBAAsB,mBAAmB,CACvC,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,eAAe,CAAC,YAAY,CAAC,uFAMrC"}

package/dist/map/get-features.js

@@ -0,0 +1,50 @@
+import GeoJSON from "ol/format/GeoJSON.js";
+import TileWMS from "ol/source/TileWMS.js";
+import ImageWMS from "ol/source/ImageWMS.js";
+import Layer from "ol/layer/Layer.js";
+import throttle from "lodash.throttle";
+const GEOJSON = new GeoJSON();
+export function getFeaturesFromVectorSources(olMap, pixel) {
+    const olFeatures = olMap.getFeaturesAtPixel(pixel);
+    const { features } = GEOJSON.writeFeaturesObject(olFeatures);
+    if (!features) {
+        return [];
+    }
+    return features;
+}
+export function getGFIUrl(source, map, coordinate) {
+    const view = map.getView();
+    const projection = view.getProjection();
+    const resolution = view.getResolution();
+    const params = {
+        ...source.getParams(),
+        INFO_FORMAT: "application/json",
+    };
+    return (source.getFeatureInfoUrl(coordinate, resolution, projection, params) ?? null);
+}
+export function getFeaturesFromWmsSources(olMap, coordinate) {
+    const wmsSources = olMap
+        .getLayers()
+        .getArray()
+        .filter((layer) => layer instanceof Layer &&
+        (layer.getSource() instanceof TileWMS ||
+            layer.getSource() instanceof ImageWMS))
+        .map((layer) => layer.getSource());
+    if (!wmsSources.length) {
+        return Promise.resolve([]);
+    }
+    const gfiUrls = wmsSources.reduce((urls, source) => {
+        const gfiUrl = getGFIUrl(source, olMap, coordinate);
+        return gfiUrl ? [...urls, gfiUrl] : urls;
+    }, []);
+    return Promise.all(gfiUrls.map((url) => fetch(url)
+        .then((response) => response.json())
+        .then((collection) => collection.features))).then((features) => features.flat());
+}
+const getFeaturesFromWmsSourcesThrottled = throttle(getFeaturesFromWmsSources, 250);
+export async function readFeaturesAtPixel(map, event) {
+    return [
+        ...getFeaturesFromVectorSources(map, event.pixel),
+        ...(await getFeaturesFromWmsSourcesThrottled(map, event.coordinate)),
+    ];
+}

package/dist/map/index.d.ts

@@ -2,7 +2,6 @@
  * @hideGroups
  * @packageDocumentation
  */
-export * from "./styles.js";
 export { createMapFromContext, resetMapFromContext } from "./create-map.js";
 export { applyContextDiffToMap } from "./apply-context-diff.js";
 export { listen } from "./register-events.js";

package/dist/map/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/map/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAC5E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/map/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAC5E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/map/index.js

@@ -2,7 +2,6 @@
  * @hideGroups
  * @packageDocumentation
  */
-export * from "./styles.js";
 export { createMapFromContext, resetMapFromContext } from "./create-map.js";
 export { applyContextDiffToMap } from "./apply-context-diff.js";
 export { listen } from "./register-events.js";

package/dist/map/layer-update.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layer-update.d.ts","sourceRoot":"","sources":["../../lib/map/layer-update.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEhE,OAAO,KAAK,MAAM,mBAAmB,CAAC;AAYtC;;;;;;;;;GASG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAE,eAAe,GACxB,OAAO,CAIT;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CACnC,UAAU,EAAE,eAAe,EAC3B,OAAO,EAAE,KAAK,EACd,kBAAkB,CAAC,EAAE,eAAe,QA6BrC"}
+{"version":3,"file":"layer-update.d.ts","sourceRoot":"","sources":["../../lib/map/layer-update.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAKhE,OAAO,KAAK,MAAM,mBAAmB,CAAC;AAmBtC;;;;;;;;;GASG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAE,eAAe,GACxB,OAAO,CAIT;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CACnC,UAAU,EAAE,eAAe,EAC3B,OAAO,EAAE,KAAK,EACd,kBAAkB,CAAC,EAAE,eAAe,QA2CrC"}

package/dist/map/layer-update.js

@@ -1,4 +1,5 @@
 import { getHash } from "@geospatial-sdk/core";
+import { GEOSPATIAL_SDK_PREFIX } from "./constants.js";
 const UPDATABLE_PROPERTIES = [
     "opacity",
     "visibility",
@@ -6,6 +7,8 @@ const UPDATABLE_PROPERTIES = [
     "attributions",
     "extras",
     "version",
+    "enableHover",
+    "style",
     // TODO (when available) "zIndex"
 ];
 /**
@@ -55,5 +58,12 @@ export function updateLayerProperties(layerModel, olLayer, previousLayerModel) {
     if (shouldApplyProperty("label")) {
         olLayer.set("label", layerModel.label);
     }
+    if (shouldApplyProperty("enableHover")) {
+        olLayer.set(`${GEOSPATIAL_SDK_PREFIX}enable-hover`, layerModel.enableHover);
+    }
+    if (shouldApplyProperty("style") &&
+        "setStyle" in olLayer) {
+        olLayer.setStyle(layerModel.style);
+    }
     // TODO: z-index
 }

package/dist/map/register-events.d.ts

@@ -1,12 +1,4 @@
 import Map from "ol/Map.js";
 import { MapEventsByType } from "@geospatial-sdk/core";
-import { Coordinate } from "ol/coordinate.js";
-import TileWMS from "ol/source/TileWMS.js";
-import ImageWMS from "ol/source/ImageWMS.js";
-import { Pixel } from "ol/pixel.js";
-import type { Feature } from "geojson";
-export declare function getFeaturesFromVectorSources(olMap: Map, pixel: Pixel): Feature[];
-export declare function getGFIUrl(source: TileWMS | ImageWMS, map: Map, coordinate: Coordinate): string | null;
-export declare function getFeaturesFromWmsSources(olMap: Map, coordinate: Coordinate): Promise<Feature[]>;
 export declare function listen<T extends keyof MapEventsByType>(map: Map, eventType: T, callback: (event: MapEventsByType[T]) => void): void;
 //# sourceMappingURL=register-events.d.ts.map

package/dist/map/register-events.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"register-events.d.ts","sourceRoot":"","sources":["../../lib/map/register-events.ts"],"names":[],"mappings":"AAAA,OAAO,GAA4B,MAAM,WAAW,CAAC;AACrD,OAAO,EAKL,eAAe,EAEhB,MAAM,sBAAsB,CAAC;AAM9B,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,OAAO,MAAM,sBAAsB,CAAC;AAC3C,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAE7C,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,KAAK,EAAE,OAAO,EAAqB,MAAM,SAAS,CAAC;AAO1D,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,GAAG,EACV,KAAK,EAAE,KAAK,GACX,OAAO,EAAE,CAOX;AAED,wBAAgB,SAAS,CACvB,MAAM,EAAE,OAAO,GAAG,QAAQ,EAC1B,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,GACrB,MAAM,GAAG,IAAI,CAWf;AAED,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,GAAG,EACV,UAAU,EAAE,UAAU,GACrB,OAAO,CAAC,OAAO,EAAE,CAAC,CA2BpB;AA8ED,wBAAgB,MAAM,CAAC,CAAC,SAAS,MAAM,eAAe,EACpD,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAC,EACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,IAAI,QA0E9C"}
+{"version":3,"file":"register-events.d.ts","sourceRoot":"","sources":["../../lib/map/register-events.ts"],"names":[],"mappings":"AAAA,OAAO,GAA4B,MAAM,WAAW,CAAC;AACrD,OAAO,EAIL,eAAe,EAGhB,MAAM,sBAAsB,CAAC;AA4D9B,wBAAgB,MAAM,CAAC,CAAC,SAAS,MAAM,eAAe,EACpD,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAC,EACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,IAAI,QA0E9C"}

package/dist/map/register-events.js

@@ -1,56 +1,7 @@
 import { FeaturesClickEventType, FeaturesHoverEventType, MapClickEventType, MapExtentChangeEventType, SourceLoadErrorType, } from "@geospatial-sdk/core";
 import { toLonLat, transformExtent } from "ol/proj.js";
-import GeoJSON from "ol/format/GeoJSON.js";
-import TileWMS from "ol/source/TileWMS.js";
-import ImageWMS from "ol/source/ImageWMS.js";
-import Layer from "ol/layer/Layer.js";
-import throttle from "lodash.throttle";
 import { equals } from "ol/extent.js";
-const GEOJSON = new GeoJSON();
-export function getFeaturesFromVectorSources(olMap, pixel) {
-    const olFeatures = olMap.getFeaturesAtPixel(pixel);
-    const { features } = GEOJSON.writeFeaturesObject(olFeatures);
-    if (!features) {
-        return [];
-    }
-    return features;
-}
-export function getGFIUrl(source, map, coordinate) {
-    const view = map.getView();
-    const projection = view.getProjection();
-    const resolution = view.getResolution();
-    const params = {
-        ...source.getParams(),
-        INFO_FORMAT: "application/json",
-    };
-    return (source.getFeatureInfoUrl(coordinate, resolution, projection, params) ?? null);
-}
-export function getFeaturesFromWmsSources(olMap, coordinate) {
-    const wmsSources = olMap
-        .getLayers()
-        .getArray()
-        .filter((layer) => layer instanceof Layer &&
-        (layer.getSource() instanceof TileWMS ||
-            layer.getSource() instanceof ImageWMS))
-        .map((layer) => layer.getSource());
-    if (!wmsSources.length) {
-        return Promise.resolve([]);
-    }
-    const gfiUrls = wmsSources.reduce((urls, source) => {
-        const gfiUrl = getGFIUrl(source, olMap, coordinate);
-        return gfiUrl ? [...urls, gfiUrl] : urls;
-    }, []);
-    return Promise.all(gfiUrls.map((url) => fetch(url)
-        .then((response) => response.json())
-        .then((collection) => collection.features))).then((features) => features.flat());
-}
-const getFeaturesFromWmsSourcesThrottled = throttle(getFeaturesFromWmsSources, 250);
-async function readFeaturesAtPixel(map, event) {
-    return [
-        ...getFeaturesFromVectorSources(map, event.pixel),
-        ...(await getFeaturesFromWmsSourcesThrottled(map, event.coordinate)),
-    ];
-}
+import { readFeaturesAtPixel } from "./get-features.js";
 function registerFeatureClickEvent(map) {
     if (map.get(FeaturesClickEventType))
         return;
@@ -66,13 +17,6 @@ function registerFeatureClickEvent(map) {
 function registerFeatureHoverEvent(map) {
     if (map.get(FeaturesHoverEventType))
         return;
-    map.on("pointermove", async (event) => {
-        const features = await readFeaturesAtPixel(map, event);
-        map.dispatchEvent({
-            type: FeaturesHoverEventType,
-            features,
-        });
-    });
     map.set(FeaturesHoverEventType, true);
 }
 function registerMapExtentChangeEvent(map) {

package/lib/map/constants.ts

@@ -0,0 +1 @@
+export const GEOSPATIAL_SDK_PREFIX = "--geospatial-sdk-";

package/lib/map/create-map.test.ts

@@ -44,6 +44,7 @@ import ImageTile from "ol/ImageTile.js";
 import TileState from "ol/TileState.js";
 import VectorTileLayer from "ol/layer/VectorTile.js";
 import { FeatureUrlFunction } from "ol/featureloader.js";
+import { beforeEach } from "vitest";
 
 vi.mock("./handle-errors", async (importOriginal) => {
   const actual =
@@ -480,9 +481,10 @@ describe("MapContextService", () => {
     });
   });
   describe("#resetMapFromContext", () => {
-    const map = new Map({});
-    const mapContext = MAP_CTX_FIXTURE;
+    let map: Map;
     beforeEach(() => {
+      map = new Map({});
+      const mapContext = MAP_CTX_FIXTURE;
       resetMapFromContext(map, mapContext);
     });
     it("create a map", () => {
@@ -500,17 +502,18 @@ describe("MapContextService", () => {
     });
     describe("uses default fallback view", () => {
       let view: View;
-      const map = new Map({});
-      const mapContext: MapContext = {
-        view: null,
-        layers: [
-          MAP_CTX_LAYER_XYZ_FIXTURE,
-          MAP_CTX_LAYER_WMS_FIXTURE,
-          MAP_CTX_LAYER_GEOJSON_FIXTURE,
-        ],
-      };
-      beforeEach(() => {
-        resetMapFromContext(map, mapContext);
+      let map: Map;
+      beforeEach(async () => {
+        map = new Map({});
+        const mapContext: MapContext = {
+          view: null,
+          layers: [
+            MAP_CTX_LAYER_XYZ_FIXTURE,
+            MAP_CTX_LAYER_WMS_FIXTURE,
+            MAP_CTX_LAYER_GEOJSON_FIXTURE,
+          ],
+        };
+        await resetMapFromContext(map, mapContext);
       });
       it("create a map", () => {
         expect(map).toBeTruthy();

package/lib/map/create-map.ts

@@ -1,4 +1,5 @@
 import {
+  defaultStyle,
   MapContext,
   MapContextLayer,
   MapContextView,
@@ -18,7 +19,6 @@ import Geometry from "ol/geom/Geometry.js";
 import SimpleGeometry from "ol/geom/SimpleGeometry.js";
 import { fromLonLat, transformExtent } from "ol/proj.js";
 import { bbox as bboxStrategy } from "ol/loadingstrategy.js";
-import { defaultStyle } from "./styles.js";
 import VectorTileLayer from "ol/layer/VectorTile.js";
 import OGCMapTile from "ol/source/OGCMapTile.js";
 import OGCVectorTile from "ol/source/OGCVectorTile.js";
@@ -40,6 +40,7 @@ import {
   canDoIncrementalUpdate,
   updateLayerProperties,
 } from "./layer-update.js";
+import { initHoverLayer } from "./feature-hover.js";
 
 const GEOJSON = new GeoJSON();
 const WFS_MAX_FEATURES = 10000;
@@ -351,5 +352,6 @@ export async function resetMapFromContext(
     const layer = await createLayer(layerModel);
     map.addLayer(layer);
   }
+  initHoverLayer(map);
   return map;
 }

package/lib/map/feature-hover.ts

@@ -0,0 +1,96 @@
+import { GEOSPATIAL_SDK_PREFIX } from "./constants.js";
+import type Map from "ol/Map.js";
+import VectorLayer from "ol/layer/Vector.js";
+import VectorSource from "ol/source/Vector.js";
+import {
+  defaultHighlightStyle,
+  FeaturesHoverEventType,
+} from "@geospatial-sdk/core";
+import BaseEvent from "ol/events/Event.js";
+import { MapBrowserEvent } from "ol";
+import GeoJSON from "ol/format/GeoJSON.js";
+import Feature from "ol/Feature.js";
+import BaseLayer from "ol/layer/Base.js";
+import { unByKey } from "ol/Observable.js";
+
+const GEOJSON = new GeoJSON();
+
+const hoverLayerKey = `${GEOSPATIAL_SDK_PREFIX}hover-layer`;
+const unsubscribeKey = `${GEOSPATIAL_SDK_PREFIX}hover-unsub`;
+
+export function initHoverLayer(map: Map) {
+  if (map.get(hoverLayerKey)) {
+    clearHoverLayer(map);
+  }
+
+  // create layer & add on top of everything else
+  const hoverLayer = new VectorLayer({
+    source: new VectorSource({
+      features: [],
+      useSpatialIndex: false,
+    }),
+    style: defaultHighlightStyle,
+  });
+  map.set(hoverLayerKey, hoverLayer);
+  hoverLayer.setMap(map);
+
+  // store original cursor style in order to change it later
+  const originalCursorStyle = map.getTargetElement()?.style.cursor ?? "";
+
+  const layerFilter = (layer: BaseLayer) =>
+    layer !== hoverLayer && layer.get(`${GEOSPATIAL_SDK_PREFIX}enable-hover`);
+
+  const unKey = map.on(
+    "pointermove",
+    async (event: MapBrowserEvent<PointerEvent>) => {
+      // skip hit detection if the view is moving as it can have an impact on performance
+      if (map.getView().getInteracting() || map.getView().getAnimating()) {
+        return;
+      }
+
+      // change cursor if above a feature
+      const hasFeature = map.hasFeatureAtPixel(event.pixel, {
+        layerFilter,
+      });
+      if (map.getTargetElement()) {
+        map.getTargetElement().style.cursor = hasFeature
+          ? "pointer"
+          : originalCursorStyle;
+      }
+
+      const hoveredSource = hoverLayer.getSource() as VectorSource;
+      hoveredSource.clear(true);
+      if (!hasFeature) {
+        return;
+      }
+
+      // add hovered feature to the layer
+      const hovered = map.getFeaturesAtPixel(event.pixel, {
+        layerFilter,
+      }) as Feature[];
+      hoveredSource.addFeature(hovered[0]);
+
+      // dispatch event if subscribed to
+      if (map.get(FeaturesHoverEventType)) {
+        const { features } = GEOJSON.writeFeaturesObject(hovered);
+        map.dispatchEvent({
+          type: FeaturesHoverEventType,
+          features: features ?? [],
+        } as unknown as BaseEvent);
+      }
+    },
+  );
+  map.set(unsubscribeKey, unKey);
+}
+
+export function getHoverLayer(map: Map): VectorLayer<VectorSource> {
+  return map.get(hoverLayerKey) as VectorLayer<VectorSource>;
+}
+
+export function clearHoverLayer(map: Map) {
+  const hoverLayer = getHoverLayer(map);
+  hoverLayer.setMap(null);
+  hoverLayer.dispose();
+  map.set(hoverLayerKey, null);
+  unByKey(map.get(unsubscribeKey));
+}

package/lib/map/get-features.test.ts

@@ -0,0 +1,109 @@
+import {
+  getFeaturesFromVectorSources,
+  getFeaturesFromWmsSources,
+  getGFIUrl,
+} from "./get-features.js";
+import Map from "ol/Map.js";
+import TileWMS from "ol/source/TileWMS.js";
+import TileLayer from "ol/layer/Tile.js";
+import OlFeature from "ol/Feature.js";
+import Point from "ol/geom/Point.js";
+import VectorLayer from "ol/layer/Vector.js";
+import VectorSource from "ol/source/Vector.js";
+import View from "ol/View.js";
+import { Collection, Object as BaseObject } from "ol";
+
+const gfiResult = {
+  type: "Feature",
+  properties: {
+    density: 123,
+  },
+  geometry: null,
+};
+function createWmsSource() {
+  return new TileWMS({
+    url: "http://my.service.org/wms?SERVICE=WMS",
+    params: {
+      LAYERS: "layerName",
+      FORMAT: "image/png",
+      TRANSPARENT: true,
+    },
+  });
+}
+function createMap(): Map {
+  const wmsLayer = new TileLayer({
+    source: createWmsSource(),
+  });
+  const feature = new OlFeature({
+    geometry: new Point([100, 200]),
+  });
+  const vectorLayer = new VectorLayer({
+    source: new VectorSource({
+      features: [feature],
+    }),
+  });
+  const view = new View({
+    projection: "EPSG:3857",
+    resolution: 1,
+    center: [0, 0],
+  });
+  const map = new BaseObject() as Map;
+  Object.defineProperties(map, {
+    getView: { value: vi.fn(() => view) },
+    getLayers: { value: vi.fn(() => new Collection([wmsLayer, vectorLayer])) },
+    getEventPixel: { value: vi.fn(() => [10, 10]) },
+    getCoordinateFromPixel: { value: vi.fn(() => [123, 123]) },
+    getFeaturesAtPixel: { value: vi.fn(() => [feature]) },
+    getSize: { value: vi.fn(() => [800, 600]) },
+  });
+  return map;
+}
+
+describe("get features utils", () => {
+  let map: Map;
+  beforeEach(() => {
+    map = createMap();
+    vi.spyOn(global, "fetch").mockImplementation(() =>
+      Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve({ features: [gfiResult] }),
+      } as Response),
+    );
+    vi.useFakeTimers();
+  });
+
+  describe("getFeaturesFromVectorSources", () => {
+    it("returns an array of features", () => {
+      const features = getFeaturesFromVectorSources(map, [0, 0]);
+      expect(features).toEqual([
+        {
+          geometry: {
+            coordinates: [100, 200],
+            type: "Point",
+          },
+          properties: null,
+          type: "Feature",
+        },
+      ]);
+    });
+  });
+  describe("getGFIUrl", () => {
+    let url: string;
+    const coordinate = [-182932.49329334166, 6125319.813853541];
+    beforeEach(() => {
+      const wmsSource = createWmsSource();
+      url = getGFIUrl(wmsSource, map, coordinate) as string;
+    });
+    it("returns true", () => {
+      expect(url).toEqual(
+        "http://my.service.org/wms?SERVICE=WMS&REQUEST=GetFeatureInfo&QUERY_LAYERS=layerName&SERVICE=WMS&VERSION=1.3.0&FORMAT=image%2Fpng&STYLES=&TRANSPARENT=true&LAYERS=layerName&INFO_FORMAT=application%2Fjson&I=176&J=31&WIDTH=256&HEIGHT=256&CRS=EPSG%3A3857&BBOX=-183143.11977128312%2C6125051.950547744%2C-182837.37165814242%2C6125357.698660884",
+      );
+    });
+  });
+  describe("getFeaturesFromWmsSources", () => {
+    it("queries the WMS sources", async () => {
+      const features = await getFeaturesFromWmsSources(map, [0, 0]);
+      expect(features).toEqual([gfiResult]);
+    });
+  });
+});