@geospatial-sdk/openlayers 0.0.5-dev.55 → 0.0.5-dev.57

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

@@ -7,9 +7,9 @@ import {
 import {
   MAP_CTX_EXTENT_FIXTURE,
   MAP_CTX_FIXTURE,
-  MAP_CTX_LAYER_GEOTIFF_FIXTURE,
   MAP_CTX_LAYER_GEOJSON_FIXTURE,
   MAP_CTX_LAYER_GEOJSON_REMOTE_FIXTURE,
+  MAP_CTX_LAYER_GEOTIFF_FIXTURE,
   MAP_CTX_LAYER_MAPBLIBRE_STYLE_FIXTURE,
   MAP_CTX_LAYER_MVT_FIXTURE,
   MAP_CTX_LAYER_OGCAPI_FIXTURE,
@@ -44,10 +44,10 @@ import {
   createView,
   resetMapFromContext,
 } from "./create-map.js";
-import {
-  handleEndpointError,
-  tileLoadErrorCatchFunction,
-} from "./handle-errors.js";
+import { tileLoadErrorCatchFunction } from "./handle-errors.js";
+import { GEOSPATIAL_SDK_PREFIX } from "./constants.js";
+import ImageLayer from "ol/layer/Image.js";
+import ImageWMS from "ol/source/ImageWMS.js";
 
 vi.mock("./handle-errors", async (importOriginal) => {
   const actual =
@@ -59,18 +59,22 @@ vi.mock("./handle-errors", async (importOriginal) => {
   };
 });
 
-afterEach(() => {
+beforeEach(() => {
+  vi.useFakeTimers();
   vi.clearAllMocks();
 });
 
 describe("MapContextService", () => {
   describe("#createLayer", () => {
     let layerModel: MapContextLayer, layer: Layer;
+    const eventCallback = vi.fn();
 
     describe("XYZ", () => {
       beforeEach(async () => {
         layerModel = MAP_CTX_LAYER_XYZ_FIXTURE;
         layer = await createLayer(layerModel);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-loading-status`, eventCallback);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-data-info`, eventCallback);
       });
       it("create a tile layer", () => {
         expect(layer).toBeTruthy();
@@ -108,13 +112,25 @@ describe("MapContextService", () => {
         tileLoadFunction(tile, "http://example.com/tile");
         expect(tileLoadErrorCatchFunction).toHaveBeenCalled();
       });
+      it("emits a loaded event initially", async () => {
+        await vi.runAllTimersAsync();
+        expect(eventCallback).toHaveBeenCalledWith({
+          layerState: {
+            loaded: true,
+          },
+          target: layer,
+          type: `${GEOSPATIAL_SDK_PREFIX}layer-loading-status`,
+        });
+      });
     });
-    describe("OGCAPI", () => {
+    describe("OGCAPI (as geojson items)", () => {
       beforeEach(async () => {
         layerModel = MAP_CTX_LAYER_OGCAPI_FIXTURE;
         layer = await createLayer(layerModel);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-loading-status`, eventCallback);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-data-info`, eventCallback);
       });
-      it("create a vector tile layer", () => {
+      it("create a vector layer", () => {
         expect(layer).toBeTruthy();
         expect(layer).toBeInstanceOf(VectorLayer);
       });
@@ -124,7 +140,7 @@ describe("MapContextService", () => {
         expect(layer.get("label")).toBeUndefined();
         expect(layer.getSource()?.getAttributions()).toBeNull();
       });
-      it("create a OGCVectorTile source", () => {
+      it("create a vector source", () => {
         const source = layer.getSource();
         expect(source).toBeInstanceOf(VectorSource);
       });
@@ -135,11 +151,23 @@ describe("MapContextService", () => {
           "https://demo.ldproxy.net/zoomstack/collections/airports/items?f=json",
         );
       });
+      it("emits a loaded event initially", async () => {
+        await vi.runAllTimersAsync();
+        expect(eventCallback).toHaveBeenCalledWith({
+          layerState: {
+            loaded: true,
+          },
+          target: layer,
+          type: `${GEOSPATIAL_SDK_PREFIX}layer-loading-status`,
+        });
+      });
     });
     describe("WMS", () => {
       beforeEach(async () => {
-        (layerModel = MAP_CTX_LAYER_WMS_FIXTURE),
-          (layer = await createLayer(layerModel));
+        layerModel = MAP_CTX_LAYER_WMS_FIXTURE;
+        layer = await createLayer(layerModel);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-loading-status`, eventCallback);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-data-info`, eventCallback);
       });
       it("create a tile layer", () => {
         expect(layer).toBeTruthy();
@@ -159,8 +187,11 @@ describe("MapContextService", () => {
       it("set correct WMS params", () => {
         const source = layer.getSource() as TileWMS;
         const params = source.getParams();
-        expect(params.LAYERS).toBe((layerModel as MapContextLayerWms).name);
-        expect(params.STYLES).toBe((layerModel as MapContextLayerWms).style);
+        expect(params).toEqual({
+          LAYERS: (layerModel as MapContextLayerWms).name,
+          STYLES: (layerModel as MapContextLayerWms).style,
+          TILED: true,
+        });
       });
       it("set correct url without existing REQUEST and SERVICE params", () => {
         const source = layer.getSource() as TileWMS;
@@ -189,12 +220,68 @@ describe("MapContextService", () => {
         tileLoadFunction(tile, "http://example.com/tile");
         expect(tileLoadErrorCatchFunction).toHaveBeenCalled();
       });
+      it("emits a loaded event initially", async () => {
+        await vi.runAllTimersAsync();
+        expect(eventCallback).toHaveBeenCalledWith({
+          layerState: {
+            loaded: true,
+          },
+          target: layer,
+          type: `${GEOSPATIAL_SDK_PREFIX}layer-loading-status`,
+        });
+      });
+
+      describe("not using tiles", () => {
+        beforeEach(async () => {
+          layerModel = { ...MAP_CTX_LAYER_WMS_FIXTURE, useTiles: false };
+          layer = await createLayer(layerModel);
+          layer.on(
+            `${GEOSPATIAL_SDK_PREFIX}layer-loading-status`,
+            eventCallback,
+          );
+          layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-data-info`, eventCallback);
+        });
+        it("create an image layer", () => {
+          expect(layer).toBeTruthy();
+          expect(layer).toBeInstanceOf(ImageLayer);
+        });
+        it("set correct layer properties", () => {
+          expect(layer.getVisible()).toBe(false);
+          expect(layer.getOpacity()).toBe(0.5);
+          expect(layer.get("label")).toBe("Communes");
+          // @ts-expect-error TS2554 we're not providing a view extent here
+          expect(layer.getSource()?.getAttributions()!()).toEqual([
+            "camptocamp",
+          ]);
+        });
+        it("create an ImageWMS source", () => {
+          const source = layer.getSource();
+          expect(source).toBeInstanceOf(ImageWMS);
+        });
+        it("set correct WMS params", () => {
+          const source = layer.getSource() as ImageWMS;
+          const params = source.getParams();
+          expect(params).toEqual({
+            LAYERS: (layerModel as MapContextLayerWms).name,
+            STYLES: (layerModel as MapContextLayerWms).style,
+          });
+        });
+        it("set correct url without existing REQUEST and SERVICE params", () => {
+          const source = layer.getSource() as ImageWMS;
+          const url = source.getUrl();
+          expect(url).toBe(
+            "https://www.datagrandest.fr/geoserver/region-grand-est/ows",
+          );
+        });
+      });
     });
 
     describe("WFS", () => {
       beforeEach(async () => {
-        (layerModel = MAP_CTX_LAYER_WFS_FIXTURE),
-          (layer = await createLayer(layerModel));
+        layerModel = MAP_CTX_LAYER_WFS_FIXTURE;
+        layer = await createLayer(layerModel);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-loading-status`, eventCallback);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-data-info`, eventCallback);
       });
       it("create a vector layer", () => {
         expect(layer).toBeTruthy();
@@ -224,17 +311,15 @@ describe("MapContextService", () => {
           "https://www.datagrandest.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();
+      it("emits a loaded event initially", async () => {
+        await vi.runAllTimersAsync();
+        expect(eventCallback).toHaveBeenCalledWith({
+          layerState: {
+            loaded: true,
+          },
+          target: layer,
+          type: `${GEOSPATIAL_SDK_PREFIX}layer-loading-status`,
+        });
       });
     });
 
@@ -243,6 +328,11 @@ describe("MapContextService", () => {
         beforeEach(async () => {
           layerModel = MAP_CTX_LAYER_GEOJSON_FIXTURE;
           layer = await createLayer(layerModel);
+          layer.on(
+            `${GEOSPATIAL_SDK_PREFIX}layer-loading-status`,
+            eventCallback,
+          );
+          layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-data-info`, eventCallback);
         });
         it("create a VectorLayer", () => {
           expect(layer).toBeTruthy();
@@ -264,6 +354,16 @@ describe("MapContextService", () => {
             .data as FeatureCollection;
           expect(features.length).toBe(data.features.length);
         });
+        it("emits a loaded event", async () => {
+          await vi.runAllTimersAsync();
+          expect(eventCallback).toHaveBeenCalledWith({
+            layerState: {
+              loaded: true,
+            },
+            target: layer,
+            type: `${GEOSPATIAL_SDK_PREFIX}layer-loading-status`,
+          });
+        });
       });
       describe("with inline data as string", () => {
         beforeEach(async () => {
@@ -316,6 +416,11 @@ describe("MapContextService", () => {
         beforeEach(async () => {
           layerModel = MAP_CTX_LAYER_GEOJSON_REMOTE_FIXTURE;
           layer = await createLayer(layerModel);
+          layer.on(
+            `${GEOSPATIAL_SDK_PREFIX}layer-loading-status`,
+            eventCallback,
+          );
+          layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-data-info`, eventCallback);
         });
         it("create a VectorLayer", () => {
           expect(layer).toBeTruthy();
@@ -335,6 +440,16 @@ describe("MapContextService", () => {
             (layerModel as MapContextLayerGeojson).url,
           );
         });
+        it("emits a loaded event as well as data info eventually", async () => {
+          await vi.runAllTimersAsync();
+          expect(eventCallback).toHaveBeenCalledWith({
+            layerState: {
+              loaded: true,
+            },
+            target: layer,
+            type: `${GEOSPATIAL_SDK_PREFIX}layer-loading-status`,
+          });
+        });
       });
     });
 
@@ -342,6 +457,8 @@ describe("MapContextService", () => {
       beforeEach(async () => {
         layerModel = MAP_CTX_LAYER_WMTS_FIXTURE;
         layer = await createLayer(layerModel);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-loading-status`, eventCallback);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-data-info`, eventCallback);
       });
       it("create a tile layer", () => {
         expect(layer).toBeTruthy();
@@ -366,20 +483,15 @@ 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();
+      it("emits a loaded event initially", async () => {
+        await vi.runAllTimersAsync();
+        expect(eventCallback).toHaveBeenCalledWith({
+          layerState: {
+            loaded: true,
+          },
+          target: layer,
+          type: `${GEOSPATIAL_SDK_PREFIX}layer-loading-status`,
+        });
       });
     });
     describe("WMTS without default style given", () => {
@@ -389,6 +501,8 @@ describe("MapContextService", () => {
           url: "https://wmts/no-default-style",
         };
         layer = await createLayer(layerModel);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-loading-status`, eventCallback);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-data-info`, eventCallback);
       });
       it("uses the first style as default", async () => {
         const source = layer.getSource() as WMTS;
@@ -400,6 +514,8 @@ describe("MapContextService", () => {
       beforeEach(async () => {
         layerModel = MAP_CTX_LAYER_MAPBLIBRE_STYLE_FIXTURE;
         layer = await createLayer(layerModel);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-loading-status`, eventCallback);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-data-info`, eventCallback);
       });
       it("create a tile layer", () => {
         expect(layer).toBeTruthy();
@@ -414,12 +530,24 @@ describe("MapContextService", () => {
         const source = layer.getSource();
         expect(source).toBeInstanceOf(VectorTile);
       });
+      it("emits a loaded event initially", async () => {
+        await vi.runAllTimersAsync();
+        expect(eventCallback).toHaveBeenCalledWith({
+          layerState: {
+            loaded: true,
+          },
+          target: layer,
+          type: `${GEOSPATIAL_SDK_PREFIX}layer-loading-status`,
+        });
+      });
     });
 
     describe("MVT", () => {
       beforeEach(async () => {
         layerModel = MAP_CTX_LAYER_MVT_FIXTURE;
         layer = await createLayer(layerModel);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-loading-status`, eventCallback);
+        layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-data-info`, eventCallback);
       });
       it("create a VectorTileLayer", () => {
         expect(layer).toBeTruthy();
@@ -434,6 +562,16 @@ describe("MapContextService", () => {
         expect(layer.getOpacity()).toBe(1);
         expect(layer.get("label")).toBeUndefined();
       });
+      it("emits a loaded event initially", async () => {
+        await vi.runAllTimersAsync();
+        expect(eventCallback).toHaveBeenCalledWith({
+          layerState: {
+            loaded: true,
+          },
+          target: layer,
+          type: `${GEOSPATIAL_SDK_PREFIX}layer-loading-status`,
+        });
+      });
     });
 
     describe("GeoTIFF", () => {

package/lib/map/create-map.ts

@@ -25,16 +25,14 @@ import OGCVectorTile from "ol/source/OGCVectorTile.js";
 import WMTS from "ol/source/WMTS.js";
 import MVT from "ol/format/MVT.js";
 import {
+  EndpointError,
   OgcApiEndpoint,
   WfsEndpoint,
   WmtsEndpoint,
 } from "@camptocamp/ogc-client";
 import { MapboxVectorLayer } from "ol-mapbox-style";
 import { Tile } from "ol";
-import {
-  handleEndpointError,
-  tileLoadErrorCatchFunction,
-} from "./handle-errors.js";
+import { tileLoadErrorCatchFunction } from "./handle-errors.js";
 import VectorTile from "ol/source/VectorTile.js";
 import GeoTIFF from "ol/source/GeoTIFF.js";
 import WebGLTileLayer from "ol/layer/WebGLTile.js";
@@ -45,6 +43,15 @@ import {
   updateLayerProperties,
 } from "./layer-update.js";
 import { initHoverLayer } from "./feature-hover.js";
+import {
+  emitLayerCreationError,
+  emitLayerLoadingError,
+  emitLayerLoadingStatusSuccess,
+  propagateLayerStateChangeEventToMap,
+} from "./register-events.js";
+import { GEOSPATIAL_SDK_PREFIX } from "./constants.js";
+import ImageLayer from "ol/layer/Image.js";
+import ImageWMS from "ol/source/ImageWMS.js";
 
 // Register proj4 with OpenLayers so that arbitrary EPSG codes
 // (e.g., UTM zones from GeoTIFF metadata) can be reprojected to the map projection
@@ -53,9 +60,15 @@ register(proj4);
 const GEOJSON = new GeoJSON();
 const WFS_MAX_FEATURES = 10000;
 
+// We need to defer some events being dispatched to make sure they are caught by the map
+// where the layers sit
+// FIXME: this should be better handled in a separate module!
+const defer = () => new Promise((resolve) => setTimeout(resolve, 0));
+
 export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
   const { type } = layerModel;
-  let layer: Layer | undefined;
+  let layer: Layer;
+
   switch (type) {
     case "xyz":
       {
@@ -82,31 +95,46 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
           });
           layer.setSource(source);
         }
+        defer().then(() => emitLayerLoadingStatusSuccess(layer));
       }
       break;
+
     case "wms":
       {
-        layer = new TileLayer({});
-        const source = new TileWMS({
-          url: removeSearchParams(layerModel.url, ["request", "service"]),
-          params: {
-            LAYERS: layerModel.name,
-            ...(layerModel.style && { STYLES: layerModel.style }),
-          },
-          gutter: 20,
-          attributions: layerModel.attributions,
-        });
-        source.setTileLoadFunction(function (tile: Tile, src: string) {
-          return tileLoadErrorCatchFunction(
-            layer as TileLayer<TileWMS>,
-            tile,
-            src,
-          );
-        });
-        layer.setSource(source);
+        const url = removeSearchParams(layerModel.url, ["request", "service"]);
+        const params = {
+          LAYERS: layerModel.name,
+          ...(layerModel.style && { STYLES: layerModel.style }),
+        };
+        if (layerModel.useTiles === false) {
+          layer = new ImageLayer({
+            source: new ImageWMS({
+              url,
+              params,
+              attributions: layerModel.attributions,
+            }),
+          });
+        } else {
+          layer = new TileLayer({
+            source: new TileWMS({
+              url,
+              params: { ...params, TILED: true },
+              gutter: 20,
+              attributions: layerModel.attributions,
+              tileLoadFunction: function (tile: Tile, src: string) {
+                return tileLoadErrorCatchFunction(
+                  layer as TileLayer<TileWMS>,
+                  tile,
+                  src,
+                );
+              },
+            }),
+          });
+        }
+        defer().then(() => emitLayerLoadingStatusSuccess(layer));
       }
-
       break;
+
     case "wmts": {
       const olLayer = new TileLayer({});
       const endpoint = new WmtsEndpoint(layerModel.url);
@@ -138,11 +166,16 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
             }),
           );
         })
+        .then(() => emitLayerLoadingStatusSuccess(olLayer))
         .catch((e) => {
-          handleEndpointError(olLayer, e);
+          const httpStatus =
+            e instanceof EndpointError ? e.httpStatus : undefined;
+          emitLayerLoadingError(olLayer, e, httpStatus);
         });
-      return olLayer;
+      layer = olLayer;
+      break;
     }
+
     case "wfs": {
       const olLayer = new VectorLayer({
         style: layerModel.style ?? defaultStyle,
@@ -169,28 +202,35 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
             }),
           );
         })
+        .then(() => emitLayerLoadingStatusSuccess(olLayer))
         .catch((e) => {
-          handleEndpointError(olLayer, e);
+          const httpStatus =
+            e instanceof EndpointError ? e.httpStatus : undefined;
+          emitLayerLoadingError(olLayer, e, httpStatus);
         });
       layer = olLayer;
       break;
     }
+
     case "maplibre-style": {
       layer = new MapboxVectorLayer({
         styleUrl: layerModel.styleUrl,
         accessToken: layerModel.accessToken,
       }) as unknown as Layer;
+      defer().then(() => emitLayerLoadingStatusSuccess(layer));
       break;
     }
+
     case "geojson": {
+      layer = new VectorLayer({
+        style: layerModel.style ?? defaultStyle,
+      });
+      let source: VectorSource;
       if (layerModel.url !== undefined) {
-        layer = new VectorLayer({
-          source: new VectorSource({
-            format: new GeoJSON(),
-            url: layerModel.url,
-            attributions: layerModel.attributions,
-          }),
-          style: layerModel.style ?? defaultStyle,
+        source = new VectorSource({
+          format: new GeoJSON(),
+          url: layerModel.url,
+          attributions: layerModel.attributions,
         });
       } else {
         let geojson = layerModel.data;
@@ -206,16 +246,17 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
           featureProjection: "EPSG:3857",
           dataProjection: "EPSG:4326",
         }) as Feature<Geometry>[];
-        layer = new VectorLayer({
-          source: new VectorSource({
-            features,
-            attributions: layerModel.attributions,
-          }),
-          style: layerModel.style ?? defaultStyle,
+        source = new VectorSource({
+          features,
+          attributions: layerModel.attributions,
         });
       }
+      layer.setSource(source);
+      // FIXME: actually track layer loading and data info
+      defer().then(() => emitLayerLoadingStatusSuccess(layer));
       break;
     }
+
     case "ogcapi": {
       const ogcEndpoint = new OgcApiEndpoint(layerModel.url);
       let layerUrl: string;
@@ -249,17 +290,21 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
           layerModel.collection,
           layerModel.options,
         );
+        const source = new VectorSource({
+          format: new GeoJSON(),
+          url: layerUrl,
+          attributions: layerModel.attributions,
+        });
         layer = new VectorLayer({
-          source: new VectorSource({
-            format: new GeoJSON(),
-            url: layerUrl,
-            attributions: layerModel.attributions,
-          }),
+          source,
           style: layerModel.style ?? defaultStyle,
         });
       }
+      // FIXME: actually track layer loading
+      defer().then(() => emitLayerLoadingStatusSuccess(layer));
       break;
     }
+
     case "geotiff": {
       const geoTiffSource = new GeoTIFF({
         sources: [{ url: layerModel.url }],
@@ -268,26 +313,38 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
       layer = new WebGLTileLayer({
         source: geoTiffSource,
       });
+      // FIXME: actually track tile loading
+      defer().then(() => emitLayerLoadingStatusSuccess(layer));
       break;
     }
-    default:
-      throw new Error(`Unrecognized layer type: ${JSON.stringify(layerModel)}`);
-  }
-  if (!layer) {
-    throw new Error(`Layer could not be created for type: ${layerModel.type}`);
+
+    default: {
+      // we create an empty placeholder layer so that we still have a corresponding layer in OL
+      layer = new VectorLayer({
+        properties: {
+          [`${GEOSPATIAL_SDK_PREFIX}layer-with-error`]: true,
+        },
+      });
+      defer().then(() =>
+        emitLayerCreationError(
+          layer,
+          new Error(`Unrecognized layer type: ${JSON.stringify(layerModel)}`),
+        ),
+      );
+    }
   }
 
-  updateLayerProperties(layerModel, layer);
+  updateLayerProperties(layerModel, layer!);
 
-  return layer;
+  return layer!;
 }
 
-export function updateLayerInMap(
+export async function updateLayerInMap(
   map: Map,
   layerModel: MapContextLayer,
   layerPosition: number,
   previousLayerModel: MapContextLayer,
-) {
+): Promise<void> {
   const layers = map.getLayers();
   const updatedLayer = layers.item(layerPosition) as Layer;
 
@@ -299,8 +356,9 @@ export function updateLayerInMap(
 
   // dispose and recreate layer
   updatedLayer.dispose();
-  createLayer(layerModel).then((layer) => {
+  await createLayer(layerModel).then((layer) => {
     layers.setAt(layerPosition, layer);
+    propagateLayerStateChangeEventToMap(map, layer);
   });
 }
 
@@ -369,6 +427,7 @@ export async function resetMapFromContext(
   for (const layerModel of context.layers) {
     const layer = await createLayer(layerModel);
     map.addLayer(layer);
+    propagateLayerStateChangeEventToMap(map, layer);
   }
   initHoverLayer(map);
   return map;

package/lib/map/feature-hover.ts

@@ -108,7 +108,7 @@ export function initHoverLayer(map: OlMap) {
         );
         const features = Array.from(featuresByLayer.values()).flat();
         map.dispatchEvent({
-          type: FeaturesHoverEventType,
+          type: `${GEOSPATIAL_SDK_PREFIX}${FeaturesHoverEventType}`,
           features,
           featuresByLayer,
         } as unknown as BaseEvent);