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

package/lib/map/feature-hover.ts

@@ -1,24 +1,22 @@
 import { GEOSPATIAL_SDK_PREFIX } from "./constants.js";
-import type Map from "ol/Map.js";
+import type OlMap 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 type 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 OlFeature from "ol/Feature.js";
+import type BaseLayer from "ol/layer/Base.js";
 import { unByKey } from "ol/Observable.js";
-
-const GEOJSON = new GeoJSON();
+import { readFeaturesAtPixel } from "./get-features.js";
 
 const hoverLayerKey = `${GEOSPATIAL_SDK_PREFIX}hover-layer`;
 const unsubscribeKey = `${GEOSPATIAL_SDK_PREFIX}hover-unsub`;
 
-export function initHoverLayer(map: Map) {
+export function initHoverLayer(map: OlMap) {
   if (map.get(hoverLayerKey)) {
     clearHoverLayer(map);
   }
@@ -30,6 +28,10 @@ export function initHoverLayer(map: Map) {
       useSpatialIndex: false,
     }),
     style: defaultHighlightStyle,
+    properties: {
+      [`${GEOSPATIAL_SDK_PREFIX}enable-hover`]: false,
+      [`${GEOSPATIAL_SDK_PREFIX}disable-click`]: true,
+    },
   });
   map.set(hoverLayerKey, hoverLayer);
   hoverLayer.setMap(map);
@@ -38,7 +40,7 @@ export function initHoverLayer(map: Map) {
   const originalCursorStyle = map.getTargetElement()?.style.cursor ?? "";
 
   const layerFilter = (layer: BaseLayer) =>
-    layer !== hoverLayer && layer.get(`${GEOSPATIAL_SDK_PREFIX}enable-hover`);
+    layer.get(`${GEOSPATIAL_SDK_PREFIX}enable-hover`);
 
   const unKey = map.on(
     "pointermove",
@@ -65,17 +67,50 @@ export function initHoverLayer(map: Map) {
       }
 
       // add hovered feature to the layer
-      const hovered = map.getFeaturesAtPixel(event.pixel, {
-        layerFilter,
-      }) as Feature[];
-      hoveredSource.addFeature(hovered[0]);
+      const hoveredFeatureResult: {
+        feature: OlFeature;
+        layer: BaseLayer;
+      }[] = [];
+      map.forEachFeatureAtPixel(
+        event.pixel,
+        (feature, layer) => {
+          if (feature instanceof OlFeature) {
+            hoveredFeatureResult.push({ feature, layer });
+            return true;
+          }
+        },
+        {
+          layerFilter,
+        },
+      );
+      if (hoveredFeatureResult.length === 0) {
+        return;
+      }
+
+      const { feature: firstFeature, layer: sourceLayer } =
+        hoveredFeatureResult[0];
+
+      // Get the hoverStyle from the source layer, fallback to defaultHighlightStyle
+      const hoverStyle =
+        sourceLayer.get(`${GEOSPATIAL_SDK_PREFIX}hover-style`) ??
+        defaultHighlightStyle;
+
+      // Apply the hover style to the layer (FlatStyleLike works on layers, not features)
+      hoverLayer.setStyle(hoverStyle);
+      hoveredSource.addFeature(firstFeature);
 
       // dispatch event if subscribed to
       if (map.get(FeaturesHoverEventType)) {
-        const { features } = GEOJSON.writeFeaturesObject(hovered);
+        const featuresByLayer = await readFeaturesAtPixel(
+          map,
+          event,
+          layerFilter,
+        );
+        const features = Array.from(featuresByLayer.values()).flat();
         map.dispatchEvent({
           type: FeaturesHoverEventType,
-          features: features ?? [],
+          features,
+          featuresByLayer,
         } as unknown as BaseEvent);
       }
     },
@@ -83,11 +118,11 @@ export function initHoverLayer(map: Map) {
   map.set(unsubscribeKey, unKey);
 }
 
-export function getHoverLayer(map: Map): VectorLayer<VectorSource> {
+export function getHoverLayer(map: OlMap): VectorLayer<VectorSource> {
   return map.get(hoverLayerKey) as VectorLayer<VectorSource>;
 }
 
-export function clearHoverLayer(map: Map) {
+export function clearHoverLayer(map: OlMap) {
   const hoverLayer = getHoverLayer(map);
   hoverLayer.setMap(null);
   hoverLayer.dispose();

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

@@ -3,7 +3,7 @@ import {
   getFeaturesFromWmsSources,
   getGFIUrl,
 } from "./get-features.js";
-import Map from "ol/Map.js";
+import OlMap from "ol/Map.js";
 import TileWMS from "ol/source/TileWMS.js";
 import TileLayer from "ol/layer/Tile.js";
 import OlFeature from "ol/Feature.js";
@@ -12,6 +12,7 @@ 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";
+import { toLonLat } from "ol/proj.js";
 
 const gfiResult = {
   type: "Feature",
@@ -30,7 +31,7 @@ function createWmsSource() {
     },
   });
 }
-function createMap(): Map {
+function createMap(): OlMap {
   const wmsLayer = new TileLayer({
     source: createWmsSource(),
   });
@@ -47,23 +48,27 @@ function createMap(): Map {
     resolution: 1,
     center: [0, 0],
   });
-  const map = new BaseObject() as Map;
+  const map = new BaseObject() as OlMap;
   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]) },
+    forEachFeatureAtPixel: {
+      value: vi.fn((pixel, callback) => {
+        callback(feature, vectorLayer);
+      }),
+    },
     getSize: { value: vi.fn(() => [800, 600]) },
   });
   return map;
 }
 
 describe("get features utils", () => {
-  let map: Map;
+  let map: OlMap;
   beforeEach(() => {
     map = createMap();
-    vi.spyOn(global, "fetch").mockImplementation(() =>
+    vi.spyOn(globalThis, "fetch").mockImplementation(() =>
       Promise.resolve({
         ok: true,
         json: () => Promise.resolve({ features: [gfiResult] }),
@@ -73,18 +78,25 @@ describe("get features utils", () => {
   });
 
   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",
-        },
-      ]);
+    it("returns a map of features by layer index", () => {
+      const featuresByLayerIndex = getFeaturesFromVectorSources(map, [0, 0]);
+      expect(featuresByLayerIndex).toEqual(
+        new Map([
+          [
+            1,
+            [
+              {
+                geometry: {
+                  coordinates: toLonLat([100, 200]),
+                  type: "Point",
+                },
+                properties: null,
+                type: "Feature",
+              },
+            ],
+          ],
+        ]),
+      );
     });
   });
   describe("getGFIUrl", () => {
@@ -102,8 +114,8 @@ describe("get features utils", () => {
   });
   describe("getFeaturesFromWmsSources", () => {
     it("queries the WMS sources", async () => {
-      const features = await getFeaturesFromWmsSources(map, [0, 0]);
-      expect(features).toEqual([gfiResult]);
+      const featuresByLayerIndex = await getFeaturesFromWmsSources(map, [0, 0]);
+      expect(featuresByLayerIndex).toEqual(new Map([[0, [gfiResult]]]));
     });
   });
 });

package/lib/map/get-features.ts

@@ -1,32 +1,52 @@
-import GeoJSON from "ol/format/GeoJSON.js";
-import Map from "ol/Map.js";
-import { Pixel } from "ol/pixel.js";
+import type { FeaturesByLayerIndex } from "@geospatial-sdk/core";
 import type { Feature, FeatureCollection } from "geojson";
-import OlFeature from "ol/Feature.js";
-import TileWMS from "ol/source/TileWMS.js";
-import ImageWMS from "ol/source/ImageWMS.js";
+import throttle from "lodash.throttle";
 import { Coordinate } from "ol/coordinate.js";
+import OlFeature from "ol/Feature.js";
+import GeoJSON from "ol/format/GeoJSON.js";
 import Layer from "ol/layer/Layer.js";
-import throttle from "lodash.throttle";
-import { MapBrowserEvent } from "ol";
+import OlMap from "ol/Map.js";
+import type MapBrowserEvent from "ol/MapBrowserEvent.js";
+import { Pixel } from "ol/pixel.js";
+import ImageWMS from "ol/source/ImageWMS.js";
+import TileWMS from "ol/source/TileWMS.js";
 
 const GEOJSON = new GeoJSON();
 
 export function getFeaturesFromVectorSources(
-  olMap: Map,
+  olMap: OlMap,
   pixel: Pixel,
-): Feature[] {
-  const olFeatures = olMap.getFeaturesAtPixel(pixel);
-  const { features } = GEOJSON.writeFeaturesObject(olFeatures as OlFeature[]);
-  if (!features) {
-    return [];
-  }
-  return features;
+  layerFilter?: (layer: Layer) => boolean,
+): FeaturesByLayerIndex {
+  const result = new Map<number, Feature[]>();
+  const layerArray = olMap.getLayers().getArray();
+  olMap.forEachFeatureAtPixel(
+    pixel,
+    (feature, layer) => {
+      // can happen for unmanaged layer (i.e. hover layer)
+      if (layer === null) {
+        return null;
+      }
+      const layerIndex = layerArray.indexOf(layer);
+      if (!result.has(layerIndex)) {
+        result.set(layerIndex, []);
+      }
+      result.get(layerIndex)!.push(
+        GEOJSON.writeFeatureObject(feature as OlFeature, {
+          featureProjection: olMap.getView().getProjection(),
+          dataProjection: "EPSG:4326",
+        }),
+      );
+      return null;
+    },
+    { layerFilter },
+  );
+  return result;
 }
 
 export function getGFIUrl(
   source: TileWMS | ImageWMS,
-  map: Map,
+  map: OlMap,
   coordinate: Coordinate,
 ): string | null {
   const view = map.getView();
@@ -41,36 +61,48 @@ export function getGFIUrl(
   );
 }
 
-export function getFeaturesFromWmsSources(
-  olMap: Map,
+export async function getFeaturesFromWmsSources(
+  olMap: OlMap,
   coordinate: Coordinate,
-): Promise<Feature[]> {
-  const wmsSources: (ImageWMS | TileWMS)[] = olMap
-    .getLayers()
-    .getArray()
-    .filter(
-      (layer): layer is Layer<ImageWMS | TileWMS> =>
-        layer instanceof Layer &&
-        (layer.getSource() instanceof TileWMS ||
-          layer.getSource() instanceof ImageWMS),
-    )
-    .map((layer) => layer.getSource()!);
+  layerFilter?: (layer: Layer) => boolean,
+): Promise<FeaturesByLayerIndex> {
+  const result = new Map<number, Feature[]>();
+  const layerArray = olMap.getLayers().getArray();
 
-  if (!wmsSources.length) {
-    return Promise.resolve([]);
+  const hasWms = layerArray.some((layer) => {
+    const source = layer instanceof Layer ? layer.getSource() : null;
+    return source instanceof TileWMS || source instanceof ImageWMS;
+  });
+  if (!hasWms) {
+    return result;
   }
 
-  const gfiUrls = wmsSources.reduce((urls, source) => {
+  const gfiPromises: (Promise<Feature[]> | null)[] = layerArray.map((layer) => {
+    if (!(layer instanceof Layer)) {
+      return null;
+    }
+    if (layerFilter && !layerFilter(layer)) {
+      return null;
+    }
+    const source = layer.getSource();
+    if (!(source instanceof TileWMS) && !(source instanceof ImageWMS)) {
+      return null;
+    }
     const gfiUrl = getGFIUrl(source, olMap, coordinate);
-    return gfiUrl ? [...urls, gfiUrl] : urls;
-  }, [] as string[]);
-  return Promise.all(
-    gfiUrls.map((url) =>
-      fetch(url)
-        .then((response) => response.json())
-        .then((collection: FeatureCollection) => collection.features),
-    ),
-  ).then((features) => features.flat());
+    return gfiUrl
+      ? fetch(gfiUrl)
+          .then((response) => response.json())
+          .then((collection: FeatureCollection) => collection.features)
+      : null;
+  });
+
+  const responses = await Promise.all(gfiPromises);
+  responses.forEach((features, index) => {
+    if (features !== null && features.length > 0) {
+      result.set(index, features);
+    }
+  });
+  return result;
 }
 
 const getFeaturesFromWmsSourcesThrottled = throttle(
@@ -79,11 +111,16 @@ const getFeaturesFromWmsSourcesThrottled = throttle(
 );
 
 export async function readFeaturesAtPixel(
-  map: Map,
+  map: OlMap,
   event: MapBrowserEvent<PointerEvent>,
-) {
-  return [
-    ...getFeaturesFromVectorSources(map, event.pixel),
-    ...(await getFeaturesFromWmsSourcesThrottled(map, event.coordinate)),
-  ];
+  layerFilter?: (layer: Layer) => boolean,
+): Promise<FeaturesByLayerIndex> {
+  return new Map([
+    ...getFeaturesFromVectorSources(map, event.pixel, layerFilter),
+    ...(await getFeaturesFromWmsSourcesThrottled(
+      map,
+      event.coordinate,
+      layerFilter,
+    )),
+  ]);
 }

package/lib/map/handle-errors.test.ts

@@ -9,7 +9,7 @@ import TileLayer from "ol/layer/Tile.js";
 import VectorLayer from "ol/layer/Vector.js";
 import { EndpointError } from "@camptocamp/ogc-client";
 
-global.URL.createObjectURL = vi.fn(() => "blob:http://example.com/blob");
+globalThis.URL.createObjectURL = vi.fn(() => "blob:http://example.com/blob");
 
 const mockBlob = new Blob();
 const RESPONSE_OK = {
@@ -19,10 +19,10 @@ const RESPONSE_OK = {
 const RESPONSE_ERROR = {
   status: 404,
 };
-global.fetch = vi.fn().mockImplementation((url: string) => {
+globalThis.fetch = vi.fn().mockImplementation((url: string) => {
   return url.includes("error")
-    ? Promise.reject(RESPONSE_ERROR as Response)
-    : Promise.resolve(RESPONSE_OK as Response);
+    ? Promise.reject(RESPONSE_ERROR)
+    : Promise.resolve(RESPONSE_OK);
 });
 
 describe("handle-errors", () => {

package/lib/map/layer-update.test.ts

@@ -116,7 +116,7 @@ describe("Layer update utils", () => {
       expect(olLayer.set).toHaveBeenCalledWith("label", "Test Layer");
     });
 
-    it("applies properties specific to vector layers without recreating them", async () => {
+    it("enable interaction-related props without recreating them", async () => {
       // mocking a vector layer
       (olLayer as VectorLayer).setStyle = vi.fn();
 
@@ -126,6 +126,7 @@ describe("Layer update utils", () => {
           "circle-fill-color": "blue",
         },
         enableHover: true,
+        disableClick: true,
       };
       const prevLayerModel = SAMPLE_LAYER3;
       updateLayerProperties(layerModel, olLayer, prevLayerModel);
@@ -136,6 +137,10 @@ describe("Layer update utils", () => {
         "--geospatial-sdk-enable-hover",
         true,
       );
+      expect(olLayer.set).toHaveBeenCalledWith(
+        "--geospatial-sdk-disable-click",
+        true,
+      );
     });
   });
 });

package/lib/map/layer-update.ts

@@ -6,6 +6,7 @@ import {
 import Layer from "ol/layer/Layer.js";
 import { GEOSPATIAL_SDK_PREFIX } from "./constants.js";
 import VectorLayer from "ol/layer/Vector.js";
+import type VectorSource from "ol/source/Vector.js";
 
 const UPDATABLE_PROPERTIES: (
   | keyof MapContextBaseLayer
@@ -18,7 +19,9 @@ const UPDATABLE_PROPERTIES: (
   "extras",
   "version",
   "enableHover",
+  "disableClick",
   "style",
+  "hoverStyle",
   // TODO (when available) "zIndex"
 ];
 
@@ -85,11 +88,23 @@ export function updateLayerProperties(
       (layerModel as MapContextLayerVector).enableHover,
     );
   }
+  if (shouldApplyProperty("hoverStyle" as keyof MapContextLayer)) {
+    olLayer.set(
+      `${GEOSPATIAL_SDK_PREFIX}hover-style`,
+      (layerModel as MapContextLayerVector).hoverStyle,
+    );
+  }
+  if (shouldApplyProperty("disableClick" as keyof MapContextLayer)) {
+    olLayer.set(
+      `${GEOSPATIAL_SDK_PREFIX}disable-click`,
+      layerModel.disableClick,
+    );
+  }
   if (
     shouldApplyProperty("style" as keyof MapContextLayer) &&
     "setStyle" in olLayer
   ) {
-    (olLayer as VectorLayer).setStyle(
+    (olLayer as VectorLayer<VectorSource>).setStyle(
       (layerModel as MapContextLayerVector).style,
     );
   }

package/lib/map/register-events.test.ts

@@ -1,89 +1,104 @@
-import Map from "ol/Map.js";
+import OlMap from "ol/Map.js";
 import { Mock } from "vitest";
 import { listen } from "./register-events.js";
 import { MapBrowserEvent, Object as BaseObject } from "ol";
 import View from "ol/View.js";
 import { toLonLat } from "ol/proj.js";
-import Point from "ol/geom/Point.js";
-import OlFeature from "ol/Feature.js";
 import { FeaturesHoverEventType } from "@geospatial-sdk/core";
 import BaseEvent from "ol/events/Event.js";
 
 vi.mock("./get-features.js", () => ({
   readFeaturesAtPixel() {
-    return [
-      {
-        geometry: {
-          coordinates: [100, 200],
-          type: "Point",
-        },
-        properties: null,
-        type: "Feature",
-      },
-      {
-        geometry: null,
-        properties: {
-          density: 123,
-        },
-        type: "Feature",
-      },
-    ];
+    return Promise.resolve(
+      new Map([
+        [
+          0,
+          [
+            {
+              geometry: {
+                coordinates: [100, 200],
+                type: "Point",
+              },
+              properties: null,
+              type: "Feature",
+            },
+          ],
+        ],
+        [
+          1,
+          [
+            {
+              geometry: null,
+              properties: {
+                density: 123,
+              },
+              type: "Feature",
+            },
+          ],
+        ],
+      ]),
+    );
   },
 }));
 
+const featureA = {
+  geometry: {
+    coordinates: [100, 200],
+    type: "Point",
+  },
+  properties: null,
+  type: "Feature",
+};
+const featureB = {
+  geometry: null,
+  properties: {
+    density: 123,
+  },
+  type: "Feature",
+};
+
 const EXPECTED_MAP_EXTENT_EPSG4326 = [
   -0.0035932611364780857, -0.0026949458513598756, 0.0035932611364780857,
   0.0026949458513740865,
 ];
 
-function createMap(): Map {
-  const feature = new OlFeature({
-    geometry: new Point([100, 200]),
-  });
+function createMap(): OlMap {
   const view = new View({
     projection: "EPSG:3857",
     resolution: 1,
     center: [0, 0],
   });
-  const map = new BaseObject() as Map;
+  const map = new BaseObject() as OlMap;
   Object.defineProperties(map, {
     getView: { value: vi.fn(() => view) },
     getEventPixel: { value: vi.fn(() => [10, 10]) },
     getCoordinateFromPixel: { value: vi.fn(() => [123, 123]) },
-    getFeaturesAtPixel: { value: vi.fn(() => [feature]) },
     getSize: { value: vi.fn(() => [800, 600]) },
   });
   // simulate hover feature initialization
   map.on("pointermove", () => {
     map.dispatchEvent({
       type: FeaturesHoverEventType,
-      features: [
-        {
-          geometry: null,
-          properties: {
-            density: 123,
-          },
-          type: "Feature",
-        },
-      ],
+      features: [featureB],
+      featuresByLayer: new Map([[0, [featureB]]]),
     } as unknown as BaseEvent);
   });
   return map;
 }
-function createMapEvent(map: Map, type: string) {
+function createMapEvent(map: OlMap, type: string) {
   return new MapBrowserEvent(
     type,
     map,
     new MouseEvent(type, {
       clientX: 10,
       clientY: 10,
-    }),
+    }) as PointerEvent,
     false,
   );
 }
 
 describe("event registration", () => {
-  let map: Map;
+  let map: OlMap;
   beforeEach(() => {
     map = createMap();
     vi.useFakeTimers();
@@ -99,15 +114,8 @@ describe("event registration", () => {
     it("registers the event on the map", () => {
       expect(callback).toHaveBeenCalledWith({
         type: "features-hover",
-        features: [
-          {
-            geometry: null,
-            properties: {
-              density: 123,
-            },
-            type: "Feature",
-          },
-        ],
+        features: [featureB],
+        featuresByLayer: new Map([[0, [featureB]]]),
         target: expect.anything(),
       });
     });
@@ -123,23 +131,11 @@ describe("event registration", () => {
     it("registers the event on the map", () => {
       expect(callback).toHaveBeenCalledWith({
         type: "features-click",
-        features: [
-          {
-            geometry: {
-              coordinates: [100, 200],
-              type: "Point",
-            },
-            properties: null,
-            type: "Feature",
-          },
-          {
-            geometry: null,
-            properties: {
-              density: 123,
-            },
-            type: "Feature",
-          },
-        ],
+        features: [featureA, featureB],
+        featuresByLayer: new Map([
+          [0, [featureA]],
+          [1, [featureB]],
+        ]),
         target: expect.anything(),
       });
     });