@geospatial-sdk/openlayers 0.0.5-dev.15 → 0.0.5-dev.17

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,QAAQ,CAAC;AACzB,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,KAAK,MAAM,gBAAgB,CAAC;AAyBnC,wBAAsB,WAAW,CAAC,UAAU,EAAE,eAAe,GAAG,OAAO,CAAC,KAAK,CAAC,CA8K7E;AAED,wBAAgB,UAAU,CAAC,SAAS,EAAE,cAAc,EAAE,GAAG,EAAE,GAAG,GAAG,IAAI,CAyBpE;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,EACL,UAAU,EACV,eAAe,EACf,cAAc,EAEf,MAAM,sBAAsB,CAAC;AAC9B,OAAO,GAAG,MAAM,QAAQ,CAAC;AACzB,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,KAAK,MAAM,gBAAgB,CAAC;AA0BnC,wBAAsB,WAAW,CAAC,UAAU,EAAE,eAAe,GAAG,OAAO,CAAC,KAAK,CAAC,CAwL7E;AAED,wBAAgB,UAAU,CAAC,SAAS,EAAE,cAAc,EAAE,GAAG,EAAE,GAAG,GAAG,IAAI,CAyBpE;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"}

package/dist/map/create-map.js

@@ -23,6 +23,7 @@ import VectorTileLayer from "ol/layer/VectorTile";
 import { OGCMapTile, OGCVectorTile, WMTS } from "ol/source";
 import { MVT } from "ol/format";
 import { OgcApiEndpoint, WfsEndpoint, WmtsEndpoint, } from "@camptocamp/ogc-client";
+import { MapboxVectorLayer } from "ol-mapbox-style";
 const GEOJSON = new GeoJSON();
 const WFS_MAX_FEATURES = 10000;
 export function createLayer(layerModel) {
@@ -44,7 +45,7 @@ export function createLayer(layerModel) {
                 layer = new TileLayer({
                     source: new TileWMS({
                         url: removeSearchParams(layerModel.url, ["request", "service"]),
-                        params: { LAYERS: layerModel.name },
+                        params: Object.assign({ LAYERS: layerModel.name }, (layerModel.style && { STYLES: layerModel.style })),
                         gutter: 20,
                         attributions: layerModel.attributions,
                     }),
@@ -105,6 +106,13 @@ export function createLayer(layerModel) {
                 layer = olLayer;
                 break;
             }
+            case "maplibre-style": {
+                layer = new MapboxVectorLayer({
+                    styleUrl: layerModel.styleUrl,
+                    accessToken: layerModel.accessToken,
+                });
+                break;
+            }
             case "geojson": {
                 if (layerModel.url !== undefined) {
                     layer = new VectorLayer({
@@ -142,7 +150,7 @@ export function createLayer(layerModel) {
                 break;
             }
             case "ogcapi": {
-                const ogcEndpoint = yield new OgcApiEndpoint(layerModel.url);
+                const ogcEndpoint = new OgcApiEndpoint(layerModel.url);
                 let layerUrl;
                 if (layerModel.useTiles) {
                     if (layerModel.useTiles === "vector") {

package/dist/map/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./styles";
 export { createMapFromContext, resetMapFromContext } from "./create-map";
 export { applyContextDiffToMap } from "./apply-context-diff";
+export { listen } from "./register-events";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/map/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/map/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/map/index.js

@@ -1,3 +1,4 @@
 export * from "./styles";
 export { createMapFromContext, resetMapFromContext } from "./create-map";
 export { applyContextDiffToMap } from "./apply-context-diff";
+export { listen } from "./register-events";

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

@@ -0,0 +1,12 @@
+import Map from "ol/Map";
+import { MapEvent, MapEventType } from "@geospatial-sdk/core";
+import { Coordinate } from "ol/coordinate";
+import TileWMS from "ol/source/TileWMS";
+import ImageWMS from "ol/source/ImageWMS";
+import { Pixel } from "ol/pixel";
+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(map: Map, event: MapEventType, callback: (event: MapEvent) => void): void;
+//# sourceMappingURL=register-events.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"register-events.d.ts","sourceRoot":"","sources":["../../lib/map/register-events.ts"],"names":[],"mappings":"AAAA,OAAO,GAA4B,MAAM,QAAQ,CAAC;AAClD,OAAO,EAIL,QAAQ,EACR,YAAY,EACb,MAAM,sBAAsB,CAAC;AAM9B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,OAAO,MAAM,mBAAmB,CAAC;AACxC,OAAO,QAAQ,MAAM,oBAAoB,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,KAAK,EAAE,OAAO,EAAqB,MAAM,SAAS,CAAC;AAK1D,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;AAyCD,wBAAgB,MAAM,CACpB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,QA6BpC"}

package/dist/map/register-events.js

@@ -0,0 +1,111 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { FeaturesClickEventType, FeaturesHoverEventType, MapClickEventType, } from "@geospatial-sdk/core";
+import { toLonLat } from "ol/proj";
+import GeoJSON from "ol/format/GeoJSON";
+import TileWMS from "ol/source/TileWMS";
+import ImageWMS from "ol/source/ImageWMS";
+import Layer from "ol/layer/Layer";
+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) {
+    var _a;
+    const view = map.getView();
+    const projection = view.getProjection();
+    const resolution = view.getResolution();
+    const params = Object.assign(Object.assign({}, source.getParams()), { INFO_FORMAT: "application/json" });
+    return ((_a = source.getFeatureInfoUrl(coordinate, resolution, projection, params)) !== null && _a !== void 0 ? _a : 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);
+function readFeaturesAtPixel(map, event) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return [
+            ...getFeaturesFromVectorSources(map, event.pixel),
+            ...(yield getFeaturesFromWmsSourcesThrottled(map, event.coordinate)),
+        ];
+    });
+}
+function registerFeatureClickEvent(map) {
+    if (map.get(FeaturesClickEventType))
+        return;
+    map.on("click", (event) => __awaiter(this, void 0, void 0, function* () {
+        const features = yield readFeaturesAtPixel(map, event);
+        map.dispatchEvent({
+            type: FeaturesClickEventType,
+            features,
+        });
+    }));
+    map.set(FeaturesClickEventType, true);
+}
+function registerFeatureHoverEvent(map) {
+    if (map.get(FeaturesHoverEventType))
+        return;
+    map.on("pointermove", (event) => __awaiter(this, void 0, void 0, function* () {
+        const features = yield readFeaturesAtPixel(map, event);
+        map.dispatchEvent({
+            type: FeaturesHoverEventType,
+            features,
+        });
+    }));
+    map.set(FeaturesHoverEventType, true);
+}
+export function listen(map, event, callback) {
+    switch (event) {
+        case FeaturesClickEventType:
+            registerFeatureClickEvent(map);
+            // we're using a custom event type here so we need to cast to unknown first
+            map.on(event, (event) => {
+                callback(event);
+            });
+            break;
+        case FeaturesHoverEventType:
+            registerFeatureHoverEvent(map);
+            // see comment above
+            map.on(event, (event) => {
+                callback(event);
+            });
+            break;
+        case MapClickEventType:
+            map.on("click", (event) => {
+                const coordinate = toLonLat(event.pixel, map.getView().getProjection());
+                callback({ coordinate });
+            });
+            break;
+        default:
+            throw new Error(`Unrecognized event type: ${event}`);
+    }
+}

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

@@ -12,6 +12,7 @@ import {
   MAP_CTX_FIXTURE,
   MAP_CTX_LAYER_GEOJSON_FIXTURE,
   MAP_CTX_LAYER_GEOJSON_REMOTE_FIXTURE,
+  MAP_CTX_LAYER_MAPBLIBRE_STYLE_FIXTURE,
   MAP_CTX_LAYER_OGCAPI_FIXTURE,
   MAP_CTX_LAYER_WFS_FIXTURE,
   MAP_CTX_LAYER_WMS_FIXTURE,
@@ -32,6 +33,8 @@ import {
   resetMapFromContext,
 } from "./create-map";
 import WMTS from "ol/source/WMTS";
+import { VectorTile } from "ol/source";
+import { MapboxVectorLayer } from "ol-mapbox-style";
 
 describe("MapContextService", () => {
   describe("#createLayer", () => {
@@ -116,6 +119,7 @@ describe("MapContextService", () => {
         const source = layer.getSource() as TileWMS;
         const params = source.getParams();
         expect(params.LAYERS).toBe((layerModel as MapContextLayerWms).name);
+        expect(params.STYLES).toBe((layerModel as MapContextLayerWms).style);
       });
       it("set correct url without existing REQUEST and SERVICE params", () => {
         const source = layer.getSource() as TileWMS;
@@ -291,6 +295,26 @@ describe("MapContextService", () => {
         ]);
       });
     });
+
+    describe("Maplibre Style", () => {
+      beforeEach(async () => {
+        (layerModel = MAP_CTX_LAYER_MAPBLIBRE_STYLE_FIXTURE),
+          (layer = await createLayer(layerModel));
+      });
+      it("create a tile layer", () => {
+        expect(layer).toBeTruthy();
+        expect(layer).toBeInstanceOf(MapboxVectorLayer);
+      });
+      it("set correct layer properties", () => {
+        expect(layer.getVisible()).toBe(true);
+        expect(layer.getOpacity()).toBe(1);
+        expect(layer.get("label")).toBeUndefined();
+      });
+      it("create a Vector Tile source", () => {
+        const source = layer.getSource();
+        expect(source).toBeInstanceOf(VectorTile);
+      });
+    });
   });
 
   describe("#createView", () => {

package/lib/map/create-map.ts

@@ -27,6 +27,7 @@ import {
   WfsEndpoint,
   WmtsEndpoint,
 } from "@camptocamp/ogc-client";
+import { MapboxVectorLayer } from "ol-mapbox-style";
 
 const GEOJSON = new GeoJSON();
 const WFS_MAX_FEATURES = 10000;
@@ -48,7 +49,10 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
       layer = new TileLayer({
         source: new TileWMS({
           url: removeSearchParams(layerModel.url, ["request", "service"]),
-          params: { LAYERS: layerModel.name },
+          params: {
+            LAYERS: layerModel.name,
+            ...(layerModel.style && { STYLES: layerModel.style }),
+          },
           gutter: 20,
           attributions: layerModel.attributions,
         }),
@@ -112,6 +116,13 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
       layer = olLayer;
       break;
     }
+    case "maplibre-style": {
+      layer = new MapboxVectorLayer({
+        styleUrl: layerModel.styleUrl,
+        accessToken: layerModel.accessToken,
+      }) as unknown as Layer;
+      break;
+    }
     case "geojson": {
       if (layerModel.url !== undefined) {
         layer = new VectorLayer({
@@ -147,7 +158,7 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
       break;
     }
     case "ogcapi": {
-      const ogcEndpoint = await new OgcApiEndpoint(layerModel.url);
+      const ogcEndpoint = new OgcApiEndpoint(layerModel.url);
       let layerUrl: string;
       if (layerModel.useTiles) {
         if (layerModel.useTiles === "vector") {

package/lib/map/index.ts

@@ -1,3 +1,4 @@
 export * from "./styles";
 export { createMapFromContext, resetMapFromContext } from "./create-map";
 export { applyContextDiffToMap } from "./apply-context-diff";
+export { listen } from "./register-events";

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

@@ -0,0 +1,196 @@
+import Map from "ol/Map";
+import { Mock } from "vitest";
+import {
+  getFeaturesFromVectorSources,
+  getFeaturesFromWmsSources,
+  getGFIUrl,
+  listen,
+} from "./register-events";
+import { Collection, MapBrowserEvent, Object as BaseObject } from "ol";
+import View from "ol/View";
+import { toLonLat } from "ol/proj";
+import TileWMS from "ol/source/TileWMS";
+import VectorSource from "ol/source/Vector";
+import VectorLayer from "ol/layer/Vector";
+import Point from "ol/geom/Point";
+import TileLayer from "ol/layer/Tile";
+import OlFeature from "ol/Feature";
+
+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]) },
+  });
+  return map;
+}
+function createMapEvent(map: Map, type: string) {
+  return new MapBrowserEvent(
+    type,
+    map,
+    new MouseEvent(type, {
+      clientX: 10,
+      clientY: 10,
+    }),
+    false,
+  );
+}
+
+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 () => {
+      callback = vi.fn();
+      listen(map, "features-hover", callback);
+      map.dispatchEvent(createMapEvent(map, "pointermove"));
+      await vi.runAllTimersAsync();
+    });
+    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",
+          },
+        ],
+        target: expect.anything(),
+      });
+    });
+  });
+  describe("features click event", () => {
+    let callback: Mock;
+    beforeEach(async () => {
+      callback = vi.fn();
+      listen(map, "features-click", callback);
+      map.dispatchEvent(createMapEvent(map, "click"));
+      await vi.runAllTimersAsync();
+    });
+    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",
+          },
+        ],
+        target: expect.anything(),
+      });
+    });
+  });
+  describe("map click event", () => {
+    let callback: Mock;
+    beforeEach(() => {
+      callback = vi.fn();
+      listen(map, "map-click", callback);
+      map.dispatchEvent(createMapEvent(map, "click"));
+    });
+    it("registers the event on the map", () => {
+      expect(callback).toHaveBeenCalledWith({ coordinate: toLonLat([10, 10]) });
+    });
+  });
+});

package/lib/map/register-events.ts

@@ -0,0 +1,156 @@
+import Map, { MapObjectEventTypes } from "ol/Map";
+import {
+  FeaturesClickEventType,
+  FeaturesHoverEventType,
+  MapClickEventType,
+  MapEvent,
+  MapEventType,
+} from "@geospatial-sdk/core";
+import { toLonLat } from "ol/proj";
+import GeoJSON from "ol/format/GeoJSON";
+import OlFeature from "ol/Feature";
+import BaseEvent from "ol/events/Event";
+import { MapBrowserEvent } from "ol";
+import { Coordinate } from "ol/coordinate";
+import TileWMS from "ol/source/TileWMS";
+import ImageWMS from "ol/source/ImageWMS";
+import Layer from "ol/layer/Layer";
+import { Pixel } from "ol/pixel";
+import type { Feature, FeatureCollection } from "geojson";
+import throttle from "lodash.throttle";
+
+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)),
+  ];
+}
+
+function registerFeatureClickEvent(map: Map) {
+  if (map.get(FeaturesClickEventType)) return;
+  map.on("click", async (event) => {
+    const features = await readFeaturesAtPixel(map, event);
+    map.dispatchEvent({
+      type: FeaturesClickEventType,
+      features,
+    } as unknown as BaseEvent);
+  });
+  map.set(FeaturesClickEventType, true);
+}
+
+function registerFeatureHoverEvent(map: Map) {
+  if (map.get(FeaturesHoverEventType)) return;
+  map.on("pointermove", async (event) => {
+    const features = await readFeaturesAtPixel(map, event);
+    map.dispatchEvent({
+      type: FeaturesHoverEventType,
+      features,
+    } as unknown as BaseEvent);
+  });
+  map.set(FeaturesHoverEventType, true);
+}
+
+export function listen(
+  map: Map,
+  event: MapEventType,
+  callback: (event: MapEvent) => void,
+) {
+  switch (event) {
+    case FeaturesClickEventType:
+      registerFeatureClickEvent(map);
+      // we're using a custom event type here so we need to cast to unknown first
+      map.on(event as unknown as MapObjectEventTypes, (event) => {
+        callback(event as unknown as MapEvent);
+      });
+      break;
+    case FeaturesHoverEventType:
+      registerFeatureHoverEvent(map);
+      // see comment above
+      map.on(event as unknown as MapObjectEventTypes, (event) => {
+        callback(event as unknown as MapEvent);
+      });
+      break;
+    case MapClickEventType:
+      map.on("click", (event) => {
+        const coordinate = toLonLat(
+          event.pixel,
+          map.getView().getProjection(),
+        ) as [number, number];
+        callback({ coordinate });
+      });
+      break;
+    default:
+      throw new Error(`Unrecognized event type: ${event}`);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geospatial-sdk/openlayers",
-  "version": "0.0.5-dev.15+751c3f3",
+  "version": "0.0.5-dev.17+e758ce3",
   "description": "OpenLayers-related utilities",
   "keywords": [
     "ol",
@@ -29,14 +29,17 @@
   },
   "devDependencies": {
     "@types/chroma-js": "^2.4.3",
-    "ol": "^8.2.0"
+    "@types/lodash.throttle": "^4.1.9",
+    "ol": "^8.2.0",
+    "ol-mapbox-style": "^12.3.5"
   },
   "peerDependencies": {
     "ol": ">6.x"
   },
   "dependencies": {
-    "@geospatial-sdk/core": "^0.0.5-dev.15+751c3f3",
-    "chroma-js": "^2.4.2"
+    "@geospatial-sdk/core": "^0.0.5-dev.17+e758ce3",
+    "chroma-js": "^2.4.2",
+    "lodash.throttle": "^4.1.1"
   },
-  "gitHead": "751c3f38588b76394f9d27d6f76f862f0cff52e2"
+  "gitHead": "e758ce3d88f26443f0680907277ae4fde3c748f9"
 }