@open-pioneer/map 1.3.0-dev-map-loading.20260202141334 → 1.3.0-dev-map-loading.20260202144650

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @open-pioneer/map
 
-## 1.3.0-dev-map-loading.20260202141334
+## 1.3.0-dev-map-loading.20260202144650
 
 ### Minor Changes
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@open-pioneer/map",
-  "version": "1.3.0-dev-map-loading.20260202141334",
+  "version": "1.3.0-dev-map-loading.20260202144650",
   "description": "This package integrates OpenLayers maps into an open pioneer trails application.",
   "keywords": [
     "open-pioneer-trails"

package/ui/MapContainer.d.ts

@@ -1,3 +1,4 @@
+import { BoxProps } from "@chakra-ui/react";
 import { CommonComponentProps } from "@open-pioneer/react-utils";
 import { ReactNode } from "react";
 import { MapPadding } from "../model/MapModel";
@@ -54,7 +55,7 @@ export interface MapContainerProps extends CommonComponentProps, MapModelProps {
      *
      * Use cases: setting custom data attributes, registering custom event handlers, ...
      */
-    rootProps?: Record<string, unknown>;
+    rootProps?: BoxProps;
     /**
      * Arbitrary html properties that will be applied to the map container's element.
      * This is the element that _renders_ the OpenLayers map.
@@ -63,7 +64,7 @@ export interface MapContainerProps extends CommonComponentProps, MapModelProps {
      *
      * Use cases: setting custom data attributes, registering custom event handlers, ...
      */
-    containerProps?: Record<string, unknown>;
+    containerProps?: BoxProps;
 }
 /**
  * Displays the map with the given id.

package/ui/MapContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"MapContainer.js","sources":["MapContainer.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { chakra } from \"@chakra-ui/react\";\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 { sourceId } from \"open-pioneer:source-info\";\nimport { ReactNode, useEffect, useMemo, useRef, useState } from \"react\";\nimport { MapModel, MapPadding } from \"../model/MapModel\";\nimport { MapContainerContextProvider, MapContainerContextType } from \"./MapContainerContext\";\nimport { MapModelProps, useMapModelValue } from \"./hooks/useMapModel\";\n\nconst LOG = createLogger(sourceId);\n\n/**\n * @group UI Components and Hooks\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     * @default \"application\"\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     * Arbitrary html properties that will be applied to the map container's _root_ element.\n     * This is the element that contains the map container and any UI elements (like map anchors, for example).\n     *\n     * Use these at your own risk since they may be overwritten by the map container root itself.\n     *\n     * Use cases: setting custom data attributes, registering custom event handlers, ...\n     */\n    rootProps?: Record<string, unknown>;\n\n    /**\n     * Arbitrary html properties that will be applied to the map container's element.\n     * This is the element that _renders_ the OpenLayers map.\n     *\n     * Use these at your own risk since they may be overwritten by the map container itself.\n     *\n     * Use cases: setting custom data attributes, registering custom event handlers, ...\n     */\n    containerProps?: Record<string, unknown>; // TODO: HTMLChakraProps<...>\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 *\n * @group UI Components and Hooks\n */\nexport function MapContainer(props: MapContainerProps) {\n    const {\n        viewPadding,\n        viewPaddingChangeBehavior,\n        children,\n        role = \"application\",\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy,\n        rootProps,\n        containerProps\n    } = props;\n    const { containerProps: rootContainerProps } = useCommonComponentProps(\n        \"map-container-root\",\n        props\n    );\n    const mapContainer = useRef<HTMLDivElement>(null);\n    const mapAnchorsHost = useRef<HTMLDivElement>(null);\n    const map = useMapModelValue(props);\n\n    const [ready, setReady] = useState(false);\n\n    useEffect(() => {\n        // Mount the map into the DOM\n        if (mapContainer.current) {\n            const resource = registerMapTarget(map, mapContainer.current);\n            return () => resource?.destroy();\n        }\n    }, [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            \"--map-padding-top\": `${viewPadding?.top ?? 0}px`,\n            \"--map-padding-bottom\": `${viewPadding?.bottom ?? 0}px`,\n            \"--map-padding-left\": `${viewPadding?.left ?? 0}px`,\n            \"--map-padding-right\": `${viewPadding?.right ?? 0}px`\n        };\n    }, [viewPadding]);\n\n    return (\n        <chakra.div {...rootProps} {...rootContainerProps} css={styleProps}>\n            {/* Used by open layers to mount the map. This node receives the keyboard focus when interacting with the map. */}\n            <chakra.div\n                {...containerProps}\n                className=\"map-container\"\n                ref={mapContainer}\n                role={role}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledBy}\n                h=\"100%\"\n                w=\"100%\"\n                tabIndex={0}\n            />\n\n            {/* Contains user widgets (map anchors and raw children). These are separate from the map so they don't interfere with mouse/keyboard events. */}\n            <chakra.div ref={mapAnchorsHost} className=\"map-anchors\">\n                {ready && map && (\n                    <MapContainerReady\n                        olMap={map.olMap}\n                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n                        mapAnchorsHost={mapAnchorsHost.current!}\n                        viewPadding={viewPadding}\n                        viewPaddingChangeBehavior={viewPaddingChangeBehavior}\n                    >\n                        {children}\n                    </MapContainerReady>\n                )}\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): ReactNode {\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    if (!(\"keyboardEventTarget_\" in olMap)) {\n        throw new Error(\n            \"Internal error: failed to override keyboard event target. The property is no longer present.\"\n        );\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (olMap as any).keyboardEventTarget_ = 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                // eslint-disable-next-line @typescript-eslint/no-explicit-any\n                (olMap as any).keyboardEventTarget_ = undefined;\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-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { BoxProps, chakra } from \"@chakra-ui/react\";\nimport { createLogger, Resource } from \"@open-pioneer/core\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport type OlMap from \"ol/Map\";\nimport { Extent } from \"ol/extent\";\nimport { sourceId } from \"open-pioneer:source-info\";\nimport { ReactNode, useEffect, useMemo, useRef, useState } from \"react\";\nimport { MapModel, MapPadding } from \"../model/MapModel\";\nimport { MapContainerContextProvider, MapContainerContextType } from \"./MapContainerContext\";\nimport { MapModelProps, useMapModelValue } from \"./hooks/useMapModel\";\n\nconst LOG = createLogger(sourceId);\n\n/**\n * @group UI Components and Hooks\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     * @default \"application\"\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     * Arbitrary html properties that will be applied to the map container's _root_ element.\n     * This is the element that contains the map container and any UI elements (like map anchors, for example).\n     *\n     * Use these at your own risk since they may be overwritten by the map container root itself.\n     *\n     * Use cases: setting custom data attributes, registering custom event handlers, ...\n     */\n    rootProps?: BoxProps;\n\n    /**\n     * Arbitrary html properties that will be applied to the map container's element.\n     * This is the element that _renders_ the OpenLayers map.\n     *\n     * Use these at your own risk since they may be overwritten by the map container itself.\n     *\n     * Use cases: setting custom data attributes, registering custom event handlers, ...\n     */\n    containerProps?: BoxProps;\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 *\n * @group UI Components and Hooks\n */\nexport function MapContainer(props: MapContainerProps) {\n    const {\n        viewPadding,\n        viewPaddingChangeBehavior,\n        children,\n        role = \"application\",\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy,\n        rootProps,\n        containerProps\n    } = props;\n    const { containerProps: rootContainerProps } = useCommonComponentProps(\n        \"map-container-root\",\n        props\n    );\n    const mapContainer = useRef<HTMLDivElement>(null);\n    const mapAnchorsHost = useRef<HTMLDivElement>(null);\n    const map = useMapModelValue(props);\n\n    const [ready, setReady] = useState(false);\n\n    useEffect(() => {\n        // Mount the map into the DOM\n        if (mapContainer.current) {\n            const resource = registerMapTarget(map, mapContainer.current);\n            return () => resource?.destroy();\n        }\n    }, [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            \"--map-padding-top\": `${viewPadding?.top ?? 0}px`,\n            \"--map-padding-bottom\": `${viewPadding?.bottom ?? 0}px`,\n            \"--map-padding-left\": `${viewPadding?.left ?? 0}px`,\n            \"--map-padding-right\": `${viewPadding?.right ?? 0}px`\n        };\n    }, [viewPadding]);\n\n    return (\n        <chakra.div {...rootProps} {...rootContainerProps} css={styleProps}>\n            {/* Used by open layers to mount the map. This node receives the keyboard focus when interacting with the map. */}\n            <chakra.div\n                {...containerProps}\n                className=\"map-container\"\n                ref={mapContainer}\n                role={role}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledBy}\n                h=\"100%\"\n                w=\"100%\"\n                tabIndex={0}\n            />\n\n            {/* Contains user widgets (map anchors and raw children). These are separate from the map so they don't interfere with mouse/keyboard events. */}\n            <chakra.div ref={mapAnchorsHost} className=\"map-anchors\">\n                {ready && map && (\n                    <MapContainerReady\n                        olMap={map.olMap}\n                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n                        mapAnchorsHost={mapAnchorsHost.current!}\n                        viewPadding={viewPadding}\n                        viewPaddingChangeBehavior={viewPaddingChangeBehavior}\n                    >\n                        {children}\n                    </MapContainerReady>\n                )}\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): ReactNode {\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    if (!(\"keyboardEventTarget_\" in olMap)) {\n        throw new Error(\n            \"Internal error: failed to override keyboard event target. The property is no longer present.\"\n        );\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (olMap as any).keyboardEventTarget_ = 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                // eslint-disable-next-line @typescript-eslint/no-explicit-any\n                (olMap as any).keyboardEventTarget_ = undefined;\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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"}