@geospatial-sdk/openlayers 0.0.3-alpha.0

package/LICENSE

@@ -0,0 +1,28 @@
+BSD 3-Clause License
+
+Copyright (c) 2023, Camptocamp
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1,11 @@
+# `openlayers`
+
+> TODO: description
+
+## Usage
+
+```
+const openlayers = require('openlayers');
+
+// TODO: DEMONSTRATE API
+```

package/index.ts

@@ -0,0 +1,2 @@
+// PUBLIC API
+export * from "./lib/map";

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

@@ -0,0 +1,311 @@
+import { FeatureCollection } from "geojson";
+import TileLayer from "ol/layer/Tile";
+import VectorLayer from "ol/layer/Vector";
+import Map from "ol/Map";
+import TileWMS from "ol/source/TileWMS";
+import VectorSource from "ol/source/Vector";
+import XYZ from "ol/source/XYZ";
+import View from "ol/View";
+import GeoJSON from "ol/format/GeoJSON";
+import {
+  MAP_CTX_EXTENT_FIXTURE,
+  MAP_CTX_FIXTURE,
+  MAP_CTX_LAYER_GEOJSON_FIXTURE,
+  MAP_CTX_LAYER_GEOJSON_REMOTE_FIXTURE,
+  MAP_CTX_LAYER_WFS_FIXTURE,
+  MAP_CTX_LAYER_WMS_FIXTURE,
+  MAP_CTX_LAYER_XYZ_FIXTURE,
+} from "@geospatial-sdk/core/fixtures/map-context.fixtures";
+import {
+  MapContext,
+  MapContextLayer,
+  MapContextLayerGeojson,
+  MapContextLayerWms,
+} from "@geospatial-sdk/core";
+import Layer from "ol/layer/Layer";
+import {
+  createLayer,
+  createMapFromContext,
+  createView,
+  resetMapFromContext,
+} from "./create-map";
+
+describe("MapContextService", () => {
+  describe("#createLayer", () => {
+    let layerModel: MapContextLayer, layer: Layer;
+
+    describe("XYZ", () => {
+      beforeEach(() => {
+        layerModel = MAP_CTX_LAYER_XYZ_FIXTURE;
+        layer = createLayer(layerModel);
+      });
+      it("create a tile layer", () => {
+        expect(layer).toBeTruthy();
+        expect(layer).toBeInstanceOf(TileLayer);
+      });
+      it("create a XYZ source", () => {
+        const source = layer.getSource();
+        expect(source).toBeInstanceOf(XYZ);
+      });
+      it("set correct urls", () => {
+        const source = layer.getSource() as XYZ;
+        const urls = source.getUrls() ?? [];
+        expect(urls.length).toBe(3);
+        expect(urls[0]).toEqual(
+          "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
+        );
+      });
+    });
+
+    describe("WMS", () => {
+      beforeEach(() => {
+        (layerModel = MAP_CTX_LAYER_WMS_FIXTURE),
+          (layer = createLayer(layerModel));
+      });
+      it("create a tile layer", () => {
+        expect(layer).toBeTruthy();
+        expect(layer).toBeInstanceOf(TileLayer);
+      });
+      it("create a TileWMS source", () => {
+        const source = layer.getSource();
+        expect(source).toBeInstanceOf(TileWMS);
+      });
+      it("set correct WMS params", () => {
+        const source = layer.getSource() as TileWMS;
+        const params = source.getParams();
+        expect(params.LAYERS).toBe((layerModel as MapContextLayerWms).name);
+      });
+      it("set correct url without existing REQUEST and SERVICE params", () => {
+        const source = layer.getSource() as TileWMS;
+        const urls = source.getUrls() || [];
+        expect(urls.length).toBe(1);
+        expect(urls[0]).toBe(
+          "https://www.geograndest.fr/geoserver/region-grand-est/ows",
+        );
+      });
+      it("set WMS gutter of 20px", () => {
+        const source = layer.getSource() as TileWMS;
+        const gutter = source["gutter_"];
+        expect(gutter).toBe(20);
+      });
+    });
+
+    describe("WFS", () => {
+      beforeEach(() => {
+        (layerModel = MAP_CTX_LAYER_WFS_FIXTURE),
+          (layer = createLayer(layerModel));
+      });
+      it("create a vector layer", () => {
+        expect(layer).toBeTruthy();
+        expect(layer).toBeInstanceOf(VectorLayer);
+      });
+      it("create a Vector source", () => {
+        const source = layer.getSource();
+        expect(source).toBeInstanceOf(VectorSource);
+      });
+      it("set correct url load function", () => {
+        const source = layer.getSource() as VectorSource;
+        const urlLoader = source.getUrl() as Function;
+        expect(urlLoader([10, 20, 30, 40])).toBe(
+          "https://www.geograndest.fr/geoserver/region-grand-est/ows?service=WFS&version=1.1.0&request=GetFeature&outputFormat=application%2Fjson&typename=ms%3Acommune_actuelle_3857&srsname=EPSG%3A3857&bbox=10%2C20%2C30%2C40%2CEPSG%3A3857",
+        );
+      });
+    });
+
+    describe("GEOJSON", () => {
+      describe("with inline data", () => {
+        beforeEach(() => {
+          layerModel = MAP_CTX_LAYER_GEOJSON_FIXTURE;
+          layer = createLayer(layerModel);
+        });
+        it("create a VectorLayer", () => {
+          expect(layer).toBeTruthy();
+          expect(layer).toBeInstanceOf(VectorLayer);
+        });
+        it("create a VectorSource source", () => {
+          const source = layer.getSource();
+          expect(source).toBeInstanceOf(VectorSource);
+        });
+        it("add features", () => {
+          const source = layer.getSource() as VectorSource;
+          const features = source.getFeatures();
+          const data = (layerModel as MapContextLayerGeojson)
+            .data as FeatureCollection;
+          expect(features.length).toBe(data.features.length);
+        });
+      });
+      describe("with inline data as string", () => {
+        beforeEach(() => {
+          layerModel = { ...MAP_CTX_LAYER_GEOJSON_FIXTURE };
+          layerModel.data = JSON.stringify(layerModel.data);
+          layer = createLayer(layerModel);
+        });
+        it("create a VectorLayer", () => {
+          expect(layer).toBeTruthy();
+          expect(layer).toBeInstanceOf(VectorLayer);
+        });
+        it("create a VectorSource source", () => {
+          const source = layer.getSource();
+          expect(source).toBeInstanceOf(VectorSource);
+        });
+        it("add features", () => {
+          const source = layer.getSource() as VectorSource;
+          const features = source.getFeatures();
+          expect(features.length).toBe(
+            (MAP_CTX_LAYER_GEOJSON_FIXTURE.data as FeatureCollection).features
+              .length,
+          );
+        });
+      });
+      describe("with invalid inline data as string", () => {
+        beforeEach(() => {
+          const spy = vi.spyOn(window.console, "warn");
+          spy.mockClear();
+          layerModel = {
+            ...MAP_CTX_LAYER_GEOJSON_FIXTURE,
+            url: undefined,
+            data: "blargz",
+          };
+          layer = createLayer(layerModel);
+        });
+        it("create a VectorLayer", () => {
+          expect(layer).toBeTruthy();
+          expect(layer).toBeInstanceOf(VectorLayer);
+        });
+        it("outputs error in the console", () => {
+          expect(window.console.warn).toHaveBeenCalled();
+        });
+        it("create an empty VectorSource source", () => {
+          const source = layer.getSource() as VectorSource;
+          expect(source).toBeInstanceOf(VectorSource);
+          expect(source.getFeatures().length).toBe(0);
+        });
+      });
+      describe("with remote file url", () => {
+        beforeEach(() => {
+          layerModel = MAP_CTX_LAYER_GEOJSON_REMOTE_FIXTURE;
+          layer = createLayer(layerModel);
+        });
+        it("create a VectorLayer", () => {
+          expect(layer).toBeTruthy();
+          expect(layer).toBeInstanceOf(VectorLayer);
+        });
+        it("create a VectorSource source", () => {
+          const source = layer.getSource();
+          expect(source).toBeInstanceOf(VectorSource);
+        });
+        it("sets the format as GeoJSON", () => {
+          const source = layer.getSource() as VectorSource;
+          expect(source.getFormat()).toBeInstanceOf(GeoJSON);
+        });
+        it("set the url to point to the file", () => {
+          const source = layer.getSource() as VectorSource;
+          expect(source.getUrl()).toBe(layerModel.url);
+        });
+      });
+    });
+  });
+
+  describe("#createView", () => {
+    let view: View;
+    let map: Map;
+    describe("from center and zoom", () => {
+      const contextModel = MAP_CTX_FIXTURE;
+      beforeEach(() => {
+        map = createMapFromContext(contextModel);
+        view = createView(contextModel.view, map);
+      });
+      it("create a view", () => {
+        expect(view).toBeTruthy();
+        expect(view).toBeInstanceOf(View);
+      });
+      it("set center", () => {
+        const center = view.getCenter();
+        expect(center).toEqual([862726.0536478702, 6207260.308175252]);
+      });
+      it("set zoom", () => {
+        const zoom = view.getZoom();
+        expect(zoom).toEqual(contextModel.view.zoom);
+      });
+    });
+    describe("from extent", () => {
+      const contextModel = {
+        ...MAP_CTX_FIXTURE,
+        view: { ...MAP_CTX_FIXTURE.view, extent: MAP_CTX_EXTENT_FIXTURE },
+      };
+      const map = new Map({});
+      map.setSize([100, 100]);
+      beforeEach(() => {
+        view = createView(contextModel.view, map);
+      });
+      it("create a view", () => {
+        expect(view).toBeTruthy();
+        expect(view).toBeInstanceOf(View);
+      });
+      it("set center", () => {
+        const center = view.getCenter();
+        expect(center).toEqual([324027.04834895337, 6438563.654151043]);
+      });
+      it("set zoom", () => {
+        const zoom = view.getZoom();
+        expect(zoom).toEqual(5);
+      });
+    });
+  });
+  describe("#resetMapFromContext", () => {
+    const map = new Map({});
+    const mapContext = MAP_CTX_FIXTURE;
+    beforeEach(() => {
+      resetMapFromContext(map, mapContext);
+    });
+    it("create a map", () => {
+      expect(map).toBeTruthy();
+      expect(map).toBeInstanceOf(Map);
+    });
+    it("add layers", () => {
+      const layers = map.getLayers().getArray();
+      expect(layers.length).toEqual(3);
+    });
+    it("set view", () => {
+      const view = map.getView();
+      expect(view).toBeTruthy();
+      expect(view).toBeInstanceOf(View);
+    });
+    describe("uses default fallback view", () => {
+      let view: View;
+      const map = new Map({});
+      const mapContext: MapContext = {
+        view: {},
+        layers: [
+          MAP_CTX_LAYER_XYZ_FIXTURE,
+          MAP_CTX_LAYER_WMS_FIXTURE,
+          MAP_CTX_LAYER_GEOJSON_FIXTURE,
+        ],
+      };
+      beforeEach(() => {
+        resetMapFromContext(map, mapContext);
+      });
+      it("create a map", () => {
+        expect(map).toBeTruthy();
+        expect(map).toBeInstanceOf(Map);
+      });
+      it("add layers", () => {
+        const layers = map.getLayers().getArray();
+        expect(layers.length).toEqual(3);
+      });
+      it("set view", () => {
+        view = map.getView();
+        expect(view).toBeTruthy();
+        expect(view).toBeInstanceOf(View);
+      });
+      it("set center", () => {
+        const center = view.getCenter();
+        expect(center).toEqual([0, 0]);
+      });
+      it("set zoom", () => {
+        const zoom = view.getZoom();
+        expect(zoom).toEqual(0);
+      });
+    });
+  });
+});

package/lib/map/create-map.ts

@@ -0,0 +1,148 @@
+import {
+  MapContext,
+  MapContextLayer,
+  MapContextView,
+} from "@geospatial-sdk/core/lib/model";
+import Map from "ol/Map";
+import View from "ol/View";
+import Layer from "ol/layer/Layer";
+import TileLayer from "ol/layer/Tile";
+import XYZ from "ol/source/XYZ";
+import TileWMS from "ol/source/TileWMS";
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
+import GeoJSON from "ol/format/GeoJSON";
+import Feature from "ol/Feature";
+import Geometry from "ol/geom/Geometry";
+import { fromLonLat } from "ol/proj";
+import { bbox as bboxStrategy } from "ol/loadingstrategy";
+import { removeSearchParams } from "@geospatial-sdk/core/lib/utils";
+import { defaultStyle } from "./styles";
+
+const geosjonFormat = new GeoJSON();
+
+export function createLayer(layerModel: MapContextLayer): Layer {
+  const { type } = layerModel;
+  const style = defaultStyle;
+  switch (type) {
+    case "xyz":
+      return new TileLayer({
+        source: new XYZ({
+          url: layerModel.url,
+        }),
+      });
+    case "wms":
+      return new TileLayer({
+        source: new TileWMS({
+          url: removeSearchParams(layerModel.url, ["request", "service"]),
+          params: { LAYERS: layerModel.name },
+          gutter: 20,
+        }),
+      });
+    // TODO: implement when ogc-client can handle wmts
+    // case 'wmts':
+    //   return new TileLayer({
+    //     source: new WMTS(layerModel.options),
+    //   })
+    case "wfs":
+      return new VectorLayer({
+        source: new VectorSource({
+          format: new GeoJSON(),
+          url: function (extent) {
+            const urlObj = new URL(
+              removeSearchParams(layerModel.url, [
+                "service",
+                "version",
+                "request",
+              ]),
+            );
+            urlObj.searchParams.set("service", "WFS");
+            urlObj.searchParams.set("version", "1.1.0");
+            urlObj.searchParams.set("request", "GetFeature");
+            urlObj.searchParams.set("outputFormat", "application/json");
+            urlObj.searchParams.set("typename", layerModel.featureType);
+            urlObj.searchParams.set("srsname", "EPSG:3857");
+            urlObj.searchParams.set("bbox", `${extent.join(",")},EPSG:3857`);
+            return urlObj.toString();
+          },
+          strategy: bboxStrategy,
+        }),
+        style,
+      });
+    case "geojson": {
+      if (layerModel.url !== undefined) {
+        return new VectorLayer({
+          source: new VectorSource({
+            format: new GeoJSON(),
+            url: layerModel.url,
+          }),
+          style,
+        });
+      } else {
+        let geojson = layerModel.data;
+        if (typeof geojson === "string") {
+          try {
+            geojson = JSON.parse(geojson);
+          } catch (e) {
+            console.warn("A layer could not be created", layerModel, e);
+            geojson = { type: "FeatureCollection", features: [] };
+          }
+        }
+        const features = geosjonFormat.readFeatures(geojson, {
+          featureProjection: "EPSG:3857",
+          dataProjection: "EPSG:4326",
+        }) as Feature<Geometry>[];
+        return new VectorLayer({
+          source: new VectorSource({
+            features,
+          }),
+          style,
+        });
+      }
+    }
+    default:
+      throw new Error(`Unrecognized layer type: ${layerModel.type}`);
+  }
+}
+
+export function createView(viewModel: MapContextView, map: Map): View {
+  const { center: centerInViewProj, zoom, maxZoom, maxExtent } = viewModel;
+  const center = centerInViewProj
+    ? fromLonLat(centerInViewProj, "EPSG:3857")
+    : [0, 0];
+  const view = new View({
+    center,
+    zoom: zoom ?? 0,
+    maxZoom,
+    extent: maxExtent,
+    multiWorld: false,
+    constrainResolution: true,
+  });
+  if (viewModel.extent) {
+    view.fit(viewModel.extent, {
+      size: map.getSize(),
+    });
+  }
+  return view;
+}
+
+/**
+ * Create an OpenLayers map from a context
+ * @param context
+ */
+export function createMapFromContext(context: MapContext): Map {
+  const map = new Map({});
+  return resetMapFromContext(map, context);
+}
+
+/**
+ * Resets an OpenLayers map from a context; existing content will be cleared
+ * @param map
+ * @param context
+ */
+export function resetMapFromContext(map: Map, context: MapContext): Map {
+  map.setView(createView(context.view, map));
+  map.getLayers().clear();
+  context.layers.forEach((layer) => map.addLayer(createLayer(layer)));
+  return map;
+}

package/lib/map/index.ts

@@ -0,0 +1,2 @@
+export * from "./styles";
+export { createMapFromContext, resetMapFromContext } from "./create-map";

package/lib/map/styles.test.ts

@@ -0,0 +1,217 @@
+import chroma from "chroma-js";
+import Style from "ol/style/Style";
+import Feature from "ol/Feature";
+import { LineString, Point, Polygon } from "ol/geom";
+import {
+  createGeometryStyles,
+  createStyleFunction,
+  defaultHighlightStyle,
+  defaultStyle,
+  StyleByGeometryType,
+} from "./styles";
+import CircleStyle from "ol/style/Circle";
+
+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: Function;
+    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);
+        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);
+        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);
+        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

@@ -0,0 +1,103 @@
+import { Circle, Fill, Stroke, Style } from "ol/style";
+import { StyleFunction } from "ol/style/Style";
+import { FeatureLike } from "ol/Feature";
+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,
+  }),
+);

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@geospatial-sdk/openlayers",
+  "version": "0.0.3-alpha.0+d226ce9",
+  "description": "OpenLayers-related utilities",
+  "keywords": [
+    "ol",
+    "openlayers",
+    "map"
+  ],
+  "author": "Olivia <olivia.guyot@camptocamp.com>",
+  "homepage": "",
+  "license": "BSD-3-Clause",
+  "main": "index.ts",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "directories": {
+    "lib": "lib"
+  },
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "test": "vitest"
+  },
+  "devDependencies": {
+    "@types/chroma-js": "^2.4.3",
+    "ol": "^8.2.0"
+  },
+  "peerDependencies": {
+    "ol": ">6.x"
+  },
+  "dependencies": {
+    "chroma-js": "^2.4.2"
+  },
+  "gitHead": "d226ce97fd7d50287c694ce4ed7182755cdfbb4e"
+}