@geospatial-sdk/openlayers 0.0.5-dev.52 → 0.0.5-dev.54

package/dist/map/feature-hover.d.ts

@@ -1,5 +1,5 @@
-import type OlMap from "ol/Map.js";
 import VectorLayer from "ol/layer/Vector.js";
+import type OlMap from "ol/Map.js";
 import VectorSource from "ol/source/Vector.js";
 export declare function initHoverLayer(map: OlMap): void;
 export declare function getHoverLayer(map: OlMap): VectorLayer<VectorSource>;

package/dist/map/feature-hover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-hover.d.ts","sourceRoot":"","sources":["../../lib/map/feature-hover.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,WAAW,CAAC;AACnC,OAAO,WAAW,MAAM,oBAAoB,CAAC;AAC7C,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAe/C,wBAAgB,cAAc,CAAC,GAAG,EAAE,KAAK,QAkFxC;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,KAAK,GAAG,WAAW,CAAC,YAAY,CAAC,CAEnE;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,KAAK,QAMzC"}
+{"version":3,"file":"feature-hover.d.ts","sourceRoot":"","sources":["../../lib/map/feature-hover.ts"],"names":[],"mappings":"AAQA,OAAO,WAAW,MAAM,oBAAoB,CAAC;AAC7C,OAAO,KAAK,KAAK,MAAM,WAAW,CAAC;AAEnC,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAO/C,wBAAgB,cAAc,CAAC,GAAG,EAAE,KAAK,QAoGxC;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,KAAK,GAAG,WAAW,CAAC,YAAY,CAAC,CAEnE;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,KAAK,QAMzC"}

package/dist/map/feature-hover.js

@@ -1,9 +1,9 @@
-import { GEOSPATIAL_SDK_PREFIX } from "./constants.js";
-import VectorLayer from "ol/layer/Vector.js";
-import VectorSource from "ol/source/Vector.js";
 import { defaultHighlightStyle, FeaturesHoverEventType, } from "@geospatial-sdk/core";
 import OlFeature from "ol/Feature.js";
+import VectorLayer from "ol/layer/Vector.js";
 import { unByKey } from "ol/Observable.js";
+import VectorSource from "ol/source/Vector.js";
+import { GEOSPATIAL_SDK_PREFIX } from "./constants.js";
 import { readFeaturesAtPixel } from "./get-features.js";
 const hoverLayerKey = `${GEOSPATIAL_SDK_PREFIX}hover-layer`;
 const unsubscribeKey = `${GEOSPATIAL_SDK_PREFIX}hover-unsub`;
@@ -18,12 +18,16 @@ export function initHoverLayer(map) {
             useSpatialIndex: false,
         }),
         style: defaultHighlightStyle,
+        properties: {
+            [`${GEOSPATIAL_SDK_PREFIX}hoverable`]: false,
+            [`${GEOSPATIAL_SDK_PREFIX}clickable`]: false,
+        },
     });
     map.set(hoverLayerKey, hoverLayer);
     hoverLayer.setMap(map);
     // store original cursor style in order to change it later
     const originalCursorStyle = map.getTargetElement()?.style.cursor ?? "";
-    const layerFilter = (layer) => layer !== hoverLayer && layer.get(`${GEOSPATIAL_SDK_PREFIX}enable-hover`);
+    const layerFilter = (layer) => layer.get(`${GEOSPATIAL_SDK_PREFIX}hoverable`);
     const unKey = map.on("pointermove", async (event) => {
         // skip hit detection if the view is moving as it can have an impact on performance
         if (map.getView().getInteracting() || map.getView().getAnimating()) {
@@ -44,18 +48,24 @@ export function initHoverLayer(map) {
             return;
         }
         // add hovered feature to the layer
-        let firstFeature = null;
-        map.forEachFeatureAtPixel(event.pixel, (feature) => {
+        const hoveredFeatureResult = [];
+        map.forEachFeatureAtPixel(event.pixel, (feature, layer) => {
             if (feature instanceof OlFeature) {
-                firstFeature = feature;
+                hoveredFeatureResult.push({ feature, layer });
                 return true;
             }
         }, {
             layerFilter,
         });
-        if (!firstFeature) {
+        if (hoveredFeatureResult.length === 0) {
             return;
         }
+        const { feature: firstFeature, layer: sourceLayer } = hoveredFeatureResult[0];
+        // Get the hoverStyle from the source layer, fallback to defaultHighlightStyle
+        const hoverStyle = sourceLayer.get(`${GEOSPATIAL_SDK_PREFIX}hover-style`) ??
+            defaultHighlightStyle;
+        // Apply the hover style to the layer (FlatStyleLike works on layers, not features)
+        hoverLayer.setStyle(hoverStyle);
         hoveredSource.addFeature(firstFeature);
         // dispatch event if subscribed to
         if (map.get(FeaturesHoverEventType)) {

package/dist/map/feature-selection.d.ts

@@ -0,0 +1,8 @@
+import type OlMap from "ol/Map.js";
+import VectorLayer from "ol/layer/Vector.js";
+import VectorSource from "ol/source/Vector.js";
+export declare function initSelectionLayer(map: OlMap): void;
+export declare function getSelectionLayer(map: OlMap): VectorLayer<VectorSource>;
+export declare function clearSelectionLayer(map: OlMap): void;
+export declare function clearSelection(map: OlMap): void;
+//# sourceMappingURL=feature-selection.d.ts.map

package/dist/map/feature-selection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature-selection.d.ts","sourceRoot":"","sources":["../../lib/map/feature-selection.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,WAAW,CAAC;AACnC,OAAO,WAAW,MAAM,oBAAoB,CAAC;AAC7C,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAU/C,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,KAAK,QAqE5C;AAED,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,KAAK,GAAG,WAAW,CAAC,YAAY,CAAC,CAEvE;AAED,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,KAAK,QAM7C;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,KAAK,QAQxC"}

package/dist/map/feature-selection.js

@@ -0,0 +1,76 @@
+import { GEOSPATIAL_SDK_PREFIX } from "./constants.js";
+import VectorLayer from "ol/layer/Vector.js";
+import VectorSource from "ol/source/Vector.js";
+import { defaultHighlightStyle } from "@geospatial-sdk/core";
+import OlFeature from "ol/Feature.js";
+import { unByKey } from "ol/Observable.js";
+const selectionLayerKey = `${GEOSPATIAL_SDK_PREFIX}selection-layer`;
+const unsubscribeKey = `${GEOSPATIAL_SDK_PREFIX}selection-unsub`;
+export function initSelectionLayer(map) {
+    if (map.get(selectionLayerKey)) {
+        clearSelectionLayer(map);
+    }
+    // create layer & add on top of everything else
+    const selectionLayer = new VectorLayer({
+        source: new VectorSource({
+            features: [],
+            useSpatialIndex: false,
+        }),
+        style: defaultHighlightStyle,
+    });
+    map.set(selectionLayerKey, selectionLayer);
+    selectionLayer.setMap(map);
+    const layerFilter = (layer) => layer !== selectionLayer &&
+        layer.get(`${GEOSPATIAL_SDK_PREFIX}enable-selection`);
+    const unKey = map.on("click", async (event) => {
+        const selectedSource = selectionLayer.getSource();
+        selectedSource.clear(true);
+        // Check if there's a feature at the clicked pixel
+        const hasFeature = map.hasFeatureAtPixel(event.pixel, {
+            layerFilter,
+        });
+        if (!hasFeature) {
+            return;
+        }
+        // Find the selected feature and its source layer
+        const selectedFeatureResult = [];
+        map.forEachFeatureAtPixel(event.pixel, (feature, layer) => {
+            if (feature instanceof OlFeature) {
+                selectedFeatureResult.push({ feature, layer });
+                return true;
+            }
+        }, {
+            layerFilter,
+        });
+        if (selectedFeatureResult.length === 0) {
+            return;
+        }
+        const { feature: firstFeature, layer: sourceLayer } = selectedFeatureResult[0];
+        // Get the selectedStyle from the source layer, fallback to defaultHighlightStyle
+        const selectedStyle = sourceLayer.get(`${GEOSPATIAL_SDK_PREFIX}selected-style`) ??
+            defaultHighlightStyle;
+        // Apply the selected style to the layer (FlatStyleLike works on layers, not features)
+        selectionLayer.setStyle(selectedStyle);
+        selectedSource.addFeature(firstFeature);
+    });
+    map.set(unsubscribeKey, unKey);
+}
+export function getSelectionLayer(map) {
+    return map.get(selectionLayerKey);
+}
+export function clearSelectionLayer(map) {
+    const selectionLayer = getSelectionLayer(map);
+    selectionLayer.setMap(null);
+    selectionLayer.dispose();
+    map.set(selectionLayerKey, null);
+    unByKey(map.get(unsubscribeKey));
+}
+export function clearSelection(map) {
+    const selectionLayer = getSelectionLayer(map);
+    if (selectionLayer) {
+        const source = selectionLayer.getSource();
+        if (source) {
+            source.clear(true);
+        }
+    }
+}

package/dist/map/get-features.d.ts

@@ -1,11 +1,11 @@
-import OlMap from "ol/Map.js";
-import { Pixel } from "ol/pixel.js";
-import TileWMS from "ol/source/TileWMS.js";
-import ImageWMS from "ol/source/ImageWMS.js";
+import type { FeaturesByLayerIndex } from "@geospatial-sdk/core";
 import { Coordinate } from "ol/coordinate.js";
 import Layer from "ol/layer/Layer.js";
+import OlMap from "ol/Map.js";
 import type MapBrowserEvent from "ol/MapBrowserEvent.js";
-import type { FeaturesByLayerIndex } from "@geospatial-sdk/core";
+import { Pixel } from "ol/pixel.js";
+import ImageWMS from "ol/source/ImageWMS.js";
+import TileWMS from "ol/source/TileWMS.js";
 export declare function getFeaturesFromVectorSources(olMap: OlMap, pixel: Pixel, layerFilter?: (layer: Layer) => boolean): FeaturesByLayerIndex;
 export declare function getGFIUrl(source: TileWMS | ImageWMS, map: OlMap, coordinate: Coordinate): string | null;
 export declare function getFeaturesFromWmsSources(olMap: OlMap, coordinate: Coordinate, layerFilter?: (layer: Layer) => boolean): Promise<FeaturesByLayerIndex>;

package/dist/map/get-features.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"get-features.d.ts","sourceRoot":"","sources":["../../lib/map/get-features.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,WAAW,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGpC,OAAO,OAAO,MAAM,sBAAsB,CAAC;AAC3C,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,KAAK,MAAM,mBAAmB,CAAC;AAEtC,OAAO,KAAK,eAAe,MAAM,uBAAuB,CAAC;AACzD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAIjE,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,GACtC,oBAAoB,CAqBtB;AAED,wBAAgB,SAAS,CACvB,MAAM,EAAE,OAAO,GAAG,QAAQ,EAC1B,GAAG,EAAE,KAAK,EACV,UAAU,EAAE,UAAU,GACrB,MAAM,GAAG,IAAI,CAWf;AAED,wBAAsB,yBAAyB,CAC7C,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,GACtC,OAAO,CAAC,oBAAoB,CAAC,CAsC/B;AAOD,wBAAsB,mBAAmB,CACvC,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,eAAe,CAAC,YAAY,CAAC,EACpC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,GACtC,OAAO,CAAC,oBAAoB,CAAC,CAS/B"}
+{"version":3,"file":"get-features.d.ts","sourceRoot":"","sources":["../../lib/map/get-features.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAGjE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,OAAO,KAAK,MAAM,mBAAmB,CAAC;AACtC,OAAO,KAAK,MAAM,WAAW,CAAC;AAC9B,OAAO,KAAK,eAAe,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,OAAO,MAAM,sBAAsB,CAAC;AAI3C,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,GACtC,oBAAoB,CAyBtB;AAED,wBAAgB,SAAS,CACvB,MAAM,EAAE,OAAO,GAAG,QAAQ,EAC1B,GAAG,EAAE,KAAK,EACV,UAAU,EAAE,UAAU,GACrB,MAAM,GAAG,IAAI,CAWf;AAED,wBAAsB,yBAAyB,CAC7C,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,GACtC,OAAO,CAAC,oBAAoB,CAAC,CAsC/B;AAOD,wBAAsB,mBAAmB,CACvC,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,eAAe,CAAC,YAAY,CAAC,EACpC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,GACtC,OAAO,CAAC,oBAAoB,CAAC,CAS/B"}

package/dist/map/get-features.js

@@ -1,8 +1,8 @@
+import throttle from "lodash.throttle";
 import GeoJSON from "ol/format/GeoJSON.js";
-import TileWMS from "ol/source/TileWMS.js";
-import ImageWMS from "ol/source/ImageWMS.js";
 import Layer from "ol/layer/Layer.js";
-import throttle from "lodash.throttle";
+import ImageWMS from "ol/source/ImageWMS.js";
+import TileWMS from "ol/source/TileWMS.js";
 const GEOJSON = new GeoJSON();
 export function getFeaturesFromVectorSources(olMap, pixel, layerFilter) {
     const result = new Map();
@@ -16,9 +16,11 @@ export function getFeaturesFromVectorSources(olMap, pixel, layerFilter) {
         if (!result.has(layerIndex)) {
             result.set(layerIndex, []);
         }
-        result
-            .get(layerIndex)
-            .push(GEOJSON.writeFeatureObject(feature));
+        result.get(layerIndex).push(GEOJSON.writeFeatureObject(feature, {
+            featureProjection: olMap.getView().getProjection(),
+            dataProjection: "EPSG:4326",
+        }));
+        return null;
     }, { layerFilter });
     return result;
 }

package/dist/map/layer-update.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layer-update.d.ts","sourceRoot":"","sources":["../../lib/map/layer-update.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAKhE,OAAO,KAAK,MAAM,mBAAmB,CAAC;AAmBtC;;;;;;;;;GASG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAE,eAAe,GACxB,OAAO,CAIT;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CACnC,UAAU,EAAE,eAAe,EAC3B,OAAO,EAAE,KAAK,EACd,kBAAkB,CAAC,EAAE,eAAe,QA2CrC"}
+{"version":3,"file":"layer-update.d.ts","sourceRoot":"","sources":["../../lib/map/layer-update.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAKhE,OAAO,KAAK,MAAM,mBAAmB,CAAC;AAsBtC;;;;;;;;;GASG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAE,eAAe,GACxB,OAAO,CAIT;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CACnC,UAAU,EAAE,eAAe,EAC3B,OAAO,EAAE,KAAK,EACd,kBAAkB,CAAC,EAAE,eAAe,QAiDrC"}

package/dist/map/layer-update.js

@@ -7,8 +7,10 @@ const UPDATABLE_PROPERTIES = [
     "attributions",
     "extras",
     "version",
-    "enableHover",
+    "hoverable",
+    "clickable",
     "style",
+    "hoverStyle",
     // TODO (when available) "zIndex"
 ];
 /**
@@ -58,8 +60,14 @@ export function updateLayerProperties(layerModel, olLayer, previousLayerModel) {
     if (shouldApplyProperty("label")) {
         olLayer.set("label", layerModel.label);
     }
-    if (shouldApplyProperty("enableHover")) {
-        olLayer.set(`${GEOSPATIAL_SDK_PREFIX}enable-hover`, layerModel.enableHover);
+    if (shouldApplyProperty("hoverable")) {
+        olLayer.set(`${GEOSPATIAL_SDK_PREFIX}hoverable`, layerModel.hoverable);
+    }
+    if (shouldApplyProperty("hoverStyle")) {
+        olLayer.set(`${GEOSPATIAL_SDK_PREFIX}hover-style`, layerModel.hoverStyle);
+    }
+    if (shouldApplyProperty("clickable")) {
+        olLayer.set(`${GEOSPATIAL_SDK_PREFIX}clickable`, layerModel.clickable);
     }
     if (shouldApplyProperty("style") &&
         "setStyle" in olLayer) {

package/dist/map/listen.d.ts

@@ -0,0 +1,4 @@
+import Map from "ol/Map.js";
+import { MapEventsByType } from "@geospatial-sdk/core";
+export declare function listen<T extends keyof MapEventsByType>(map: Map, eventType: T, callback: (event: MapEventsByType[T]) => void): void;
+//# sourceMappingURL=listen.d.ts.map

package/dist/map/listen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"listen.d.ts","sourceRoot":"","sources":["../../lib/map/listen.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,WAAW,CAAC;AAG5B,OAAO,EAKL,eAAe,EAShB,MAAM,sBAAsB,CAAC;AA8B9B,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,QA+E9C"}

package/dist/map/listen.js

@@ -0,0 +1,83 @@
+import { toLonLat } from "ol/proj.js";
+import { FeaturesClickEventType, FeaturesHoverEventType, MapClickEventType, MapExtentChangeEventType, MapLayerStateChangeEventType, MapStateChangeEventType, MapViewStateChangeEventType, SourceLoadErrorType, } from "@geospatial-sdk/core";
+import { GEOSPATIAL_SDK_PREFIX } from "./constants.js";
+import { registerFeatureClickEvent, registerFeatureHoverEvent, registerMapLayerStateChangeEvent, registerMapViewStateChangeEvent, } from "./register-events.js";
+function addEventListener(map, eventType, callback) {
+    map.on(`${GEOSPATIAL_SDK_PREFIX}${eventType}`, ({ target: _target, ...event }) => 
+    // we're excluding the `target` property and renaming the `type` here
+    callback({
+        ...event,
+        type: eventType,
+    }));
+}
+export function listen(map, eventType, callback) {
+    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) => {
+                const coordinate = toLonLat(event.coordinate, map.getView().getProjection());
+                callback({
+                    type: MapClickEventType,
+                    coordinate,
+                });
+            });
+            break;
+        case MapViewStateChangeEventType:
+            registerMapViewStateChangeEvent(map);
+            addEventListener(map, eventType, callback);
+            break;
+        case MapLayerStateChangeEventType:
+            registerMapLayerStateChangeEvent(map);
+            addEventListener(map, eventType, callback);
+            break;
+        case MapStateChangeEventType:
+            // TODO: registerMapStateChangeEvent(map);
+            addEventListener(map, eventType, callback);
+            break;
+        /**
+         * DEPRECATED
+         */
+        case MapExtentChangeEventType:
+            registerMapViewStateChangeEvent(map);
+            map.on(`${GEOSPATIAL_SDK_PREFIX}${MapViewStateChangeEventType}`, (event) => callback({
+                type: MapExtentChangeEventType,
+                extent: event.viewState.extent,
+            }));
+            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/dist/map/register-events.d.ts

@@ -1,4 +1,4 @@
-import Map from "ol/Map.js";
 import { MapEventsByType } from "@geospatial-sdk/core";
+import Map from "ol/Map.js";
 export declare function listen<T extends keyof MapEventsByType>(map: Map, eventType: T, callback: (event: MapEventsByType[T]) => void): void;
 //# sourceMappingURL=register-events.d.ts.map

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,WAAW,CAAC;AACrD,OAAO,EAIL,eAAe,EAGhB,MAAM,sBAAsB,CAAC;AA8D9B,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,QA0E9C"}
+{"version":3,"file":"register-events.d.ts","sourceRoot":"","sources":["../../lib/map/register-events.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,eAAe,EAGhB,MAAM,sBAAsB,CAAC;AAM9B,OAAO,GAA4B,MAAM,WAAW,CAAC;AA+DrD,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,QA0E9C"}

package/dist/map/register-events.js

@@ -1,12 +1,15 @@
 import { FeaturesClickEventType, FeaturesHoverEventType, MapClickEventType, MapExtentChangeEventType, SourceLoadErrorType, } from "@geospatial-sdk/core";
-import { toLonLat, transformExtent } from "ol/proj.js";
 import { equals } from "ol/extent.js";
+import { toLonLat, transformExtent } from "ol/proj.js";
+import { GEOSPATIAL_SDK_PREFIX } from "./constants.js";
 import { readFeaturesAtPixel } from "./get-features.js";
 function registerFeatureClickEvent(map) {
     if (map.get(FeaturesClickEventType))
         return;
+    // Filter to only query clickable layers
+    const layerFilter = (layer) => layer.get(`${GEOSPATIAL_SDK_PREFIX}clickable`) !== false;
     map.on("click", async (event) => {
-        const featuresByLayer = await readFeaturesAtPixel(map, event);
+        const featuresByLayer = await readFeaturesAtPixel(map, event, layerFilter);
         const features = Array.from(featuresByLayer.values()).flat();
         map.dispatchEvent({
             type: FeaturesClickEventType,

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/dist/map/styles.d.ts

@@ -0,0 +1,16 @@
+import { Style } from "ol/style.js";
+import { StyleFunction } from "ol/style/Style.js";
+export interface CreateStyleOptions {
+    color: string;
+    isFocused?: boolean;
+}
+export interface StyleByGeometryType {
+    line: Style | Style[];
+    polygon: Style | Style[];
+    point: Style | Style[];
+}
+export declare function createGeometryStyles(options: CreateStyleOptions): StyleByGeometryType;
+export declare function createStyleFunction(styleByGeometryType: StyleByGeometryType): StyleFunction;
+export declare const defaultStyle: StyleFunction;
+export declare const defaultHighlightStyle: StyleFunction;
+//# sourceMappingURL=styles.d.ts.map

package/dist/map/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../lib/map/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAIlD,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,KAAK,GAAG,KAAK,EAAE,CAAC;IACtB,OAAO,EAAE,KAAK,GAAG,KAAK,EAAE,CAAC;IACzB,KAAK,EAAE,KAAK,GAAG,KAAK,EAAE,CAAC;CACxB;AAED,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,kBAAkB,GAC1B,mBAAmB,CA4CrB;AAED,wBAAgB,mBAAmB,CACjC,mBAAmB,EAAE,mBAAmB,GACvC,aAAa,CAmBf;AAMD,eAAO,MAAM,YAAY,eAIxB,CAAC;AAEF,eAAO,MAAM,qBAAqB,eAKjC,CAAC"}

package/dist/map/styles.js

@@ -0,0 +1,77 @@
+import { Circle, Fill, Stroke, Style } from "ol/style.js";
+import chroma from "chroma-js";
+export function createGeometryStyles(options) {
+    const { color, isFocused } = options;
+    const zIndex = isFocused ? 10 : undefined;
+    return {
+        polygon: new Style({
+            fill: new Fill({
+                color: computeTransparentFillColor(color),
+            }),
+            stroke: new Stroke({
+                color: "white",
+                width: 2,
+            }),
+            zIndex,
+        }),
+        point: new Style({
+            image: new Circle({
+                fill: new Fill({
+                    color,
+                }),
+                stroke: new Stroke({
+                    color: "white",
+                    width: isFocused ? 3 : 2,
+                }),
+                radius: isFocused ? 8 : 7,
+            }),
+            zIndex,
+        }),
+        line: [
+            new Style({
+                stroke: new Stroke({
+                    color: "white",
+                    width: isFocused ? 8 : 6,
+                }),
+                zIndex,
+            }),
+            new Style({
+                stroke: new Stroke({
+                    color,
+                    width: isFocused ? 3 : 2,
+                }),
+                zIndex,
+            }),
+        ],
+    };
+}
+export function createStyleFunction(styleByGeometryType) {
+    return (feature) => {
+        const geometryType = feature?.getGeometry()?.getType();
+        switch (geometryType) {
+            case "LinearRing":
+            case "LineString":
+            case "MultiLineString":
+                return styleByGeometryType.line;
+            case "Point":
+            case "MultiPoint":
+                return styleByGeometryType.point;
+            case "Circle":
+            case "Polygon":
+            case "MultiPolygon":
+                return styleByGeometryType.polygon;
+            default:
+                return styleByGeometryType.point;
+        }
+    };
+}
+function computeTransparentFillColor(color, alpha = 0.25) {
+    return chroma(color).alpha(alpha).css();
+}
+export const defaultStyle = createStyleFunction(createGeometryStyles({
+    color: "blue",
+}));
+export const defaultHighlightStyle = createStyleFunction(createGeometryStyles({
+    color: "red",
+    isFocused: true,
+}));

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=resolved-map-state.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"resolved-map-state.d.ts","sourceRoot":"","sources":["../../lib/resolved-state/resolved-map-state.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1 @@
+export {};

package/lib/map/feature-hover.ts

@@ -1,16 +1,16 @@
-import { GEOSPATIAL_SDK_PREFIX } from "./constants.js";
-import type OlMap from "ol/Map.js";
-import VectorLayer from "ol/layer/Vector.js";
-import VectorSource from "ol/source/Vector.js";
 import {
   defaultHighlightStyle,
   FeaturesHoverEventType,
 } from "@geospatial-sdk/core";
-import type BaseEvent from "ol/events/Event.js";
 import { MapBrowserEvent } from "ol";
+import type BaseEvent from "ol/events/Event.js";
 import OlFeature from "ol/Feature.js";
 import type BaseLayer from "ol/layer/Base.js";
+import VectorLayer from "ol/layer/Vector.js";
+import type OlMap from "ol/Map.js";
 import { unByKey } from "ol/Observable.js";
+import VectorSource from "ol/source/Vector.js";
+import { GEOSPATIAL_SDK_PREFIX } from "./constants.js";
 import { readFeaturesAtPixel } from "./get-features.js";
 
 const hoverLayerKey = `${GEOSPATIAL_SDK_PREFIX}hover-layer`;
@@ -28,6 +28,10 @@ export function initHoverLayer(map: OlMap) {
       useSpatialIndex: false,
     }),
     style: defaultHighlightStyle,
+    properties: {
+      [`${GEOSPATIAL_SDK_PREFIX}hoverable`]: false,
+      [`${GEOSPATIAL_SDK_PREFIX}clickable`]: false,
+    },
   });
   map.set(hoverLayerKey, hoverLayer);
   hoverLayer.setMap(map);
@@ -36,7 +40,7 @@ export function initHoverLayer(map: OlMap) {
   const originalCursorStyle = map.getTargetElement()?.style.cursor ?? "";
 
   const layerFilter = (layer: BaseLayer) =>
-    layer !== hoverLayer && layer.get(`${GEOSPATIAL_SDK_PREFIX}enable-hover`);
+    layer.get(`${GEOSPATIAL_SDK_PREFIX}hoverable`);
 
   const unKey = map.on(
     "pointermove",
@@ -63,12 +67,15 @@ export function initHoverLayer(map: OlMap) {
       }
 
       // add hovered feature to the layer
-      let firstFeature: OlFeature | null = null;
+      const hoveredFeatureResult: {
+        feature: OlFeature;
+        layer: BaseLayer;
+      }[] = [];
       map.forEachFeatureAtPixel(
         event.pixel,
-        (feature) => {
+        (feature, layer) => {
           if (feature instanceof OlFeature) {
-            firstFeature = feature;
+            hoveredFeatureResult.push({ feature, layer });
             return true;
           }
         },
@@ -76,9 +83,20 @@ export function initHoverLayer(map: OlMap) {
           layerFilter,
         },
       );
-      if (!firstFeature) {
+      if (hoveredFeatureResult.length === 0) {
         return;
       }
+
+      const { feature: firstFeature, layer: sourceLayer } =
+        hoveredFeatureResult[0];
+
+      // Get the hoverStyle from the source layer, fallback to defaultHighlightStyle
+      const hoverStyle =
+        sourceLayer.get(`${GEOSPATIAL_SDK_PREFIX}hover-style`) ??
+        defaultHighlightStyle;
+
+      // Apply the hover style to the layer (FlatStyleLike works on layers, not features)
+      hoverLayer.setStyle(hoverStyle);
       hoveredSource.addFeature(firstFeature);
 
       // dispatch event if subscribed to

package/lib/map/get-features.test.ts

@@ -12,6 +12,7 @@ import VectorLayer from "ol/layer/Vector.js";
 import VectorSource from "ol/source/Vector.js";
 import View from "ol/View.js";
 import { Collection, Object as BaseObject } from "ol";
+import { toLonLat } from "ol/proj.js";
 
 const gfiResult = {
   type: "Feature",
@@ -86,7 +87,7 @@ describe("get features utils", () => {
             [
               {
                 geometry: {
-                  coordinates: [100, 200],
+                  coordinates: toLonLat([100, 200]),
                   type: "Point",
                 },
                 properties: null,

package/lib/map/get-features.ts

@@ -1,15 +1,15 @@
-import GeoJSON from "ol/format/GeoJSON.js";
-import OlMap from "ol/Map.js";
-import { Pixel } from "ol/pixel.js";
+import type { FeaturesByLayerIndex } from "@geospatial-sdk/core";
 import type { Feature, FeatureCollection } from "geojson";
-import OlFeature from "ol/Feature.js";
-import TileWMS from "ol/source/TileWMS.js";
-import ImageWMS from "ol/source/ImageWMS.js";
+import throttle from "lodash.throttle";
 import { Coordinate } from "ol/coordinate.js";
+import OlFeature from "ol/Feature.js";
+import GeoJSON from "ol/format/GeoJSON.js";
 import Layer from "ol/layer/Layer.js";
-import throttle from "lodash.throttle";
+import OlMap from "ol/Map.js";
 import type MapBrowserEvent from "ol/MapBrowserEvent.js";
-import type { FeaturesByLayerIndex } from "@geospatial-sdk/core";
+import { Pixel } from "ol/pixel.js";
+import ImageWMS from "ol/source/ImageWMS.js";
+import TileWMS from "ol/source/TileWMS.js";
 
 const GEOJSON = new GeoJSON();
 
@@ -31,9 +31,13 @@ export function getFeaturesFromVectorSources(
       if (!result.has(layerIndex)) {
         result.set(layerIndex, []);
       }
-      result
-        .get(layerIndex)!
-        .push(GEOJSON.writeFeatureObject(feature as OlFeature));
+      result.get(layerIndex)!.push(
+        GEOJSON.writeFeatureObject(feature as OlFeature, {
+          featureProjection: olMap.getView().getProjection(),
+          dataProjection: "EPSG:4326",
+        }),
+      );
+      return null;
     },
     { layerFilter },
   );

package/lib/map/layer-update.test.ts

@@ -116,7 +116,7 @@ describe("Layer update utils", () => {
       expect(olLayer.set).toHaveBeenCalledWith("label", "Test Layer");
     });
 
-    it("applies properties specific to vector layers without recreating them", async () => {
+    it("enable interaction-related props without recreating them", async () => {
       // mocking a vector layer
       (olLayer as VectorLayer).setStyle = vi.fn();
 
@@ -125,7 +125,8 @@ describe("Layer update utils", () => {
         style: {
           "circle-fill-color": "blue",
         },
-        enableHover: true,
+        hoverable: true,
+        clickable: false,
       };
       const prevLayerModel = SAMPLE_LAYER3;
       updateLayerProperties(layerModel, olLayer, prevLayerModel);
@@ -133,9 +134,13 @@ describe("Layer update utils", () => {
         layerModel.style,
       );
       expect(olLayer.set).toHaveBeenCalledWith(
-        "--geospatial-sdk-enable-hover",
+        "--geospatial-sdk-hoverable",
         true,
       );
+      expect(olLayer.set).toHaveBeenCalledWith(
+        "--geospatial-sdk-clickable",
+        false,
+      );
     });
   });
 });

package/lib/map/layer-update.ts

@@ -4,8 +4,9 @@ import {
   MapContextLayerVector,
 } from "@geospatial-sdk/core/lib/model/map-context.js";
 import Layer from "ol/layer/Layer.js";
-import { GEOSPATIAL_SDK_PREFIX } from "./constants.js";
 import VectorLayer from "ol/layer/Vector.js";
+import type VectorSource from "ol/source/Vector.js";
+import { GEOSPATIAL_SDK_PREFIX } from "./constants.js";
 
 const UPDATABLE_PROPERTIES: (
   | keyof MapContextBaseLayer
@@ -17,8 +18,10 @@ const UPDATABLE_PROPERTIES: (
   "attributions",
   "extras",
   "version",
-  "enableHover",
+  "hoverable",
+  "clickable",
   "style",
+  "hoverStyle",
   // TODO (when available) "zIndex"
 ];
 
@@ -79,17 +82,23 @@ export function updateLayerProperties(
   if (shouldApplyProperty("label")) {
     olLayer.set("label", layerModel.label);
   }
-  if (shouldApplyProperty("enableHover" as keyof MapContextLayer)) {
+  if (shouldApplyProperty("hoverable")) {
+    olLayer.set(`${GEOSPATIAL_SDK_PREFIX}hoverable`, layerModel.hoverable);
+  }
+  if (shouldApplyProperty("hoverStyle" as keyof MapContextLayer)) {
     olLayer.set(
-      `${GEOSPATIAL_SDK_PREFIX}enable-hover`,
-      (layerModel as MapContextLayerVector).enableHover,
+      `${GEOSPATIAL_SDK_PREFIX}hover-style`,
+      (layerModel as MapContextLayerVector).hoverStyle,
     );
   }
+  if (shouldApplyProperty("clickable" as keyof MapContextLayer)) {
+    olLayer.set(`${GEOSPATIAL_SDK_PREFIX}clickable`, layerModel.clickable);
+  }
   if (
     shouldApplyProperty("style" as keyof MapContextLayer) &&
     "setStyle" in olLayer
   ) {
-    (olLayer as VectorLayer).setStyle(
+    (olLayer as VectorLayer<VectorSource>).setStyle(
       (layerModel as MapContextLayerVector).style,
     );
   }

package/lib/map/register-events.ts

@@ -1,4 +1,3 @@
-import Map, { MapObjectEventTypes } from "ol/Map.js";
 import {
   FeaturesClickEventType,
   FeaturesHoverEventType,
@@ -7,18 +6,25 @@ import {
   MapExtentChangeEventType,
   SourceLoadErrorType,
 } from "@geospatial-sdk/core";
-import { toLonLat, transformExtent } from "ol/proj.js";
 import BaseEvent from "ol/events/Event.js";
-import Layer from "ol/layer/Layer.js";
-import { BaseLayerObjectEventTypes } from "ol/layer/Base.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";
 
 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) => {
-    const featuresByLayer = await readFeaturesAtPixel(map, event);
+    const featuresByLayer = await readFeaturesAtPixel(map, event, layerFilter);
     const features = Array.from(featuresByLayer.values()).flat();
     map.dispatchEvent({
       type: FeaturesClickEventType,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geospatial-sdk/openlayers",
-  "version": "0.0.5-dev.52+73ea489",
+  "version": "0.0.5-dev.54+352b554",
   "description": "OpenLayers-related utilities",
   "keywords": [
     "ol",
@@ -37,10 +37,9 @@
     "ol": ">9.x"
   },
   "dependencies": {
-    "@geospatial-sdk/core": "^0.0.5-dev.52+73ea489",
-    "chroma-js": "^2.4.2",
+    "@geospatial-sdk/core": "^0.0.5-dev.54+352b554",
     "lodash.throttle": "^4.1.1",
     "ol-mapbox-style": "12.4.0"
   },
-  "gitHead": "73ea4890e493aae5379e23af6b7679bab253db92"
+  "gitHead": "352b554ec0ca6a27dee923a28b4b1bb4e3f12973"
 }