@open-pioneer/map 0.6.1 → 0.8.0-dev.20241120115147

package/ui/MapAnchor.js

@@ -2,22 +2,16 @@ 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 { useMapContext } from './MapContext.js';
+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 { padding, mapAnchorsHost } = useMapContext();
+  const { mapAnchorsHost } = useMapContainerContext();
   return createPortal(
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        ...containerProps,
-        ...computePositionStyles(position, padding, horizontalGap, verticalGap),
-        children
-      }
-    ),
+    /* @__PURE__ */ jsx(Box, { ...containerProps, ...computeMapAnchorStyles(position, horizontalGap, verticalGap), children }),
     mapAnchorsHost
   );
 }
@@ -29,44 +23,6 @@ function computeAttributionGap(verticalGap) {
     space
   };
 }
-function computePositionStyles(position, padding, horizontalGap, verticalGap) {
-  const props = {
-    position: "absolute",
-    zIndex: 1,
-    // above map
-    transitionProperty: "left, right, top, bottom",
-    transitionDuration: "200ms",
-    transitionTimingFunction: "ease-out"
-  };
-  const defaultHorizontalGap = 0;
-  const horizontal = horizontalGap ?? defaultHorizontalGap;
-  const defaultVerticalGap = 0;
-  const vertical = verticalGap ?? defaultVerticalGap;
-  const attribution = computeAttributionGap(verticalGap);
-  const gap = (n) => `${n}px`;
-  switch (position) {
-    case "top-left":
-      props.left = gap(padding.left + horizontal);
-      props.top = gap(padding.top + vertical);
-      break;
-    case "top-right":
-      props.right = gap(padding.right + horizontal);
-      props.top = gap(padding.top + vertical);
-      break;
-    case "bottom-left":
-      props.left = gap(padding.left + horizontal);
-      props.bottom = gap(padding.bottom + vertical + attribution.gap);
-      break;
-    case "bottom-right":
-      props.right = gap(padding.right + horizontal);
-      props.bottom = gap(padding.bottom + vertical + attribution.gap);
-      break;
-  }
-  props.maxH = `calc((100%) - ${props.top ?? "0px"} - ${props.bottom ?? attribution.gap + "px"} - ${vertical + "px"} - ${attribution.space + "px"})`;
-  props.maxW = `calc((100%) - ${props.left ?? "0px"} - ${props.right ?? "0px"} - ${horizontal + "px"})`;
-  props.overflow = "hidden";
-  return props;
-}
 
-export { MapAnchor, computeAttributionGap, computePositionStyles };
+export { MapAnchor, computeAttributionGap };
 //# 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, 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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"}
+{"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

@@ -1,11 +1,11 @@
 import { CommonComponentProps } from "@open-pioneer/react-utils";
 import { ReactNode } from "react";
 import { MapPadding } from "../api";
-export interface MapContainerProps extends CommonComponentProps {
-    /** The id of the map to display. */
-    mapId: string;
+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)
      */

package/ui/MapContainer.js

@@ -3,13 +3,13 @@ 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 { MapContextProvider } from './MapContext.js';
+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 {
-    mapId,
     viewPadding,
     viewPaddingChangeBehavior,
     children,
@@ -20,8 +20,8 @@ function MapContainer(props) {
   const { containerProps } = useCommonComponentProps("map-container", props);
   const mapContainer = useRef(null);
   const mapAnchorsHost = useRef(null);
-  const modelState = useMapModel(mapId);
-  const mapModel = modelState.map;
+  const modelState = useMapModel(props);
+  const map = modelState.map;
   const [ready, setReady] = useState(false);
   useEffect(() => {
     if (modelState.kind === "loading") {
@@ -31,22 +31,29 @@ function MapContainer(props) {
       LOG.error(`Cannot display the map. Caused by `, modelState.error);
       return;
     }
-    if (!mapModel) {
-      LOG.error(`No configuration available for map with id '${mapId}'.`);
+    if (!map) {
+      LOG.error(`No configuration available for the configured map.`);
       return;
     }
     if (mapContainer.current) {
-      const resource = registerMapTarget(mapModel, mapContainer.current);
+      const resource = registerMapTarget(map, mapContainer.current);
       return () => resource?.destroy();
     }
-  }, [modelState, mapModel, mapId]);
+  }, [modelState, map]);
   useEffect(() => {
     setReady(true);
   }, []);
-  const mapContainerStyle = {
-    height: "100%",
-    position: "relative"
-  };
+  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,
     {
@@ -55,13 +62,13 @@ function MapContainer(props) {
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
       ref: mapContainer,
-      style: mapContainerStyle,
+      style: styleProps,
       tabIndex: 0,
       children: [
-        ready && mapModel && /* @__PURE__ */ jsx(
+        ready && map && /* @__PURE__ */ jsx(
           MapContainerReady,
           {
-            map: mapModel.olMap,
+            olMap: map.olMap,
             mapAnchorsHost: mapAnchorsHost.current,
             viewPadding,
             viewPaddingChangeBehavior,
@@ -81,7 +88,7 @@ function MapContainer(props) {
 }
 function MapContainerReady(props) {
   const {
-    map,
+    olMap,
     mapAnchorsHost,
     viewPadding: viewPaddingProp,
     viewPaddingChangeBehavior = "preserve-center",
@@ -96,13 +103,13 @@ function MapContainerReady(props) {
     };
   }, [viewPaddingProp]);
   useEffect(() => {
-    const mapView = map?.getView();
-    if (!map || !mapView) {
+    const mapView = olMap?.getView();
+    if (!olMap || !mapView) {
       return;
     }
     const oldCenter = mapView.getCenter();
     const oldPadding = fromOlPadding(mapView.padding);
-    const oldExtent = extentIncludingPadding(map, oldPadding);
+    const oldExtent = extentIncludingPadding(olMap, oldPadding);
     mapView.padding = toOlPadding(viewPadding);
     switch (viewPaddingChangeBehavior) {
       case "preserve-center":
@@ -119,15 +126,13 @@ function MapContainerReady(props) {
         break;
       }
     }
-  }, [viewPadding, map, viewPaddingChangeBehavior]);
+  }, [viewPadding, olMap, viewPaddingChangeBehavior]);
   const mapContext = useMemo(() => {
     return {
-      map,
-      mapAnchorsHost,
-      padding: viewPadding
+      mapAnchorsHost
     };
-  }, [map, viewPadding, mapAnchorsHost]);
-  return /* @__PURE__ */ jsx(MapContextProvider, { value: mapContext, children });
+  }, [mapAnchorsHost]);
+  return /* @__PURE__ */ jsx(MapContainerContextProvider, { value: mapContext, children });
 }
 function registerMapTarget(mapModel, target) {
   const mapId = mapModel.id;

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 { 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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"}
+{"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

@@ -4,21 +4,31 @@ 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;

package/ui/hooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","sources":["hooks.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport OlMap from \"ol/Map\";\nimport OlView from \"ol/View\";\nimport { unByKey } from \"ol/Observable\";\nimport { Projection, getPointResolution } from \"ol/proj\";\nimport { Coordinate } from \"ol/coordinate\";\nimport { EventsKey } from \"ol/events\";\nimport { useCallback, useMemo, useSyncExternalStore } from \"react\";\n\n/**\n * From Web Map Server Implementation Specification -> 7.2.4.6.9 Scale denominators\n *\n * For the purposes of this International Standard, the common pixel size is defined to be 0,28 mm × 0,28 mm.\n * Because arbitrary clients can request maps from a server, the true pixel size of the final rendering device is\n * unknown to the server.\n */\nconst DEFAULT_DPI = 25.4 / 0.28;\nconst INCHES_PER_METRE = 39.37;\n\n/**\n * Returns the current view of the given map.\n */\nexport function useView(map: OlMap | undefined): OlView | undefined {\n    return useOlProperty(map, getView, watchView);\n}\n\nfunction getView(map: OlMap) {\n    return map.getView();\n}\n\nfunction watchView(map: OlMap, cb: Callback) {\n    return map.on(\"change:view\", cb);\n}\n\n/**\n * Returns the current projection of the map.\n */\nexport function useProjection(map: OlMap | undefined): Projection | undefined {\n    const view = useView(map);\n    return view?.getProjection();\n}\n\n/**\n * Returns the current resolution of the map.\n */\nexport function useResolution(map: OlMap | undefined): number | undefined {\n    const view = useView(map);\n    return useOlProperty(view, getResolution, watchResolution);\n}\n\nfunction getResolution(view: OlView): number | undefined {\n    return view.getResolution();\n}\n\nfunction watchResolution(view: OlView, cb: Callback) {\n    return view.on(\"change:resolution\", cb);\n}\n\n/**\n * Returns the current center coordinates of the map.\n */\nexport function useCenter(map: OlMap | undefined): Coordinate | undefined {\n    const view = useView(map);\n    return useOlProperty(view, getCenter, watchCenter);\n}\n\nfunction getCenter(view: OlView): Coordinate | undefined {\n    return view.getCenter();\n}\n\nfunction watchCenter(view: OlView, cb: Callback) {\n    return view.on(\"change:center\", cb);\n}\n\n/**\n * Returns the current scale of the map.\n */\nexport function useScale(map: OlMap | undefined): number | undefined {\n    const center = useCenter(map);\n    const resolution = useResolution(map);\n    const projection = useProjection(map);\n    const scale = useMemo(() => {\n        if (projection == null || resolution == null || center == null) {\n            return undefined;\n        }\n\n        /**\n         * Returns the appropriate scale for the given resolution and units, see OpenLayers function getScaleForResolution()\n         * https://github.com/openlayers/openlayers/blob/7fa9df03431e9e1bc517e6c414565d9f848a3132/src/ol/control/ScaleLine.js#L454C3-L454C24\n         */\n        const pointResolution = getPointResolution(projection, resolution, center);\n        const scale = Math.round(pointResolution * INCHES_PER_METRE * DEFAULT_DPI);\n        return scale;\n    }, [projection, resolution, center]);\n    return scale;\n}\n\ntype Callback = () => void;\n\n/**\n * Returns the value of an observable ol property.\n *\n * Make sure to keep `accessor` and `watcher` stable to reduce re-subscriptions:\n * either use global functions or wrap the functions into `useCallback`.\n */\nfunction useOlProperty<T, R>(\n    object: T | undefined,\n    accessor: (object: T) => R,\n    watcher: (object: T, cb: Callback) => EventsKey\n): R | undefined {\n    const getSnapshot = useCallback(\n        () => (object ? accessor(object) : undefined),\n        [object, accessor]\n    );\n    const subscribe = useCallback(\n        (cb: Callback) => {\n            if (!object) {\n                return () => undefined;\n            }\n\n            const key = watcher(object, cb);\n            return () => unByKey(key);\n        },\n        [object, watcher]\n    );\n    return useSyncExternalStore(subscribe, getSnapshot);\n}\n"],"names":["scale"],"mappings":"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"}
+{"version":3,"file":"hooks.js","sources":["hooks.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport OlMap from \"ol/Map\";\nimport OlView from \"ol/View\";\nimport { unByKey } from \"ol/Observable\";\nimport { Projection, getPointResolution } from \"ol/proj\";\nimport { Coordinate } from \"ol/coordinate\";\nimport { EventsKey } from \"ol/events\";\nimport { useCallback, useMemo, useSyncExternalStore } from \"react\";\n\n/**\n * From Web Map Server Implementation Specification -> 7.2.4.6.9 Scale denominators\n *\n * For the purposes of this International Standard, the common pixel size is defined to be 0,28 mm × 0,28 mm.\n * Because arbitrary clients can request maps from a server, the true pixel size of the final rendering device is\n * unknown to the server.\n */\nconst DEFAULT_DPI = 25.4 / 0.28;\nconst INCHES_PER_METRE = 39.37;\n\n/**\n * Returns the current view of the given map.\n *\n * @deprecated Use `mapModel.olView` instead.\n */\nexport function useView(map: OlMap | undefined): OlView | undefined {\n    return useOlProperty(map, getView, watchView);\n}\n\nfunction getView(map: OlMap) {\n    return map.getView();\n}\n\nfunction watchView(map: OlMap, cb: Callback) {\n    return map.on(\"change:view\", cb);\n}\n\n/**\n * Returns the current projection of the map.\n *\n * @deprecated Use `mapModel.projection` instead.\n */\nexport function useProjection(map: OlMap | undefined): Projection | undefined {\n    const view = useView(map);\n    return view?.getProjection();\n}\n\n/**\n * Returns the current resolution of the map.\n *\n * @deprecated Use `mapModel.resolution` instead.\n */\nexport function useResolution(map: OlMap | undefined): number | undefined {\n    const view = useView(map);\n    return useOlProperty(view, getResolution, watchResolution);\n}\n\nfunction getResolution(view: OlView): number | undefined {\n    return view.getResolution();\n}\n\nfunction watchResolution(view: OlView, cb: Callback) {\n    return view.on(\"change:resolution\", cb);\n}\n\n/**\n * Returns the current center coordinates of the map.\n *\n * @deprecated Use `mapModel.center` instead.\n */\nexport function useCenter(map: OlMap | undefined): Coordinate | undefined {\n    const view = useView(map);\n    return useOlProperty(view, getCenter, watchCenter);\n}\n\nfunction getCenter(view: OlView): Coordinate | undefined {\n    return view.getCenter();\n}\n\nfunction watchCenter(view: OlView, cb: Callback) {\n    return view.on(\"change:center\", cb);\n}\n\n/**\n * Returns the current scale of the map.\n *\n * @deprecated Use `mapModel.scale` instead.\n */\nexport function useScale(map: OlMap | undefined): number | undefined {\n    const center = useCenter(map);\n    const resolution = useResolution(map);\n    const projection = useProjection(map);\n    const scale = useMemo(() => {\n        if (projection == null || resolution == null || center == null) {\n            return undefined;\n        }\n\n        /**\n         * Returns the appropriate scale for the given resolution and units, see OpenLayers function getScaleForResolution()\n         * https://github.com/openlayers/openlayers/blob/7fa9df03431e9e1bc517e6c414565d9f848a3132/src/ol/control/ScaleLine.js#L454C3-L454C24\n         */\n        const pointResolution = getPointResolution(projection, resolution, center);\n        const scale = Math.round(pointResolution * INCHES_PER_METRE * DEFAULT_DPI);\n        return scale;\n    }, [projection, resolution, center]);\n    return scale;\n}\n\ntype Callback = () => void;\n\n/**\n * Returns the value of an observable ol property.\n *\n * Make sure to keep `accessor` and `watcher` stable to reduce re-subscriptions:\n * either use global functions or wrap the functions into `useCallback`.\n */\nfunction useOlProperty<T, R>(\n    object: T | undefined,\n    accessor: (object: T) => R,\n    watcher: (object: T, cb: Callback) => EventsKey\n): R | undefined {\n    const getSnapshot = useCallback(\n        () => (object ? accessor(object) : undefined),\n        [object, accessor]\n    );\n    const subscribe = useCallback(\n        (cb: Callback) => {\n            if (!object) {\n                return () => undefined;\n            }\n\n            const key = watcher(object, cb);\n            return () => unByKey(key);\n        },\n        [object, watcher]\n    );\n    return useSyncExternalStore(subscribe, getSnapshot);\n}\n"],"names":["scale"],"mappings":"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"}

package/ui/styles.css

@@ -1,3 +1,10 @@
 @import "ol/ol.css";
 
+/* Move attribution according to map view's padding */
+
+.map-container .ol-viewport .ol-attribution {
+    bottom: var(--map-padding-bottom);
+    right: var(--map-padding-right);
+}
+
 /*# sourceMappingURL=styles.css.map */

package/ui/styles.css.map

@@ -1 +1 @@
-{"version":3,"sources":["styles.css"],"names":[],"mappings":"AAAA,mBAAmB","file":"styles.css","sourcesContent":["@import \"ol/ol.css\";\n"]}
+{"version":3,"sources":["styles.css"],"names":[],"mappings":"AAAA,mBAAmB;;AAEnB,qDAAqD;;AACrD;IACI,iCAAiC;IACjC,+BAA+B;AACnC","file":"styles.css","sourcesContent":["@import \"ol/ol.css\";\n\n/* Move attribution according to map view's padding */\n.map-container .ol-viewport .ol-attribution {\n    bottom: var(--map-padding-bottom);\n    right: var(--map-padding-right);\n}\n"]}

package/ui/useMapModel.d.ts

@@ -1,10 +1,6 @@
 import { MapModel } from "../api";
 /** Return value of {@link useMapModel}. */
-export type UseMapModelResult = {
-    kind: "loading" | "resolved" | "rejected";
-    map?: MapModel | undefined;
-    error?: Error | undefined;
-} | UseMapModelLoading | UseMapModelResolved | UseMapModelRejected;
+export type UseMapModelResult = UseMapModelLoading | UseMapModelResolved | UseMapModelRejected;
 export interface UseMapModelLoading {
     kind: "loading";
     map?: undefined;
@@ -21,7 +17,25 @@ export interface UseMapModelRejected {
     error: Error;
 }
 /**
- * React hooks that looks up the map with the given id in the `map.MapRegistry` service.
+ * Options that specify which map to use. See {@link useMapModel}.
+ *
+ * When not setting any of these properties on a component, the default map (from the `DefaultMapProvider`) will be used.
+ * If that is not available either, an error will be thrown.
+ */
+export interface MapModelProps {
+    /**
+     * The id of the map.
+     * The map will be looked up in the MapRegistry service.
+     */
+    mapId?: string | undefined;
+    /**
+     * The direct map model reference to use.
+     * This property can be used as an alternative to the {@link mapId}.
+     */
+    map?: MapModel | undefined;
+}
+/**
+ * React hook that looks up the map with the given id in the `map.MapRegistry` service.
  *
  * Returns an object representing the progress, which will eventually represent either
  * the map model value or an initialization error.
@@ -29,3 +43,16 @@ export interface UseMapModelRejected {
  * The map model cannot be returned directly because it may not have completed its initialization yet.
  */
 export declare function useMapModel(mapId: string): UseMapModelResult;
+/**
+ * React hook that resolves a map model specified by the given `props` (see {@link MapModelProps}).
+ *
+ * Returns an object representing the progress, which will eventually represent either
+ * the map model value or an initialization error.
+ *
+ * The map model cannot be returned directly because it may not have completed its initialization yet.
+ */
+export declare function useMapModel(props: MapModelProps): UseMapModelResult;
+/**
+ * React hook that returns the default map model (if available, see {@link DefaultMapProvider}).
+ */
+export declare function useMapModel(): UseMapModelResult;

package/ui/useMapModel.js

@@ -1,10 +1,18 @@
 import { useService } from '../_virtual/_virtual-pioneer-module_react-hooks.js';
 import { useMemo } from 'react';
 import { useAsync } from 'react-use';
+import { MapModelImpl } from '../model/MapModelImpl.js';
+import { useDefaultMapProps } from './DefaultMapProvider.js';
 
-function useMapModel(mapId) {
+function useMapModel(props) {
+  const resolvedMapArg = useResolvedMapArg(props);
   const mapRegistry = useService("map.MapRegistry");
-  const state = useAsync(() => mapRegistry.getMapModel(mapId), [mapRegistry, mapId]);
+  const state = useAsync(async () => {
+    if (typeof resolvedMapArg === "string") {
+      return await mapRegistry.expectMapModel(resolvedMapArg);
+    }
+    return Promise.resolve(resolvedMapArg);
+  }, [mapRegistry, resolvedMapArg]);
   const result = useMemo(() => {
     if (state.loading) {
       return { kind: "loading" };
@@ -16,6 +24,36 @@ function useMapModel(mapId) {
   }, [state]);
   return result;
 }
+function useResolvedMapArg(props) {
+  if (typeof props === "object" && props.mapId != null && props.map != null) {
+    throw new Error(`Cannot specify both 'mapId' and 'map' in useMapModel at the same time.`);
+  }
+  if (props instanceof MapModelImpl) {
+    throw new Error(
+      `Map model instances cannot be passed directly to 'useMapModel' (see TypeScript signature).`
+    );
+  }
+  const localProps = useMemo(() => {
+    if (props == null) {
+      return {};
+    }
+    if (typeof props === "string") {
+      return { mapId: props };
+    }
+    return { mapId: props.mapId, map: props.map };
+  }, [...typeof props === "string" || props == null ? [props] : [props.mapId, props.map]]);
+  const defaultProps = useDefaultMapProps();
+  const resolvedMapArg = resolveMap(localProps) ?? resolveMap(defaultProps);
+  if (resolvedMapArg == null) {
+    throw new Error(
+      `No map specified. You must either specify the map (or its id) via a DefaultMapProvider parent or configure it explicitly.`
+    );
+  }
+  return resolvedMapArg;
+}
+function resolveMap(props) {
+  return props?.map ?? props?.mapId;
+}
 
 export { useMapModel };
 //# sourceMappingURL=useMapModel.js.map