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

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,wBAAsB,qBAAqB,CACvC,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,cAAc,GAC5B,OAAO,CAAC,GAAG,CAAC,CAmDd"}
+{"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;AAQtD;;;;GAIG;AACH,wBAAsB,qBAAqB,CACzC,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,cAAc,GAC1B,OAAO,CAAC,GAAG,CAAC,CAuFd"}

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

@@ -8,6 +8,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { createLayer } from "./create-map";
+import { fromLonLat, transformExtent } from "ol/proj";
+import GeoJSON from "ol/format/GeoJSON";
+const GEOJSON = new GeoJSON();
 /**
  * Apply a context diff to an OpenLayers map
  * @param map
@@ -48,10 +51,46 @@ export function applyContextDiffToMap(map, contextDiff) {
         // recreate changed layers
         for (const layerChanged of contextDiff.layersChanged) {
             layers.item(layerChanged.position).dispose();
-            createLayer(layerChanged.layer).then(layer => {
+            createLayer(layerChanged.layer).then((layer) => {
                 layers.setAt(layerChanged.position, layer);
             });
         }
+        if ("viewChanges" in contextDiff) {
+            const { viewChanges } = contextDiff;
+            const view = map.getView();
+            const projection = view.getProjection();
+            if (!viewChanges) {
+                return map;
+            }
+            if ("geometry" in viewChanges) {
+                const geom = GEOJSON.readGeometry(viewChanges.geometry);
+                view.fit(geom, {
+                    size: map.getSize(),
+                });
+            }
+            else if ("extent" in viewChanges) {
+                view.fit(transformExtent(viewChanges.extent, "EPSG:4326", projection), {
+                    size: map.getSize(),
+                });
+            }
+            else {
+                const { center: centerInViewProj, zoom } = viewChanges;
+                const center = centerInViewProj
+                    ? fromLonLat(centerInViewProj, projection)
+                    : [0, 0];
+                view.setCenter(center);
+                view.setZoom(zoom);
+                if (viewChanges.maxZoom) {
+                    view.setMaxZoom(viewChanges.maxZoom);
+                }
+                // TODO: factorize this better
+                // if (viewChanges.maxExtent) {
+                //   map.setView(new View({
+                //
+                //   }))
+                // }
+            }
+        }
         return 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;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"}
+{"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"}

package/dist/map/create-map.js

@@ -7,6 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { removeSearchParams, } from "@geospatial-sdk/core";
 import Map from "ol/Map";
 import View from "ol/View";
 import TileLayer from "ol/layer/Tile";
@@ -17,13 +18,12 @@ import VectorSource from "ol/source/Vector";
 import GeoJSON from "ol/format/GeoJSON";
 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 { OGCMapTile, OGCVectorTile, WMTS } from "ol/source";
 import { MVT } from "ol/format";
-import { OgcApiEndpoint, WfsEndpoint } from "@camptocamp/ogc-client";
-const geosjonFormat = new GeoJSON();
+import { OgcApiEndpoint, WfsEndpoint, WmtsEndpoint, } from "@camptocamp/ogc-client";
+const GEOJSON = new GeoJSON();
 const WFS_MAX_FEATURES = 10000;
 export function createLayer(layerModel) {
     var _a;
@@ -50,11 +50,36 @@ export function createLayer(layerModel) {
                     }),
                 });
                 break;
-            // TODO: implement when ogc-client can handle wmts
-            // case 'wmts':
-            //   return new TileLayer({
-            //     source: new WMTS(layerModel.options),
-            //   })
+            case "wmts": {
+                const olLayer = new TileLayer({});
+                const endpoint = new WmtsEndpoint(layerModel.url);
+                endpoint.isReady().then((endpoint) => __awaiter(this, void 0, void 0, function* () {
+                    var _b;
+                    const layerName = (_b = endpoint.getSingleLayerName()) !== null && _b !== void 0 ? _b : layerModel.name;
+                    const layer = endpoint.getLayerByName(layerName);
+                    const matrixSet = layer.matrixSets[0];
+                    const tileGrid = yield endpoint.getOpenLayersTileGrid(layer.name);
+                    if (tileGrid === null) {
+                        console.warn("A WMTS tile grid could not be created", layerModel);
+                        return;
+                    }
+                    const resourceUrl = layer.resourceLinks[0];
+                    const dimensions = endpoint.getDefaultDimensions(layer.name);
+                    olLayer.setSource(new WMTS({
+                        layer: layer.name,
+                        style: layer.defaultStyle,
+                        matrixSet: matrixSet.identifier,
+                        format: resourceUrl.format,
+                        url: resourceUrl.url,
+                        requestEncoding: resourceUrl.encoding,
+                        tileGrid,
+                        projection: matrixSet.crs,
+                        dimensions,
+                        attributions: layerModel.attributions,
+                    }));
+                }));
+                return olLayer;
+            }
             case "wfs": {
                 const olLayer = new VectorLayer({
                     style,
@@ -102,7 +127,7 @@ export function createLayer(layerModel) {
                             geojson = { type: "FeatureCollection", features: [] };
                         }
                     }
-                    const features = geosjonFormat.readFeatures(geojson, {
+                    const features = GEOJSON.readFeatures(geojson, {
                         featureProjection: "EPSG:3857",
                         dataProjection: "EPSG:4326",
                     });
@@ -120,7 +145,7 @@ export function createLayer(layerModel) {
                 const ogcEndpoint = yield new OgcApiEndpoint(layerModel.url);
                 let layerUrl;
                 if (layerModel.useTiles) {
-                    if (layerModel.useTiles === 'vector') {
+                    if (layerModel.useTiles === "vector") {
                         layerUrl = yield ogcEndpoint.getVectorTilesetUrl(layerModel.collection, layerModel.tileMatrixSet);
                         layer = new VectorTileLayer({
                             source: new OGCVectorTile({
@@ -130,7 +155,7 @@ export function createLayer(layerModel) {
                             }),
                         });
                     }
-                    else if (layerModel.useTiles === 'map') {
+                    else if (layerModel.useTiles === "map") {
                         layerUrl = yield ogcEndpoint.getMapTilesetUrl(layerModel.collection, layerModel.tileMatrixSet);
                         layer = new TileLayer({
                             source: new OGCMapTile({
@@ -154,7 +179,7 @@ export function createLayer(layerModel) {
                 break;
             }
             default:
-                throw new Error(`Unrecognized layer type: ${layerModel.type}`);
+                throw new Error(`Unrecognized layer type: ${JSON.stringify(layerModel)}`);
         }
         if (!layer) {
             throw new Error(`Layer could not be created for type: ${layerModel.type}`);
@@ -170,23 +195,26 @@ export function createLayer(layerModel) {
     });
 }
 export function createView(viewModel, map) {
-    const { center: centerInViewProj, zoom, maxZoom, maxExtent } = viewModel;
-    const center = centerInViewProj
-        ? fromLonLat(centerInViewProj, "EPSG:3857")
-        : [0, 0];
-    const view = new View({
-        center,
-        zoom: zoom !== null && zoom !== void 0 ? zoom : 0,
-        maxZoom,
-        extent: maxExtent,
-        multiWorld: false,
-        constrainResolution: true,
-    });
-    if (viewModel.extent) {
+    const view = new View(Object.assign(Object.assign(Object.assign({}, ("maxExtent" in viewModel && { extent: viewModel.maxExtent })), ("maxZoom" in viewModel && { maxZoom: viewModel.maxZoom })), { multiWorld: false, constrainResolution: true }));
+    if ("geometry" in viewModel) {
+        const geom = GEOJSON.readGeometry(viewModel.geometry);
+        view.fit(geom, {
+            size: map.getSize(),
+        });
+    }
+    else if ("extent" in viewModel) {
         view.fit(viewModel.extent, {
             size: map.getSize(),
         });
     }
+    else {
+        const { center: centerInViewProj, zoom } = viewModel;
+        const center = centerInViewProj
+            ? fromLonLat(centerInViewProj, "EPSG:3857")
+            : [0, 0];
+        view.setCenter(center);
+        view.setZoom(zoom !== undefined ? zoom : 0);
+    }
     return view;
 }
 /**

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

@@ -18,7 +18,7 @@ import { beforeEach } from "vitest";
 import BaseLayer from "ol/layer/Base";
 
 async function assertEqualsToModel(layer: any, layerModel: MapContextLayer) {
-  const reference = await createLayer(layerModel) as any;
+  const reference = (await createLayer(layerModel)) as any;
   expect(reference).toBeInstanceOf(layer.constructor);
   const refSource = reference.getSource() as any;
   const layerSource = layer.getSource() as any;
@@ -235,7 +235,7 @@ describe("applyContextDiffToMap", () => {
   describe("combined changes", () => {
     let changedLayer: MapContextLayer;
     beforeEach(async () => {
-      changedLayer = {...SAMPLE_LAYER3, extras: {prop: true}};
+      changedLayer = { ...SAMPLE_LAYER3, extras: { prop: true } };
       context = {
         ...context,
         layers: [SAMPLE_LAYER1, SAMPLE_LAYER5, SAMPLE_LAYER3, SAMPLE_LAYER4],

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

@@ -1,6 +1,11 @@
 import Map from "ol/Map";
 import { MapContextDiff } from "@geospatial-sdk/core";
 import { createLayer } from "./create-map";
+import { fromLonLat, transformExtent } from "ol/proj";
+import GeoJSON from "ol/format/GeoJSON";
+import SimpleGeometry from "ol/geom/SimpleGeometry";
+
+const GEOJSON = new GeoJSON();
 
 /**
  * Apply a context diff to an OpenLayers map
@@ -8,15 +13,15 @@ import { createLayer } from "./create-map";
  * @param contextDiff
  */
 export async function applyContextDiffToMap(
-    map: Map,
-    contextDiff: MapContextDiff,
+  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();
@@ -26,7 +31,7 @@ export async function applyContextDiffToMap(
 
   // insert added layers
   const newLayers = await Promise.all(
-      contextDiff.layersAdded.map((layerAdded) => createLayer(layerAdded.layer))
+    contextDiff.layersAdded.map((layerAdded) => createLayer(layerAdded.layer)),
   );
 
   newLayers.forEach((layer, index) => {
@@ -41,10 +46,10 @@ export async function applyContextDiffToMap(
   // 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++) {
@@ -56,9 +61,45 @@ export async function applyContextDiffToMap(
   // recreate changed layers
   for (const layerChanged of contextDiff.layersChanged) {
     layers.item(layerChanged.position).dispose();
-    createLayer(layerChanged.layer).then(layer => {
+    createLayer(layerChanged.layer).then((layer) => {
       layers.setAt(layerChanged.position, layer);
     });
   }
+
+  if ("viewChanges" in contextDiff) {
+    const { viewChanges } = contextDiff;
+    const view = map.getView();
+    const projection = view.getProjection();
+    if (!viewChanges) {
+      return map;
+    }
+    if ("geometry" in viewChanges) {
+      const geom = GEOJSON.readGeometry(viewChanges.geometry);
+      view.fit(geom as SimpleGeometry, {
+        size: map.getSize(),
+      });
+    } else if ("extent" in viewChanges) {
+      view.fit(transformExtent(viewChanges.extent, "EPSG:4326", projection), {
+        size: map.getSize(),
+      });
+    } else {
+      const { center: centerInViewProj, zoom } = viewChanges;
+      const center = centerInViewProj
+        ? fromLonLat(centerInViewProj, projection)
+        : [0, 0];
+      view.setCenter(center);
+      view.setZoom(zoom);
+      if (viewChanges.maxZoom) {
+        view.setMaxZoom(viewChanges.maxZoom);
+      }
+      // TODO: factorize this better
+      // if (viewChanges.maxExtent) {
+      //   map.setView(new View({
+      //
+      //   }))
+      // }
+    }
+  }
+
   return map;
 }

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

@@ -12,10 +12,11 @@ import {
   MAP_CTX_FIXTURE,
   MAP_CTX_LAYER_GEOJSON_FIXTURE,
   MAP_CTX_LAYER_GEOJSON_REMOTE_FIXTURE,
+  MAP_CTX_LAYER_OGCAPI_FIXTURE,
   MAP_CTX_LAYER_WFS_FIXTURE,
   MAP_CTX_LAYER_WMS_FIXTURE,
+  MAP_CTX_LAYER_WMTS_FIXTURE,
   MAP_CTX_LAYER_XYZ_FIXTURE,
-  MAP_CTX_LAYER_OGCAPI_FIXTURE,
 } from "@geospatial-sdk/core/fixtures/map-context.fixtures";
 import {
   MapContext,
@@ -30,6 +31,7 @@ import {
   createView,
   resetMapFromContext,
 } from "./create-map";
+import WMTS from "ol/source/WMTS";
 
 describe("MapContextService", () => {
   describe("#createLayer", () => {
@@ -64,36 +66,36 @@ 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",
-            );
-        });
+      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(async () => {
         (layerModel = MAP_CTX_LAYER_WMS_FIXTURE),
-            (layer = await createLayer(layerModel));
+          (layer = await createLayer(layerModel));
       });
       it("create a tile layer", () => {
         expect(layer).toBeTruthy();
@@ -133,7 +135,7 @@ describe("MapContextService", () => {
     describe("WFS", () => {
       beforeEach(async () => {
         (layerModel = MAP_CTX_LAYER_WFS_FIXTURE),
-            (layer = await createLayer(layerModel));
+          (layer = await createLayer(layerModel));
       });
       it("create a vector layer", () => {
         expect(layer).toBeTruthy();
@@ -193,7 +195,7 @@ describe("MapContextService", () => {
       });
       describe("with inline data as string", () => {
         beforeEach(async () => {
-          layerModel = {...MAP_CTX_LAYER_GEOJSON_FIXTURE};
+          layerModel = { ...MAP_CTX_LAYER_GEOJSON_FIXTURE };
           layerModel.data = JSON.stringify(layerModel.data);
           layer = await createLayer(layerModel);
         });
@@ -261,6 +263,34 @@ describe("MapContextService", () => {
         });
       });
     });
+
+    describe("WMTS", () => {
+      beforeEach(async () => {
+        (layerModel = MAP_CTX_LAYER_WMTS_FIXTURE),
+          (layer = await createLayer(layerModel));
+      });
+      it("create a tile layer", () => {
+        expect(layer).toBeTruthy();
+        expect(layer).toBeInstanceOf(TileLayer);
+      });
+      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 WMTS source", () => {
+        const source = layer.getSource();
+        expect(source).toBeInstanceOf(WMTS);
+      });
+      it("set correct urls", () => {
+        const source = layer.getSource() as WMTS;
+        const urls = source.getUrls() ?? [];
+        expect(urls).toEqual([
+          "https://services.geo.sg.ch/wss/service/SG00066_WMTS/guest/tile/1.0.0/SG00066/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}",
+        ]);
+      });
+    });
   });
 
   describe("#createView", () => {

package/lib/map/create-map.ts

@@ -2,6 +2,7 @@ import {
   MapContext,
   MapContextLayer,
   MapContextView,
+  removeSearchParams,
 } from "@geospatial-sdk/core";
 import Map from "ol/Map";
 import View from "ol/View";
@@ -14,16 +15,20 @@ import VectorSource from "ol/source/Vector";
 import GeoJSON from "ol/format/GeoJSON";
 import Feature from "ol/Feature";
 import Geometry from "ol/geom/Geometry";
+import SimpleGeometry from "ol/geom/SimpleGeometry";
 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";
+import { OGCMapTile, OGCVectorTile, WMTS } from "ol/source";
+import { MVT } from "ol/format";
+import {
+  OgcApiEndpoint,
+  WfsEndpoint,
+  WmtsEndpoint,
+} from "@camptocamp/ogc-client";
 
-const geosjonFormat = new GeoJSON();
+const GEOJSON = new GeoJSON();
 const WFS_MAX_FEATURES = 10000;
 
 export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
@@ -49,33 +54,59 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
         }),
       });
       break;
-    // TODO: implement when ogc-client can handle wmts
-    // case 'wmts':
-    //   return new TileLayer({
-    //     source: new WMTS(layerModel.options),
-    //   })
-    case "wfs":{
+    case "wmts": {
+      const olLayer = new TileLayer({});
+      const endpoint = new WmtsEndpoint(layerModel.url);
+      endpoint.isReady().then(async (endpoint) => {
+        const layerName = endpoint.getSingleLayerName() ?? layerModel.name;
+        const layer = endpoint.getLayerByName(layerName);
+        const matrixSet = layer.matrixSets[0];
+        const tileGrid = await endpoint.getOpenLayersTileGrid(layer.name);
+        if (tileGrid === null) {
+          console.warn("A WMTS tile grid could not be created", layerModel);
+          return;
+        }
+        const resourceUrl = layer.resourceLinks[0];
+        const dimensions = endpoint.getDefaultDimensions(layer.name);
+        olLayer.setSource(
+          new WMTS({
+            layer: layer.name,
+            style: layer.defaultStyle,
+            matrixSet: matrixSet.identifier,
+            format: resourceUrl.format,
+            url: resourceUrl.url,
+            requestEncoding: resourceUrl.encoding,
+            tileGrid,
+            projection: matrixSet.crs,
+            dimensions,
+            attributions: layerModel.attributions,
+          }),
+        );
+      });
+      return olLayer;
+    }
+    case "wfs": {
       const olLayer = new VectorLayer({
         style,
       });
       new WfsEndpoint(layerModel.url).isReady().then((endpoint) => {
         const featureType =
-            endpoint.getSingleFeatureTypeName() ?? layerModel.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,
-            }),
+          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;
@@ -101,7 +132,7 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
             geojson = { type: "FeatureCollection", features: [] };
           }
         }
-        const features = geosjonFormat.readFeatures(geojson, {
+        const features = GEOJSON.readFeatures(geojson, {
           featureProjection: "EPSG:3857",
           dataProjection: "EPSG:4326",
         }) as Feature<Geometry>[];
@@ -119,8 +150,11 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
       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);
+        if (layerModel.useTiles === "vector") {
+          layerUrl = await ogcEndpoint.getVectorTilesetUrl(
+            layerModel.collection,
+            layerModel.tileMatrixSet,
+          );
           layer = new VectorTileLayer({
             source: new OGCVectorTile({
               url: layerUrl,
@@ -128,8 +162,11 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
               attributions: layerModel.attributions,
             }),
           });
-        } else if (layerModel.useTiles === 'map') {
-          layerUrl = await ogcEndpoint.getMapTilesetUrl(layerModel.collection, layerModel.tileMatrixSet);
+        } else if (layerModel.useTiles === "map") {
+          layerUrl = await ogcEndpoint.getMapTilesetUrl(
+            layerModel.collection,
+            layerModel.tileMatrixSet,
+          );
           layer = new TileLayer({
             source: new OGCMapTile({
               url: layerUrl,
@@ -138,7 +175,10 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
           });
         }
       } else {
-        layerUrl = await ogcEndpoint.getCollectionItemsUrl(layerModel.collection, layerModel.options);
+        layerUrl = await ogcEndpoint.getCollectionItemsUrl(
+          layerModel.collection,
+          layerModel.options,
+        );
         layer = new VectorLayer({
           source: new VectorSource({
             format: new GeoJSON(),
@@ -151,7 +191,7 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
       break;
     }
     default:
-      throw new Error(`Unrecognized layer type: ${layerModel.type}`);
+      throw new Error(`Unrecognized layer type: ${JSON.stringify(layerModel)}`);
   }
   if (!layer) {
     throw new Error(`Layer could not be created for type: ${layerModel.type}`);
@@ -168,22 +208,28 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
 }
 
 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,
+    ...("maxExtent" in viewModel && { extent: viewModel.maxExtent }),
+    ...("maxZoom" in viewModel && { maxZoom: viewModel.maxZoom }),
     multiWorld: false,
     constrainResolution: true,
   });
-  if (viewModel.extent) {
+  if ("geometry" in viewModel) {
+    const geom = GEOJSON.readGeometry(viewModel.geometry);
+    view.fit(geom as SimpleGeometry, {
+      size: map.getSize(),
+    });
+  } else if ("extent" in viewModel) {
     view.fit(viewModel.extent, {
       size: map.getSize(),
     });
+  } else {
+    const { center: centerInViewProj, zoom } = viewModel;
+    const center = centerInViewProj
+      ? fromLonLat(centerInViewProj, "EPSG:3857")
+      : [0, 0];
+    view.setCenter(center);
+    view.setZoom(zoom !== undefined ? zoom : 0);
   }
   return view;
 }
@@ -194,8 +240,8 @@ export function createView(viewModel: MapContextView, map: Map): View {
  * @param target
  */
 export async function createMapFromContext(
-    context: MapContext,
-    target?: string | HTMLElement,
+  context: MapContext,
+  target?: string | HTMLElement,
 ): Promise<Map> {
   const map = new Map({
     target,
@@ -208,7 +254,10 @@ export async function createMapFromContext(
  * @param map
  * @param context
  */
-export async function resetMapFromContext(map: Map, context: MapContext): Promise<Map> {
+export async function resetMapFromContext(
+  map: Map,
+  context: MapContext,
+): Promise<Map> {
   map.setView(createView(context.view, map));
   map.getLayers().clear();
   for (const layerModel of context.layers) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geospatial-sdk/openlayers",
-  "version": "0.0.5-dev.13+4cd825d",
+  "version": "0.0.5-dev.15+751c3f3",
   "description": "OpenLayers-related utilities",
   "keywords": [
     "ol",
@@ -35,8 +35,8 @@
     "ol": ">6.x"
   },
   "dependencies": {
-    "@geospatial-sdk/core": "^0.0.5-dev.13+4cd825d",
+    "@geospatial-sdk/core": "^0.0.5-dev.15+751c3f3",
     "chroma-js": "^2.4.2"
   },
-  "gitHead": "4cd825d11d70758c227ca0b955bcf571282bfea7"
+  "gitHead": "751c3f38588b76394f9d27d6f76f862f0cff52e2"
 }