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

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

@@ -0,0 +1,120 @@
+import {
+  getFeaturesFromVectorSources,
+  getFeaturesFromWmsSources,
+  getGFIUrl,
+} from "./get-features.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";
+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(): OlMap {
+  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 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]) },
+    forEachFeatureAtPixel: {
+      value: vi.fn((pixel, callback) => {
+        callback(feature, vectorLayer);
+      }),
+    },
+    getSize: { value: vi.fn(() => [800, 600]) },
+  });
+  return map;
+}
+
+describe("get features utils", () => {
+  let map: OlMap;
+  beforeEach(() => {
+    map = createMap();
+    vi.spyOn(globalThis, "fetch").mockImplementation(() =>
+      Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve({ features: [gfiResult] }),
+      } as Response),
+    );
+    vi.useFakeTimers();
+  });
+
+  describe("getFeaturesFromVectorSources", () => {
+    it("returns a map of features by layer index", () => {
+      const featuresByLayerIndex = getFeaturesFromVectorSources(map, [0, 0]);
+      expect(featuresByLayerIndex).toEqual(
+        new Map([
+          [
+            1,
+            [
+              {
+                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 featuresByLayerIndex = await getFeaturesFromWmsSources(map, [0, 0]);
+      expect(featuresByLayerIndex).toEqual(new Map([[0, [gfiResult]]]));
+    });
+  });
+});

package/lib/map/get-features.ts

@@ -0,0 +1,122 @@
+import GeoJSON from "ol/format/GeoJSON.js";
+import OlMap from "ol/Map.js";
+import { Pixel } from "ol/pixel.js";
+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 { Coordinate } from "ol/coordinate.js";
+import Layer from "ol/layer/Layer.js";
+import throttle from "lodash.throttle";
+import type MapBrowserEvent from "ol/MapBrowserEvent.js";
+import type { FeaturesByLayerIndex } from "@geospatial-sdk/core";
+
+const GEOJSON = new GeoJSON();
+
+export function getFeaturesFromVectorSources(
+  olMap: OlMap,
+  pixel: Pixel,
+  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));
+    },
+    { layerFilter },
+  );
+  return result;
+}
+
+export function getGFIUrl(
+  source: TileWMS | ImageWMS,
+  map: OlMap,
+  coordinate: Coordinate,
+): string | null {
+  const view = map.getView();
+  const projection = view.getProjection();
+  const resolution = view.getResolution() as number;
+  const params = {
+    ...source.getParams(),
+    INFO_FORMAT: "application/json",
+  };
+  return (
+    source.getFeatureInfoUrl(coordinate, resolution, projection, params) ?? null
+  );
+}
+
+export async function getFeaturesFromWmsSources(
+  olMap: OlMap,
+  coordinate: Coordinate,
+  layerFilter?: (layer: Layer) => boolean,
+): Promise<FeaturesByLayerIndex> {
+  const result = new Map<number, Feature[]>();
+  const layerArray = olMap.getLayers().getArray();
+
+  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 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
+      ? 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(
+  getFeaturesFromWmsSources,
+  250,
+);
+
+export async function readFeaturesAtPixel(
+  map: OlMap,
+  event: MapBrowserEvent<PointerEvent>,
+  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

@@ -5,12 +5,11 @@ import {
   handleTileError,
   tileLoadErrorCatchFunction,
 } from "./handle-errors.js";
-import { describe } from "node:test";
 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 = {
@@ -20,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/index.ts

@@ -3,7 +3,6 @@
  * @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/lib/map/layer-update.test.ts

@@ -5,8 +5,12 @@ import {
 import { MapContextLayer } from "@geospatial-sdk/core";
 import Layer from "ol/layer/Layer.js";
 import { Source } from "ol/source.js";
-import { SAMPLE_LAYER1 } from "@geospatial-sdk/core/fixtures/map-context.fixtures.js";
+import {
+  SAMPLE_LAYER1,
+  SAMPLE_LAYER3,
+} from "@geospatial-sdk/core/fixtures/map-context.fixtures.js";
 import VectorSource from "ol/source/Vector.js";
+import VectorLayer from "ol/layer/Vector.js";
 
 describe("Layer update utils", () => {
   describe("canDoIncrementalUpdate", () => {
@@ -111,5 +115,27 @@ describe("Layer update utils", () => {
       expect(olSource.setAttributions).toHaveBeenCalledWith("hello world");
       expect(olLayer.set).toHaveBeenCalledWith("label", "Test Layer");
     });
+
+    it("applies properties specific to vector layers without recreating them", async () => {
+      // mocking a vector layer
+      (olLayer as VectorLayer).setStyle = vi.fn();
+
+      const layerModel = {
+        ...SAMPLE_LAYER3,
+        style: {
+          "circle-fill-color": "blue",
+        },
+        enableHover: true,
+      };
+      const prevLayerModel = SAMPLE_LAYER3;
+      updateLayerProperties(layerModel, olLayer, prevLayerModel);
+      expect((olLayer as VectorLayer).setStyle).toHaveBeenCalledWith(
+        layerModel.style,
+      );
+      expect(olLayer.set).toHaveBeenCalledWith(
+        "--geospatial-sdk-enable-hover",
+        true,
+      );
+    });
   });
 });

package/lib/map/layer-update.ts

@@ -1,14 +1,24 @@
 import { getHash, MapContextLayer } from "@geospatial-sdk/core";
-import { MapContextBaseLayer } from "@geospatial-sdk/core/lib/model/map-context.js";
+import {
+  MapContextBaseLayer,
+  MapContextLayerVector,
+} from "@geospatial-sdk/core/lib/model/map-context.js";
 import Layer from "ol/layer/Layer.js";
+import { GEOSPATIAL_SDK_PREFIX } from "./constants.js";
+import VectorLayer from "ol/layer/Vector.js";
 
-const UPDATABLE_PROPERTIES: (keyof MapContextBaseLayer)[] = [
+const UPDATABLE_PROPERTIES: (
+  | keyof MapContextBaseLayer
+  | keyof MapContextLayerVector
+)[] = [
   "opacity",
   "visibility",
   "label",
   "attributions",
   "extras",
   "version",
+  "enableHover",
+  "style",
   // TODO (when available) "zIndex"
 ];
 
@@ -43,7 +53,7 @@ export function updateLayerProperties(
   olLayer: Layer,
   previousLayerModel?: MapContextLayer,
 ) {
-  function shouldApplyProperty(prop: keyof MapContextBaseLayer): boolean {
+  function shouldApplyProperty(prop: keyof MapContextLayer): boolean {
     // if the new layer model does not define that property, skip it
     // (setting or resetting it to a default value would be counter-intuitive)
     if (!(prop in layerModel) || typeof layerModel[prop] === "undefined")
@@ -69,5 +79,19 @@ export function updateLayerProperties(
   if (shouldApplyProperty("label")) {
     olLayer.set("label", layerModel.label);
   }
+  if (shouldApplyProperty("enableHover" as keyof MapContextLayer)) {
+    olLayer.set(
+      `${GEOSPATIAL_SDK_PREFIX}enable-hover`,
+      (layerModel as MapContextLayerVector).enableHover,
+    );
+  }
+  if (
+    shouldApplyProperty("style" as keyof MapContextLayer) &&
+    "setStyle" in olLayer
+  ) {
+    (olLayer as VectorLayer).setStyle(
+      (layerModel as MapContextLayerVector).style,
+    );
+  }
   // TODO: z-index
 }

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

@@ -1,129 +1,108 @@
-import Map from "ol/Map.js";
+import OlMap from "ol/Map.js";
 import { Mock } from "vitest";
-import {
-  getFeaturesFromVectorSources,
-  getFeaturesFromWmsSources,
-  getGFIUrl,
-  listen,
-} from "./register-events.js";
-import { Collection, MapBrowserEvent, Object as BaseObject } from "ol";
+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 TileWMS from "ol/source/TileWMS.js";
-import VectorSource from "ol/source/Vector.js";
-import VectorLayer from "ol/layer/Vector.js";
-import Point from "ol/geom/Point.js";
-import TileLayer from "ol/layer/Tile.js";
-import OlFeature from "ol/Feature.js";
+import { FeaturesHoverEventType } from "@geospatial-sdk/core";
+import BaseEvent from "ol/events/Event.js";
 
-const EXPECTED_MAP_EXTENT_EPSG4326 = [
-  -0.0035932611364780857, -0.0026949458513598756, 0.0035932611364780857,
-  0.0026949458513740865,
-];
+vi.mock("./get-features.js", () => ({
+  readFeaturesAtPixel() {
+    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 gfiResult = {
+const featureA = {
+  geometry: {
+    coordinates: [100, 200],
+    type: "Point",
+  },
+  properties: null,
   type: "Feature",
+};
+const featureB = {
+  geometry: null,
   properties: {
     density: 123,
   },
-  geometry: null,
+  type: "Feature",
 };
-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 EXPECTED_MAP_EXTENT_EPSG4326 = [
+  -0.0035932611364780857, -0.0026949458513598756, 0.0035932611364780857,
+  0.0026949458513740865,
+];
+
+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) },
-    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]) },
   });
+  // simulate hover feature initialization
+  map.on("pointermove", () => {
+    map.dispatchEvent({
+      type: FeaturesHoverEventType,
+      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.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]);
-    });
-  });
   describe("features hover event", () => {
     let callback: Mock;
     beforeEach(async () => {
@@ -135,23 +114,8 @@ describe("event registration", () => {
     it("registers the event on the map", () => {
       expect(callback).toHaveBeenCalledWith({
         type: "features-hover",
-        features: [
-          {
-            geometry: {
-              coordinates: [100, 200],
-              type: "Point",
-            },
-            properties: null,
-            type: "Feature",
-          },
-          {
-            geometry: null,
-            properties: {
-              density: 123,
-            },
-            type: "Feature",
-          },
-        ],
+        features: [featureB],
+        featuresByLayer: new Map([[0, [featureB]]]),
         target: expect.anything(),
       });
     });
@@ -167,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(),
       });
     });