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

package/dist/map/register-events.js

@@ -1,9 +1,9 @@
-import { FeaturesClickEventType, FeaturesHoverEventType, MapClickEventType, MapExtentChangeEventType, SourceLoadErrorType, } from "@geospatial-sdk/core";
+import { FeaturesClickEventType, FeaturesHoverEventType, LayerCreationErrorEventType, LayerLoadingErrorEventType, MapLayerStateChangeEventType, MapStateChangeEventType, MapViewStateChangeEventType, SourceLoadErrorEvent, SourceLoadErrorType, } from "@geospatial-sdk/core";
+import { readFeaturesAtPixel } from "./get-features.js";
 import { equals } from "ol/extent.js";
-import { toLonLat, transformExtent } from "ol/proj.js";
+import { readMapViewState } from "./resolved-map-state.js";
 import { GEOSPATIAL_SDK_PREFIX } from "./constants.js";
-import { readFeaturesAtPixel } from "./get-features.js";
-function registerFeatureClickEvent(map) {
+export function registerFeatureClickEvent(map) {
     if (map.get(FeaturesClickEventType))
         return;
     // Filter to only query clickable layers
@@ -12,99 +12,190 @@ function registerFeatureClickEvent(map) {
         const featuresByLayer = await readFeaturesAtPixel(map, event, layerFilter);
         const features = Array.from(featuresByLayer.values()).flat();
         map.dispatchEvent({
-            type: FeaturesClickEventType,
+            type: `${GEOSPATIAL_SDK_PREFIX}${FeaturesClickEventType}`,
             features,
             featuresByLayer,
         });
     });
     map.set(FeaturesClickEventType, true);
 }
-function registerFeatureHoverEvent(map) {
+export function registerFeatureHoverEvent(map) {
     if (map.get(FeaturesHoverEventType))
         return;
     map.set(FeaturesHoverEventType, true);
 }
-function registerMapExtentChangeEvent(map) {
-    if (map.get(MapExtentChangeEventType))
+export function registerMapLayerStateChangeEvent(map) {
+    if (map.get(MapLayerStateChangeEventType))
         return;
-    let lastExtent = null;
-    const handleExtentChange = () => {
-        const extent = map.getView().calculateExtent(map.getSize());
-        const reprojectedExtent = transformExtent(extent, map.getView().getProjection(), "EPSG:4326");
-        if (lastExtent && equals(lastExtent, reprojectedExtent)) {
+    map.set(MapLayerStateChangeEventType, true);
+}
+export function emitLayerCreationError(layer, error) {
+    layer.dispatchEvent({
+        type: `${GEOSPATIAL_SDK_PREFIX}${LayerCreationErrorEventType}`,
+        error,
+    });
+}
+export function emitLayerLoadingStatusLoading(layer) {
+    layer.dispatchEvent({
+        type: `${GEOSPATIAL_SDK_PREFIX}layer-loading-status`,
+        layerState: { loading: true },
+    });
+}
+export function emitLayerLoadingStatusSuccess(layer) {
+    layer.dispatchEvent({
+        type: `${GEOSPATIAL_SDK_PREFIX}layer-loading-status`,
+        layerState: { loaded: true },
+    });
+}
+export function emitLayerLoadingError(layer, error, httpStatus) {
+    layer.dispatchEvent({
+        type: `${GEOSPATIAL_SDK_PREFIX}${LayerLoadingErrorEventType}`,
+        error,
+        ...(httpStatus !== undefined ? { httpStatus } : {}),
+    });
+}
+export function emitLayerDataInfo(layer, dataInfo) {
+    layer.dispatchEvent({
+        type: `${GEOSPATIAL_SDK_PREFIX}layer-data-info`,
+        layerState: dataInfo,
+    });
+}
+export function propagateLayerStateChangeEventToMap(map, layer) {
+    let currentLayerState = {
+        created: true,
+    };
+    let currentLoadingStatus = {};
+    function updateStateAndEmit() {
+        if (!map.get(MapLayerStateChangeEventType)) {
             return;
         }
-        lastExtent = reprojectedExtent;
+        const layerIndex = map.getLayers().getArray().indexOf(layer);
         map.dispatchEvent({
-            type: MapExtentChangeEventType,
-            extent: reprojectedExtent,
+            type: `${GEOSPATIAL_SDK_PREFIX}${MapLayerStateChangeEventType}`,
+            layerState: {
+                ...currentLayerState,
+                ...currentLoadingStatus,
+            },
+            layerIndex,
         });
-    };
-    map.getView().on("change:center", handleExtentChange);
-    map.getView().on("change:resolution", handleExtentChange);
-    map.getView().on("change:rotation", handleExtentChange);
-    map.on("change:size", handleExtentChange);
-    map.set(MapExtentChangeEventType, true);
+    }
+    // on layer creation error update layer state and redispatch on map
+    layer.on(`${GEOSPATIAL_SDK_PREFIX}${LayerCreationErrorEventType}`, (event) => {
+        currentLayerState = {
+            creationError: true,
+            creationErrorMessage: event.error.message,
+        };
+        updateStateAndEmit();
+        if (map.get(LayerCreationErrorEventType)) {
+            map.dispatchEvent(event);
+        }
+    });
+    // on layer loading error update layer state and redispatch on map
+    layer.on(`${GEOSPATIAL_SDK_PREFIX}${LayerLoadingErrorEventType}`, (event) => {
+        currentLoadingStatus = {
+            loadingError: true,
+            loadingErrorMessage: event.error.message,
+            ...(event.httpStatus !== undefined && {
+                loadingErrorHttpStatus: event.httpStatus,
+            }),
+        };
+        updateStateAndEmit();
+        if (map.get(LayerLoadingErrorEventType)) {
+            map.dispatchEvent(event);
+        }
+        // deprecated event
+        if (map.get(SourceLoadErrorType)) {
+            const sourceLoadEvent = new SourceLoadErrorEvent(event.error);
+            if (event.httpStatus) {
+                sourceLoadEvent.httpStatus = event.httpStatus;
+            }
+            map.dispatchEvent(sourceLoadEvent);
+        }
+    });
+    // When new information about a layer state is available, add it to the previous state & emit
+    layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-data-info`, (event) => {
+        currentLayerState = {
+            ...currentLayerState,
+            ...event.layerState,
+        };
+        updateStateAndEmit();
+    });
+    // loading state can change over time
+    layer.on(`${GEOSPATIAL_SDK_PREFIX}layer-loading-status`, (event) => {
+        currentLoadingStatus = event.layerState;
+        updateStateAndEmit();
+    });
 }
-export function listen(map, eventType, callback) {
-    switch (eventType) {
-        case FeaturesClickEventType:
-            registerFeatureClickEvent(map);
-            // we're using a custom event type here so we need to cast to unknown first
-            map.on(eventType, (event) => {
-                callback(event);
-            });
-            break;
-        case FeaturesHoverEventType:
-            registerFeatureHoverEvent(map);
-            // see comment above
-            map.on(eventType, (event) => {
-                callback(event);
-            });
-            break;
-        case MapClickEventType:
-            map.on("click", (event) => {
-                const coordinate = toLonLat(event.coordinate, map.getView().getProjection());
-                callback({
-                    type: "map-click",
-                    coordinate,
-                });
-            });
-            break;
-        case MapExtentChangeEventType:
-            registerMapExtentChangeEvent(map);
-            // see comment above
-            map.on(eventType, (event) => {
-                callback(event);
-            });
-            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;
+export function registerMapStateChangeEvent(map) {
+    if (map.get(MapStateChangeEventType))
+        return;
+    // the global map state requires both view and layers state
+    registerMapLayerStateChangeEvent(map);
+    registerMapViewStateChangeEvent(map);
+    let currentState = {
+        layers: [],
+        view: null,
+    };
+    function emitState() {
+        // we're making sure to have the right amount of layers in the state and to fill empty slots with null
+        currentState.layers.length = map.getLayers().getLength();
+        for (let i = 0; i < currentState.layers.length; i++) {
+            if (!currentState.layers[i]) {
+                currentState.layers[i] = null;
+            }
         }
-        default:
-            throw new Error(`Unrecognized event type: ${eventType}`);
+        map.dispatchEvent({
+            type: `${GEOSPATIAL_SDK_PREFIX}${MapStateChangeEventType}`,
+            mapState: currentState,
+        });
     }
+    // collect view and layer states to re-emit them as a global state
+    map.on(`${GEOSPATIAL_SDK_PREFIX}${MapLayerStateChangeEventType}`, (event) => {
+        const layers = [...currentState.layers];
+        layers[event.layerIndex] = event.layerState;
+        currentState = { ...currentState, layers };
+        emitState();
+    });
+    map.on(`${GEOSPATIAL_SDK_PREFIX}${MapViewStateChangeEventType}`, (event) => {
+        currentState = { ...currentState, view: event.viewState };
+        emitState();
+    });
+    map.set(MapStateChangeEventType, true);
+}
+export function registerLayerCreationErrorEvent(map) {
+    if (map.get(LayerCreationErrorEventType))
+        return;
+    map.set(LayerCreationErrorEventType, true);
+}
+export function registerLayerLoadingErrorEvent(map) {
+    if (map.get(LayerLoadingErrorEventType))
+        return;
+    map.set(LayerLoadingErrorEventType, true);
+}
+// DEPRECATED EVENTS
+export function registerMapViewStateChangeEvent(map) {
+    if (map.get(MapViewStateChangeEventType))
+        return;
+    let lastExtent = null;
+    const handleViewChange = () => {
+        const viewState = readMapViewState(map);
+        if (lastExtent && equals(lastExtent, viewState.extent)) {
+            return;
+        }
+        lastExtent = viewState.extent;
+        map.dispatchEvent({
+            type: `${GEOSPATIAL_SDK_PREFIX}${MapViewStateChangeEventType}`,
+            viewState,
+        });
+    };
+    map.getView().on("change:center", handleViewChange);
+    map.getView().on("change:resolution", handleViewChange);
+    map.getView().on("change:rotation", handleViewChange);
+    map.on("change:size", handleViewChange);
+    map.set(MapViewStateChangeEventType, true);
+}
+export function registerSourceLoadErrorEvent(map) {
+    if (map.get(SourceLoadErrorType))
+        return;
+    map.set(SourceLoadErrorType, true);
 }

package/dist/map/resolved-map-state.d.ts

@@ -0,0 +1,8 @@
+import Map from "ol/Map.js";
+import { ResolvedMapViewState } from "@geospatial-sdk/core";
+/**
+ * Reads the current view state of the map.
+ * @param map
+ */
+export declare function readMapViewState(map: Map): ResolvedMapViewState;
+//# sourceMappingURL=resolved-map-state.d.ts.map

package/dist/map/resolved-map-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolved-map-state.d.ts","sourceRoot":"","sources":["../../lib/map/resolved-map-state.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,WAAW,CAAC;AAE5B,OAAO,EAAsB,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAOhF;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,GAAG,GAAG,oBAAoB,CAwB/D"}

package/dist/map/resolved-map-state.js

@@ -0,0 +1,26 @@
+import { transform as transformCoordinate, transformExtent } from "ol/proj.js";
+/**
+ * This magic value is generally used across OGC services as a reasonable approximation for most displays
+ */
+const PIXEL_SIZE_MM = 0.28;
+/**
+ * Reads the current view state of the map.
+ * @param map
+ */
+export function readMapViewState(map) {
+    const view = map.getView();
+    const projection = view.getProjection();
+    const extent = transformExtent(view.calculateExtent(map.getSize()), projection, "EPSG:4326");
+    const center = transformCoordinate(view.getCenter() ?? [0, 0], projection, "EPSG:4326");
+    const resolution = view.getResolution() ?? 1;
+    const metersPerUnit = projection.getMetersPerUnit() ?? 1;
+    const scaleDenominator = metersPerUnit * resolution * (1000 / PIXEL_SIZE_MM);
+    const bearing = view.getRotation() * (180 / Math.PI) + 90; // by default, bearing is North
+    return {
+        center,
+        extent,
+        resolution,
+        scaleDenominator,
+        bearing,
+    };
+}

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

@@ -4,6 +4,7 @@ import { createLayer, createView, updateLayerInMap } from "./create-map.js";
 import { fromLonLat, transformExtent } from "ol/proj.js";
 import GeoJSON from "ol/format/GeoJSON.js";
 import SimpleGeometry from "ol/geom/SimpleGeometry.js";
+import { propagateLayerStateChangeEventToMap } from "./register-events.js";
 
 const GEOJSON = new GeoJSON();
 
@@ -35,12 +36,16 @@ export async function applyContextDiffToMap(
   );
 
   newLayers.forEach((layer, index) => {
+    if (!layer) {
+      return;
+    }
     const position = contextDiff.layersAdded[index].position;
     if (position >= layers.getLength()) {
       layers.push(layer);
     } else {
       layers.insertAt(position, layer);
     }
+    propagateLayerStateChangeEventToMap(map, layer);
   });
 
   // move reordered layers (sorted by ascending new position)
@@ -59,12 +64,15 @@ export async function applyContextDiffToMap(
   }
 
   // update or recreate changed layers
+  const updatePromises = [];
   for (const layerChanged of contextDiff.layersChanged) {
-    updateLayerInMap(
-      map,
-      layerChanged.layer,
-      layerChanged.position,
-      layerChanged.previousLayer,
+    updatePromises.push(
+      updateLayerInMap(
+        map,
+        layerChanged.layer,
+        layerChanged.position,
+        layerChanged.previousLayer,
+      ),
     );
   }
 
@@ -107,5 +115,8 @@ export async function applyContextDiffToMap(
     }
   }
 
+  // wait for all layers to have been updated
+  await Promise.all(updatePromises);
+
   return map;
 }