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

package/lib/map/get-features.ts

@@ -0,0 +1,89 @@
+import GeoJSON from "ol/format/GeoJSON.js";
+import Map 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 { MapBrowserEvent } from "ol";
+
+const GEOJSON = new GeoJSON();
+
+export function getFeaturesFromVectorSources(
+  olMap: Map,
+  pixel: Pixel,
+): Feature[] {
+  const olFeatures = olMap.getFeaturesAtPixel(pixel);
+  const { features } = GEOJSON.writeFeaturesObject(olFeatures as OlFeature[]);
+  if (!features) {
+    return [];
+  }
+  return features;
+}
+
+export function getGFIUrl(
+  source: TileWMS | ImageWMS,
+  map: Map,
+  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 function getFeaturesFromWmsSources(
+  olMap: Map,
+  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()!);
+
+  if (!wmsSources.length) {
+    return Promise.resolve([]);
+  }
+
+  const gfiUrls = wmsSources.reduce((urls, source) => {
+    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());
+}
+
+const getFeaturesFromWmsSourcesThrottled = throttle(
+  getFeaturesFromWmsSources,
+  250,
+);
+
+export async function readFeaturesAtPixel(
+  map: Map,
+  event: MapBrowserEvent<PointerEvent>,
+) {
+  return [
+    ...getFeaturesFromVectorSources(map, event.pixel),
+    ...(await getFeaturesFromWmsSourcesThrottled(map, event.coordinate)),
+  ];
+}

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

@@ -5,7 +5,6 @@ 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";

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,55 +1,45 @@
 import Map 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";
+
+vi.mock("./get-features.js", () => ({
+  readFeaturesAtPixel() {
+    return [
+      {
+        geometry: {
+          coordinates: [100, 200],
+          type: "Point",
+        },
+        properties: null,
+        type: "Feature",
+      },
+      {
+        geometry: null,
+        properties: {
+          density: 123,
+        },
+        type: "Feature",
+      },
+    ];
+  },
+}));
 
 const EXPECTED_MAP_EXTENT_EPSG4326 = [
   -0.0035932611364780857, -0.0026949458513598756, 0.0035932611364780857,
   0.0026949458513740865,
 ];
 
-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,
@@ -58,12 +48,26 @@ function createMap(): Map {
   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]) },
   });
+  // simulate hover feature initialization
+  map.on("pointermove", () => {
+    map.dispatchEvent({
+      type: FeaturesHoverEventType,
+      features: [
+        {
+          geometry: null,
+          properties: {
+            density: 123,
+          },
+          type: "Feature",
+        },
+      ],
+    } as unknown as BaseEvent);
+  });
   return map;
 }
 function createMapEvent(map: Map, type: string) {
@@ -82,48 +86,8 @@ describe("event registration", () => {
   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]);
-    });
-  });
   describe("features hover event", () => {
     let callback: Mock;
     beforeEach(async () => {
@@ -136,14 +100,6 @@ describe("event registration", () => {
       expect(callback).toHaveBeenCalledWith({
         type: "features-hover",
         features: [
-          {
-            geometry: {
-              coordinates: [100, 200],
-              type: "Point",
-            },
-            properties: null,
-            type: "Feature",
-          },
           {
             geometry: null,
             properties: {

package/lib/map/register-events.ts

@@ -3,102 +3,16 @@ import {
   FeaturesClickEventType,
   FeaturesHoverEventType,
   MapClickEventType,
-  MapExtentChangeEventType,
   MapEventsByType,
+  MapExtentChangeEventType,
   SourceLoadErrorType,
 } from "@geospatial-sdk/core";
 import { toLonLat, transformExtent } from "ol/proj.js";
-import GeoJSON from "ol/format/GeoJSON.js";
-import OlFeature from "ol/Feature.js";
 import BaseEvent from "ol/events/Event.js";
-import { MapBrowserEvent } from "ol";
-import { Coordinate } from "ol/coordinate.js";
-import TileWMS from "ol/source/TileWMS.js";
-import ImageWMS from "ol/source/ImageWMS.js";
 import Layer from "ol/layer/Layer.js";
-import { Pixel } from "ol/pixel.js";
-import type { Feature, FeatureCollection } from "geojson";
-import throttle from "lodash.throttle";
 import { BaseLayerObjectEventTypes } from "ol/layer/Base.js";
 import { equals } from "ol/extent.js";
-
-const GEOJSON = new GeoJSON();
-
-export function getFeaturesFromVectorSources(
-  olMap: Map,
-  pixel: Pixel,
-): Feature[] {
-  const olFeatures = olMap.getFeaturesAtPixel(pixel);
-  const { features } = GEOJSON.writeFeaturesObject(olFeatures as OlFeature[]);
-  if (!features) {
-    return [];
-  }
-  return features;
-}
-
-export function getGFIUrl(
-  source: TileWMS | ImageWMS,
-  map: Map,
-  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 function getFeaturesFromWmsSources(
-  olMap: Map,
-  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()!);
-
-  if (!wmsSources.length) {
-    return Promise.resolve([]);
-  }
-
-  const gfiUrls = wmsSources.reduce((urls, source) => {
-    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());
-}
-
-const getFeaturesFromWmsSourcesThrottled = throttle(
-  getFeaturesFromWmsSources,
-  250,
-);
-
-async function readFeaturesAtPixel(
-  map: Map,
-  event: MapBrowserEvent<PointerEvent>,
-) {
-  return [
-    ...getFeaturesFromVectorSources(map, event.pixel),
-    ...(await getFeaturesFromWmsSourcesThrottled(map, event.coordinate)),
-  ];
-}
+import { readFeaturesAtPixel } from "./get-features.js";
 
 function registerFeatureClickEvent(map: Map) {
   if (map.get(FeaturesClickEventType)) return;
@@ -116,15 +30,6 @@ function registerFeatureClickEvent(map: Map) {
 
 function registerFeatureHoverEvent(map: Map) {
   if (map.get(FeaturesHoverEventType)) return;
-
-  map.on("pointermove", async (event: any) => {
-    const features = await readFeaturesAtPixel(map, event);
-    map.dispatchEvent({
-      type: FeaturesHoverEventType,
-      features,
-    } as unknown as BaseEvent);
-  });
-
   map.set(FeaturesHoverEventType, true);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geospatial-sdk/openlayers",
-  "version": "0.0.5-dev.49+67854c5",
+  "version": "0.0.5-dev.51+33b8820",
   "description": "OpenLayers-related utilities",
   "keywords": [
     "ol",
@@ -30,17 +30,17 @@
   "devDependencies": {
     "@types/chroma-js": "^2.4.3",
     "@types/lodash.throttle": "^4.1.9",
-    "ol": "^8.2.0",
+    "ol": "^10.7.0",
     "ol-mapbox-style": "12.4.0"
   },
   "peerDependencies": {
-    "ol": ">6.x"
+    "ol": ">9.x"
   },
   "dependencies": {
-    "@geospatial-sdk/core": "^0.0.5-dev.49+67854c5",
+    "@geospatial-sdk/core": "^0.0.5-dev.51+33b8820",
     "chroma-js": "^2.4.2",
     "lodash.throttle": "^4.1.1",
     "ol-mapbox-style": "12.4.0"
   },
-  "gitHead": "67854c5bbe5b473e1a8160f5e8e56fe162e1d427"
+  "gitHead": "33b882078fc7b6f4f12d3eaac671d9c142ecf9f7"
 }

package/dist/map/styles.d.ts

@@ -1,16 +0,0 @@
-import { Style } from "ol/style.js";
-import { StyleFunction } from "ol/style/Style.js";
-export interface CreateStyleOptions {
-    color: string;
-    isFocused?: boolean;
-}
-export interface StyleByGeometryType {
-    line: Style | Style[];
-    polygon: Style | Style[];
-    point: Style | Style[];
-}
-export declare function createGeometryStyles(options: CreateStyleOptions): StyleByGeometryType;
-export declare function createStyleFunction(styleByGeometryType: StyleByGeometryType): StyleFunction;
-export declare const defaultStyle: StyleFunction;
-export declare const defaultHighlightStyle: StyleFunction;
-//# sourceMappingURL=styles.d.ts.map

package/dist/map/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../lib/map/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAIlD,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,KAAK,GAAG,KAAK,EAAE,CAAC;IACtB,OAAO,EAAE,KAAK,GAAG,KAAK,EAAE,CAAC;IACzB,KAAK,EAAE,KAAK,GAAG,KAAK,EAAE,CAAC;CACxB;AAED,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,kBAAkB,GAC1B,mBAAmB,CA4CrB;AAED,wBAAgB,mBAAmB,CACjC,mBAAmB,EAAE,mBAAmB,GACvC,aAAa,CAmBf;AAMD,eAAO,MAAM,YAAY,eAIxB,CAAC;AAEF,eAAO,MAAM,qBAAqB,eAKjC,CAAC"}

package/dist/map/styles.js

@@ -1,77 +0,0 @@
-import { Circle, Fill, Stroke, Style } from "ol/style.js";
-import chroma from "chroma-js";
-export function createGeometryStyles(options) {
-    const { color, isFocused } = options;
-    const zIndex = isFocused ? 10 : undefined;
-    return {
-        polygon: new Style({
-            fill: new Fill({
-                color: computeTransparentFillColor(color),
-            }),
-            stroke: new Stroke({
-                color: "white",
-                width: 2,
-            }),
-            zIndex,
-        }),
-        point: new Style({
-            image: new Circle({
-                fill: new Fill({
-                    color,
-                }),
-                stroke: new Stroke({
-                    color: "white",
-                    width: isFocused ? 3 : 2,
-                }),
-                radius: isFocused ? 8 : 7,
-            }),
-            zIndex,
-        }),
-        line: [
-            new Style({
-                stroke: new Stroke({
-                    color: "white",
-                    width: isFocused ? 8 : 6,
-                }),
-                zIndex,
-            }),
-            new Style({
-                stroke: new Stroke({
-                    color,
-                    width: isFocused ? 3 : 2,
-                }),
-                zIndex,
-            }),
-        ],
-    };
-}
-export function createStyleFunction(styleByGeometryType) {
-    return (feature) => {
-        const geometryType = feature?.getGeometry()?.getType();
-        switch (geometryType) {
-            case "LinearRing":
-            case "LineString":
-            case "MultiLineString":
-                return styleByGeometryType.line;
-            case "Point":
-            case "MultiPoint":
-                return styleByGeometryType.point;
-            case "Circle":
-            case "Polygon":
-            case "MultiPolygon":
-                return styleByGeometryType.polygon;
-            default:
-                return styleByGeometryType.point;
-        }
-    };
-}
-function computeTransparentFillColor(color, alpha = 0.25) {
-    return chroma(color).alpha(alpha).css();
-}
-export const defaultStyle = createStyleFunction(createGeometryStyles({
-    color: "blue",
-}));
-export const defaultHighlightStyle = createStyleFunction(createGeometryStyles({
-    color: "red",
-    isFocused: true,
-}));