@geospatial-sdk/openlayers 0.0.5-dev.33 → 0.0.5-dev.35

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

@@ -1 +1 @@
-{"version":3,"file":"create-map.d.ts","sourceRoot":"","sources":["../../lib/map/create-map.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,eAAe,EACf,cAAc,EAEf,MAAM,sBAAsB,CAAC;AAC9B,OAAO,GAAG,MAAM,QAAQ,CAAC;AACzB,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,KAAK,MAAM,gBAAgB,CAAC;AA4BnC,wBAAsB,WAAW,CAAC,UAAU,EAAE,eAAe,GAAG,OAAO,CAAC,KAAK,CAAC,CAuL7E;AAED,wBAAgB,UAAU,CAAC,SAAS,EAAE,cAAc,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,IAAI,CA+B3E;AAED;;;;GAIG;AACH,wBAAsB,oBAAoB,CACxC,OAAO,EAAE,UAAU,EACnB,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,GAC5B,OAAO,CAAC,GAAG,CAAC,CAKd;AAED;;;;GAIG;AACH,wBAAsB,mBAAmB,CACvC,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,UAAU,GAClB,OAAO,CAAC,GAAG,CAAC,CAQd"}
+{"version":3,"file":"create-map.d.ts","sourceRoot":"","sources":["../../lib/map/create-map.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,eAAe,EACf,cAAc,EAEf,MAAM,sBAAsB,CAAC;AAC9B,OAAO,GAAG,MAAM,QAAQ,CAAC;AACzB,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,KAAK,MAAM,gBAAgB,CAAC;AAiCnC,wBAAsB,WAAW,CAAC,UAAU,EAAE,eAAe,GAAG,OAAO,CAAC,KAAK,CAAC,CAgN7E;AAED,wBAAgB,UAAU,CAAC,SAAS,EAAE,cAAc,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,IAAI,CAkC3E;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

@@ -16,7 +16,7 @@ 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 { fromLonLat } from "ol/proj";
+import { fromLonLat, transformExtent } from "ol/proj";
 import { bbox as bboxStrategy } from "ol/loadingstrategy";
 import { defaultStyle } from "./styles";
 import VectorTileLayer from "ol/layer/VectorTile";
@@ -26,6 +26,7 @@ import WMTS from "ol/source/WMTS";
 import MVT from "ol/format/MVT";
 import { OgcApiEndpoint, WfsEndpoint, WmtsEndpoint, } from "@camptocamp/ogc-client";
 import { MapboxVectorLayer } from "ol-mapbox-style";
+import { handleEndpointError, tileLoadErrorCatchFunction, } from "./handle-errors";
 const GEOJSON = new GeoJSON();
 const WFS_MAX_FEATURES = 10000;
 export function createLayer(layerModel) {
@@ -35,27 +36,39 @@ export function createLayer(layerModel) {
         let layer;
         switch (type) {
             case "xyz":
-                layer = new TileLayer({
-                    source: new XYZ({
+                {
+                    layer = new TileLayer({});
+                    const source = new XYZ({
                         url: layerModel.url,
                         attributions: layerModel.attributions,
-                    }),
-                });
+                    });
+                    source.setTileLoadFunction(function (tile, src) {
+                        return tileLoadErrorCatchFunction(layer, tile, src);
+                    });
+                    layer.setSource(source);
+                }
                 break;
             case "wms":
-                layer = new TileLayer({
-                    source: new TileWMS({
+                {
+                    layer = new TileLayer({});
+                    const source = new TileWMS({
                         url: removeSearchParams(layerModel.url, ["request", "service"]),
                         params: Object.assign({ LAYERS: layerModel.name }, (layerModel.style && { STYLES: layerModel.style })),
                         gutter: 20,
                         attributions: layerModel.attributions,
-                    }),
-                });
+                    });
+                    source.setTileLoadFunction(function (tile, src) {
+                        return tileLoadErrorCatchFunction(layer, tile, src);
+                    });
+                    layer.setSource(source);
+                }
                 break;
             case "wmts": {
                 const olLayer = new TileLayer({});
                 const endpoint = new WmtsEndpoint(layerModel.url);
-                endpoint.isReady().then((endpoint) => __awaiter(this, void 0, void 0, function* () {
+                endpoint
+                    .isReady()
+                    .then((endpoint) => __awaiter(this, void 0, void 0, function* () {
                     var _f;
                     const layerName = (_f = endpoint.getSingleLayerName()) !== null && _f !== void 0 ? _f : layerModel.name;
                     const layer = endpoint.getLayerByName(layerName);
@@ -79,14 +92,19 @@ export function createLayer(layerModel) {
                         dimensions,
                         attributions: layerModel.attributions,
                     }));
-                }));
+                }))
+                    .catch((e) => {
+                    handleEndpointError(olLayer, e);
+                });
                 return olLayer;
             }
             case "wfs": {
                 const olLayer = new VectorLayer({
                     style: (_a = layerModel.style) !== null && _a !== void 0 ? _a : defaultStyle,
                 });
-                new WfsEndpoint(layerModel.url).isReady().then((endpoint) => {
+                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({
@@ -103,6 +121,9 @@ export function createLayer(layerModel) {
                         strategy: bboxStrategy,
                         attributions: layerModel.attributions,
                     }));
+                })
+                    .catch((e) => {
+                    handleEndpointError(olLayer, e);
                 });
                 layer = olLayer;
                 break;
@@ -218,7 +239,7 @@ export function createView(viewModel, map) {
         });
     }
     else if ("extent" in viewModel) {
-        view.fit(viewModel.extent, {
+        view.fit(transformExtent(viewModel.extent, "EPSG:4326", view.getProjection()), {
             size: map.getSize(),
         });
     }

package/dist/map/handle-errors.d.ts

@@ -0,0 +1,11 @@
+import { EndpointError } from "@camptocamp/ogc-client";
+import { Tile } from "ol";
+import { Layer } from "ol/layer";
+import TileLayer from "ol/layer/Tile";
+import VectorLayer from "ol/layer/Vector";
+import TileSource from "ol/source/Tile";
+import VectorSource from "ol/source/Vector";
+export declare function handleEndpointError(layer: TileLayer<TileSource> | VectorLayer<VectorSource>, error: EndpointError): void;
+export declare function handleTileError(response: Response | Error, tile: Tile, layer: Layer): void;
+export declare function tileLoadErrorCatchFunction(layer: Layer, tile: Tile, src: string): void;
+//# sourceMappingURL=handle-errors.d.ts.map

package/dist/map/handle-errors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"handle-errors.d.ts","sourceRoot":"","sources":["../../lib/map/handle-errors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAEvD,OAAO,EAAa,IAAI,EAAE,MAAM,IAAI,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,SAAS,MAAM,eAAe,CAAC;AACtC,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAC1C,OAAO,UAAU,MAAM,gBAAgB,CAAC;AACxC,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAG5C,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,SAAS,CAAC,UAAU,CAAC,GAAG,WAAW,CAAC,YAAY,CAAC,EACxD,KAAK,EAAE,aAAa,QAIrB;AAED,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAC1B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,QAKb;AAED,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,MAAM,QAqBZ"}

package/dist/map/handle-errors.js

@@ -0,0 +1,33 @@
+import { SourceLoadErrorEvent } from "@geospatial-sdk/core";
+import TileState from "ol/TileState.js";
+export function handleEndpointError(layer, error) {
+    console.error("Error loading Endpoint", error);
+    layer.dispatchEvent(new SourceLoadErrorEvent(error));
+}
+export function handleTileError(response, tile, layer) {
+    console.error("Error loading tile", response);
+    tile.setState(TileState.ERROR);
+    layer.dispatchEvent(new SourceLoadErrorEvent(response));
+}
+export function tileLoadErrorCatchFunction(layer, tile, src) {
+    fetch(src)
+        .then((response) => {
+        if (response.ok) {
+            response
+                .blob()
+                .then((blob) => {
+                const image = tile.getImage();
+                image.src = URL.createObjectURL(blob);
+            })
+                .catch(() => {
+                handleTileError(response, tile, layer);
+            });
+        }
+        else {
+            handleTileError(response, tile, layer);
+        }
+    })
+        .catch((error) => {
+        handleTileError(error, tile, layer);
+    });
+}

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

@@ -1 +1 @@
-{"version":3,"file":"register-events.d.ts","sourceRoot":"","sources":["../../lib/map/register-events.ts"],"names":[],"mappings":"AAAA,OAAO,GAA4B,MAAM,QAAQ,CAAC;AAClD,OAAO,EAIL,eAAe,EAChB,MAAM,sBAAsB,CAAC;AAM9B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,OAAO,MAAM,mBAAmB,CAAC;AACxC,OAAO,QAAQ,MAAM,oBAAoB,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,KAAK,EAAE,OAAO,EAAqB,MAAM,SAAS,CAAC;AAK1D,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,GAAG,EACV,KAAK,EAAE,KAAK,GACX,OAAO,EAAE,CAOX;AAED,wBAAgB,SAAS,CACvB,MAAM,EAAE,OAAO,GAAG,QAAQ,EAC1B,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,GACrB,MAAM,GAAG,IAAI,CAWf;AAED,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,GAAG,EACV,UAAU,EAAE,UAAU,GACrB,OAAO,CAAC,OAAO,EAAE,CAAC,CA2BpB;AAyCD,wBAAgB,MAAM,CAAC,CAAC,SAAS,MAAM,eAAe,EACpD,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAC,EACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,IAAI,QAgC9C"}
+{"version":3,"file":"register-events.d.ts","sourceRoot":"","sources":["../../lib/map/register-events.ts"],"names":[],"mappings":"AAAA,OAAO,GAA4B,MAAM,QAAQ,CAAC;AAClD,OAAO,EAIL,eAAe,EAEhB,MAAM,sBAAsB,CAAC;AAM9B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,OAAO,MAAM,mBAAmB,CAAC;AACxC,OAAO,QAAQ,MAAM,oBAAoB,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,KAAK,EAAE,OAAO,EAAqB,MAAM,SAAS,CAAC;AAM1D,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,GAAG,EACV,KAAK,EAAE,KAAK,GACX,OAAO,EAAE,CAOX;AAED,wBAAgB,SAAS,CACvB,MAAM,EAAE,OAAO,GAAG,QAAQ,EAC1B,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,GACrB,MAAM,GAAG,IAAI,CAWf;AAED,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,GAAG,EACV,UAAU,EAAE,UAAU,GACrB,OAAO,CAAC,OAAO,EAAE,CAAC,CA2BpB;AAyCD,wBAAgB,MAAM,CAAC,CAAC,SAAS,MAAM,eAAe,EACpD,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAC,EACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,IAAI,QAmE9C"}

package/dist/map/register-events.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { FeaturesClickEventType, FeaturesHoverEventType, MapClickEventType, } from "@geospatial-sdk/core";
+import { FeaturesClickEventType, FeaturesHoverEventType, MapClickEventType, SourceLoadErrorType, } from "@geospatial-sdk/core";
 import { toLonLat } from "ol/proj";
 import GeoJSON from "ol/format/GeoJSON";
 import TileWMS from "ol/source/TileWMS";
@@ -108,6 +108,32 @@ export function listen(map, eventType, callback) {
                 });
             });
             break;
+        case SourceLoadErrorType: {
+            const errorCallback = (event) => {
+                callback(event);
+            };
+            //attach event listener to all existing layers
+            map.getLayers().forEach((layer) => {
+                if (layer) {
+                    layer.on(SourceLoadErrorType, errorCallback);
+                }
+            });
+            //attach event listener when layer is added
+            map.getLayers().on("add", (event) => {
+                const layer = event.element;
+                if (layer) {
+                    layer.on(SourceLoadErrorType, errorCallback);
+                }
+            });
+            //remove event listener when layer is removed
+            map.getLayers().on("remove", (event) => {
+                const layer = event.element;
+                if (layer) {
+                    layer.un(SourceLoadErrorType, errorCallback);
+                }
+            });
+            break;
+        }
         default:
             throw new Error(`Unrecognized event type: ${eventType}`);
     }

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

@@ -65,7 +65,7 @@ describe("applyContextDiffToMap", () => {
   });
 
   describe("layers added", () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       diff = {
         layersAdded: [
           {
@@ -81,7 +81,7 @@ describe("applyContextDiffToMap", () => {
         layersRemoved: [],
         layersReordered: [],
       };
-      applyContextDiffToMap(map, diff);
+      await applyContextDiffToMap(map, diff);
       layersArray = map.getLayers().getArray();
     });
     it("adds the layers to the map", () => {

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

@@ -24,6 +24,7 @@ import {
   MapContextLayer,
   MapContextLayerGeojson,
   MapContextLayerWms,
+  SourceLoadErrorEvent,
 } from "@geospatial-sdk/core";
 import Layer from "ol/layer/Layer";
 import {
@@ -35,6 +36,21 @@ import {
 import WMTS from "ol/source/WMTS";
 import { VectorTile } from "ol/source";
 import { MapboxVectorLayer } from "ol-mapbox-style";
+import {
+  handleEndpointError,
+  tileLoadErrorCatchFunction,
+} from "./handle-errors";
+import { ImageTile } from "ol";
+import TileState from "ol/TileState.js";
+
+vi.mock("./handle-errors", async (importOriginal) => {
+  const actual = await importOriginal();
+  return {
+    ...actual,
+    tileLoadErrorCatchFunction: vi.fn(),
+    handleEndpointError: vi.fn(),
+  };
+});
 
 describe("MapContextService", () => {
   describe("#createLayer", () => {
@@ -67,6 +83,20 @@ describe("MapContextService", () => {
           "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
         );
       });
+      it("should set tileLoadErrorCatchFunction to handle errors", () => {
+        const source = layer.getSource() as XYZ;
+        const tileLoadFunction = source.getTileLoadFunction();
+        expect(tileLoadFunction).toBeInstanceOf(Function);
+        const tile = new ImageTile(
+          [0, 0, 0],
+          TileState.IDLE,
+          "",
+          null,
+          () => {},
+        );
+        tileLoadFunction(tile, "http://example.com/tile");
+        expect(tileLoadErrorCatchFunction).toHaveBeenCalled();
+      });
     });
     describe("OGCAPI", () => {
       beforeEach(async () => {
@@ -134,6 +164,20 @@ describe("MapContextService", () => {
         const gutter = source["gutter_"];
         expect(gutter).toBe(20);
       });
+      it("should set tileLoadErrorCatchFunction to handle errors", () => {
+        const source = layer.getSource() as TileWMS;
+        const tileLoadFunction = source.getTileLoadFunction();
+        expect(tileLoadFunction).toBeInstanceOf(Function);
+        const tile = new ImageTile(
+          [0, 0, 0],
+          TileState.IDLE,
+          "",
+          null,
+          () => {},
+        );
+        tileLoadFunction(tile, "http://example.com/tile");
+        expect(tileLoadErrorCatchFunction).toHaveBeenCalled();
+      });
     });
 
     describe("WFS", () => {
@@ -168,6 +212,18 @@ describe("MapContextService", () => {
           "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",
         );
       });
+      it("should NOT call handleEndpointError", () => {
+        expect(handleEndpointError).not.toHaveBeenCalled();
+      });
+    });
+    describe("WFS error", () => {
+      beforeEach(async () => {
+        layerModel = { ...MAP_CTX_LAYER_WFS_FIXTURE, url: "https://wfs/error" };
+        layer = await createLayer(layerModel);
+      });
+      it("should call handleEndpointError", () => {
+        expect(handleEndpointError).toHaveBeenCalled();
+      });
     });
 
     describe("GEOJSON", () => {
@@ -275,6 +331,9 @@ describe("MapContextService", () => {
         (layerModel = MAP_CTX_LAYER_WMTS_FIXTURE),
           (layer = await createLayer(layerModel));
       });
+      afterEach(() => {
+        vi.clearAllMocks();
+      });
       it("create a tile layer", () => {
         expect(layer).toBeTruthy();
         expect(layer).toBeInstanceOf(TileLayer);
@@ -296,6 +355,24 @@ describe("MapContextService", () => {
           "https://services.geo.sg.ch/wss/service/SG00066_WMTS/guest/tile/1.0.0/SG00066/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}",
         ]);
       });
+      it("should NOT call handleEndpointError", () => {
+        expect(handleEndpointError).not.toHaveBeenCalled();
+      });
+    });
+    describe("WMTS error", () => {
+      beforeEach(async () => {
+        layerModel = {
+          ...MAP_CTX_LAYER_WMTS_FIXTURE,
+          url: "https://wmts/error",
+        };
+        layer = await createLayer(layerModel);
+      });
+      it("should call handleEndpointError", () => {
+        expect(handleEndpointError).toHaveBeenCalled();
+      });
+      afterEach(() => {
+        vi.clearAllMocks();
+      });
     });
 
     describe("Maplibre Style", () => {
@@ -357,7 +434,7 @@ describe("MapContextService", () => {
       });
       it("set center", () => {
         const center = view.getCenter();
-        expect(center).toEqual([324027.04834895337, 6438563.654151043]);
+        expect(center).toEqual([317260.5487608297, 6623200.647707232]);
       });
       it("set zoom", () => {
         const zoom = view.getZoom();

package/lib/map/create-map.ts

@@ -16,7 +16,7 @@ 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 { fromLonLat, transformExtent } from "ol/proj";
 import { bbox as bboxStrategy } from "ol/loadingstrategy";
 import { defaultStyle } from "./styles";
 import VectorTileLayer from "ol/layer/VectorTile";
@@ -30,6 +30,11 @@ import {
   WmtsEndpoint,
 } from "@camptocamp/ogc-client";
 import { MapboxVectorLayer } from "ol-mapbox-style";
+import { Tile } from "ol";
+import {
+  handleEndpointError,
+  tileLoadErrorCatchFunction,
+} from "./handle-errors";
 
 const GEOJSON = new GeoJSON();
 const WFS_MAX_FEATURES = 10000;
@@ -39,16 +44,22 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
   let layer: Layer | undefined;
   switch (type) {
     case "xyz":
-      layer = new TileLayer({
-        source: new XYZ({
+      {
+        layer = new TileLayer({});
+        const source = new XYZ({
           url: layerModel.url,
           attributions: layerModel.attributions,
-        }),
-      });
+        });
+        source.setTileLoadFunction(function (tile: Tile, src: string) {
+          return tileLoadErrorCatchFunction(layer as TileLayer<XYZ>, tile, src);
+        });
+        layer.setSource(source);
+      }
       break;
     case "wms":
-      layer = new TileLayer({
-        source: new TileWMS({
+      {
+        layer = new TileLayer({});
+        const source = new TileWMS({
           url: removeSearchParams(layerModel.url, ["request", "service"]),
           params: {
             LAYERS: layerModel.name,
@@ -56,64 +67,83 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
           },
           gutter: 20,
           attributions: layerModel.attributions,
-        }),
-      });
+        });
+        source.setTileLoadFunction(function (tile: Tile, src: string) {
+          return tileLoadErrorCatchFunction(
+            layer as TileLayer<TileWMS>,
+            tile,
+            src,
+          );
+        });
+        layer.setSource(source);
+      }
+
       break;
     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,
-          }),
-        );
-      });
+      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,
+            }),
+          );
+        })
+        .catch((e) => {
+          handleEndpointError(olLayer, e);
+        });
       return olLayer;
     }
     case "wfs": {
       const olLayer = new VectorLayer({
         style: layerModel.style ?? defaultStyle,
       });
-      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,
-          }),
-        );
-      });
+      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,
+            }),
+          );
+        })
+        .catch((e) => {
+          handleEndpointError(olLayer, e);
+        });
       layer = olLayer;
       break;
     }
@@ -238,9 +268,12 @@ export function createView(viewModel: MapContextView | null, map: Map): View {
       size: map.getSize(),
     });
   } else if ("extent" in viewModel) {
-    view.fit(viewModel.extent, {
-      size: map.getSize(),
-    });
+    view.fit(
+      transformExtent(viewModel.extent, "EPSG:4326", view.getProjection()),
+      {
+        size: map.getSize(),
+      },
+    );
   } else {
     const { center: centerInViewProj, zoom } = viewModel;
     const center = centerInViewProj

package/lib/map/handle-errors.test.ts

@@ -0,0 +1,71 @@
+import { ImageTile, Tile } from "ol";
+import TileState from "ol/TileState.js";
+import { SourceLoadErrorEvent } from "@geospatial-sdk/core";
+import { handleTileError, tileLoadErrorCatchFunction } from "./handle-errors";
+import { Map } from "ol";
+import { describe } from "node:test";
+import TileLayer from "ol/layer/Tile";
+import VectorLayer from "ol/layer/Vector";
+import { EndpointError } from "@camptocamp/ogc-client";
+
+global.URL.createObjectURL = vi.fn(() => "blob:http://example.com/blob");
+
+const mockBlob = new Blob();
+const RESPONSE_OK = {
+  status: 200,
+  blob: vi.fn().mockResolvedValue(mockBlob),
+};
+const RESPONSE_ERROR = {
+  status: 404,
+};
+global.fetch = vi.fn().mockImplementation((url: string) => {
+  return url.includes("error")
+    ? Promise.reject(RESPONSE_ERROR as Response)
+    : Promise.resolve(RESPONSE_OK as Response);
+});
+
+describe("handle-errors", () => {
+  let map: Map;
+  let tile: Tile;
+
+  beforeEach(() => {
+    map = new Map();
+    tile = new ImageTile(
+      [0, 0, 0],
+      TileState.IDLE,
+      "",
+      null,
+      () => tileLoadErrorCatchFunction,
+    );
+  });
+
+  describe("handleEndpointError", () => {
+    it("should dispatch SourceLoadErrorEvent", () => {
+      const endpointErrorMock: EndpointError = {
+        name: "Error",
+        message: "FORBIDDEN",
+        httpStatus: 403,
+      };
+      const layer = new VectorLayer({});
+      const dispatchEventSpy = vi.spyOn(layer, "dispatchEvent");
+      handleTileError(endpointErrorMock, tile, layer);
+      expect(dispatchEventSpy).toHaveBeenCalledWith(
+        new SourceLoadErrorEvent(endpointErrorMock),
+      );
+    });
+  });
+
+  describe("handleTileError", () => {
+    it("should set tile state to ERROR and dispatch SourceLoadErrorEvent", () => {
+      const response = new Response("Forbidden", { status: 403 });
+      const layer = new TileLayer({});
+      const dispatchEventSpy = vi.spyOn(layer, "dispatchEvent");
+      const setStateEventSpy = vi.spyOn(tile, "setState");
+      handleTileError(response, tile, layer);
+      expect(setStateEventSpy).toHaveBeenCalledWith(TileState.ERROR);
+      expect(dispatchEventSpy).toHaveBeenCalledWith(
+        new SourceLoadErrorEvent(response),
+      );
+    });
+  });
+});

package/lib/map/handle-errors.ts

@@ -0,0 +1,53 @@
+import { EndpointError } from "@camptocamp/ogc-client";
+import { SourceLoadErrorEvent } from "@geospatial-sdk/core";
+import { ImageTile, Tile } from "ol";
+import { Layer } from "ol/layer";
+import TileLayer from "ol/layer/Tile";
+import VectorLayer from "ol/layer/Vector";
+import TileSource from "ol/source/Tile";
+import VectorSource from "ol/source/Vector";
+import TileState from "ol/TileState.js";
+
+export function handleEndpointError(
+  layer: TileLayer<TileSource> | VectorLayer<VectorSource>,
+  error: EndpointError,
+) {
+  console.error("Error loading Endpoint", error);
+  layer.dispatchEvent(new SourceLoadErrorEvent(error));
+}
+
+export function handleTileError(
+  response: Response | Error,
+  tile: Tile,
+  layer: Layer,
+) {
+  console.error("Error loading tile", response);
+  tile.setState(TileState.ERROR);
+  layer.dispatchEvent(new SourceLoadErrorEvent(response));
+}
+
+export function tileLoadErrorCatchFunction(
+  layer: Layer,
+  tile: Tile,
+  src: string,
+) {
+  fetch(src)
+    .then((response) => {
+      if (response.ok) {
+        response
+          .blob()
+          .then((blob) => {
+            const image = (tile as ImageTile).getImage();
+            (image as HTMLImageElement).src = URL.createObjectURL(blob);
+          })
+          .catch(() => {
+            handleTileError(response, tile, layer);
+          });
+      } else {
+        handleTileError(response, tile, layer);
+      }
+    })
+    .catch((error) => {
+      handleTileError(error, tile, layer);
+    });
+}

package/lib/map/register-events.ts

@@ -4,6 +4,7 @@ import {
   FeaturesHoverEventType,
   MapClickEventType,
   MapEventsByType,
+  SourceLoadErrorType,
 } from "@geospatial-sdk/core";
 import { toLonLat } from "ol/proj";
 import GeoJSON from "ol/format/GeoJSON";
@@ -17,6 +18,7 @@ import Layer from "ol/layer/Layer";
 import { Pixel } from "ol/pixel";
 import type { Feature, FeatureCollection } from "geojson";
 import throttle from "lodash.throttle";
+import { BaseLayerObjectEventTypes } from "ol/layer/Base";
 
 const GEOJSON = new GeoJSON();
 
@@ -152,6 +154,41 @@ export function listen<T extends keyof MapEventsByType>(
         });
       });
       break;
+    case SourceLoadErrorType: {
+      const errorCallback = (event: BaseEvent) => {
+        (callback as (event: unknown) => void)(event);
+      };
+      //attach event listener to all existing layers
+      map.getLayers().forEach((layer) => {
+        if (layer) {
+          layer.on(
+            SourceLoadErrorType as unknown as BaseLayerObjectEventTypes,
+            errorCallback,
+          );
+        }
+      });
+      //attach event listener when layer is added
+      map.getLayers().on("add", (event) => {
+        const layer = event.element as Layer;
+        if (layer) {
+          layer.on(
+            SourceLoadErrorType as unknown as BaseLayerObjectEventTypes,
+            errorCallback,
+          );
+        }
+      });
+      //remove event listener when layer is removed
+      map.getLayers().on("remove", (event) => {
+        const layer = event.element as Layer;
+        if (layer) {
+          layer.un(
+            SourceLoadErrorType as unknown as BaseLayerObjectEventTypes,
+            errorCallback,
+          );
+        }
+      });
+      break;
+    }
     default:
       throw new Error(`Unrecognized event type: ${eventType}`);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geospatial-sdk/openlayers",
-  "version": "0.0.5-dev.33+c11d24f",
+  "version": "0.0.5-dev.35+06fc94d",
   "description": "OpenLayers-related utilities",
   "keywords": [
     "ol",
@@ -37,10 +37,10 @@
     "ol": ">6.x"
   },
   "dependencies": {
-    "@geospatial-sdk/core": "^0.0.5-dev.33+c11d24f",
+    "@geospatial-sdk/core": "^0.0.5-dev.35+06fc94d",
     "chroma-js": "^2.4.2",
     "lodash.throttle": "^4.1.1",
     "ol-mapbox-style": "^12.3.5"
   },
-  "gitHead": "c11d24f812fefab2aa4dec7d95b28e89ec90b581"
+  "gitHead": "06fc94d3d5eb61f5d4bff87cf37e500b57e0a4b4"
 }