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

package/lib/map/listen.ts

@@ -0,0 +1,123 @@
+import Map from "ol/Map.js";
+import MapEvent from "ol/MapEvent.js";
+import { toLonLat } from "ol/proj.js";
+import {
+  FeaturesClickEventType,
+  FeaturesHoverEventType,
+  LayerCreationErrorEventType,
+  LayerLoadingErrorEventType,
+  MapClickEvent,
+  MapClickEventType,
+  MapEventsByType,
+  MapExtentChangeEvent,
+  MapExtentChangeEventType,
+  MapLayerStateChangeEventType,
+  MapStateChangeEventType,
+  MapViewStateChangeEvent,
+  MapViewStateChangeEventType,
+  SourceLoadErrorEvent,
+  SourceLoadErrorType,
+} from "@geospatial-sdk/core";
+import { GEOSPATIAL_SDK_PREFIX } from "./constants.js";
+import {
+  registerFeatureClickEvent,
+  registerFeatureHoverEvent,
+  registerLayerCreationErrorEvent,
+  registerLayerLoadingErrorEvent,
+  registerMapLayerStateChangeEvent,
+  registerMapStateChangeEvent,
+  registerMapViewStateChangeEvent,
+  registerSourceLoadErrorEvent,
+} from "./register-events.js";
+
+function addEventListener<T extends keyof MapEventsByType>(
+  map: Map,
+  eventType: T,
+  callback: (event: MapEventsByType[T]) => void,
+) {
+  map.on(
+    `${GEOSPATIAL_SDK_PREFIX}${eventType}`,
+    ({
+      target: _target,
+      ...event
+    }: MapEventsByType[T] & { target: MapEvent["target"] }) =>
+      // we're excluding the `target` property and renaming the `type` here
+      callback({
+        ...event,
+        type: eventType,
+      } as MapEventsByType[T]),
+  );
+}
+
+export function listen<T extends keyof MapEventsByType>(
+  map: Map,
+  eventType: T,
+  callback: (event: MapEventsByType[T]) => void,
+) {
+  switch (eventType) {
+    case FeaturesClickEventType:
+      registerFeatureClickEvent(map);
+      addEventListener(map, eventType, callback);
+      break;
+    case FeaturesHoverEventType:
+      registerFeatureHoverEvent(map);
+      addEventListener(map, eventType, callback);
+      break;
+    case MapClickEventType:
+      map.on("click", (event: MapClickEvent) => {
+        const coordinate = toLonLat(
+          event.coordinate,
+          map.getView().getProjection(),
+        ) as [number, number];
+        callback({
+          type: MapClickEventType,
+          coordinate,
+        } as MapEventsByType[T]);
+      });
+      break;
+    case MapViewStateChangeEventType:
+      registerMapViewStateChangeEvent(map);
+      addEventListener(map, eventType, callback);
+      break;
+    case MapLayerStateChangeEventType:
+      registerMapLayerStateChangeEvent(map);
+      addEventListener(map, eventType, callback);
+      break;
+    case MapStateChangeEventType:
+      registerMapStateChangeEvent(map);
+      addEventListener(map, eventType, callback);
+      break;
+    case LayerCreationErrorEventType:
+      registerLayerCreationErrorEvent(map);
+      addEventListener(map, eventType, callback);
+      break;
+    case LayerLoadingErrorEventType:
+      registerLayerLoadingErrorEvent(map);
+      addEventListener(map, eventType, callback);
+      break;
+
+    /**
+     * DEPRECATED
+     */
+    case MapExtentChangeEventType:
+      registerMapViewStateChangeEvent(map);
+      map.on(
+        `${GEOSPATIAL_SDK_PREFIX}${MapViewStateChangeEventType}`,
+        (event: MapViewStateChangeEvent) =>
+          callback({
+            type: MapExtentChangeEventType,
+            extent: event.viewState.extent,
+          } as MapExtentChangeEvent as MapEventsByType[T]),
+      );
+      break;
+    case SourceLoadErrorType: {
+      registerSourceLoadErrorEvent(map);
+      map.on(SourceLoadErrorType, (event: SourceLoadErrorEvent) =>
+        callback(event as MapEventsByType[T]),
+      );
+      break;
+    }
+    default:
+      throw new Error(`Unrecognized event type: ${eventType}`);
+  }
+}

package/lib/map/register-events.ts

@@ -1,33 +1,41 @@
+import Map from "ol/Map.js";
 import {
   FeaturesClickEventType,
   FeaturesHoverEventType,
-  MapClickEventType,
-  MapEventsByType,
-  MapExtentChangeEventType,
+  LayerCreationErrorEventType,
+  LayerLoadingErrorEventType,
+  MapLayerDataInfo,
+  MapLayerLoadingStatus,
+  MapLayerStateChangeEvent,
+  MapLayerStateChangeEventType,
+  MapStateChangeEventType,
+  MapViewStateChangeEvent,
+  MapViewStateChangeEventType,
+  ResolvedMapLayerState,
+  ResolvedMapState,
+  SourceLoadErrorEvent,
   SourceLoadErrorType,
 } from "@geospatial-sdk/core";
 import BaseEvent from "ol/events/Event.js";
-import { equals } from "ol/extent.js";
 import type BaseLayer from "ol/layer/Base.js";
-import { BaseLayerObjectEventTypes } from "ol/layer/Base.js";
-import Layer from "ol/layer/Layer.js";
-import Map, { MapObjectEventTypes } from "ol/Map.js";
-import { toLonLat, transformExtent } from "ol/proj.js";
-import { GEOSPATIAL_SDK_PREFIX } from "./constants.js";
 import { readFeaturesAtPixel } from "./get-features.js";
+import MapBrowserEvent from "ol/MapBrowserEvent.js";
+import { equals } from "ol/extent.js";
+import { readMapViewState } from "./resolved-map-state.js";
+import { GEOSPATIAL_SDK_PREFIX } from "./constants.js";
 
-function registerFeatureClickEvent(map: Map) {
+export function registerFeatureClickEvent(map: Map) {
   if (map.get(FeaturesClickEventType)) return;
 
   // Filter to only query clickable layers
   const layerFilter = (layer: BaseLayer) =>
     layer.get(`${GEOSPATIAL_SDK_PREFIX}clickable`) !== false;
 
-  map.on("click", async (event: any) => {
+  map.on("click", async (event: MapBrowserEvent<PointerEvent>) => {
     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,
     } as unknown as BaseEvent);
@@ -36,119 +44,231 @@ function registerFeatureClickEvent(map: Map) {
   map.set(FeaturesClickEventType, true);
 }
 
-function registerFeatureHoverEvent(map: Map) {
+export function registerFeatureHoverEvent(map: Map) {
   if (map.get(FeaturesHoverEventType)) return;
   map.set(FeaturesHoverEventType, true);
 }
 
-function registerMapExtentChangeEvent(map: Map) {
-  if (map.get(MapExtentChangeEventType)) return;
+export function registerMapLayerStateChangeEvent(map: Map) {
+  if (map.get(MapLayerStateChangeEventType)) return;
+  map.set(MapLayerStateChangeEventType, true);
+}
 
-  let lastExtent: number[] | null = null;
+export function emitLayerCreationError(layer: BaseLayer, error: Error) {
+  layer.dispatchEvent({
+    type: `${GEOSPATIAL_SDK_PREFIX}${LayerCreationErrorEventType}`,
+    error,
+  } as unknown as BaseEvent);
+}
+export function emitLayerLoadingStatusLoading(layer: BaseLayer) {
+  layer.dispatchEvent({
+    type: `${GEOSPATIAL_SDK_PREFIX}layer-loading-status`,
+    layerState: { loading: true },
+  } as unknown as BaseEvent);
+}
+export function emitLayerLoadingStatusSuccess(layer: BaseLayer) {
+  layer.dispatchEvent({
+    type: `${GEOSPATIAL_SDK_PREFIX}layer-loading-status`,
+    layerState: { loaded: true },
+  } as unknown as BaseEvent);
+}
+export function emitLayerLoadingError(
+  layer: BaseLayer,
+  error: Error,
+  httpStatus?: number,
+) {
+  layer.dispatchEvent({
+    type: `${GEOSPATIAL_SDK_PREFIX}${LayerLoadingErrorEventType}`,
+    error,
+    ...(httpStatus !== undefined ? { httpStatus } : {}),
+  } as unknown as BaseEvent);
+}
+export function emitLayerDataInfo(
+  layer: BaseLayer,
+  dataInfo: MapLayerDataInfo,
+) {
+  layer.dispatchEvent({
+    type: `${GEOSPATIAL_SDK_PREFIX}layer-data-info`,
+    layerState: dataInfo,
+  } as unknown as BaseEvent);
+}
 
-  const handleExtentChange = () => {
-    const extent = map.getView().calculateExtent(map.getSize());
-    const reprojectedExtent = transformExtent(
-      extent,
-      map.getView().getProjection(),
-      "EPSG:4326",
-    );
+export function propagateLayerStateChangeEventToMap(
+  map: Map,
+  layer: BaseLayer,
+) {
+  let currentLayerState: Partial<ResolvedMapLayerState> = {
+    created: true,
+  };
+  let currentLoadingStatus: Partial<MapLayerLoadingStatus> = {};
 
-    if (lastExtent && equals(lastExtent, reprojectedExtent)) {
+  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,
     } as unknown as BaseEvent);
-  };
+  }
 
-  map.getView().on("change:center", handleExtentChange);
-  map.getView().on("change:resolution", handleExtentChange);
-  map.getView().on("change:rotation", handleExtentChange);
-  map.on("change:size", handleExtentChange);
+  // on layer creation error update layer state and redispatch on map
+  layer.on(
+    `${GEOSPATIAL_SDK_PREFIX}${LayerCreationErrorEventType}`,
+    (event: BaseEvent & { error: Error }) => {
+      currentLayerState = {
+        creationError: true,
+        creationErrorMessage: event.error.message,
+      };
+      updateStateAndEmit();
 
-  map.set(MapExtentChangeEventType, true);
-}
+      if (map.get(LayerCreationErrorEventType)) {
+        map.dispatchEvent(event);
+      }
+    },
+  );
 
-export function listen<T extends keyof MapEventsByType>(
-  map: Map,
-  eventType: T,
-  callback: (event: MapEventsByType[T]) => void,
-) {
-  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 as unknown as MapObjectEventTypes, (event: any) => {
-        (callback as (event: unknown) => void)(event);
-      });
-      break;
-    case FeaturesHoverEventType:
-      registerFeatureHoverEvent(map);
-      // see comment above
-      map.on(eventType as unknown as MapObjectEventTypes, (event: any) => {
-        (callback as (event: unknown) => void)(event);
-      });
-      break;
-    case MapClickEventType:
-      map.on("click", (event: any) => {
-        const coordinate = toLonLat(
-          event.coordinate,
-          map.getView().getProjection(),
-        ) as [number, number];
-        (callback as (event: unknown) => void)({
-          type: "map-click",
-          coordinate,
-        });
-      });
-      break;
-    case MapExtentChangeEventType:
-      registerMapExtentChangeEvent(map);
-      // see comment above
-      map.on(eventType as unknown as MapObjectEventTypes, (event: any) => {
-        (callback as (event: unknown) => void)(event);
-      });
-      break;
-    case SourceLoadErrorType: {
-      const errorCallback = (event: BaseEvent) => {
-        (callback as (event: unknown) => void)(event);
+  // on layer loading error update layer state and redispatch on map
+  layer.on(
+    `${GEOSPATIAL_SDK_PREFIX}${LayerLoadingErrorEventType}`,
+    (event: BaseEvent & { error: Error; httpStatus?: number }) => {
+      currentLoadingStatus = {
+        loadingError: true,
+        loadingErrorMessage: event.error.message,
+        ...(event.httpStatus !== undefined && {
+          loadingErrorHttpStatus: event.httpStatus,
+        }),
       };
-      //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: any) => {
-        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: any) => {
-        const layer = event.element as Layer;
-        if (layer) {
-          layer.un(
-            SourceLoadErrorType as unknown as BaseLayerObjectEventTypes,
-            errorCallback,
-          );
+      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;
         }
-      });
-      break;
+        map.dispatchEvent(sourceLoadEvent as unknown as BaseEvent);
+      }
+    },
+  );
+
+  // 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: MapLayerStateChangeEvent) => {
+      currentLayerState = {
+        ...currentLayerState,
+        ...event.layerState,
+      };
+      updateStateAndEmit();
+    },
+  );
+
+  // loading state can change over time
+  layer.on(
+    `${GEOSPATIAL_SDK_PREFIX}layer-loading-status`,
+    (event: MapLayerStateChangeEvent) => {
+      currentLoadingStatus = event.layerState;
+      updateStateAndEmit();
+    },
+  );
+}
+
+export function registerMapStateChangeEvent(map: Map) {
+  if (map.get(MapStateChangeEventType)) return;
+
+  // the global map state requires both view and layers state
+  registerMapLayerStateChangeEvent(map);
+  registerMapViewStateChangeEvent(map);
+
+  let currentState: ResolvedMapState = {
+    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 as ResolvedMapState,
+    } as unknown as BaseEvent);
   }
+
+  // collect view and layer states to re-emit them as a global state
+  map.on(
+    `${GEOSPATIAL_SDK_PREFIX}${MapLayerStateChangeEventType}`,
+    (event: BaseEvent & MapLayerStateChangeEvent) => {
+      const layers = [...currentState.layers];
+      layers[event.layerIndex] = event.layerState;
+      currentState = { ...currentState, layers };
+      emitState();
+    },
+  );
+  map.on(
+    `${GEOSPATIAL_SDK_PREFIX}${MapViewStateChangeEventType}`,
+    (event: BaseEvent & MapViewStateChangeEvent) => {
+      currentState = { ...currentState, view: event.viewState };
+      emitState();
+    },
+  );
+
+  map.set(MapStateChangeEventType, true);
+}
+
+export function registerLayerCreationErrorEvent(map: Map) {
+  if (map.get(LayerCreationErrorEventType)) return;
+  map.set(LayerCreationErrorEventType, true);
+}
+
+export function registerLayerLoadingErrorEvent(map: Map) {
+  if (map.get(LayerLoadingErrorEventType)) return;
+  map.set(LayerLoadingErrorEventType, true);
+}
+
+// DEPRECATED EVENTS
+
+export function registerMapViewStateChangeEvent(map: Map) {
+  if (map.get(MapViewStateChangeEventType)) return;
+
+  let lastExtent: number[] | null = 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,
+    } as unknown as BaseEvent);
+  };
+
+  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: Map) {
+  if (map.get(SourceLoadErrorType)) return;
+  map.set(SourceLoadErrorType, true);
 }

package/lib/map/resolved-map-state.ts

@@ -0,0 +1,38 @@
+import Map from "ol/Map.js";
+import { transform as transformCoordinate, transformExtent } from "ol/proj.js";
+import { Coordinate, Extent, ResolvedMapViewState } from "@geospatial-sdk/core";
+
+/**
+ * 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: Map): ResolvedMapViewState {
+  const view = map.getView();
+  const projection = view.getProjection();
+  const extent = transformExtent(
+    view.calculateExtent(map.getSize()),
+    projection,
+    "EPSG:4326",
+  ) as Extent;
+  const center = transformCoordinate(
+    view.getCenter() ?? [0, 0],
+    projection,
+    "EPSG:4326",
+  ) as Coordinate;
+  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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geospatial-sdk/openlayers",
-  "version": "0.0.5-dev.55+475f057",
+  "version": "0.0.5-dev.57+457e2f3",
   "description": "OpenLayers-related utilities",
   "keywords": [
     "ol",
@@ -37,9 +37,9 @@
     "ol": ">9.x"
   },
   "dependencies": {
-    "@geospatial-sdk/core": "^0.0.5-dev.55+475f057",
+    "@geospatial-sdk/core": "^0.0.5-dev.57+457e2f3",
     "lodash.throttle": "^4.1.1",
     "ol-mapbox-style": "12.4.0"
   },
-  "gitHead": "475f057bccd243497d84db212b50812633e7398b"
+  "gitHead": "457e2f3e1cf7b542bee94549314405cd4a2b983e"
 }