@geospatial-sdk/openlayers 0.0.5-dev.10 → 0.0.5-dev.12

package/dist/map/apply-context-diff.d.ts

@@ -5,5 +5,5 @@ import { MapContextDiff } from "@geospatial-sdk/core";
  * @param map
  * @param contextDiff
  */
-export declare function applyContextDiffToMap(map: Map, contextDiff: MapContextDiff): Map;
+export declare function applyContextDiffToMap(map: Map, contextDiff: MapContextDiff): Promise<Map>;
 //# sourceMappingURL=apply-context-diff.d.ts.map

package/dist/map/apply-context-diff.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"apply-context-diff.d.ts","sourceRoot":"","sources":["../../lib/map/apply-context-diff.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,QAAQ,CAAC;AACzB,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGtD;;;;GAIG;AACH,wBAAgB,qBAAqB,CACnC,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,cAAc,GAC1B,GAAG,CA6CL"}
+{"version":3,"file":"apply-context-diff.d.ts","sourceRoot":"","sources":["../../lib/map/apply-context-diff.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,QAAQ,CAAC;AACzB,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGtD;;;;GAIG;AACH,wBAAsB,qBAAqB,CACvC,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,cAAc,GAC5B,OAAO,CAAC,GAAG,CAAC,CAmDd"}

package/dist/map/apply-context-diff.js

@@ -1,3 +1,12 @@
+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 { createLayer } from "./create-map";
 /**
  * Apply a context diff to an OpenLayers map
@@ -5,39 +14,44 @@ import { createLayer } from "./create-map";
  * @param contextDiff
  */
 export function applyContextDiffToMap(map, contextDiff) {
-    const layers = map.getLayers();
-    // removed layers (sorted by descending position)
-    if (contextDiff.layersRemoved.length > 0) {
-        const removed = contextDiff.layersRemoved.sort((a, b) => b.position - a.position);
-        for (const layerRemoved of removed) {
-            layers.item(layerRemoved.position).dispose();
-            layers.removeAt(layerRemoved.position);
+    return __awaiter(this, void 0, void 0, function* () {
+        const layers = map.getLayers();
+        // removed layers (sorted by descending position)
+        if (contextDiff.layersRemoved.length > 0) {
+            const removed = contextDiff.layersRemoved.sort((a, b) => b.position - a.position);
+            for (const layerRemoved of removed) {
+                layers.item(layerRemoved.position).dispose();
+                layers.removeAt(layerRemoved.position);
+            }
         }
-    }
-    // insert added layers
-    for (const layerAdded of contextDiff.layersAdded) {
-        const layer = createLayer(layerAdded.layer);
-        if (layerAdded.position >= layers.getLength()) {
-            layers.push(layer);
+        // insert added layers
+        const newLayers = yield Promise.all(contextDiff.layersAdded.map((layerAdded) => createLayer(layerAdded.layer)));
+        newLayers.forEach((layer, index) => {
+            const position = contextDiff.layersAdded[index].position;
+            if (position >= layers.getLength()) {
+                layers.push(layer);
+            }
+            else {
+                layers.insertAt(position, layer);
+            }
+        });
+        // move reordered layers (sorted by ascending new position)
+        if (contextDiff.layersReordered.length > 0) {
+            const reordered = contextDiff.layersReordered.sort((a, b) => a.newPosition - b.newPosition);
+            const olLayers = reordered.map((layer) => layers.item(layer.previousPosition));
+            const layersArray = layers.getArray();
+            for (let i = 0; i < reordered.length; i++) {
+                layersArray[reordered[i].newPosition] = olLayers[i];
+            }
+            map.setLayers([...layersArray]);
         }
-        else {
-            layers.insertAt(layerAdded.position, layer);
+        // recreate changed layers
+        for (const layerChanged of contextDiff.layersChanged) {
+            layers.item(layerChanged.position).dispose();
+            createLayer(layerChanged.layer).then(layer => {
+                layers.setAt(layerChanged.position, layer);
+            });
         }
-    }
-    // move reordered layers (sorted by ascending new position)
-    if (contextDiff.layersReordered.length > 0) {
-        const reordered = contextDiff.layersReordered.sort((a, b) => a.newPosition - b.newPosition);
-        const olLayers = reordered.map((layer) => layers.item(layer.previousPosition));
-        const layersArray = layers.getArray();
-        for (let i = 0; i < reordered.length; i++) {
-            layersArray[reordered[i].newPosition] = olLayers[i];
-        }
-        map.setLayers([...layersArray]);
-    }
-    // recreate changed layers
-    for (const layerChanged of contextDiff.layersChanged) {
-        layers.item(layerChanged.position).dispose();
-        layers.setAt(layerChanged.position, createLayer(layerChanged.layer));
-    }
-    return map;
+        return map;
+    });
 }

package/dist/map/create-map.d.ts

@@ -2,18 +2,18 @@ import { MapContext, MapContextLayer, MapContextView } from "@geospatial-sdk/cor
 import Map from "ol/Map";
 import View from "ol/View";
 import Layer from "ol/layer/Layer";
-export declare function createLayer(layerModel: MapContextLayer): Layer;
+export declare function createLayer(layerModel: MapContextLayer): Promise<Layer>;
 export declare function createView(viewModel: MapContextView, map: Map): View;
 /**
  * Create an OpenLayers map from a context; optionally specify a target (root element) for the map
  * @param context
  * @param target
  */
-export declare function createMapFromContext(context: MapContext, target?: string | HTMLElement): Map;
+export declare function createMapFromContext(context: MapContext, target?: string | HTMLElement): Promise<Map>;
 /**
  * Resets an OpenLayers map from a context; existing content will be cleared
  * @param map
  * @param context
  */
-export declare function resetMapFromContext(map: Map, context: MapContext): Map;
+export declare function resetMapFromContext(map: Map, context: MapContext): Promise<Map>;
 //# sourceMappingURL=create-map.d.ts.map

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,EACf,MAAM,sBAAsB,CAAC;AAC9B,OAAO,GAAG,MAAM,QAAQ,CAAC;AACzB,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,KAAK,MAAM,gBAAgB,CAAC;AAgBnC,wBAAgB,WAAW,CAAC,UAAU,EAAE,eAAe,GAAG,KAAK,CAgG9D;AAED,wBAAgB,UAAU,CAAC,SAAS,EAAE,cAAc,EAAE,GAAG,EAAE,GAAG,GAAG,IAAI,CAmBpE;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,UAAU,EACnB,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,GAC5B,GAAG,CAKL;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,UAAU,GAAG,GAAG,CAKtE"}
+{"version":3,"file":"create-map.d.ts","sourceRoot":"","sources":["../../lib/map/create-map.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,eAAe,EACf,cAAc,EACf,MAAM,sBAAsB,CAAC;AAC9B,OAAO,GAAG,MAAM,QAAQ,CAAC;AACzB,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,KAAK,MAAM,gBAAgB,CAAC;AAqBnC,wBAAsB,WAAW,CAAC,UAAU,EAAE,eAAe,GAAG,OAAO,CAAC,KAAK,CAAC,CA2I7E;AAED,wBAAgB,UAAU,CAAC,SAAS,EAAE,cAAc,EAAE,GAAG,EAAE,GAAG,GAAG,IAAI,CAmBpE;AAED;;;;GAIG;AACH,wBAAsB,oBAAoB,CACtC,OAAO,EAAE,UAAU,EACnB,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,GAC9B,OAAO,CAAC,GAAG,CAAC,CAKd;AAED;;;;GAIG;AACH,wBAAsB,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG,CAAC,CAQrF"}

package/dist/map/create-map.js

@@ -1,3 +1,12 @@
+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 Map from "ol/Map";
 import View from "ol/View";
 import TileLayer from "ol/layer/Tile";
@@ -10,103 +19,155 @@ import { fromLonLat } from "ol/proj";
 import { bbox as bboxStrategy } from "ol/loadingstrategy";
 import { removeSearchParams } from "@geospatial-sdk/core";
 import { defaultStyle } from "./styles";
+import VectorTileLayer from "ol/layer/VectorTile";
+import { OGCMapTile, OGCVectorTile } from "ol/source";
+import { MVT } from "ol/format";
+import { OgcApiEndpoint, WfsEndpoint } from "@camptocamp/ogc-client";
 const geosjonFormat = new GeoJSON();
+const WFS_MAX_FEATURES = 10000;
 export function createLayer(layerModel) {
     var _a;
-    const { type } = layerModel;
-    const style = defaultStyle;
-    let layer;
-    switch (type) {
-        case "xyz":
-            layer = new TileLayer({
-                source: new XYZ({
-                    url: layerModel.url,
-                }),
-            });
-            break;
-        case "wms":
-            layer = new TileLayer({
-                source: new TileWMS({
-                    url: removeSearchParams(layerModel.url, ["request", "service"]),
-                    params: { LAYERS: layerModel.name },
-                    gutter: 20,
-                }),
-            });
-            break;
-        // TODO: implement when ogc-client can handle wmts
-        // case 'wmts':
-        //   return new TileLayer({
-        //     source: new WMTS(layerModel.options),
-        //   })
-        case "wfs":
-            layer = 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,
-            });
-            break;
-        case "geojson": {
-            if (layerModel.url !== undefined) {
-                layer = new VectorLayer({
-                    source: new VectorSource({
-                        format: new GeoJSON(),
+    return __awaiter(this, void 0, void 0, function* () {
+        const { type } = layerModel;
+        const style = defaultStyle;
+        let layer;
+        switch (type) {
+            case "xyz":
+                layer = new TileLayer({
+                    source: new XYZ({
                         url: layerModel.url,
+                        attributions: layerModel.attributions,
+                    }),
+                });
+                break;
+            case "wms":
+                layer = new TileLayer({
+                    source: new TileWMS({
+                        url: removeSearchParams(layerModel.url, ["request", "service"]),
+                        params: { LAYERS: layerModel.name },
+                        gutter: 20,
+                        attributions: layerModel.attributions,
                     }),
+                });
+                break;
+            // TODO: implement when ogc-client can handle wmts
+            // case 'wmts':
+            //   return new TileLayer({
+            //     source: new WMTS(layerModel.options),
+            //   })
+            case "wfs": {
+                const olLayer = new VectorLayer({
                     style,
                 });
+                new WfsEndpoint(layerModel.url).isReady().then((endpoint) => {
+                    var _a;
+                    const featureType = (_a = endpoint.getSingleFeatureTypeName()) !== null && _a !== void 0 ? _a : layerModel.featureType;
+                    olLayer.setSource(new VectorSource({
+                        format: new GeoJSON(),
+                        url: function (extent) {
+                            return endpoint.getFeatureUrl(featureType, {
+                                maxFeatures: WFS_MAX_FEATURES,
+                                asJson: true,
+                                outputCrs: "EPSG:3857",
+                                extent: extent,
+                                extentCrs: "EPSG:3857",
+                            });
+                        },
+                        strategy: bboxStrategy,
+                        attributions: layerModel.attributions,
+                    }));
+                });
+                layer = olLayer;
+                break;
+            }
+            case "geojson": {
+                if (layerModel.url !== undefined) {
+                    layer = new VectorLayer({
+                        source: new VectorSource({
+                            format: new GeoJSON(),
+                            url: layerModel.url,
+                            attributions: layerModel.attributions,
+                        }),
+                        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",
+                    });
+                    layer = new VectorLayer({
+                        source: new VectorSource({
+                            features,
+                            attributions: layerModel.attributions,
+                        }),
+                        style,
+                    });
+                }
+                break;
             }
-            else {
-                let geojson = layerModel.data;
-                if (typeof geojson === "string") {
-                    try {
-                        geojson = JSON.parse(geojson);
+            case "ogcapi": {
+                const ogcEndpoint = yield new OgcApiEndpoint(layerModel.url);
+                let layerUrl;
+                if (layerModel.useTiles) {
+                    if (layerModel.useTiles === 'vector') {
+                        layerUrl = yield ogcEndpoint.getVectorTilesetUrl(layerModel.collection, layerModel.tileMatrixSet);
+                        layer = new VectorTileLayer({
+                            source: new OGCVectorTile({
+                                url: layerUrl,
+                                format: new MVT(),
+                                attributions: layerModel.attributions,
+                            }),
+                        });
                     }
-                    catch (e) {
-                        console.warn("A layer could not be created", layerModel, e);
-                        geojson = { type: "FeatureCollection", features: [] };
+                    else if (layerModel.useTiles === 'map') {
+                        layerUrl = yield ogcEndpoint.getMapTilesetUrl(layerModel.collection, layerModel.tileMatrixSet);
+                        layer = new TileLayer({
+                            source: new OGCMapTile({
+                                url: layerUrl,
+                                attributions: layerModel.attributions,
+                            }),
+                        });
                     }
                 }
-                const features = geosjonFormat.readFeatures(geojson, {
-                    featureProjection: "EPSG:3857",
-                    dataProjection: "EPSG:4326",
-                });
-                layer = new VectorLayer({
-                    source: new VectorSource({
-                        features,
-                    }),
-                    style,
-                });
+                else {
+                    layerUrl = yield ogcEndpoint.getCollectionItemsUrl(layerModel.collection, layerModel.options);
+                    layer = new VectorLayer({
+                        source: new VectorSource({
+                            format: new GeoJSON(),
+                            url: layerUrl,
+                            attributions: layerModel.attributions,
+                        }),
+                        style,
+                    });
+                }
+                break;
             }
-            break;
+            default:
+                throw new Error(`Unrecognized layer type: ${layerModel.type}`);
         }
-        default:
-            throw new Error(`Unrecognized layer type: ${layerModel.type}`);
-    }
-    typeof layerModel.visibility !== "undefined" &&
-        layer.setVisible(layerModel.visibility);
-    typeof layerModel.opacity !== "undefined" &&
-        layer.setOpacity(layerModel.opacity);
-    typeof layerModel.attributions !== "undefined" &&
-        ((_a = layer.getSource()) === null || _a === void 0 ? void 0 : _a.setAttributions(layerModel.attributions));
-    layer.set("label", layerModel.label);
-    return layer;
+        if (!layer) {
+            throw new Error(`Layer could not be created for type: ${layerModel.type}`);
+        }
+        typeof layerModel.visibility !== "undefined" &&
+            layer.setVisible(layerModel.visibility);
+        typeof layerModel.opacity !== "undefined" &&
+            layer.setOpacity(layerModel.opacity);
+        typeof layerModel.attributions !== "undefined" &&
+            ((_a = layer.getSource()) === null || _a === void 0 ? void 0 : _a.setAttributions(layerModel.attributions));
+        layer.set("label", layerModel.label);
+        return layer;
+    });
 }
 export function createView(viewModel, map) {
     const { center: centerInViewProj, zoom, maxZoom, maxExtent } = viewModel;
@@ -134,10 +195,12 @@ export function createView(viewModel, map) {
  * @param target
  */
 export function createMapFromContext(context, target) {
-    const map = new Map({
-        target,
+    return __awaiter(this, void 0, void 0, function* () {
+        const map = new Map({
+            target,
+        });
+        return yield resetMapFromContext(map, context);
     });
-    return resetMapFromContext(map, context);
 }
 /**
  * Resets an OpenLayers map from a context; existing content will be cleared
@@ -145,8 +208,13 @@ export function createMapFromContext(context, target) {
  * @param context
  */
 export function resetMapFromContext(map, context) {
-    map.setView(createView(context.view, map));
-    map.getLayers().clear();
-    context.layers.forEach((layer) => map.addLayer(createLayer(layer)));
-    return map;
+    return __awaiter(this, void 0, void 0, function* () {
+        map.setView(createView(context.view, map));
+        map.getLayers().clear();
+        for (const layerModel of context.layers) {
+            const layer = yield createLayer(layerModel);
+            map.addLayer(layer);
+        }
+        return map;
+    });
 }

package/lib/map/apply-context-diff.test.ts

@@ -17,8 +17,8 @@ import { applyContextDiffToMap } from "./apply-context-diff";
 import { beforeEach } from "vitest";
 import BaseLayer from "ol/layer/Base";
 
-function assertEqualsToModel(layer: any, layerModel: MapContextLayer) {
-  const reference = createLayer(layerModel) as any;
+async function assertEqualsToModel(layer: any, layerModel: MapContextLayer) {
+  const reference = await createLayer(layerModel) as any;
   expect(reference).toBeInstanceOf(layer.constructor);
   const refSource = reference.getSource() as any;
   const layerSource = layer.getSource() as any;
@@ -38,16 +38,16 @@ describe("applyContextDiffToMap", () => {
   let map: Map;
   let layersArray: BaseLayer[];
 
-  beforeEach(() => {
+  beforeEach(async () => {
     context = {
       ...SAMPLE_CONTEXT,
       layers: [SAMPLE_LAYER2, SAMPLE_LAYER1],
     };
-    map = createMapFromContext(context);
+    map = await createMapFromContext(context);
   });
 
   describe("no change", () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       diff = {
         layersAdded: [],
         layersChanged: [],
@@ -55,7 +55,7 @@ describe("applyContextDiffToMap", () => {
         layersReordered: [],
         viewChanges: {},
       };
-      applyContextDiffToMap(map, diff);
+      await applyContextDiffToMap(map, diff);
       layersArray = map.getLayers().getArray();
     });
     it("does not affect the map", () => {
@@ -159,12 +159,12 @@ describe("applyContextDiffToMap", () => {
 
   describe("reordering", () => {
     describe("three layers reordered", () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         context = {
           ...SAMPLE_CONTEXT,
           layers: [SAMPLE_LAYER1, SAMPLE_LAYER2, SAMPLE_LAYER3],
         };
-        map = createMapFromContext(context);
+        map = await createMapFromContext(context);
         diff = {
           layersAdded: [],
           layersChanged: [],
@@ -195,12 +195,12 @@ describe("applyContextDiffToMap", () => {
     });
 
     describe("four layers reordered", () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         context = {
           ...SAMPLE_CONTEXT,
           layers: [SAMPLE_LAYER1, SAMPLE_LAYER3, SAMPLE_LAYER4, SAMPLE_LAYER2],
         };
-        map = createMapFromContext(context);
+        map = await createMapFromContext(context);
         diff = {
           layersAdded: [],
           layersChanged: [],
@@ -234,13 +234,13 @@ describe("applyContextDiffToMap", () => {
 
   describe("combined changes", () => {
     let changedLayer: MapContextLayer;
-    beforeEach(() => {
-      changedLayer = { ...SAMPLE_LAYER3, extras: { prop: true } };
+    beforeEach(async () => {
+      changedLayer = {...SAMPLE_LAYER3, extras: {prop: true}};
       context = {
         ...context,
         layers: [SAMPLE_LAYER1, SAMPLE_LAYER5, SAMPLE_LAYER3, SAMPLE_LAYER4],
       };
-      map = createMapFromContext(context);
+      map = await createMapFromContext(context);
       diff = {
         layersAdded: [
           {

package/lib/map/apply-context-diff.ts

@@ -7,16 +7,16 @@ import { createLayer } from "./create-map";
  * @param map
  * @param contextDiff
  */
-export function applyContextDiffToMap(
-  map: Map,
-  contextDiff: MapContextDiff,
-): Map {
+export async function applyContextDiffToMap(
+    map: Map,
+    contextDiff: MapContextDiff,
+): Promise<Map> {
   const layers = map.getLayers();
 
   // removed layers (sorted by descending position)
   if (contextDiff.layersRemoved.length > 0) {
     const removed = contextDiff.layersRemoved.sort(
-      (a, b) => b.position - a.position,
+        (a, b) => b.position - a.position,
     );
     for (const layerRemoved of removed) {
       layers.item(layerRemoved.position).dispose();
@@ -25,22 +25,26 @@ export function applyContextDiffToMap(
   }
 
   // insert added layers
-  for (const layerAdded of contextDiff.layersAdded) {
-    const layer = createLayer(layerAdded.layer);
-    if (layerAdded.position >= layers.getLength()) {
+  const newLayers = await Promise.all(
+      contextDiff.layersAdded.map((layerAdded) => createLayer(layerAdded.layer))
+  );
+
+  newLayers.forEach((layer, index) => {
+    const position = contextDiff.layersAdded[index].position;
+    if (position >= layers.getLength()) {
       layers.push(layer);
     } else {
-      layers.insertAt(layerAdded.position, layer);
+      layers.insertAt(position, layer);
     }
-  }
+  });
 
   // move reordered layers (sorted by ascending new position)
   if (contextDiff.layersReordered.length > 0) {
     const reordered = contextDiff.layersReordered.sort(
-      (a, b) => a.newPosition - b.newPosition,
+        (a, b) => a.newPosition - b.newPosition,
     );
     const olLayers = reordered.map((layer) =>
-      layers.item(layer.previousPosition),
+        layers.item(layer.previousPosition),
     );
     const layersArray = layers.getArray();
     for (let i = 0; i < reordered.length; i++) {
@@ -52,7 +56,9 @@ export function applyContextDiffToMap(
   // recreate changed layers
   for (const layerChanged of contextDiff.layersChanged) {
     layers.item(layerChanged.position).dispose();
-    layers.setAt(layerChanged.position, createLayer(layerChanged.layer));
+    createLayer(layerChanged.layer).then(layer => {
+      layers.setAt(layerChanged.position, layer);
+    });
   }
   return map;
 }

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

@@ -15,6 +15,7 @@ import {
   MAP_CTX_LAYER_WFS_FIXTURE,
   MAP_CTX_LAYER_WMS_FIXTURE,
   MAP_CTX_LAYER_XYZ_FIXTURE,
+  MAP_CTX_LAYER_OGCAPI_FIXTURE,
 } from "@geospatial-sdk/core/fixtures/map-context.fixtures";
 import {
   MapContext,
@@ -35,9 +36,9 @@ describe("MapContextService", () => {
     let layerModel: MapContextLayer, layer: Layer;
 
     describe("XYZ", () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         layerModel = MAP_CTX_LAYER_XYZ_FIXTURE;
-        layer = createLayer(layerModel);
+        layer = await createLayer(layerModel);
       });
       it("create a tile layer", () => {
         expect(layer).toBeTruthy();
@@ -62,11 +63,37 @@ describe("MapContextService", () => {
         );
       });
     });
-
+    describe("OGCAPI", () => {
+        beforeEach(async () => {
+          layerModel = MAP_CTX_LAYER_OGCAPI_FIXTURE;
+          layer = await createLayer(layerModel);
+        });
+        it("create a vector tile layer", () => {
+            expect(layer).toBeTruthy();
+            expect(layer).toBeInstanceOf(VectorLayer);
+        });
+        it("set correct layer properties", () => {
+            expect(layer.getVisible()).toBe(true);
+            expect(layer.getOpacity()).toBe(1);
+            expect(layer.get("label")).toBeUndefined();
+            expect(layer.getSource()?.getAttributions()).toBeNull();
+        });
+        it("create a OGCVectorTile source", () => {
+            const source = layer.getSource();
+            expect(source).toBeInstanceOf(VectorSource);
+        });
+        it("set correct url", () => {
+            const source = layer.getSource() as VectorSource;
+            const url = source.getUrl();
+            expect(url).toBe(
+            "https://demo.ldproxy.net/zoomstack/collections/airports/items?f=json",
+            );
+        });
+    });
     describe("WMS", () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         (layerModel = MAP_CTX_LAYER_WMS_FIXTURE),
-          (layer = createLayer(layerModel));
+            (layer = await createLayer(layerModel));
       });
       it("create a tile layer", () => {
         expect(layer).toBeTruthy();
@@ -104,9 +131,9 @@ describe("MapContextService", () => {
     });
 
     describe("WFS", () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         (layerModel = MAP_CTX_LAYER_WFS_FIXTURE),
-          (layer = createLayer(layerModel));
+            (layer = await createLayer(layerModel));
       });
       it("create a vector layer", () => {
         expect(layer).toBeTruthy();
@@ -116,6 +143,9 @@ describe("MapContextService", () => {
         expect(layer.getVisible()).toBe(true);
         expect(layer.getOpacity()).toBe(0.5);
         expect(layer.get("label")).toBe("Communes");
+        const source = layer.getSource();
+        expect(source).toBeInstanceOf(VectorSource);
+
         const attributions = layer.getSource()?.getAttributions();
         expect(attributions).not.toBeNull();
         // @ts-ignore
@@ -129,16 +159,16 @@ describe("MapContextService", () => {
         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",
+          "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&maxFeatures=10000",
         );
       });
     });
 
     describe("GEOJSON", () => {
       describe("with inline data", () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           layerModel = MAP_CTX_LAYER_GEOJSON_FIXTURE;
-          layer = createLayer(layerModel);
+          layer = await createLayer(layerModel);
         });
         it("create a VectorLayer", () => {
           expect(layer).toBeTruthy();
@@ -162,10 +192,10 @@ describe("MapContextService", () => {
         });
       });
       describe("with inline data as string", () => {
-        beforeEach(() => {
-          layerModel = { ...MAP_CTX_LAYER_GEOJSON_FIXTURE };
+        beforeEach(async () => {
+          layerModel = {...MAP_CTX_LAYER_GEOJSON_FIXTURE};
           layerModel.data = JSON.stringify(layerModel.data);
-          layer = createLayer(layerModel);
+          layer = await createLayer(layerModel);
         });
         it("create a VectorLayer", () => {
           expect(layer).toBeTruthy();
@@ -185,7 +215,7 @@ describe("MapContextService", () => {
         });
       });
       describe("with invalid inline data as string", () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           const spy = vi.spyOn(window.console, "warn");
           spy.mockClear();
           layerModel = {
@@ -193,7 +223,7 @@ describe("MapContextService", () => {
             url: undefined,
             data: "blargz",
           };
-          layer = createLayer(layerModel);
+          layer = await createLayer(layerModel);
         });
         it("create a VectorLayer", () => {
           expect(layer).toBeTruthy();
@@ -209,9 +239,9 @@ describe("MapContextService", () => {
         });
       });
       describe("with remote file url", () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           layerModel = MAP_CTX_LAYER_GEOJSON_REMOTE_FIXTURE;
-          layer = createLayer(layerModel);
+          layer = await createLayer(layerModel);
         });
         it("create a VectorLayer", () => {
           expect(layer).toBeTruthy();
@@ -238,8 +268,8 @@ describe("MapContextService", () => {
     let map: Map;
     describe("from center and zoom", () => {
       const contextModel = MAP_CTX_FIXTURE;
-      beforeEach(() => {
-        map = createMapFromContext(contextModel);
+      beforeEach(async () => {
+        map = await createMapFromContext(contextModel);
         view = createView(contextModel.view, map);
       });
       it("create a view", () => {

package/lib/map/create-map.ts

@@ -18,18 +18,24 @@ import { fromLonLat } from "ol/proj";
 import { bbox as bboxStrategy } from "ol/loadingstrategy";
 import { removeSearchParams } from "@geospatial-sdk/core";
 import { defaultStyle } from "./styles";
+import VectorTileLayer from "ol/layer/VectorTile";
+import {OGCMapTile, OGCVectorTile} from "ol/source";
+import {MVT} from "ol/format";
+import {OgcApiEndpoint, WfsEndpoint} from "@camptocamp/ogc-client";
 
 const geosjonFormat = new GeoJSON();
+const WFS_MAX_FEATURES = 10000;
 
-export function createLayer(layerModel: MapContextLayer): Layer {
+export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
   const { type } = layerModel;
   const style = defaultStyle;
-  let layer: Layer;
+  let layer: Layer | undefined;
   switch (type) {
     case "xyz":
       layer = new TileLayer({
         source: new XYZ({
           url: layerModel.url,
+          attributions: layerModel.attributions,
         }),
       });
       break;
@@ -39,6 +45,7 @@ export function createLayer(layerModel: MapContextLayer): Layer {
           url: removeSearchParams(layerModel.url, ["request", "service"]),
           params: { LAYERS: layerModel.name },
           gutter: 20,
+          attributions: layerModel.attributions,
         }),
       });
       break;
@@ -47,38 +54,40 @@ export function createLayer(layerModel: MapContextLayer): Layer {
     //   return new TileLayer({
     //     source: new WMTS(layerModel.options),
     //   })
-    case "wfs":
-      layer = 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,
-        }),
+    case "wfs":{
+      const olLayer = new VectorLayer({
         style,
       });
+      new WfsEndpoint(layerModel.url).isReady().then((endpoint) => {
+        const featureType =
+            endpoint.getSingleFeatureTypeName() ?? layerModel.featureType;
+        olLayer.setSource(
+            new VectorSource({
+              format: new GeoJSON(),
+              url: function (extent) {
+                return endpoint.getFeatureUrl(featureType, {
+                  maxFeatures: WFS_MAX_FEATURES,
+                  asJson: true,
+                  outputCrs: "EPSG:3857",
+                  extent: extent as [number, number, number, number],
+                  extentCrs: "EPSG:3857",
+                });
+              },
+              strategy: bboxStrategy,
+              attributions: layerModel.attributions,
+            }),
+        );
+      });
+      layer = olLayer;
       break;
+    }
     case "geojson": {
       if (layerModel.url !== undefined) {
         layer = new VectorLayer({
           source: new VectorSource({
             format: new GeoJSON(),
             url: layerModel.url,
+            attributions: layerModel.attributions,
           }),
           style,
         });
@@ -99,6 +108,42 @@ export function createLayer(layerModel: MapContextLayer): Layer {
         layer = new VectorLayer({
           source: new VectorSource({
             features,
+            attributions: layerModel.attributions,
+          }),
+          style,
+        });
+      }
+      break;
+    }
+    case "ogcapi": {
+      const ogcEndpoint = await new OgcApiEndpoint(layerModel.url);
+      let layerUrl: string;
+      if (layerModel.useTiles) {
+        if (layerModel.useTiles === 'vector') {
+          layerUrl = await ogcEndpoint.getVectorTilesetUrl(layerModel.collection, layerModel.tileMatrixSet);
+          layer = new VectorTileLayer({
+            source: new OGCVectorTile({
+              url: layerUrl,
+              format: new MVT(),
+              attributions: layerModel.attributions,
+            }),
+          });
+        } else if (layerModel.useTiles === 'map') {
+          layerUrl = await ogcEndpoint.getMapTilesetUrl(layerModel.collection, layerModel.tileMatrixSet);
+          layer = new TileLayer({
+            source: new OGCMapTile({
+              url: layerUrl,
+              attributions: layerModel.attributions,
+            }),
+          });
+        }
+      } else {
+        layerUrl = await ogcEndpoint.getCollectionItemsUrl(layerModel.collection, layerModel.options);
+        layer = new VectorLayer({
+          source: new VectorSource({
+            format: new GeoJSON(),
+            url: layerUrl,
+            attributions: layerModel.attributions,
           }),
           style,
         });
@@ -108,6 +153,9 @@ export function createLayer(layerModel: MapContextLayer): Layer {
     default:
       throw new Error(`Unrecognized layer type: ${layerModel.type}`);
   }
+  if (!layer) {
+    throw new Error(`Layer could not be created for type: ${layerModel.type}`);
+  }
   typeof layerModel.visibility !== "undefined" &&
     layer.setVisible(layerModel.visibility);
   typeof layerModel.opacity !== "undefined" &&
@@ -145,14 +193,14 @@ export function createView(viewModel: MapContextView, map: Map): View {
  * @param context
  * @param target
  */
-export function createMapFromContext(
-  context: MapContext,
-  target?: string | HTMLElement,
-): Map {
+export async function createMapFromContext(
+    context: MapContext,
+    target?: string | HTMLElement,
+): Promise<Map> {
   const map = new Map({
     target,
   });
-  return resetMapFromContext(map, context);
+  return await resetMapFromContext(map, context);
 }
 
 /**
@@ -160,9 +208,12 @@ export function createMapFromContext(
  * @param map
  * @param context
  */
-export function resetMapFromContext(map: Map, context: MapContext): Map {
+export async function resetMapFromContext(map: Map, context: MapContext): Promise<Map> {
   map.setView(createView(context.view, map));
   map.getLayers().clear();
-  context.layers.forEach((layer) => map.addLayer(createLayer(layer)));
+  for (const layerModel of context.layers) {
+    const layer = await createLayer(layerModel);
+    map.addLayer(layer);
+  }
   return map;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geospatial-sdk/openlayers",
-  "version": "0.0.5-dev.10+cc9736c",
+  "version": "0.0.5-dev.12+8efa402",
   "description": "OpenLayers-related utilities",
   "keywords": [
     "ol",
@@ -35,8 +35,8 @@
     "ol": ">6.x"
   },
   "dependencies": {
-    "@geospatial-sdk/core": "^0.0.5-dev.10+cc9736c",
+    "@geospatial-sdk/core": "^0.0.5-dev.12+8efa402",
     "chroma-js": "^2.4.2"
   },
-  "gitHead": "cc9736c7f9471df0304b3beb82ed31f8926ab627"
+  "gitHead": "8efa4028fb9c2f68aefcf72b744a7afb5c38f19c"
 }