@open-pioneer/map 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,63 @@
 # @open-pioneer/map
 
+## 0.6.0
+
+### Minor Changes
+
+-   0d51d2f: Change how map anchors are positioned in the DOM.
+
+    Previously, map anchor divs were children of the OpenLayers map viewport:
+
+    ```
+    .map-container
+    └── .ol-viewport
+        └── .ol-overlaycontainer-stopevent
+            └── .map-anchors
+                └── .map-anchor
+                    └── ... children ...
+    ```
+
+    This interfered with browser event handling, especially if the map anchor's content was interactive.
+    The workarounds to stop events from map-anchors to bubble into the map caused surprising behavior (e.g. https://github.com/open-pioneer/trails-openlayers-base-packages/issues/312).
+
+    Now, the DOM looks like this:
+
+    ```
+    .map-container
+    ├── .map-anchors
+    │   └── .map-anchor
+    │       └── ... children ...
+    └── .ol-viewport
+    ```
+
+    Which means that the map-anchors are no longer children of the map.
+
+    You may have to update your custom styles if you relied on the previous DOM hierarchy.
+
+    The `MapAnchor`'s prop `stopEvents` has been deleted as it is no longer needed.
+    Browser events happening inside a map anchor or its children will no longer affect the map.
+
+### Patch Changes
+
+-   28e092a: Update dependencies
+-   76f8863: Add a new (internal) entry point to support the map-test-utils package.
+
+## 0.5.1
+
+### Patch Changes
+
+-   4140646: Update trails dependencies
+-   4140646: Update to react 18.3.1
+-   b5bb7a1: Adjusted name of Open Pioneer project to Open Pioneer Trails
+-   81bc7da: Update trails dependencies
+-   2c092dc: Update dependencies
+-   Updated dependencies [4140646]
+-   Updated dependencies [4140646]
+-   Updated dependencies [81bc7da]
+-   Updated dependencies [2c092dc]
+-   Updated dependencies [4140646]
+    -   @open-pioneer/react-utils@0.2.3
+
 ## 0.5.0
 
 ### Minor Changes

package/README.md

@@ -1,6 +1,6 @@
 # @open-pioneer/map
 
-This package integrates [OpenLayers](https://openlayers.org/) maps into an open pioneer trails application.
+This package integrates [OpenLayers](https://openlayers.org/) maps into an Open Pioneer Trails application.
 APIs provided by this package can be used to configure, embed and access the map and its contents.
 
 ## Usage

package/internalTestSupport.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Exported for the `@open-pioneer/map-test-utils` package.
+ *
+ * This API is unstable.
+ *
+ * @internal
+ */
+export { MapRegistryImpl } from "./MapRegistryImpl";

package/internalTestSupport.js

@@ -0,0 +1,2 @@
+export { MapRegistryImpl } from './MapRegistryImpl.js';
+//# sourceMappingURL=internalTestSupport.js.map

package/internalTestSupport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internalTestSupport.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/layers/BkgTopPlusOpen.js

@@ -1,5 +1,5 @@
-import WMTS from 'ol/source/WMTS';
-import WMTSTileGrid from 'ol/tilegrid/WMTS';
+import WMTS from 'ol/source/WMTS.js';
+import WMTSTileGrid from 'ol/tilegrid/WMTS.js';
 
 class BkgTopPlusOpen extends WMTS {
   constructor(options) {

package/model/AbstractLayer.js

@@ -1,6 +1,6 @@
 import { createLogger } from '@open-pioneer/core';
-import { unByKey } from 'ol/Observable';
-import OlLayer from 'ol/layer/Layer';
+import { unByKey } from 'ol/Observable.js';
+import OlLayer from 'ol/layer/Layer.js';
 import { AbstractLayerBase } from './AbstractLayerBase.js';
 
 const LOG = createLogger("map:AbstractLayer");

package/model/Highlights.d.ts

@@ -2,7 +2,6 @@ import { Feature } from "ol";
 import OlMap from "ol/Map";
 import { Geometry } from "ol/geom";
 import VectorLayer from "ol/layer/Vector";
-import VectorSource from "ol/source/Vector";
 import { DisplayTarget, Highlight, HighlightOptions, HighlightZoomOptions, ZoomOptions } from "../api/MapModel";
 export declare class Highlights {
     #private;
@@ -15,7 +14,7 @@ export declare class Highlights {
      * Getter for Hightlightlayer
      * @returns Highlights.olLayer
      */
-    getLayer(): VectorLayer<VectorSource<Feature<Geometry>>>;
+    getLayer(): VectorLayer<Feature<Geometry>>;
     /**
      * This method removes all highlights before destroying the class
      */

package/model/Highlights.js

@@ -1,19 +1,19 @@
 import { Feature } from 'ol';
-import { createEmpty, extend, getCenter, getArea } from 'ol/extent';
-import VectorLayer from 'ol/layer/Vector';
-import VectorSource from 'ol/source/Vector';
-import { Style, Icon, Stroke, Fill } from 'ol/style';
-import { toFunction } from 'ol/style/Style';
+import { createEmpty, extend, getCenter, getArea } from 'ol/extent.js';
+import VectorLayer from 'ol/layer/Vector.js';
+import VectorSource from 'ol/source/Vector.js';
+import { Style, Icon, Stroke, Fill } from 'ol/style.js';
+import { toFunction } from 'ol/style/Style.js';
 import mapMarkerUrl from '../assets/images/mapMarker.png?url';
 import './AbstractLayer.js';
 import './layers/WMSLayerImpl.js';
 import './layers/WMTSLayerImpl.js';
-import 'ol/proj/proj4';
+import 'ol/proj/proj4.js';
 import 'proj4';
-import 'ol/source/WMTS';
-import 'ol/tilegrid/WMTS';
-import 'ol/Observable';
-import 'ol/proj';
+import 'ol/source/WMTS.js';
+import 'ol/tilegrid/WMTS.js';
+import 'ol/Observable.js';
+import 'ol/proj.js';
 import 'react';
 import 'react/jsx-runtime';
 import '@open-pioneer/chakra-integration';
@@ -68,10 +68,8 @@ class Highlights {
   #filterGeoobjects(geoObjects) {
     const geometries = [];
     geoObjects.forEach((item) => {
-      if ("getType" in item)
-        geometries.push(item);
-      if ("geometry" in item && item.geometry)
-        geometries.push(item.geometry);
+      if ("getType" in item) geometries.push(item);
+      if ("geometry" in item && item.geometry) geometries.push(item.geometry);
     });
     return geometries;
   }

package/model/Highlights.js.map

@@ -1 +1 @@
-{"version":3,"file":"Highlights.js","sources":["Highlights.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\n\nimport { Feature } from \"ol\";\nimport OlMap from \"ol/Map\";\nimport { Coordinate } from \"ol/coordinate\";\nimport { Extent, createEmpty, extend, getArea, getCenter } from \"ol/extent\";\nimport { Geometry } from \"ol/geom\";\nimport VectorLayer from \"ol/layer/Vector\";\nimport VectorSource from \"ol/source/Vector\";\nimport { Fill, Icon, Stroke, Style } from \"ol/style\";\nimport { toFunction as toStyleFunction } from \"ol/style/Style\";\nimport {\n    DisplayTarget,\n    Highlight,\n    HighlightOptions,\n    HighlightStyle,\n    HighlightZoomOptions,\n    ZoomOptions\n} from \"../api/MapModel\";\nimport mapMarkerUrl from \"../assets/images/mapMarker.png?url\";\nimport { FeatureLike } from \"ol/Feature\";\nimport { TOPMOST_LAYER_Z } from \"../api\";\nimport { Type } from \"ol/geom/Geometry\";\n\ntype HighlightStyleType = keyof HighlightStyle;\n\nconst DEFAULT_OL_POINT_ZOOM_LEVEL = 17;\nconst DEFAULT_OL_MAX_ZOOM_LEVEL = 20;\nconst DEFAULT_VIEW_PADDING = { top: 50, right: 20, bottom: 10, left: 20 };\n\nexport class Highlights {\n    private olMap: OlMap;\n\n    private olLayer: VectorLayer<VectorSource>;\n    private olSource: VectorSource<Feature<Geometry>>;\n    private activeHighlights: Set<Highlight>;\n\n    constructor(olMap: OlMap) {\n        this.olMap = olMap;\n        this.olSource = new VectorSource({\n            features: undefined\n        });\n        this.olLayer = new VectorLayer({\n            className: \"highlight-layer\",\n            source: this.olSource,\n            style: function (feature, resolution) {\n                return resolveStyle(feature, resolution);\n            }\n        });\n        this.activeHighlights = new Set();\n        this.olLayer.setZIndex(TOPMOST_LAYER_Z);\n        this.olMap.addLayer(this.olLayer);\n    }\n\n    /**\n     * Getter for Hightlightlayer\n     * @returns Highlights.olLayer\n     */\n    getLayer() {\n        return this.olLayer;\n    }\n\n    /**\n     * This method removes all highlights before destroying the class\n     */\n    destroy() {\n        this.clearHighlight();\n    }\n\n    /**\n     * Method of filtering out objects that are not geometry or have no property geometry.\n     */\n    #filterGeoobjects(geoObjects: DisplayTarget[]): Geometry[] {\n        const geometries: Geometry[] = [];\n        geoObjects.forEach((item) => {\n            if (\"getType\" in item) geometries.push(item);\n            if (\"geometry\" in item && item.geometry) geometries.push(item.geometry);\n        });\n        return geometries;\n    }\n\n    /**\n     * This method displays geometries or BaseFeatures with optional styling in the map\n     */\n    addHighlight(displayTarget: DisplayTarget[], highlightOptions: HighlightOptions | undefined) {\n        const geometries = this.#filterGeoobjects(displayTarget);\n\n        if (geometries.length === 0) {\n            return {\n                get isActive() {\n                    return false;\n                },\n                destroy() {}\n            };\n        }\n\n        const features = geometries.map((geometry) => {\n            const type = geometry.getType();\n            const feature = new Feature({\n                type: type,\n                geometry: geometry\n            });\n            feature.setStyle(getOwnStyle(type, highlightOptions?.highlightStyle));\n            return feature;\n        });\n\n        const source = this.olSource;\n        const highlights = this.activeHighlights;\n        const highlight: Highlight = {\n            get isActive() {\n                return highlights.has(highlight);\n            },\n            destroy() {\n                if (!this.isActive) {\n                    return;\n                }\n\n                for (const feature of features) {\n                    source.removeFeature(feature);\n                }\n                highlights.delete(highlight);\n            }\n        };\n\n        source.addFeatures(features);\n        this.activeHighlights.add(highlight);\n        return highlight;\n    }\n\n    /**\n     * This method zoom to geometries or BaseFeatures\n     */\n    zoomToHighlight(displayTarget: DisplayTarget[], options: ZoomOptions | undefined) {\n        const geometries = this.#filterGeoobjects(displayTarget);\n\n        if (geometries.length === 0) {\n            return;\n        }\n\n        let extent = createEmpty();\n        for (const geometry of geometries) {\n            extent = extend(extent, geometry!.getExtent());\n        }\n\n        const center = getCenter(extent);\n        const isPoint = getArea(extent) === 0;\n        const zoomScale = isPoint\n            ? options?.pointZoom ?? DEFAULT_OL_POINT_ZOOM_LEVEL\n            : options?.maxZoom ?? DEFAULT_OL_MAX_ZOOM_LEVEL;\n        setCenter(this.olMap, center);\n\n        const {\n            top = 0,\n            right = 0,\n            bottom = 0,\n            left = 0\n        } = options?.viewPadding ?? DEFAULT_VIEW_PADDING;\n        const padding = [top, right, bottom, left];\n        zoomTo(this.olMap, extent, zoomScale, padding);\n    }\n\n    /**\n     * This method displays geometries or BaseFeatures with optional styling in the map and executed a zoom\n     */\n    addHighlightAndZoom(\n        displayTarget: DisplayTarget[],\n        highlightZoomStyle: HighlightZoomOptions | undefined\n    ) {\n        const result = this.addHighlight(displayTarget, highlightZoomStyle);\n        this.zoomToHighlight(displayTarget, highlightZoomStyle);\n        return result;\n    }\n\n    clearHighlight() {\n        for (const highlight of this.activeHighlights) {\n            highlight.destroy();\n        }\n    }\n}\n\nfunction setCenter(olMap: OlMap, coordinates: Coordinate | undefined) {\n    coordinates && coordinates.length && olMap.getView().setCenter(coordinates);\n}\n\nfunction zoomTo(\n    olMap: OlMap,\n    extent: Extent | undefined,\n    zoomLevel: number | undefined,\n    padding: number[]\n) {\n    if (extent) {\n        olMap.getView().fit(extent, { maxZoom: zoomLevel, padding: padding });\n    } else {\n        zoomLevel && olMap.getView().setZoom(zoomLevel);\n    }\n}\n\n/**\n * Returns the appropriate style from the user's highlightStyle or falls back to the default style\n */\nfunction resolveStyle(feature: FeatureLike, resolution: number) {\n    const type: keyof typeof defaultHighlightStyle = feature.get(\"type\");\n    const style = toStyleFunction(getDefaultStyle(type));\n    return style(feature, resolution);\n}\n\n/**\n * This method creates styling for a highlight based on the optional style information or the default style\n */\nfunction getOwnStyle(type: Type, highlightStyle: HighlightStyle | undefined) {\n    if (highlightStyle && type in highlightStyle) {\n        const supportedType = type as HighlightStyleType;\n        const ownStyle = highlightStyle[supportedType];\n        return ownStyle ? ownStyle : getDefaultStyle(type);\n    } else {\n        return getDefaultStyle(type);\n    }\n}\n\n/**\n * This returns default styling for a highlight\n */\nfunction getDefaultStyle(type: Type) {\n    if (type in defaultHighlightStyle) {\n        const supportedType = type as HighlightStyleType;\n        return defaultHighlightStyle[supportedType];\n    } else {\n        return defaultHighlightStyle.Polygon;\n    }\n}\n\n/**\n * Default styling for highlights\n */\nconst defaultHighlightStyle = {\n    \"Point\": new Style({\n        image: new Icon({\n            anchor: [0.5, 1],\n            src: mapMarkerUrl\n        })\n    }),\n    \"MultiPoint\": new Style({\n        image: new Icon({\n            anchor: [0.5, 1],\n            src: mapMarkerUrl\n        })\n    }),\n    \"LineString\": [\n        new Style({\n            stroke: new Stroke({\n                color: \"#fff\",\n                width: 5\n            })\n        }),\n        new Style({\n            stroke: new Stroke({\n                color: \"#00ffff\",\n                width: 3\n            })\n        })\n    ],\n    \"MultiLineString\": [\n        new Style({\n            stroke: new Stroke({\n                color: \"#fff\",\n                width: 5\n            })\n        }),\n        new Style({\n            stroke: new Stroke({\n                color: \"#00ffff\",\n                width: 3\n            })\n        })\n    ],\n    \"Polygon\": [\n        new Style({\n            stroke: new Stroke({\n                color: \"#fff\",\n                width: 5\n            })\n        }),\n        new Style({\n            stroke: new Stroke({\n                color: \"#00ffff\",\n                width: 3\n            }),\n            fill: new Fill({\n                color: \"rgba(224,255,255,0.35)\"\n            })\n        })\n    ],\n    \"MultiPolygon\": [\n        new Style({\n            stroke: new Stroke({\n                color: \"#fff\",\n                width: 5\n            })\n        }),\n        new Style({\n            stroke: new Stroke({\n                color: \"#00ffff\",\n                width: 3\n            }),\n            fill: new Fill({\n                color: \"rgba(224,255,255,0.35)\"\n            })\n        })\n    ]\n};\n"],"names":["toStyleFunction"],"mappings":"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"}
+{"version":3,"file":"Highlights.js","sources":["Highlights.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\n\nimport { Feature } from \"ol\";\nimport OlMap from \"ol/Map\";\nimport { Coordinate } from \"ol/coordinate\";\nimport { Extent, createEmpty, extend, getArea, getCenter } from \"ol/extent\";\nimport { Geometry } from \"ol/geom\";\nimport VectorLayer from \"ol/layer/Vector\";\nimport VectorSource from \"ol/source/Vector\";\nimport { Fill, Icon, Stroke, Style } from \"ol/style\";\nimport { toFunction as toStyleFunction } from \"ol/style/Style\";\nimport {\n    DisplayTarget,\n    Highlight,\n    HighlightOptions,\n    HighlightStyle,\n    HighlightZoomOptions,\n    ZoomOptions\n} from \"../api/MapModel\";\nimport mapMarkerUrl from \"../assets/images/mapMarker.png?url\";\nimport { FeatureLike } from \"ol/Feature\";\nimport { TOPMOST_LAYER_Z } from \"../api\";\nimport { Type } from \"ol/geom/Geometry\";\n\ntype HighlightStyleType = keyof HighlightStyle;\n\nconst DEFAULT_OL_POINT_ZOOM_LEVEL = 17;\nconst DEFAULT_OL_MAX_ZOOM_LEVEL = 20;\nconst DEFAULT_VIEW_PADDING = { top: 50, right: 20, bottom: 10, left: 20 };\n\nexport class Highlights {\n    private olMap: OlMap;\n\n    private olLayer: VectorLayer<Feature>;\n    private olSource: VectorSource<Feature<Geometry>>;\n    private activeHighlights: Set<Highlight>;\n\n    constructor(olMap: OlMap) {\n        this.olMap = olMap;\n        this.olSource = new VectorSource({\n            features: undefined\n        });\n        this.olLayer = new VectorLayer({\n            className: \"highlight-layer\",\n            source: this.olSource,\n            style: function (feature, resolution) {\n                return resolveStyle(feature, resolution);\n            }\n        });\n        this.activeHighlights = new Set();\n        this.olLayer.setZIndex(TOPMOST_LAYER_Z);\n        this.olMap.addLayer(this.olLayer);\n    }\n\n    /**\n     * Getter for Hightlightlayer\n     * @returns Highlights.olLayer\n     */\n    getLayer() {\n        return this.olLayer;\n    }\n\n    /**\n     * This method removes all highlights before destroying the class\n     */\n    destroy() {\n        this.clearHighlight();\n    }\n\n    /**\n     * Method of filtering out objects that are not geometry or have no property geometry.\n     */\n    #filterGeoobjects(geoObjects: DisplayTarget[]): Geometry[] {\n        const geometries: Geometry[] = [];\n        geoObjects.forEach((item) => {\n            if (\"getType\" in item) geometries.push(item);\n            if (\"geometry\" in item && item.geometry) geometries.push(item.geometry);\n        });\n        return geometries;\n    }\n\n    /**\n     * This method displays geometries or BaseFeatures with optional styling in the map\n     */\n    addHighlight(displayTarget: DisplayTarget[], highlightOptions: HighlightOptions | undefined) {\n        const geometries = this.#filterGeoobjects(displayTarget);\n\n        if (geometries.length === 0) {\n            return {\n                get isActive() {\n                    return false;\n                },\n                destroy() {}\n            };\n        }\n\n        const features = geometries.map((geometry) => {\n            const type = geometry.getType();\n            const feature = new Feature({\n                type: type,\n                geometry: geometry\n            });\n            feature.setStyle(getOwnStyle(type, highlightOptions?.highlightStyle));\n            return feature;\n        });\n\n        const source = this.olSource;\n        const highlights = this.activeHighlights;\n        const highlight: Highlight = {\n            get isActive() {\n                return highlights.has(highlight);\n            },\n            destroy() {\n                if (!this.isActive) {\n                    return;\n                }\n\n                for (const feature of features) {\n                    source.removeFeature(feature);\n                }\n                highlights.delete(highlight);\n            }\n        };\n\n        source.addFeatures(features);\n        this.activeHighlights.add(highlight);\n        return highlight;\n    }\n\n    /**\n     * This method zoom to geometries or BaseFeatures\n     */\n    zoomToHighlight(displayTarget: DisplayTarget[], options: ZoomOptions | undefined) {\n        const geometries = this.#filterGeoobjects(displayTarget);\n\n        if (geometries.length === 0) {\n            return;\n        }\n\n        let extent = createEmpty();\n        for (const geometry of geometries) {\n            extent = extend(extent, geometry!.getExtent());\n        }\n\n        const center = getCenter(extent);\n        const isPoint = getArea(extent) === 0;\n        const zoomScale = isPoint\n            ? (options?.pointZoom ?? DEFAULT_OL_POINT_ZOOM_LEVEL)\n            : (options?.maxZoom ?? DEFAULT_OL_MAX_ZOOM_LEVEL);\n        setCenter(this.olMap, center);\n\n        const {\n            top = 0,\n            right = 0,\n            bottom = 0,\n            left = 0\n        } = options?.viewPadding ?? DEFAULT_VIEW_PADDING;\n        const padding = [top, right, bottom, left];\n        zoomTo(this.olMap, extent, zoomScale, padding);\n    }\n\n    /**\n     * This method displays geometries or BaseFeatures with optional styling in the map and executed a zoom\n     */\n    addHighlightAndZoom(\n        displayTarget: DisplayTarget[],\n        highlightZoomStyle: HighlightZoomOptions | undefined\n    ) {\n        const result = this.addHighlight(displayTarget, highlightZoomStyle);\n        this.zoomToHighlight(displayTarget, highlightZoomStyle);\n        return result;\n    }\n\n    clearHighlight() {\n        for (const highlight of this.activeHighlights) {\n            highlight.destroy();\n        }\n    }\n}\n\nfunction setCenter(olMap: OlMap, coordinates: Coordinate | undefined) {\n    coordinates && coordinates.length && olMap.getView().setCenter(coordinates);\n}\n\nfunction zoomTo(\n    olMap: OlMap,\n    extent: Extent | undefined,\n    zoomLevel: number | undefined,\n    padding: number[]\n) {\n    if (extent) {\n        olMap.getView().fit(extent, { maxZoom: zoomLevel, padding: padding });\n    } else {\n        zoomLevel && olMap.getView().setZoom(zoomLevel);\n    }\n}\n\n/**\n * Returns the appropriate style from the user's highlightStyle or falls back to the default style\n */\nfunction resolveStyle(feature: FeatureLike, resolution: number) {\n    const type: keyof typeof defaultHighlightStyle = feature.get(\"type\");\n    const style = toStyleFunction(getDefaultStyle(type));\n    return style(feature, resolution);\n}\n\n/**\n * This method creates styling for a highlight based on the optional style information or the default style\n */\nfunction getOwnStyle(type: Type, highlightStyle: HighlightStyle | undefined) {\n    if (highlightStyle && type in highlightStyle) {\n        const supportedType = type as HighlightStyleType;\n        const ownStyle = highlightStyle[supportedType];\n        return ownStyle ? ownStyle : getDefaultStyle(type);\n    } else {\n        return getDefaultStyle(type);\n    }\n}\n\n/**\n * This returns default styling for a highlight\n */\nfunction getDefaultStyle(type: Type) {\n    if (type in defaultHighlightStyle) {\n        const supportedType = type as HighlightStyleType;\n        return defaultHighlightStyle[supportedType];\n    } else {\n        return defaultHighlightStyle.Polygon;\n    }\n}\n\n/**\n * Default styling for highlights\n */\nconst defaultHighlightStyle = {\n    \"Point\": new Style({\n        image: new Icon({\n            anchor: [0.5, 1],\n            src: mapMarkerUrl\n        })\n    }),\n    \"MultiPoint\": new Style({\n        image: new Icon({\n            anchor: [0.5, 1],\n            src: mapMarkerUrl\n        })\n    }),\n    \"LineString\": [\n        new Style({\n            stroke: new Stroke({\n                color: \"#fff\",\n                width: 5\n            })\n        }),\n        new Style({\n            stroke: new Stroke({\n                color: \"#00ffff\",\n                width: 3\n            })\n        })\n    ],\n    \"MultiLineString\": [\n        new Style({\n            stroke: new Stroke({\n                color: \"#fff\",\n                width: 5\n            })\n        }),\n        new Style({\n            stroke: new Stroke({\n                color: \"#00ffff\",\n                width: 3\n            })\n        })\n    ],\n    \"Polygon\": [\n        new Style({\n            stroke: new Stroke({\n                color: \"#fff\",\n                width: 5\n            })\n        }),\n        new Style({\n            stroke: new Stroke({\n                color: \"#00ffff\",\n                width: 3\n            }),\n            fill: new Fill({\n                color: \"rgba(224,255,255,0.35)\"\n            })\n        })\n    ],\n    \"MultiPolygon\": [\n        new Style({\n            stroke: new Stroke({\n                color: \"#fff\",\n                width: 5\n            })\n        }),\n        new Style({\n            stroke: new Stroke({\n                color: \"#00ffff\",\n                width: 3\n            }),\n            fill: new Fill({\n                color: \"rgba(224,255,255,0.35)\"\n            })\n        })\n    ]\n};\n"],"names":["toStyleFunction"],"mappings":"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"}

package/model/MapModelImpl.js

@@ -1,6 +1,6 @@
 import { createLogger, EventEmitter, isAbortError, createManualPromise, createAbortError } from '@open-pioneer/core';
-import { unByKey } from 'ol/Observable';
-import { getCenter } from 'ol/extent';
+import { unByKey } from 'ol/Observable.js';
+import { getCenter } from 'ol/extent.js';
 import { LayerCollectionImpl } from './LayerCollectionImpl.js';
 import { Highlights } from './Highlights.js';
 

package/model/createMapModel.js

@@ -1,12 +1,12 @@
 import { createLogger } from '@open-pioneer/core';
-import OlMap from 'ol/Map';
-import View from 'ol/View';
-import Attribution from 'ol/control/Attribution';
-import { getCenter } from 'ol/extent';
-import TileLayer from 'ol/layer/Tile';
-import { get } from 'ol/proj';
-import OSM from 'ol/source/OSM';
-import { defaults, DragZoom } from 'ol/interaction';
+import OlMap from 'ol/Map.js';
+import View from 'ol/View.js';
+import Attribution from 'ol/control/Attribution.js';
+import { getCenter } from 'ol/extent.js';
+import TileLayer from 'ol/layer/Tile.js';
+import { get } from 'ol/proj.js';
+import OSM from 'ol/source/OSM.js';
+import { defaults, DragZoom } from 'ol/interaction.js';
 import { MapModelImpl } from './MapModelImpl.js';
 import { registerProjections } from '../projections.js';
 import { patchOpenLayersClassesForTesting } from '../util/ol-test-support.js';

package/model/layers/WMSLayerImpl.js

@@ -1,7 +1,7 @@
 import { createLogger, isAbortError } from '@open-pioneer/core';
-import WMSCapabilities from 'ol/format/WMSCapabilities';
-import ImageLayer from 'ol/layer/Image';
-import ImageWMS from 'ol/source/ImageWMS';
+import WMSCapabilities from 'ol/format/WMSCapabilities.js';
+import ImageLayer from 'ol/layer/Image.js';
+import ImageWMS from 'ol/source/ImageWMS.js';
 import { fetchCapabilities } from '../../util/capabilities-utils.js';
 import { defer } from '../../util/defer.js';
 import { AbstractLayer } from '../AbstractLayer.js';

package/model/layers/WMTSLayerImpl.js

@@ -1,8 +1,8 @@
 import { createLogger, isAbortError } from '@open-pioneer/core';
-import TileState from 'ol/TileState';
-import WMTSCapabilities from 'ol/format/WMTSCapabilities';
-import TileLayer from 'ol/layer/Tile';
-import WMTS, { optionsFromCapabilities } from 'ol/source/WMTS';
+import TileState from 'ol/TileState.js';
+import WMTSCapabilities from 'ol/format/WMTSCapabilities.js';
+import TileLayer from 'ol/layer/Tile.js';
+import WMTS, { optionsFromCapabilities } from 'ol/source/WMTS.js';
 import { fetchCapabilities } from '../../util/capabilities-utils.js';
 import { AbstractLayer } from '../AbstractLayer.js';
 import { ImageTile } from 'ol';

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@open-pioneer/map",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "This package integrates OpenLayers maps into an open pioneer trails application.",
   "keywords": [
     "open-pioneer-trails"
@@ -14,20 +14,20 @@
     "directory": "src/packages/map"
   },
   "dependencies": {
-    "uuid": "^9.0.1"
+    "uuid": "^10.0.0"
   },
   "peerDependencies": {
-    "@open-pioneer/chakra-integration": "^1.1.1",
-    "@open-pioneer/core": "^1.2.1",
-    "@open-pioneer/http": "^2.1.4",
-    "@open-pioneer/runtime": "^2.1.2",
+    "@open-pioneer/chakra-integration": "^1.1.3",
+    "@open-pioneer/core": "^1.2.3",
+    "@open-pioneer/http": "^2.1.8",
+    "@open-pioneer/react-utils": "^1.0.0",
+    "@open-pioneer/runtime": "^2.1.6",
     "@types/proj4": "^2.5.2",
-    "ol": "^9.0.0",
+    "ol": "^9.2.4",
     "proj4": "^2.9.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-use": "^17.4.2",
-    "@open-pioneer/react-utils": "^0.2.2"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-use": "^17.5.1"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -35,6 +35,10 @@
       "import": "./index.js",
       "types": "./index.d.ts"
     },
+    "./internalTestSupport": {
+      "import": "./internalTestSupport.js",
+      "types": "./internalTestSupport.d.ts"
+    },
     "./services": {
       "import": "./services.js",
       "types": "./services.d.ts"

package/projections.js

@@ -1,4 +1,4 @@
-import { register } from 'ol/proj/proj4';
+import { register } from 'ol/proj/proj4.js';
 import proj4 from 'proj4';
 
 function registerProjections(projections) {

package/ui/MapAnchor.d.ts

@@ -29,16 +29,6 @@ export interface MapAnchorProps extends CommonComponentProps {
      * @default 0 (If position `bottom-*`, default verticalGap == `30`)
      */
     verticalGap?: number;
-    /**
-     * Prevent some events from the map anchor's children from bubbling towards the map, effectively hiding them from map interactions.
-     * Defaults to `true`.
-     *
-     * If this value is enabled, events such as `pointer-down` are hidden from the map when they occur
-     * within the map anchor.
-     * This is essential when the user wants to select text, or open the browser context menu within the anchor.
-     * If that is not required, set `stopEvents` to `false` instead.
-     */
-    stopEvents?: boolean;
     children?: ReactNode;
 }
 export declare function MapAnchor(props: MapAnchorProps): JSX.Element;

package/ui/MapAnchor.js

@@ -1,37 +1,19 @@
 import { jsx } from 'react/jsx-runtime';
 import { Box } from '@open-pioneer/chakra-integration';
 import { useCommonComponentProps } from '@open-pioneer/react-utils';
-import { useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import { useMapContext } from './MapContext.js';
 
 const defaultPosition = "top-right";
 function MapAnchor(props) {
-  const {
-    position = defaultPosition,
-    stopEvents = true,
-    children,
-    horizontalGap,
-    verticalGap
-  } = props;
+  const { position = defaultPosition, children, horizontalGap, verticalGap } = props;
   const { containerProps } = useCommonComponentProps("map-anchor", props);
   const { padding, mapAnchorsHost } = useMapContext();
-  const eventHandlers = useMemo(() => {
-    const stopHandler = stopEvents ? stopPropagation : void 0;
-    return {
-      onPointerDown: stopHandler,
-      onPointerUp: stopHandler,
-      onContextMenu: stopHandler
-    };
-  }, [stopEvents]);
   return createPortal(
     /* @__PURE__ */ jsx(
       Box,
       {
         ...containerProps,
-        pointerEvents: "auto",
-        userSelect: "text",
-        ...eventHandlers,
         ...computePositionStyles(position, padding, horizontalGap, verticalGap),
         children
       }
@@ -50,6 +32,8 @@ function computeAttributionGap(verticalGap) {
 function computePositionStyles(position, padding, horizontalGap, verticalGap) {
   const props = {
     position: "absolute",
+    zIndex: 1,
+    // above map
     transitionProperty: "left, right, top, bottom",
     transitionDuration: "200ms",
     transitionTimingFunction: "ease-out"
@@ -83,9 +67,6 @@ function computePositionStyles(position, padding, horizontalGap, verticalGap) {
   props.overflow = "hidden";
   return props;
 }
-function stopPropagation(e) {
-  e.stopPropagation();
-}
 
 export { MapAnchor, computeAttributionGap, computePositionStyles };
 //# sourceMappingURL=MapAnchor.js.map

package/ui/MapAnchor.js.map

@@ -1 +1 @@
-{"version":3,"file":"MapAnchor.js","sources":["MapAnchor.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Box, BoxProps, StyleProps } from \"@open-pioneer/chakra-integration\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport { BaseSyntheticEvent, ReactNode, useMemo } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { MapPadding } from \"../api\";\nimport { useMapContext } from \"./MapContext\";\n\nexport type MapAnchorPosition = \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\";\n\nconst defaultPosition: MapAnchorPosition = \"top-right\";\n\nexport interface MapAnchorProps extends CommonComponentProps {\n    /**\n     * The position of the anchor container above the map.\n     * @default \"top-right\"\n     */\n    position?: MapAnchorPosition;\n\n    /**\n     * Horizontal gap in pixel applied to anchor container.\n     *\n     * Applied:\n     * - left, if position `*-left`\n     * - right, if position `*-right`\n     *\n     * @default 0\n     */\n    horizontalGap?: number;\n\n    /**\n     * Vertical gap in pixel applied to anchor container.\n     *\n     * Applied:\n     * - top, if position `top-*`\n     * - bottom, if position `bottom-*`\n     *\n     * @default 0 (If position `bottom-*`, default verticalGap == `30`)\n     */\n    verticalGap?: number;\n\n    /**\n     * Prevent some events from the map anchor's children from bubbling towards the map, effectively hiding them from map interactions.\n     * Defaults to `true`.\n     *\n     * If this value is enabled, events such as `pointer-down` are hidden from the map when they occur\n     * within the map anchor.\n     * This is essential when the user wants to select text, or open the browser context menu within the anchor.\n     * If that is not required, set `stopEvents` to `false` instead.\n     */\n    stopEvents?: boolean;\n\n    children?: ReactNode;\n}\n\nexport function MapAnchor(props: MapAnchorProps): JSX.Element {\n    const {\n        position = defaultPosition,\n        stopEvents = true,\n        children,\n        horizontalGap,\n        verticalGap\n    } = props;\n    const { containerProps } = useCommonComponentProps(\"map-anchor\", props);\n    const { padding, mapAnchorsHost } = useMapContext();\n\n    const eventHandlers: Partial<BoxProps> = useMemo(() => {\n        const stopHandler = stopEvents ? stopPropagation : undefined;\n        return {\n            onPointerDown: stopHandler,\n            onPointerUp: stopHandler,\n            onContextMenu: stopHandler\n        };\n    }, [stopEvents]);\n\n    return createPortal(\n        <Box\n            {...containerProps}\n            /* Overlay container uses pointer-events: none, this restores interactivity */\n            pointerEvents=\"auto\"\n            /* Restore user-select: none set by ol-viewport parent */\n            userSelect=\"text\"\n            /** Hide pointer up/down and context menu events from the map parent.  */\n            {...eventHandlers}\n            {...computePositionStyles(position, padding, horizontalGap, verticalGap)}\n        >\n            {children}\n        </Box>,\n        mapAnchorsHost\n    );\n}\n\nexport function computeAttributionGap(verticalGap?: number): {\n    gap: number;\n    space: number;\n} {\n    /**\n     * height of the ol attribution component\n     * improvement: Get height directly from `Attribution` HTMLDivElement\n     */\n    const height = 20;\n\n    /**\n     * additional space between attribution and map anchor container\n     */\n    const space = 10;\n\n    return {\n        gap: verticalGap === undefined ? height + space : 0,\n        space\n    };\n}\n\nexport function computePositionStyles(\n    position: MapAnchorPosition,\n    padding: Required<MapPadding>,\n    horizontalGap?: number | undefined,\n    verticalGap?: number | undefined\n): StyleProps {\n    const props: StyleProps = {\n        position: \"absolute\",\n        transitionProperty: \"left, right, top, bottom\",\n        transitionDuration: \"200ms\",\n        transitionTimingFunction: \"ease-out\"\n    };\n\n    const defaultHorizontalGap = 0;\n    const horizontal = horizontalGap ?? defaultHorizontalGap;\n\n    const defaultVerticalGap = 0;\n    const vertical = verticalGap ?? defaultVerticalGap;\n\n    const attribution = computeAttributionGap(verticalGap);\n    const gap = (n: number) => `${n}px`;\n\n    switch (position) {\n        case \"top-left\":\n            props.left = gap(padding.left + horizontal);\n            props.top = gap(padding.top + vertical);\n            break;\n        case \"top-right\":\n            props.right = gap(padding.right + horizontal);\n            props.top = gap(padding.top + vertical);\n            break;\n        case \"bottom-left\":\n            props.left = gap(padding.left + horizontal);\n            props.bottom = gap(padding.bottom + vertical + attribution.gap);\n            break;\n        case \"bottom-right\":\n            props.right = gap(padding.right + horizontal);\n            props.bottom = gap(padding.bottom + vertical + attribution.gap);\n            break;\n    }\n\n    /**\n     * Apply max-height and max-width to MapAnchor to avoid content overflow\n     */\n    props.maxH = `calc((100%) - ${props.top ?? \"0px\"} - ${\n        props.bottom ?? attribution.gap + \"px\"\n    } - ${vertical + \"px\"} - ${attribution.space + \"px\"})`;\n\n    props.maxW = `calc((100%) - ${props.left ?? \"0px\"} - ${props.right ?? \"0px\"} - ${\n        horizontal + \"px\"\n    })`;\n    props.overflow = \"hidden\";\n\n    return props;\n}\n\nfunction stopPropagation(e: BaseSyntheticEvent) {\n    e.stopPropagation();\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"MapAnchor.js","sources":["MapAnchor.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Box, StyleProps } from \"@open-pioneer/chakra-integration\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { MapPadding } from \"../api\";\nimport { useMapContext } from \"./MapContext\";\n\nexport type MapAnchorPosition = \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\";\n\nconst defaultPosition: MapAnchorPosition = \"top-right\";\n\nexport interface MapAnchorProps extends CommonComponentProps {\n    /**\n     * The position of the anchor container above the map.\n     * @default \"top-right\"\n     */\n    position?: MapAnchorPosition;\n\n    /**\n     * Horizontal gap in pixel applied to anchor container.\n     *\n     * Applied:\n     * - left, if position `*-left`\n     * - right, if position `*-right`\n     *\n     * @default 0\n     */\n    horizontalGap?: number;\n\n    /**\n     * Vertical gap in pixel applied to anchor container.\n     *\n     * Applied:\n     * - top, if position `top-*`\n     * - bottom, if position `bottom-*`\n     *\n     * @default 0 (If position `bottom-*`, default verticalGap == `30`)\n     */\n    verticalGap?: number;\n\n    children?: ReactNode;\n}\n\nexport function MapAnchor(props: MapAnchorProps): JSX.Element {\n    const { position = defaultPosition, children, horizontalGap, verticalGap } = props;\n    const { containerProps } = useCommonComponentProps(\"map-anchor\", props);\n    const { padding, mapAnchorsHost } = useMapContext();\n\n    return createPortal(\n        <Box\n            {...containerProps}\n            {...computePositionStyles(position, padding, horizontalGap, verticalGap)}\n        >\n            {children}\n        </Box>,\n        mapAnchorsHost\n    );\n}\n\nexport function computeAttributionGap(verticalGap?: number): {\n    gap: number;\n    space: number;\n} {\n    /**\n     * height of the ol attribution component\n     * improvement: Get height directly from `Attribution` HTMLDivElement\n     */\n    const height = 20;\n\n    /**\n     * additional space between attribution and map anchor container\n     */\n    const space = 10;\n\n    return {\n        gap: verticalGap === undefined ? height + space : 0,\n        space\n    };\n}\n\nexport function computePositionStyles(\n    position: MapAnchorPosition,\n    padding: Required<MapPadding>,\n    horizontalGap?: number | undefined,\n    verticalGap?: number | undefined\n): StyleProps {\n    const props: StyleProps = {\n        position: \"absolute\",\n        zIndex: 1, // above map\n        transitionProperty: \"left, right, top, bottom\",\n        transitionDuration: \"200ms\",\n        transitionTimingFunction: \"ease-out\"\n    };\n\n    const defaultHorizontalGap = 0;\n    const horizontal = horizontalGap ?? defaultHorizontalGap;\n\n    const defaultVerticalGap = 0;\n    const vertical = verticalGap ?? defaultVerticalGap;\n\n    const attribution = computeAttributionGap(verticalGap);\n    const gap = (n: number) => `${n}px`;\n\n    switch (position) {\n        case \"top-left\":\n            props.left = gap(padding.left + horizontal);\n            props.top = gap(padding.top + vertical);\n            break;\n        case \"top-right\":\n            props.right = gap(padding.right + horizontal);\n            props.top = gap(padding.top + vertical);\n            break;\n        case \"bottom-left\":\n            props.left = gap(padding.left + horizontal);\n            props.bottom = gap(padding.bottom + vertical + attribution.gap);\n            break;\n        case \"bottom-right\":\n            props.right = gap(padding.right + horizontal);\n            props.bottom = gap(padding.bottom + vertical + attribution.gap);\n            break;\n    }\n\n    /**\n     * Apply max-height and max-width to MapAnchor to avoid content overflow\n     */\n    props.maxH = `calc((100%) - ${props.top ?? \"0px\"} - ${\n        props.bottom ?? attribution.gap + \"px\"\n    } - ${vertical + \"px\"} - ${attribution.space + \"px\"})`;\n\n    props.maxW = `calc((100%) - ${props.left ?? \"0px\"} - ${props.right ?? \"0px\"} - ${\n        horizontal + \"px\"\n    })`;\n    props.overflow = \"hidden\";\n\n    return props;\n}\n"],"names":[],"mappings":"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"}

package/ui/MapContainer.js

@@ -1,9 +1,10 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { chakra } from '@open-pioneer/chakra-integration';
 import { createLogger } from '@open-pioneer/core';
 import { useCommonComponentProps } from '@open-pioneer/react-utils';
-import { useRef, useEffect, useMemo } from 'react';
-import { useMapModel } from './useMapModel.js';
+import { useRef, useState, useEffect, useMemo } from 'react';
 import { MapContextProvider } from './MapContext.js';
+import { useMapModel } from './useMapModel.js';
 
 const LOG = createLogger("map:MapContainer");
 function MapContainer(props) {
@@ -17,9 +18,11 @@ function MapContainer(props) {
     "aria-labelledby": ariaLabelledBy
   } = props;
   const { containerProps } = useCommonComponentProps("map-container", props);
-  const mapElement = useRef(null);
+  const mapContainer = useRef(null);
+  const mapAnchorsHost = useRef(null);
   const modelState = useMapModel(mapId);
   const mapModel = modelState.map;
+  const [ready, setReady] = useState(false);
   useEffect(() => {
     if (modelState.kind === "loading") {
       return;
@@ -32,67 +35,58 @@ function MapContainer(props) {
       LOG.error(`No configuration available for map with id '${mapId}'.`);
       return;
     }
-    if (mapElement.current) {
-      const resource = registerMapTarget(mapModel, mapElement.current);
+    if (mapContainer.current) {
+      const resource = registerMapTarget(mapModel, mapContainer.current);
       return () => resource?.destroy();
     }
   }, [modelState, mapModel, mapId]);
+  useEffect(() => {
+    setReady(true);
+  }, []);
   const mapContainerStyle = {
     height: "100%",
     position: "relative"
   };
-  return /* @__PURE__ */ jsx(
-    "div",
+  return /* @__PURE__ */ jsxs(
+    chakra.div,
     {
       ...containerProps,
       role,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
-      ref: mapElement,
+      ref: mapContainer,
       style: mapContainerStyle,
       tabIndex: 0,
-      children: mapModel && /* @__PURE__ */ jsx(
-        MapContainerReady,
-        {
-          map: mapModel.olMap,
-          viewPadding,
-          viewPaddingChangeBehavior,
-          children
-        }
-      )
+      children: [
+        ready && mapModel && /* @__PURE__ */ jsx(
+          MapContainerReady,
+          {
+            map: mapModel.olMap,
+            mapAnchorsHost: mapAnchorsHost.current,
+            viewPadding,
+            viewPaddingChangeBehavior,
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          chakra.div,
+          {
+            ref: mapAnchorsHost,
+            className: "map-anchors"
+          }
+        )
+      ]
     }
   );
 }
-function registerMapTarget(mapModel, target) {
-  const mapId = mapModel.id;
-  const olMap = mapModel.olMap;
-  if (olMap.getTarget()) {
-    LOG.error(
-      `Failed to display the map: the map already has a target. There may be more than one <MapContainer />.`
-    );
-    return void 0;
-  }
-  LOG.isDebug() && LOG.debug(`Setting target of map '${mapId}':`, target);
-  olMap.setTarget(target);
-  let unregistered = false;
-  return {
-    destroy() {
-      if (!unregistered) {
-        LOG.isDebug() && LOG.debug(`Removing target of map '${mapId}':`, target);
-        olMap.setTarget(void 0);
-        unregistered = true;
-      }
-    }
-  };
-}
 function MapContainerReady(props) {
   const {
     map,
+    mapAnchorsHost,
     viewPadding: viewPaddingProp,
     viewPaddingChangeBehavior = "preserve-center",
     children
   } = props;
-  const mapAnchorsHost = useMapAnchorsHost(map);
   const viewPadding = useMemo(() => {
     return {
       left: viewPaddingProp?.left ?? 0,
@@ -135,19 +129,27 @@ function MapContainerReady(props) {
   }, [map, viewPadding, mapAnchorsHost]);
   return /* @__PURE__ */ jsx(MapContextProvider, { value: mapContext, children });
 }
-function useMapAnchorsHost(olMap) {
-  const div = useRef();
-  if (!div.current) {
-    div.current = document.createElement("div");
-    div.current.classList.add("map-anchors");
+function registerMapTarget(mapModel, target) {
+  const mapId = mapModel.id;
+  const olMap = mapModel.olMap;
+  if (olMap.getTarget()) {
+    LOG.error(
+      `Failed to display the map: the map already has a target. There may be more than one <MapContainer />.`
+    );
+    return void 0;
   }
-  useEffect(() => {
-    const child = div.current;
-    const overlayContainer = olMap.getOverlayContainerStopEvent();
-    overlayContainer.insertBefore(child, overlayContainer.firstChild);
-    return () => child.remove();
-  }, [olMap]);
-  return div.current;
+  LOG.isDebug() && LOG.debug(`Setting target of map '${mapId}':`, target);
+  olMap.setTarget(target);
+  let unregistered = false;
+  return {
+    destroy() {
+      if (!unregistered) {
+        LOG.isDebug() && LOG.debug(`Removing target of map '${mapId}':`, target);
+        olMap.setTarget(void 0);
+        unregistered = true;
+      }
+    }
+  };
 }
 function extentIncludingPadding(map, padding) {
   const size = map.getSize();

package/ui/MapContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"MapContainer.js","sources":["MapContainer.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Resource, createLogger } from \"@open-pioneer/core\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport type OlMap from \"ol/Map\";\nimport { Extent } from \"ol/extent\";\nimport { ReactNode, useEffect, useMemo, useRef } from \"react\";\nimport { useMapModel } from \"./useMapModel\";\nimport { MapModel, MapPadding } from \"../api\";\nimport { MapContextProvider, MapContextType } from \"./MapContext\";\nconst LOG = createLogger(\"map:MapContainer\");\n\nexport interface MapContainerProps extends CommonComponentProps {\n    /** The id of the map to display. */\n    mapId: string;\n\n    /**\n     * Sets the map's padding directly.\n     *\n     * See: https://openlayers.org/en/latest/apidoc/module-ol_View-View.html#padding)\n     */\n    viewPadding?: MapPadding | undefined;\n\n    /**\n     * Behavior performed by the map when the view padding changes.\n     *\n     * - `none`: Do nothing.\n     * - `preserve-center`: Ensures that the center point remains the same by animating the view.\n     * - `preserve-extent`: Ensures that the extent remains the same by zooming.\n     *\n     * @default \"preserve-center\"\n     */\n    viewPaddingChangeBehavior?: \"none\" | \"preserve-center\" | \"preserve-extent\";\n\n    children?: ReactNode;\n\n    /**\n     * Optional role property.\n     *\n     * This property is directly applied to the map's container div element.\n     */\n    role?: string;\n\n    /**\n     * Optional aria-labelledby property.\n     * Do not use together with aria-label.\n     *\n     * This property is directly applied to the map's container div element.\n     */\n    \"aria-labelledby\"?: string;\n\n    /**\n     * Optional aria-label property.\n     * Do not use together with aria-label.\n     *\n     * This property is directly applied to the map's container div element.\n     */\n    \"aria-label\"?: string;\n}\n\n/**\n * Displays the map with the given id.\n *\n * There can only be at most one MapContainer for every map.\n */\nexport function MapContainer(props: MapContainerProps) {\n    const {\n        mapId,\n        viewPadding,\n        viewPaddingChangeBehavior,\n        children,\n        role,\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy\n    } = props;\n    const { containerProps } = useCommonComponentProps(\"map-container\", props);\n    const mapElement = useRef<HTMLDivElement>(null);\n    const modelState = useMapModel(mapId);\n    const mapModel = modelState.map;\n\n    useEffect(() => {\n        if (modelState.kind === \"loading\") {\n            return;\n        }\n\n        if (modelState.kind === \"rejected\") {\n            LOG.error(`Cannot display the map. Caused by `, modelState.error);\n            return;\n        }\n\n        if (!mapModel) {\n            LOG.error(`No configuration available for map with id '${mapId}'.`);\n            return;\n        }\n\n        // Mount the map into the DOM\n        if (mapElement.current) {\n            const resource = registerMapTarget(mapModel, mapElement.current);\n            return () => resource?.destroy();\n        }\n    }, [modelState, mapModel, mapId]);\n\n    const mapContainerStyle: React.CSSProperties = {\n        height: \"100%\",\n        position: \"relative\"\n    };\n    return (\n        <div\n            {...containerProps}\n            role={role}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            ref={mapElement}\n            style={mapContainerStyle}\n            //eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n            tabIndex={0}\n        >\n            {mapModel && (\n                <MapContainerReady\n                    map={mapModel.olMap}\n                    viewPadding={viewPadding}\n                    viewPaddingChangeBehavior={viewPaddingChangeBehavior}\n                >\n                    {children}\n                </MapContainerReady>\n            )}\n        </div>\n    );\n}\n\nfunction registerMapTarget(mapModel: MapModel, target: HTMLDivElement): Resource | undefined {\n    const mapId = mapModel.id;\n    const olMap = mapModel.olMap;\n    if (olMap.getTarget()) {\n        LOG.error(\n            `Failed to display the map: the map already has a target. There may be more than one <MapContainer />.`\n        );\n        return undefined;\n    }\n\n    LOG.isDebug() && LOG.debug(`Setting target of map '${mapId}':`, target);\n    olMap.setTarget(target);\n\n    let unregistered = false;\n    return {\n        destroy() {\n            if (!unregistered) {\n                LOG.isDebug() && LOG.debug(`Removing target of map '${mapId}':`, target);\n                olMap.setTarget(undefined);\n                unregistered = true;\n            }\n        }\n    };\n}\n\n/**\n * This inner component is rendered when the map has been loaded.\n *\n * It provides the map instance and additional properties down the component tree.\n */\nfunction MapContainerReady(\n    props: { map: OlMap } & Omit<MapContainerProps, \"mapId\" | \"className\">\n): JSX.Element {\n    const {\n        map,\n        viewPadding: viewPaddingProp,\n        viewPaddingChangeBehavior = \"preserve-center\",\n        children\n    } = props;\n\n    const mapAnchorsHost = useMapAnchorsHost(map);\n\n    const viewPadding = useMemo<Required<MapPadding>>(() => {\n        return {\n            left: viewPaddingProp?.left ?? 0,\n            right: viewPaddingProp?.right ?? 0,\n            top: viewPaddingProp?.top ?? 0,\n            bottom: viewPaddingProp?.bottom ?? 0\n        };\n    }, [viewPaddingProp]);\n\n    // Apply view padding\n    useEffect(() => {\n        const mapView = map?.getView();\n        if (!map || !mapView) {\n            return;\n        }\n\n        const oldCenter = mapView.getCenter();\n        const oldPadding = fromOlPadding(mapView.padding);\n        const oldExtent = extentIncludingPadding(map, oldPadding);\n\n        mapView.padding = toOlPadding(viewPadding);\n        switch (viewPaddingChangeBehavior) {\n            case \"preserve-center\":\n                mapView.animate({ center: oldCenter, duration: 300 });\n                break;\n            case \"preserve-extent\": {\n                if (oldExtent) {\n                    mapView.animate({\n                        center: oldCenter,\n                        resolution: mapView.getResolutionForExtent(oldExtent),\n                        duration: 300\n                    });\n                }\n                break;\n            }\n            case \"none\":\n        }\n    }, [viewPadding, map, viewPaddingChangeBehavior]);\n\n    const mapContext = useMemo((): MapContextType => {\n        return {\n            map,\n            mapAnchorsHost,\n            padding: viewPadding\n        };\n    }, [map, viewPadding, mapAnchorsHost]);\n    return <MapContextProvider value={mapContext}>{children}</MapContextProvider>;\n}\n\n/**\n * Creates a div to host the map anchors and mounts it as the first child\n * of the map's overlay container.\n *\n * The purpose of this wrapper div is only to ensure the correct tab order:\n * the map anchors should be focussed before the builtin attribution widget.\n */\nfunction useMapAnchorsHost(olMap: OlMap): HTMLDivElement {\n    const div = useRef<HTMLDivElement>();\n    if (!div.current) {\n        div.current = document.createElement(\"div\");\n        div.current.classList.add(\"map-anchors\");\n    }\n\n    useEffect(() => {\n        const child = div.current!;\n        const overlayContainer = olMap.getOverlayContainerStopEvent();\n        overlayContainer.insertBefore(child, overlayContainer.firstChild);\n        return () => child.remove();\n    }, [olMap]);\n\n    return div.current;\n}\n\n/**\n * Returns the extent visible in the non-padded region of the map.\n */\nfunction extentIncludingPadding(map: OlMap, padding: Required<MapPadding>): Extent | undefined {\n    const size = map.getSize();\n    if (!size || size.length < 2) {\n        return undefined;\n    }\n\n    const [width, height] = size as [number, number];\n    const bottomLeft = map.getCoordinateFromPixel([padding.left, padding.bottom]);\n    const topRight = map.getCoordinateFromPixel([\n        Math.max(0, width - padding.right),\n        Math.max(0, height - padding.top)\n    ]);\n    if (!bottomLeft || !topRight) {\n        return undefined;\n    }\n\n    const [xmin, ymin] = bottomLeft;\n    const [xmax, ymax] = topRight;\n    return [xmin, ymin, xmax, ymax] as Extent;\n}\n\nfunction fromOlPadding(padding: number[] | undefined): Required<MapPadding> {\n    // top, right, bottom, left\n    return {\n        top: padding?.[0] ?? 0,\n        right: padding?.[1] ?? 0,\n        bottom: padding?.[2] ?? 0,\n        left: padding?.[3] ?? 0\n    };\n}\n\nfunction toOlPadding(padding: Required<MapPadding>): number[] {\n    // top, right, bottom, left\n    const { top, right, bottom, left } = padding;\n    return [top, right, bottom, left];\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"MapContainer.js","sources":["MapContainer.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { chakra } from \"@open-pioneer/chakra-integration\";\nimport { Resource, createLogger } from \"@open-pioneer/core\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport type OlMap from \"ol/Map\";\nimport { Extent } from \"ol/extent\";\nimport { ReactNode, useEffect, useMemo, useRef, useState } from \"react\";\nimport { MapModel, MapPadding } from \"../api\";\nimport { MapContextProvider, MapContextType } from \"./MapContext\";\nimport { useMapModel } from \"./useMapModel\";\nconst LOG = createLogger(\"map:MapContainer\");\n\nexport interface MapContainerProps extends CommonComponentProps {\n    /** The id of the map to display. */\n    mapId: string;\n\n    /**\n     * Sets the map's padding directly.\n     *\n     * See: https://openlayers.org/en/latest/apidoc/module-ol_View-View.html#padding)\n     */\n    viewPadding?: MapPadding | undefined;\n\n    /**\n     * Behavior performed by the map when the view padding changes.\n     *\n     * - `none`: Do nothing.\n     * - `preserve-center`: Ensures that the center point remains the same by animating the view.\n     * - `preserve-extent`: Ensures that the extent remains the same by zooming.\n     *\n     * @default \"preserve-center\"\n     */\n    viewPaddingChangeBehavior?: \"none\" | \"preserve-center\" | \"preserve-extent\";\n\n    children?: ReactNode;\n\n    /**\n     * Optional role property.\n     *\n     * This property is directly applied to the map's container div element.\n     */\n    role?: string;\n\n    /**\n     * Optional aria-labelledby property.\n     * Do not use together with aria-label.\n     *\n     * This property is directly applied to the map's container div element.\n     */\n    \"aria-labelledby\"?: string;\n\n    /**\n     * Optional aria-label property.\n     * Do not use together with aria-label.\n     *\n     * This property is directly applied to the map's container div element.\n     */\n    \"aria-label\"?: string;\n}\n\n/**\n * Displays the map with the given id.\n *\n * There can only be at most one MapContainer for every map.\n */\nexport function MapContainer(props: MapContainerProps) {\n    const {\n        mapId,\n        viewPadding,\n        viewPaddingChangeBehavior,\n        children,\n        role,\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy\n    } = props;\n    const { containerProps } = useCommonComponentProps(\"map-container\", props);\n    const mapContainer = useRef<HTMLDivElement>(null);\n    const mapAnchorsHost = useRef<HTMLDivElement>(null);\n    const modelState = useMapModel(mapId);\n    const mapModel = modelState.map;\n\n    const [ready, setReady] = useState(false);\n\n    useEffect(() => {\n        if (modelState.kind === \"loading\") {\n            return;\n        }\n\n        if (modelState.kind === \"rejected\") {\n            LOG.error(`Cannot display the map. Caused by `, modelState.error);\n            return;\n        }\n\n        if (!mapModel) {\n            LOG.error(`No configuration available for map with id '${mapId}'.`);\n            return;\n        }\n\n        // Mount the map into the DOM\n        if (mapContainer.current) {\n            const resource = registerMapTarget(mapModel, mapContainer.current);\n            return () => resource?.destroy();\n        }\n    }, [modelState, mapModel, mapId]);\n\n    // Wait for mount to make sure that the map anchors host is available\n    useEffect(() => {\n        setReady(true);\n    }, []);\n\n    const mapContainerStyle: React.CSSProperties = {\n        height: \"100%\",\n        position: \"relative\"\n    };\n    return (\n        <chakra.div\n            {...containerProps}\n            role={role}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            ref={mapContainer}\n            style={mapContainerStyle}\n            //eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n            tabIndex={0}\n        >\n            {ready && mapModel && (\n                <MapContainerReady\n                    map={mapModel.olMap}\n                    mapAnchorsHost={mapAnchorsHost.current!}\n                    viewPadding={viewPadding}\n                    viewPaddingChangeBehavior={viewPaddingChangeBehavior}\n                >\n                    {children}\n                </MapContainerReady>\n            )}\n            <chakra.div\n                ref={mapAnchorsHost}\n                className=\"map-anchors\"\n                /* note: zero sized, children have a size and are positioned relative to the map-container */\n            >\n                {/* Map anchors will be mounted here via portal */}\n            </chakra.div>\n        </chakra.div>\n    );\n}\n\n/**\n * This inner component is rendered when the map has been loaded.\n *\n * It provides the map instance and additional properties down the component tree.\n */\nfunction MapContainerReady(\n    props: { map: OlMap; mapAnchorsHost: HTMLElement } & Omit<\n        MapContainerProps,\n        \"mapId\" | \"className\"\n    >\n): JSX.Element {\n    const {\n        map,\n        mapAnchorsHost,\n        viewPadding: viewPaddingProp,\n        viewPaddingChangeBehavior = \"preserve-center\",\n        children\n    } = props;\n\n    const viewPadding = useMemo<Required<MapPadding>>(() => {\n        return {\n            left: viewPaddingProp?.left ?? 0,\n            right: viewPaddingProp?.right ?? 0,\n            top: viewPaddingProp?.top ?? 0,\n            bottom: viewPaddingProp?.bottom ?? 0\n        };\n    }, [viewPaddingProp]);\n\n    // Apply view padding\n    useEffect(() => {\n        const mapView = map?.getView();\n        if (!map || !mapView) {\n            return;\n        }\n\n        const oldCenter = mapView.getCenter();\n        const oldPadding = fromOlPadding(mapView.padding);\n        const oldExtent = extentIncludingPadding(map, oldPadding);\n\n        mapView.padding = toOlPadding(viewPadding);\n        switch (viewPaddingChangeBehavior) {\n            case \"preserve-center\":\n                mapView.animate({ center: oldCenter, duration: 300 });\n                break;\n            case \"preserve-extent\": {\n                if (oldExtent) {\n                    mapView.animate({\n                        center: oldCenter,\n                        resolution: mapView.getResolutionForExtent(oldExtent),\n                        duration: 300\n                    });\n                }\n                break;\n            }\n            case \"none\":\n        }\n    }, [viewPadding, map, viewPaddingChangeBehavior]);\n\n    const mapContext = useMemo((): MapContextType => {\n        return {\n            map,\n            mapAnchorsHost,\n            padding: viewPadding\n        };\n    }, [map, viewPadding, mapAnchorsHost]);\n    return <MapContextProvider value={mapContext}>{children}</MapContextProvider>;\n}\n\nfunction registerMapTarget(mapModel: MapModel, target: HTMLDivElement): Resource | undefined {\n    const mapId = mapModel.id;\n    const olMap = mapModel.olMap;\n    if (olMap.getTarget()) {\n        LOG.error(\n            `Failed to display the map: the map already has a target. There may be more than one <MapContainer />.`\n        );\n        return undefined;\n    }\n\n    LOG.isDebug() && LOG.debug(`Setting target of map '${mapId}':`, target);\n    olMap.setTarget(target);\n\n    let unregistered = false;\n    return {\n        destroy() {\n            if (!unregistered) {\n                LOG.isDebug() && LOG.debug(`Removing target of map '${mapId}':`, target);\n                olMap.setTarget(undefined);\n                unregistered = true;\n            }\n        }\n    };\n}\n\n/**\n * Returns the extent visible in the non-padded region of the map.\n */\nfunction extentIncludingPadding(map: OlMap, padding: Required<MapPadding>): Extent | undefined {\n    const size = map.getSize();\n    if (!size || size.length < 2) {\n        return undefined;\n    }\n\n    const [width, height] = size as [number, number];\n    const bottomLeft = map.getCoordinateFromPixel([padding.left, padding.bottom]);\n    const topRight = map.getCoordinateFromPixel([\n        Math.max(0, width - padding.right),\n        Math.max(0, height - padding.top)\n    ]);\n    if (!bottomLeft || !topRight) {\n        return undefined;\n    }\n\n    const [xmin, ymin] = bottomLeft;\n    const [xmax, ymax] = topRight;\n    return [xmin, ymin, xmax, ymax] as Extent;\n}\n\nfunction fromOlPadding(padding: number[] | undefined): Required<MapPadding> {\n    // top, right, bottom, left\n    return {\n        top: padding?.[0] ?? 0,\n        right: padding?.[1] ?? 0,\n        bottom: padding?.[2] ?? 0,\n        left: padding?.[3] ?? 0\n    };\n}\n\nfunction toOlPadding(padding: Required<MapPadding>): number[] {\n    // top, right, bottom, left\n    const { top, right, bottom, left } = padding;\n    return [top, right, bottom, left];\n}\n"],"names":[],"mappings":"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"}

package/ui/MapContext.d.ts

@@ -4,7 +4,7 @@ import type OlMap from "ol/Map";
 /** Values provided to children of {@link MapContainer}. */
 export interface MapContextType {
     map: OlMap;
-    mapAnchorsHost: HTMLDivElement;
+    mapAnchorsHost: HTMLElement;
     padding: Required<MapPadding>;
 }
 export declare const MapContextProvider: Provider<MapContextType>;

package/ui/MapContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"MapContext.js","sources":["MapContext.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Provider, createContext, useContext } from \"react\";\nimport { type MapPadding } from \"../api\";\nimport type OlMap from \"ol/Map\";\n\n/** Values provided to children of {@link MapContainer}. */\nexport interface MapContextType {\n    map: OlMap;\n    mapAnchorsHost: HTMLDivElement;\n    padding: Required<MapPadding>;\n}\n\nconst MapContext = createContext<MapContextType | undefined>(undefined);\nMapContext.displayName = \"MapContext\";\n\nexport const MapContextProvider: Provider<MapContextType> =\n    MapContext.Provider as Provider<MapContextType>;\n\nexport function useMapContext(): MapContextType {\n    const contextValue = useContext(MapContext);\n    if (!contextValue) {\n        throw new Error(\n            `Map context is not available. The component must be a child of the <MapContainer /> component.`\n        );\n    }\n    return contextValue;\n}\n"],"names":[],"mappings":";;AAaA,MAAM,UAAA,GAAa,cAA0C,KAAS,CAAA,CAAA,CAAA;AACtE,UAAA,CAAW,WAAc,GAAA,YAAA,CAAA;AAElB,MAAM,qBACT,UAAW,CAAA,SAAA;AAER,SAAS,aAAgC,GAAA;AAC5C,EAAM,MAAA,YAAA,GAAe,WAAW,UAAU,CAAA,CAAA;AAC1C,EAAA,IAAI,CAAC,YAAc,EAAA;AACf,IAAA,MAAM,IAAI,KAAA;AAAA,MACN,CAAA,8FAAA,CAAA;AAAA,KACJ,CAAA;AAAA,GACJ;AACA,EAAO,OAAA,YAAA,CAAA;AACX;;;;"}
+{"version":3,"file":"MapContext.js","sources":["MapContext.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Provider, createContext, useContext } from \"react\";\nimport { type MapPadding } from \"../api\";\nimport type OlMap from \"ol/Map\";\n\n/** Values provided to children of {@link MapContainer}. */\nexport interface MapContextType {\n    map: OlMap;\n    mapAnchorsHost: HTMLElement;\n    padding: Required<MapPadding>;\n}\n\nconst MapContext = createContext<MapContextType | undefined>(undefined);\nMapContext.displayName = \"MapContext\";\n\nexport const MapContextProvider: Provider<MapContextType> =\n    MapContext.Provider as Provider<MapContextType>;\n\nexport function useMapContext(): MapContextType {\n    const contextValue = useContext(MapContext);\n    if (!contextValue) {\n        throw new Error(\n            `Map context is not available. The component must be a child of the <MapContainer /> component.`\n        );\n    }\n    return contextValue;\n}\n"],"names":[],"mappings":";;AAaA,MAAM,UAAA,GAAa,cAA0C,KAAS,CAAA,CAAA,CAAA;AACtE,UAAA,CAAW,WAAc,GAAA,YAAA,CAAA;AAElB,MAAM,qBACT,UAAW,CAAA,SAAA;AAER,SAAS,aAAgC,GAAA;AAC5C,EAAM,MAAA,YAAA,GAAe,WAAW,UAAU,CAAA,CAAA;AAC1C,EAAA,IAAI,CAAC,YAAc,EAAA;AACf,IAAA,MAAM,IAAI,KAAA;AAAA,MACN,CAAA,8FAAA,CAAA;AAAA,KACJ,CAAA;AAAA,GACJ;AACA,EAAO,OAAA,YAAA,CAAA;AACX;;;;"}

package/ui/hooks.js

@@ -1,5 +1,5 @@
-import { unByKey } from 'ol/Observable';
-import { getPointResolution } from 'ol/proj';
+import { unByKey } from 'ol/Observable.js';
+import { getPointResolution } from 'ol/proj.js';
 import { useMemo, useCallback, useSyncExternalStore } from 'react';
 
 const DEFAULT_DPI = 25.4 / 0.28;

package/util/geometry-utils.js

@@ -1,4 +1,4 @@
-import { getHeight, getWidth } from 'ol/extent';
+import { getHeight, getWidth } from 'ol/extent.js';
 
 const DEFAULT_BUFFER_FACTOR = 1.2;
 function calculateBufferedExtent(extent, factor = DEFAULT_BUFFER_FACTOR) {

package/util/ol-test-support.js

@@ -1,5 +1,5 @@
-import { equals } from 'ol/extent';
-import OlMap from 'ol/Map';
+import { equals } from 'ol/extent.js';
+import OlMap from 'ol/Map.js';
 
 let setupDone = false;
 function patchOpenLayersClassesForTesting() {