@open-pioneer/map 0.0.0-dev-20241120114910

package/projections.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"projections.js","sources":["projections.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { register } from \"ol/proj/proj4\";\nimport proj4, { ProjectionDefinition as Proj4ProjectionDefinition } from \"proj4\";\n\nexport type ProjectionDefinition = string | Proj4ProjectionDefinition;\n\n/**\n * Adds new registrations to the global [proj4js](https://github.com/proj4js/proj4js) definition set.\n *\n * See the proj4js documentation for more details.\n *\n * Example:\n *\n * ```ts\n * import { registerProjections } from \"@open-pioneer/map\";\n *\n * registerProjections({\n *   \"EPSG:25832\": \"+proj=utm +zone=32 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs\",\n *   // ... more projections\n * });\n * ```\n *\n * @param projections\n *      An object containing (key, definition) pairs. The key must be projection name (such as `\"EPSG:4326\"`).\n *      The value can be a string defining the projection or an existing proj4 definition object.\n */\nexport function registerProjections(projections: Record<string, ProjectionDefinition>): void {\n    for (const [name, definition] of Object.entries(projections)) {\n        proj4.defs(name, definition);\n    }\n    register(proj4);\n}\n\n/**\n * Searches the global [proj4js](https://github.com/proj4js/proj4js) definition set for a definition with the given name.\n */\nexport function getProjection(name: string): Proj4ProjectionDefinition {\n    return proj4.defs(name);\n}\n"],"names":[],"mappings":";;;AA2BO,SAAS,oBAAoB,WAAyD,EAAA;AACzF,EAAA,KAAA,MAAW,CAAC,IAAM,EAAA,UAAU,KAAK,MAAO,CAAA,OAAA,CAAQ,WAAW,CAAG,EAAA;AAC1D,IAAM,KAAA,CAAA,IAAA,CAAK,MAAM,UAAU,CAAA,CAAA;AAAA,GAC/B;AACA,EAAA,QAAA,CAAS,KAAK,CAAA,CAAA;AAClB,CAAA;AAKO,SAAS,cAAc,IAAyC,EAAA;AACnE,EAAO,OAAA,KAAA,CAAM,KAAK,IAAI,CAAA,CAAA;AAC1B;;;;"}

package/services.d.ts

@@ -0,0 +1 @@
+export { MapRegistryImpl } from "./MapRegistryImpl";

package/services.js

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

package/services.js.map

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

package/ui/CssProps.d.ts

@@ -0,0 +1,9 @@
+export interface CssProp {
+    ref: string;
+    definition: string;
+}
+export declare function createCssProp(name: string): CssProp;
+export declare const PADDING_LEFT: CssProp;
+export declare const PADDING_RIGHT: CssProp;
+export declare const PADDING_TOP: CssProp;
+export declare const PADDING_BOTTOM: CssProp;

package/ui/CssProps.js

@@ -0,0 +1,13 @@
+function createCssProp(name) {
+  return {
+    definition: `--${name}`,
+    ref: `var(--${name})`
+  };
+}
+const PADDING_LEFT = createCssProp("map-padding-left");
+const PADDING_RIGHT = createCssProp("map-padding-right");
+const PADDING_TOP = createCssProp("map-padding-top");
+const PADDING_BOTTOM = createCssProp("map-padding-bottom");
+
+export { PADDING_BOTTOM, PADDING_LEFT, PADDING_RIGHT, PADDING_TOP, createCssProp };
+//# sourceMappingURL=CssProps.js.map

package/ui/CssProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CssProps.js","sources":["CssProps.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nexport interface CssProp {\n    // css expression to retrieve the value, i.e. var(..:)\n    ref: string;\n\n    // css property name (i.e. --...)\n    definition: string;\n}\n\nexport function createCssProp(name: string): CssProp {\n    return {\n        definition: `--${name}`,\n        ref: `var(--${name})`\n    };\n}\n\nexport const PADDING_LEFT = createCssProp(\"map-padding-left\");\nexport const PADDING_RIGHT = createCssProp(\"map-padding-right\");\nexport const PADDING_TOP = createCssProp(\"map-padding-top\");\nexport const PADDING_BOTTOM = createCssProp(\"map-padding-bottom\");\n"],"names":[],"mappings":"AAUO,SAAS,cAAc,IAAuB,EAAA;AACjD,EAAO,OAAA;AAAA,IACH,UAAA,EAAY,KAAK,IAAI,CAAA,CAAA;AAAA,IACrB,GAAA,EAAK,SAAS,IAAI,CAAA,CAAA,CAAA;AAAA,GACtB,CAAA;AACJ,CAAA;AAEa,MAAA,YAAA,GAAe,cAAc,kBAAkB,EAAA;AAC/C,MAAA,aAAA,GAAgB,cAAc,mBAAmB,EAAA;AACjD,MAAA,WAAA,GAAc,cAAc,iBAAiB,EAAA;AAC7C,MAAA,cAAA,GAAiB,cAAc,oBAAoB;;;;"}

package/ui/DefaultMapProvider.d.ts

@@ -0,0 +1,39 @@
+import { MapModelProps } from "./useMapModel";
+/**
+ * Configures the given map as the default map for all child components.
+ * Child components do not need to specify the map explicitly, unless they wish to use a different one.
+ *
+ * The map can be specified either by its id (`mapId`) or by a direct reference to the map model (`map`).
+ * Specifying both `mapId` and `map` at the same time will result in an error.
+ *
+ * @example
+ *
+ * Using map id:
+ *
+ * ```tsx
+ * <DefaultMapProvider mapId="my-map">
+ *   <MapContainer />
+ *   <Toc />
+ * </DefaultMapProvider>
+ * ```
+ *
+ * @example
+ *
+ * Using map model reference:
+ *
+ * ```tsx
+ * <DefaultMapProvider map={myMapModel}>
+ *   <MapContainer />
+ *   <Toc />
+ * </DefaultMapProvider>
+ * ```
+ */
+export declare function DefaultMapProvider(props: MapModelProps & {
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Accesses the default map props provided by {@link DefaultMapProvider} (or returns undefined).
+ *
+ * @internal
+ */
+export declare function useDefaultMapProps(): MapModelProps | undefined;

package/ui/DefaultMapProvider.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useMemo, useContext } from 'react';
+
+const DefaultMapContext = createContext(void 0);
+DefaultMapContext.displayName = "DefaultMapContext";
+function DefaultMapProvider(props) {
+  const { mapId, map, children } = props;
+  const value = useMemo(() => ({ mapId, map }), [mapId, map]);
+  if (mapId != null && map != null) {
+    throw new Error(
+      `Cannot specify both 'mapId' and 'map' in DefaultMapProvider at the same time.`
+    );
+  }
+  if (mapId == null && map == null) {
+    throw new Error(`Either 'mapId' or 'map' must be specified in DefaultMapProvider.`);
+  }
+  return /* @__PURE__ */ jsx(DefaultMapContext.Provider, { value, children });
+}
+function useDefaultMapProps() {
+  return useContext(DefaultMapContext);
+}
+
+export { DefaultMapProvider, useDefaultMapProps };
+//# sourceMappingURL=DefaultMapProvider.js.map

package/ui/DefaultMapProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultMapProvider.js","sources":["DefaultMapProvider.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { createContext, useContext, useMemo } from \"react\";\nimport { MapModelProps } from \"./useMapModel\";\n\nconst DefaultMapContext = createContext<MapModelProps | undefined>(undefined);\nDefaultMapContext.displayName = \"DefaultMapContext\";\n\n/**\n * Configures the given map as the default map for all child components.\n * Child components do not need to specify the map explicitly, unless they wish to use a different one.\n *\n * The map can be specified either by its id (`mapId`) or by a direct reference to the map model (`map`).\n * Specifying both `mapId` and `map` at the same time will result in an error.\n *\n * @example\n *\n * Using map id:\n *\n * ```tsx\n * <DefaultMapProvider mapId=\"my-map\">\n *   <MapContainer />\n *   <Toc />\n * </DefaultMapProvider>\n * ```\n *\n * @example\n *\n * Using map model reference:\n *\n * ```tsx\n * <DefaultMapProvider map={myMapModel}>\n *   <MapContainer />\n *   <Toc />\n * </DefaultMapProvider>\n * ```\n */\nexport function DefaultMapProvider(props: MapModelProps & { children?: React.ReactNode }) {\n    const { mapId, map, children } = props;\n    const value = useMemo((): MapModelProps => ({ mapId, map }), [mapId, map]);\n    if (mapId != null && map != null) {\n        throw new Error(\n            `Cannot specify both 'mapId' and 'map' in DefaultMapProvider at the same time.`\n        );\n    }\n    if (mapId == null && map == null) {\n        throw new Error(`Either 'mapId' or 'map' must be specified in DefaultMapProvider.`);\n    }\n    return <DefaultMapContext.Provider value={value}>{children}</DefaultMapContext.Provider>;\n}\n\n/**\n * Accesses the default map props provided by {@link DefaultMapProvider} (or returns undefined).\n *\n * @internal\n */\nexport function useDefaultMapProps(): MapModelProps | undefined {\n    return useContext(DefaultMapContext);\n}\n"],"names":[],"mappings":";;;AAKA,MAAM,iBAAA,GAAoB,cAAyC,KAAS,CAAA,CAAA,CAAA;AAC5E,iBAAA,CAAkB,WAAc,GAAA,mBAAA,CAAA;AA+BzB,SAAS,mBAAmB,KAAuD,EAAA;AACtF,EAAA,MAAM,EAAE,KAAA,EAAO,GAAK,EAAA,QAAA,EAAa,GAAA,KAAA,CAAA;AACjC,EAAM,MAAA,KAAA,GAAQ,OAAQ,CAAA,OAAsB,EAAE,KAAA,EAAO,KAAQ,CAAA,EAAA,CAAC,KAAO,EAAA,GAAG,CAAC,CAAA,CAAA;AACzE,EAAI,IAAA,KAAA,IAAS,IAAQ,IAAA,GAAA,IAAO,IAAM,EAAA;AAC9B,IAAA,MAAM,IAAI,KAAA;AAAA,MACN,CAAA,6EAAA,CAAA;AAAA,KACJ,CAAA;AAAA,GACJ;AACA,EAAI,IAAA,KAAA,IAAS,IAAQ,IAAA,GAAA,IAAO,IAAM,EAAA;AAC9B,IAAM,MAAA,IAAI,MAAM,CAAkE,gEAAA,CAAA,CAAA,CAAA;AAAA,GACtF;AACA,EAAA,uBAAQ,GAAA,CAAA,iBAAA,CAAkB,QAAlB,EAAA,EAA2B,OAAe,QAAS,EAAA,CAAA,CAAA;AAC/D,CAAA;AAOO,SAAS,kBAAgD,GAAA;AAC5D,EAAA,OAAO,WAAW,iBAAiB,CAAA,CAAA;AACvC;;;;"}

package/ui/MapAnchor.d.ts

@@ -0,0 +1,36 @@
+import { CommonComponentProps } from "@open-pioneer/react-utils";
+import { ReactNode } from "react";
+export type MapAnchorPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";
+export interface MapAnchorProps extends CommonComponentProps {
+    /**
+     * The position of the anchor container above the map.
+     * @default "top-right"
+     */
+    position?: MapAnchorPosition;
+    /**
+     * Horizontal gap in pixel applied to anchor container.
+     *
+     * Applied:
+     * - left, if position `*-left`
+     * - right, if position `*-right`
+     *
+     * @default 0
+     */
+    horizontalGap?: number;
+    /**
+     * Vertical gap in pixel applied to anchor container.
+     *
+     * Applied:
+     * - top, if position `top-*`
+     * - bottom, if position `bottom-*`
+     *
+     * @default 0 (If position `bottom-*`, default verticalGap == `30`)
+     */
+    verticalGap?: number;
+    children?: ReactNode;
+}
+export declare function MapAnchor(props: MapAnchorProps): JSX.Element;
+export declare function computeAttributionGap(verticalGap?: number): {
+    gap: number;
+    space: number;
+};

package/ui/MapAnchor.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import { Box } from '@open-pioneer/chakra-integration';
+import { useCommonComponentProps } from '@open-pioneer/react-utils';
+import { createPortal } from 'react-dom';
+import { computeMapAnchorStyles } from './computeMapAnchorStyles.js';
+import { useMapContainerContext } from './MapContainerContext.js';
+
+const defaultPosition = "top-right";
+function MapAnchor(props) {
+  const { position = defaultPosition, children, horizontalGap, verticalGap } = props;
+  const { containerProps } = useCommonComponentProps("map-anchor", props);
+  const { mapAnchorsHost } = useMapContainerContext();
+  return createPortal(
+    /* @__PURE__ */ jsx(Box, { ...containerProps, ...computeMapAnchorStyles(position, horizontalGap, verticalGap), children }),
+    mapAnchorsHost
+  );
+}
+function computeAttributionGap(verticalGap) {
+  const height = 20;
+  const space = 10;
+  return {
+    gap: verticalGap === void 0 ? height + space : 0,
+    space
+  };
+}
+
+export { MapAnchor, computeAttributionGap };
+//# sourceMappingURL=MapAnchor.js.map

package/ui/MapAnchor.js.map

@@ -0,0 +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 } from \"@open-pioneer/chakra-integration\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { computeMapAnchorStyles } from \"./computeMapAnchorStyles\";\nimport { useMapContainerContext } from \"./MapContainerContext\";\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 { mapAnchorsHost } = useMapContainerContext();\n\n    return createPortal(\n        <Box {...containerProps} {...computeMapAnchorStyles(position, horizontalGap, verticalGap)}>\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"],"names":[],"mappings":";;;;;;;AAWA,MAAM,eAAqC,GAAA,WAAA,CAAA;AAkCpC,SAAS,UAAU,KAAoC,EAAA;AAC1D,EAAA,MAAM,EAAE,QAAW,GAAA,eAAA,EAAiB,QAAU,EAAA,aAAA,EAAe,aAAgB,GAAA,KAAA,CAAA;AAC7E,EAAA,MAAM,EAAE,cAAA,EAAmB,GAAA,uBAAA,CAAwB,cAAc,KAAK,CAAA,CAAA;AACtE,EAAM,MAAA,EAAE,cAAe,EAAA,GAAI,sBAAuB,EAAA,CAAA;AAElD,EAAO,OAAA,YAAA;AAAA,oBACH,GAAA,CAAC,GAAK,EAAA,EAAA,GAAG,cAAiB,EAAA,GAAG,uBAAuB,QAAU,EAAA,aAAA,EAAe,WAAW,CAAA,EACnF,QACL,EAAA,CAAA;AAAA,IACA,cAAA;AAAA,GACJ,CAAA;AACJ,CAAA;AAEO,SAAS,sBAAsB,WAGpC,EAAA;AAKE,EAAA,MAAM,MAAS,GAAA,EAAA,CAAA;AAKf,EAAA,MAAM,KAAQ,GAAA,EAAA,CAAA;AAEd,EAAO,OAAA;AAAA,IACH,GAAK,EAAA,WAAA,KAAgB,KAAY,CAAA,GAAA,MAAA,GAAS,KAAQ,GAAA,CAAA;AAAA,IAClD,KAAA;AAAA,GACJ,CAAA;AACJ;;;;"}

package/ui/MapContainer.d.ts

@@ -0,0 +1,50 @@
+import { CommonComponentProps } from "@open-pioneer/react-utils";
+import { ReactNode } from "react";
+import { MapPadding } from "../api";
+import { MapModelProps } from "./useMapModel";
+export interface MapContainerProps extends CommonComponentProps, MapModelProps {
+    /**
+     * Sets the map's padding directly.
+     * Do not use the view's padding property directly on the OL map.
+     *
+     * See: https://openlayers.org/en/latest/apidoc/module-ol_View-View.html#padding)
+     */
+    viewPadding?: MapPadding | undefined;
+    /**
+     * Behavior performed by the map when the view padding changes.
+     *
+     * - `none`: Do nothing.
+     * - `preserve-center`: Ensures that the center point remains the same by animating the view.
+     * - `preserve-extent`: Ensures that the extent remains the same by zooming.
+     *
+     * @default "preserve-center"
+     */
+    viewPaddingChangeBehavior?: "none" | "preserve-center" | "preserve-extent";
+    children?: ReactNode;
+    /**
+     * Optional role property.
+     *
+     * This property is directly applied to the map's container div element.
+     */
+    role?: string;
+    /**
+     * Optional aria-labelledby property.
+     * Do not use together with aria-label.
+     *
+     * This property is directly applied to the map's container div element.
+     */
+    "aria-labelledby"?: string;
+    /**
+     * Optional aria-label property.
+     * Do not use together with aria-label.
+     *
+     * This property is directly applied to the map's container div element.
+     */
+    "aria-label"?: string;
+}
+/**
+ * Displays the map with the given id.
+ *
+ * There can only be at most one MapContainer for every map.
+ */
+export declare function MapContainer(props: MapContainerProps): import("react/jsx-runtime").JSX.Element;

package/ui/MapContainer.js

@@ -0,0 +1,191 @@
+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, useState, useEffect, useMemo } from 'react';
+import { MapContainerContextProvider } from './MapContainerContext.js';
+import { useMapModel } from './useMapModel.js';
+import { PADDING_TOP, PADDING_BOTTOM, PADDING_LEFT, PADDING_RIGHT } from './CssProps.js';
+
+const LOG = createLogger("map:MapContainer");
+function MapContainer(props) {
+  const {
+    viewPadding,
+    viewPaddingChangeBehavior,
+    children,
+    role,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy
+  } = props;
+  const { containerProps } = useCommonComponentProps("map-container", props);
+  const mapContainer = useRef(null);
+  const mapAnchorsHost = useRef(null);
+  const modelState = useMapModel(props);
+  const map = modelState.map;
+  const [ready, setReady] = useState(false);
+  useEffect(() => {
+    if (modelState.kind === "loading") {
+      return;
+    }
+    if (modelState.kind === "rejected") {
+      LOG.error(`Cannot display the map. Caused by `, modelState.error);
+      return;
+    }
+    if (!map) {
+      LOG.error(`No configuration available for the configured map.`);
+      return;
+    }
+    if (mapContainer.current) {
+      const resource = registerMapTarget(map, mapContainer.current);
+      return () => resource?.destroy();
+    }
+  }, [modelState, map]);
+  useEffect(() => {
+    setReady(true);
+  }, []);
+  const styleProps = useMemo(() => {
+    return {
+      height: "100%",
+      position: "relative",
+      // set css variables according to view padding
+      [PADDING_TOP.definition]: viewPadding?.top != void 0 ? viewPadding.top + "px" : "0px",
+      [PADDING_BOTTOM.definition]: viewPadding?.bottom != void 0 ? viewPadding.bottom + "px" : "0px",
+      [PADDING_LEFT.definition]: viewPadding?.left != void 0 ? viewPadding.left + "px" : "0px",
+      [PADDING_RIGHT.definition]: viewPadding?.right != void 0 ? viewPadding.right + "px" : "0px"
+    };
+  }, [viewPadding]);
+  return /* @__PURE__ */ jsxs(
+    chakra.div,
+    {
+      ...containerProps,
+      role,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      ref: mapContainer,
+      style: styleProps,
+      tabIndex: 0,
+      children: [
+        ready && map && /* @__PURE__ */ jsx(
+          MapContainerReady,
+          {
+            olMap: map.olMap,
+            mapAnchorsHost: mapAnchorsHost.current,
+            viewPadding,
+            viewPaddingChangeBehavior,
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          chakra.div,
+          {
+            ref: mapAnchorsHost,
+            className: "map-anchors"
+          }
+        )
+      ]
+    }
+  );
+}
+function MapContainerReady(props) {
+  const {
+    olMap,
+    mapAnchorsHost,
+    viewPadding: viewPaddingProp,
+    viewPaddingChangeBehavior = "preserve-center",
+    children
+  } = props;
+  const viewPadding = useMemo(() => {
+    return {
+      left: viewPaddingProp?.left ?? 0,
+      right: viewPaddingProp?.right ?? 0,
+      top: viewPaddingProp?.top ?? 0,
+      bottom: viewPaddingProp?.bottom ?? 0
+    };
+  }, [viewPaddingProp]);
+  useEffect(() => {
+    const mapView = olMap?.getView();
+    if (!olMap || !mapView) {
+      return;
+    }
+    const oldCenter = mapView.getCenter();
+    const oldPadding = fromOlPadding(mapView.padding);
+    const oldExtent = extentIncludingPadding(olMap, oldPadding);
+    mapView.padding = toOlPadding(viewPadding);
+    switch (viewPaddingChangeBehavior) {
+      case "preserve-center":
+        mapView.animate({ center: oldCenter, duration: 300 });
+        break;
+      case "preserve-extent": {
+        if (oldExtent) {
+          mapView.animate({
+            center: oldCenter,
+            resolution: mapView.getResolutionForExtent(oldExtent),
+            duration: 300
+          });
+        }
+        break;
+      }
+    }
+  }, [viewPadding, olMap, viewPaddingChangeBehavior]);
+  const mapContext = useMemo(() => {
+    return {
+      mapAnchorsHost
+    };
+  }, [mapAnchorsHost]);
+  return /* @__PURE__ */ jsx(MapContainerContextProvider, { value: mapContext, children });
+}
+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 extentIncludingPadding(map, padding) {
+  const size = map.getSize();
+  if (!size || size.length < 2) {
+    return void 0;
+  }
+  const [width, height] = size;
+  const bottomLeft = map.getCoordinateFromPixel([padding.left, padding.bottom]);
+  const topRight = map.getCoordinateFromPixel([
+    Math.max(0, width - padding.right),
+    Math.max(0, height - padding.top)
+  ]);
+  if (!bottomLeft || !topRight) {
+    return void 0;
+  }
+  const [xmin, ymin] = bottomLeft;
+  const [xmax, ymax] = topRight;
+  return [xmin, ymin, xmax, ymax];
+}
+function fromOlPadding(padding) {
+  return {
+    top: padding?.[0] ?? 0,
+    right: padding?.[1] ?? 0,
+    bottom: padding?.[2] ?? 0,
+    left: padding?.[3] ?? 0
+  };
+}
+function toOlPadding(padding) {
+  const { top, right, bottom, left } = padding;
+  return [top, right, bottom, left];
+}
+
+export { MapContainer };
+//# sourceMappingURL=MapContainer.js.map

package/ui/MapContainer.js.map

@@ -0,0 +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 { 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, CSSProperties } from \"react\";\nimport { MapModel, MapPadding } from \"../api\";\nimport { MapContainerContextProvider, MapContainerContextType } from \"./MapContainerContext\";\nimport { MapModelProps, useMapModel } from \"./useMapModel\";\nimport { PADDING_BOTTOM, PADDING_LEFT, PADDING_RIGHT, PADDING_TOP } from \"./CssProps\";\nconst LOG = createLogger(\"map:MapContainer\");\n\nexport interface MapContainerProps extends CommonComponentProps, MapModelProps {\n    /**\n     * Sets the map's padding directly.\n     * Do not use the view's padding property directly on the OL map.\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        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(props);\n    const map = 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 (!map) {\n            LOG.error(`No configuration available for the configured map.`);\n            return;\n        }\n\n        // Mount the map into the DOM\n        if (mapContainer.current) {\n            const resource = registerMapTarget(map, mapContainer.current);\n            return () => resource?.destroy();\n        }\n    }, [modelState, map]);\n\n    // Wait for mount to make sure that the map anchors host is available\n    useEffect(() => {\n        setReady(true);\n    }, []);\n\n    const styleProps = useMemo(() => {\n        return {\n            height: \"100%\",\n            position: \"relative\",\n\n            // set css variables according to view padding\n            [PADDING_TOP.definition]:\n                viewPadding?.top != undefined ? viewPadding.top + \"px\" : \"0px\",\n            [PADDING_BOTTOM.definition]:\n                viewPadding?.bottom != undefined ? viewPadding.bottom + \"px\" : \"0px\",\n            [PADDING_LEFT.definition]:\n                viewPadding?.left != undefined ? viewPadding.left + \"px\" : \"0px\",\n            [PADDING_RIGHT.definition]:\n                viewPadding?.right != undefined ? viewPadding.right + \"px\" : \"0px\"\n        } as CSSProperties;\n    }, [viewPadding]);\n\n    return (\n        <chakra.div\n            {...containerProps}\n            role={role}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            ref={mapContainer}\n            style={styleProps}\n            //eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n            tabIndex={0}\n        >\n            {ready && map && (\n                <MapContainerReady\n                    olMap={map.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: { olMap: OlMap; mapAnchorsHost: HTMLElement } & Omit<\n        MapContainerProps,\n        \"mapId\" | \"map\" | \"className\"\n    >\n): JSX.Element {\n    const {\n        olMap,\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 = olMap?.getView();\n        if (!olMap || !mapView) {\n            return;\n        }\n\n        const oldCenter = mapView.getCenter();\n        const oldPadding = fromOlPadding(mapView.padding);\n        const oldExtent = extentIncludingPadding(olMap, 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, olMap, viewPaddingChangeBehavior]);\n\n    const mapContext = useMemo((): MapContainerContextType => {\n        return {\n            mapAnchorsHost\n        };\n    }, [mapAnchorsHost]);\n    return <MapContainerContextProvider value={mapContext}>{children}</MapContainerContextProvider>;\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/MapContainerContext.d.ts

@@ -0,0 +1,7 @@
+import { Provider } from "react";
+/** Values provided to children of {@link MapContainer}. */
+export interface MapContainerContextType {
+    mapAnchorsHost: HTMLElement;
+}
+export declare const MapContainerContextProvider: Provider<MapContainerContextType>;
+export declare function useMapContainerContext(): MapContainerContextType;

package/ui/MapContainerContext.js

@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+
+const MapContainerContext = createContext(void 0);
+MapContainerContext.displayName = "MapContainerContext";
+const MapContainerContextProvider = MapContainerContext.Provider;
+function useMapContainerContext() {
+  const contextValue = useContext(MapContainerContext);
+  if (!contextValue) {
+    throw new Error(
+      `Map container context is not available. The component must be a child of the <MapContainer /> component.`
+    );
+  }
+  return contextValue;
+}
+
+export { MapContainerContextProvider, useMapContainerContext };
+//# sourceMappingURL=MapContainerContext.js.map

package/ui/MapContainerContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapContainerContext.js","sources":["MapContainerContext.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\";\n\n/** Values provided to children of {@link MapContainer}. */\nexport interface MapContainerContextType {\n    mapAnchorsHost: HTMLElement;\n}\n\nconst MapContainerContext = createContext<MapContainerContextType | undefined>(undefined);\nMapContainerContext.displayName = \"MapContainerContext\";\n\nexport const MapContainerContextProvider: Provider<MapContainerContextType> =\n    MapContainerContext.Provider as Provider<MapContainerContextType>;\n\nexport function useMapContainerContext(): MapContainerContextType {\n    const contextValue = useContext(MapContainerContext);\n    if (!contextValue) {\n        throw new Error(\n            `Map container context is not available. The component must be a child of the <MapContainer /> component.`\n        );\n    }\n    return contextValue;\n}\n"],"names":[],"mappings":";;AASA,MAAM,mBAAA,GAAsB,cAAmD,KAAS,CAAA,CAAA,CAAA;AACxF,mBAAA,CAAoB,WAAc,GAAA,qBAAA,CAAA;AAE3B,MAAM,8BACT,mBAAoB,CAAA,SAAA;AAEjB,SAAS,sBAAkD,GAAA;AAC9D,EAAM,MAAA,YAAA,GAAe,WAAW,mBAAmB,CAAA,CAAA;AACnD,EAAA,IAAI,CAAC,YAAc,EAAA;AACf,IAAA,MAAM,IAAI,KAAA;AAAA,MACN,CAAA,wGAAA,CAAA;AAAA,KACJ,CAAA;AAAA,GACJ;AACA,EAAO,OAAA,YAAA,CAAA;AACX;;;;"}

package/ui/computeMapAnchorStyles.d.ts

@@ -0,0 +1,3 @@
+import { StyleProps } from "@open-pioneer/chakra-integration";
+import { MapAnchorPosition } from "./MapAnchor";
+export declare function computeMapAnchorStyles(position: MapAnchorPosition, horizontalGap?: number | undefined, verticalGap?: number | undefined): StyleProps;

package/ui/computeMapAnchorStyles.js

@@ -0,0 +1,51 @@
+import { PADDING_RIGHT, PADDING_BOTTOM, PADDING_LEFT, PADDING_TOP } from './CssProps.js';
+import { computeAttributionGap } from './MapAnchor.js';
+
+function computeMapAnchorStyles(position, horizontalGap, verticalGap) {
+  const styleProps = {
+    position: "absolute",
+    zIndex: 1,
+    // above map
+    transitionProperty: "left, right, top, bottom",
+    transitionDuration: "200ms",
+    transitionTimingFunction: "ease-out",
+    overflow: "hidden"
+  };
+  const defaultHorizontalGap = 0;
+  const horizontal = horizontalGap ?? defaultHorizontalGap;
+  const defaultVerticalGap = 0;
+  const vertical = verticalGap ?? defaultVerticalGap;
+  const attribution = computeAttributionGap(verticalGap);
+  const gap = (paddingProp, pixels) => `(${paddingProp} + ${pixels}px)`;
+  const posExprs = {};
+  switch (position) {
+    case "top-left":
+      posExprs.left = gap(PADDING_LEFT.ref, horizontal);
+      posExprs.top = gap(PADDING_TOP.ref, vertical);
+      break;
+    case "top-right":
+      posExprs.right = gap(PADDING_RIGHT.ref, horizontal);
+      posExprs.top = gap(PADDING_TOP.ref, vertical);
+      break;
+    case "bottom-left":
+      posExprs.left = gap(PADDING_LEFT.ref, horizontal);
+      posExprs.bottom = gap(PADDING_BOTTOM.ref, vertical + attribution.gap);
+      break;
+    case "bottom-right":
+      posExprs.right = gap(PADDING_RIGHT.ref, horizontal);
+      posExprs.bottom = gap(PADDING_BOTTOM.ref, vertical + attribution.gap);
+      break;
+  }
+  for (const [key, value] of Object.entries(posExprs)) {
+    styleProps[key] = `calc(${value})`;
+  }
+  styleProps.maxH = `calc((100%) - ${defaultValue(posExprs.top, "0px")} - ${defaultValue(posExprs.bottom, attribution.gap + "px")} - ${vertical}px - ${attribution.space}px)`;
+  styleProps.maxW = `calc((100%) - ${defaultValue(posExprs.left, "0px")} - ${defaultValue(posExprs.right, "0px")} - ${horizontal}px)`;
+  return styleProps;
+}
+function defaultValue(value, defaultValue2) {
+  return value ?? defaultValue2;
+}
+
+export { computeMapAnchorStyles };
+//# sourceMappingURL=computeMapAnchorStyles.js.map

package/ui/computeMapAnchorStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"computeMapAnchorStyles.js","sources":["computeMapAnchorStyles.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { StyleProps } from \"@open-pioneer/chakra-integration\";\nimport { PADDING_BOTTOM, PADDING_LEFT, PADDING_RIGHT, PADDING_TOP } from \"./CssProps\";\nimport { computeAttributionGap, MapAnchorPosition } from \"./MapAnchor\";\n\nexport function computeMapAnchorStyles(\n    position: MapAnchorPosition,\n    horizontalGap?: number | undefined,\n    verticalGap?: number | undefined\n): StyleProps {\n    const styleProps: StyleProps = {\n        position: \"absolute\",\n        zIndex: 1, // above map\n        transitionProperty: \"left, right, top, bottom\",\n        transitionDuration: \"200ms\",\n        transitionTimingFunction: \"ease-out\",\n        overflow: \"hidden\"\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 = (paddingProp: string, pixels: number) => `(${paddingProp} + ${pixels}px)`;\n\n    interface PosExprs {\n        left?: string;\n        right?: string;\n        top?: string;\n        bottom?: string;\n    }\n\n    // CSS Expressions for inside calc(...)\n    const posExprs: PosExprs = {};\n    switch (position) {\n        case \"top-left\":\n            posExprs.left = gap(PADDING_LEFT.ref, horizontal);\n            posExprs.top = gap(PADDING_TOP.ref, vertical);\n            break;\n        case \"top-right\":\n            posExprs.right = gap(PADDING_RIGHT.ref, horizontal);\n            posExprs.top = gap(PADDING_TOP.ref, vertical);\n            break;\n        case \"bottom-left\":\n            posExprs.left = gap(PADDING_LEFT.ref, horizontal);\n            posExprs.bottom = gap(PADDING_BOTTOM.ref, vertical + attribution.gap);\n            break;\n        case \"bottom-right\":\n            posExprs.right = gap(PADDING_RIGHT.ref, horizontal);\n            posExprs.bottom = gap(PADDING_BOTTOM.ref, vertical + attribution.gap);\n            break;\n    }\n\n    for (const [key, value] of Object.entries(posExprs)) {\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        (styleProps as any)[key] = `calc(${value})`;\n    }\n\n    /**\n     * Apply max-height and max-width to MapAnchor to avoid content overflow\n     */\n    styleProps.maxH = `calc((100%) - ${defaultValue(posExprs.top, \"0px\")} - ${defaultValue(posExprs.bottom, attribution.gap + \"px\")} - ${vertical}px - ${attribution.space}px)`;\n    styleProps.maxW = `calc((100%) - ${defaultValue(posExprs.left, \"0px\")} - ${defaultValue(posExprs.right, \"0px\")} - ${horizontal}px)`;\n    return styleProps;\n}\n\nfunction defaultValue(value: string | undefined, defaultValue: string): string {\n    return value ?? defaultValue;\n}\n"],"names":["defaultValue"],"mappings":"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"}

package/ui/hooks.d.ts

@@ -0,0 +1,34 @@
+import OlMap from "ol/Map";
+import OlView from "ol/View";
+import { Projection } from "ol/proj";
+import { Coordinate } from "ol/coordinate";
+/**
+ * Returns the current view of the given map.
+ *
+ * @deprecated Use `mapModel.olView` instead.
+ */
+export declare function useView(map: OlMap | undefined): OlView | undefined;
+/**
+ * Returns the current projection of the map.
+ *
+ * @deprecated Use `mapModel.projection` instead.
+ */
+export declare function useProjection(map: OlMap | undefined): Projection | undefined;
+/**
+ * Returns the current resolution of the map.
+ *
+ * @deprecated Use `mapModel.resolution` instead.
+ */
+export declare function useResolution(map: OlMap | undefined): number | undefined;
+/**
+ * Returns the current center coordinates of the map.
+ *
+ * @deprecated Use `mapModel.center` instead.
+ */
+export declare function useCenter(map: OlMap | undefined): Coordinate | undefined;
+/**
+ * Returns the current scale of the map.
+ *
+ * @deprecated Use `mapModel.scale` instead.
+ */
+export declare function useScale(map: OlMap | undefined): number | undefined;