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

package/lib/map/register-events.ts

@@ -3,111 +3,27 @@ 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;
 
   map.on("click", async (event: any) => {
-    const features = await readFeaturesAtPixel(map, event);
+    const featuresByLayer = await readFeaturesAtPixel(map, event);
+    const features = Array.from(featuresByLayer.values()).flat();
     map.dispatchEvent({
       type: FeaturesClickEventType,
       features,
+      featuresByLayer,
     } as unknown as BaseEvent);
   });
 
@@ -116,15 +32,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.50+c8ee5e3",
+  "version": "0.0.5-dev.52+73ea489",
   "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.50+c8ee5e3",
+    "@geospatial-sdk/core": "^0.0.5-dev.52+73ea489",
     "chroma-js": "^2.4.2",
     "lodash.throttle": "^4.1.1",
     "ol-mapbox-style": "12.4.0"
   },
-  "gitHead": "c8ee5e32059a06e056a5723987baf5e2574bf784"
+  "gitHead": "73ea4890e493aae5379e23af6b7679bab253db92"
 }

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,
-}));

package/lib/map/styles.test.ts

@@ -1,217 +0,0 @@
-import chroma from "chroma-js";
-import Style, { StyleFunction } from "ol/style/Style.js";
-import Feature from "ol/Feature.js";
-import { LineString, Point, Polygon } from "ol/geom.js";
-import {
-  createGeometryStyles,
-  createStyleFunction,
-  defaultHighlightStyle,
-  defaultStyle,
-  StyleByGeometryType,
-} from "./styles.js";
-import CircleStyle from "ol/style/Circle.js";
-
-describe("MapStyleService", () => {
-  describe("#createGeometryStyles", () => {
-    let styles: StyleByGeometryType;
-    let pointStyle: Style;
-    let lineStyle: Style[];
-    let polygonStyle: Style;
-
-    describe("unfocused style", () => {
-      beforeEach(() => {
-        const options = {
-          color: "orange",
-        };
-        styles = createGeometryStyles(options);
-        pointStyle = styles.point as Style;
-        lineStyle = styles.line as Style[];
-        polygonStyle = styles.polygon as Style;
-      });
-      describe("point style", () => {
-        it("has 1 style", () => {
-          expect(pointStyle).toBeInstanceOf(Style);
-        });
-        it("has correct radius", () => {
-          expect((pointStyle.getImage() as CircleStyle)?.getRadius()).toBe(7);
-        });
-        it("has correct fill color", () => {
-          expect(
-            (pointStyle.getImage() as CircleStyle)?.getFill()?.getColor(),
-          ).toBe("orange");
-        });
-        it("has correct stroke color and width", () => {
-          expect(
-            (pointStyle.getImage() as CircleStyle)?.getStroke()?.getColor(),
-          ).toBe("white");
-          expect(
-            (pointStyle.getImage() as CircleStyle)?.getStroke()?.getWidth(),
-          ).toBe(2);
-        });
-      });
-      describe("polygon style", () => {
-        it("has 1 style", () => {
-          expect(polygonStyle).toBeInstanceOf(Style);
-        });
-        it("has correct fill color", () => {
-          expect(polygonStyle.getFill()?.getColor()).toBe(
-            chroma("orange").alpha(0.25).css(),
-          );
-        });
-        it("has correct stroke color and width", () => {
-          expect(polygonStyle.getStroke()?.getColor()).toBe("white");
-          expect(polygonStyle.getStroke()?.getWidth()).toBe(2);
-        });
-      });
-      describe("line style", () => {
-        it("has 2 styles", () => {
-          expect(lineStyle).toEqual([expect.any(Style), expect.any(Style)]);
-        });
-        it("has correct color (back stroke)", () => {
-          expect(lineStyle[0].getStroke()?.getColor()).toBe("white");
-        });
-        it("has correct width (back stroke)", () => {
-          expect(lineStyle[0].getStroke()?.getWidth()).toBe(6);
-        });
-        it("has correct color (front stroke)", () => {
-          expect(lineStyle[1].getStroke()?.getColor()).toBe("orange");
-        });
-        it("has correct width (front stroke)", () => {
-          expect(lineStyle[1].getStroke()?.getWidth()).toBe(2);
-        });
-      });
-    });
-    describe("focused style", () => {
-      beforeEach(() => {
-        const options = {
-          color: "pink",
-          isFocused: true,
-        };
-        styles = createGeometryStyles(options);
-        pointStyle = styles.point as Style;
-        lineStyle = styles.line as Style[];
-        polygonStyle = styles.polygon as Style;
-      });
-      describe("point style", () => {
-        it("has correct radius", () => {
-          expect((pointStyle.getImage() as CircleStyle)?.getRadius()).toBe(8);
-        });
-        it("has correct fill color", () => {
-          expect(
-            (pointStyle.getImage() as CircleStyle)?.getFill()?.getColor(),
-          ).toBe("pink");
-        });
-        it("has correct stroke color and width", () => {
-          expect(
-            (pointStyle.getImage() as CircleStyle)?.getStroke()?.getColor(),
-          ).toBe("white");
-          expect(
-            (pointStyle.getImage() as CircleStyle)?.getStroke()?.getWidth(),
-          ).toBe(3);
-        });
-      });
-      describe("polygon style", () => {
-        it("has correct fill color", () => {
-          expect(polygonStyle.getFill()?.getColor()).toBe(
-            chroma("pink").alpha(0.25).css(),
-          );
-        });
-        it("has correct stroke color and width", () => {
-          expect(polygonStyle.getStroke()?.getColor()).toBe("white");
-          expect(polygonStyle.getStroke()?.getWidth()).toBe(2);
-        });
-      });
-      describe("line style", () => {
-        it("has correct color (back stroke)", () => {
-          expect(lineStyle[0].getStroke()?.getColor()).toBe("white");
-        });
-        it("has correct width (back stroke)", () => {
-          expect(lineStyle[0].getStroke()?.getWidth()).toBe(8);
-        });
-        it("has correct color (front stroke)", () => {
-          expect(lineStyle[1].getStroke()?.getColor()).toBe("pink");
-        });
-        it("has correct width (front stroke)", () => {
-          expect(lineStyle[1].getStroke()?.getWidth()).toBe(3);
-        });
-      });
-    });
-  });
-
-  describe("#createStyleFunction", () => {
-    let styleFn: StyleFunction;
-    let feature: Feature;
-    it("returns a function", () => {
-      styleFn = createStyleFunction(
-        createGeometryStyles({
-          color: "blue",
-        }),
-      );
-      feature = new Feature();
-    });
-    describe("with linestring geometry", () => {
-      beforeEach(() => {
-        feature.setGeometry(new LineString([]));
-      });
-      it("resolves to a double style with stroke", () => {
-        const style = styleFn(feature, 1) as Style[];
-        expect(style).toEqual([expect.any(Style), expect.any(Style)]);
-        expect(style[0].getStroke()).toBeTruthy();
-        expect(style[0].getFill()).toBeFalsy();
-        expect(style[0].getImage()).toBeFalsy();
-      });
-    });
-    describe("with point geometry", () => {
-      beforeEach(() => {
-        feature.setGeometry(new Point([]));
-      });
-      it("resolves to a style with image", () => {
-        const style = styleFn(feature, 1) as Style;
-        expect(style.getImage()).toBeTruthy();
-        expect(style.getFill()).toBeFalsy();
-        expect(style.getStroke()).toBeFalsy();
-      });
-    });
-    describe("with polygon geometry", () => {
-      beforeEach(() => {
-        feature.setGeometry(new Polygon([]));
-      });
-      it("resolves to a style with fill and stroke", () => {
-        const style = styleFn(feature, 1) as Style;
-        expect(style.getFill()).toBeTruthy();
-        expect(style.getStroke()).toBeTruthy();
-        expect(style.getImage()).toBeFalsy();
-      });
-    });
-  });
-
-  describe("built-in styles", () => {
-    let pointFeature: Feature;
-    let pointStyle: Style;
-    beforeEach(() => {
-      pointFeature = new Feature(new Point([]));
-    });
-    describe("default style", () => {
-      beforeEach(() => {
-        const styleFn = defaultStyle;
-        pointStyle = styleFn(pointFeature, 1) as Style;
-      });
-      it("uses the primary theme color", () => {
-        expect(
-          (pointStyle.getImage() as CircleStyle)?.getFill()?.getColor(),
-        ).toEqual("blue");
-      });
-    });
-    describe("default highlight style", () => {
-      beforeEach(() => {
-        const styleFn = defaultHighlightStyle;
-        pointStyle = styleFn(pointFeature, 1) as Style;
-      });
-      it("uses the secondary theme color", () => {
-        expect(
-          (pointStyle.getImage() as CircleStyle)?.getFill()?.getColor(),
-        ).toEqual("red");
-      });
-    });
-  });
-});

package/lib/map/styles.ts

@@ -1,103 +0,0 @@
-import { Circle, Fill, Stroke, Style } from "ol/style.js";
-import { StyleFunction } from "ol/style/Style.js";
-import { FeatureLike } from "ol/Feature.js";
-import chroma from "chroma-js";
-
-export interface CreateStyleOptions {
-  color: string;
-  isFocused?: boolean;
-}
-
-export interface StyleByGeometryType {
-  line: Style | Style[];
-  polygon: Style | Style[];
-  point: Style | Style[];
-}
-
-export function createGeometryStyles(
-  options: CreateStyleOptions,
-): StyleByGeometryType {
-  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: StyleByGeometryType,
-): StyleFunction {
-  return (feature: FeatureLike): Style | Style[] => {
-    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: string, alpha = 0.25): string {
-  return chroma(color).alpha(alpha).css();
-}
-
-export const defaultStyle = createStyleFunction(
-  createGeometryStyles({
-    color: "blue",
-  }),
-);
-
-export const defaultHighlightStyle = createStyleFunction(
-  createGeometryStyles({
-    color: "red",
-    isFocused: true,
-  }),
-);