@open-pioneer/legend 0.9.0 → 0.10.0-dev.20250324141112

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @open-pioneer/legend
 
+## 0.10.0-dev.20250324141112
+
+### Minor Changes
+
+- 193068a: Deprecate the `mapId` property on React components.
+  Use the `MapModel` directly instead to pass a reference to the map.
+
+    Example:
+
+    ```tsx
+    // Default map for entire component tree
+    <DefaultMapProvider map={mapModel}>
+        <Toc />
+    </DefaultMapProvider>
+
+    // Map for specific component
+    <Toc map={mapModel} />
+    ```
+
+### Patch Changes
+
+- 53231ae: Legend component now renders legends of layers that belong to a group layer
+- Updated dependencies [193068a]
+    - @open-pioneer/map@0.10.0-dev.20250324141112
+
 ## 0.9.0
 
 ### Minor Changes

package/Legend.js

@@ -33,7 +33,7 @@ function LegendList(props) {
 function LegendItem(props) {
   const { layer, showBaseLayers } = props;
   const isVisible = useReactiveSnapshot(() => layer.visible, [layer]);
-  const sublayers = useSublayers(layer);
+  const childLayers = useChildLayers(layer);
   if (!isVisible) {
     return void 0;
   }
@@ -41,10 +41,17 @@ function LegendItem(props) {
     return void 0;
   }
   const childItems = [];
-  if (sublayers?.length) {
-    sublayers.forEach((sublayer) => {
+  if (childLayers?.length) {
+    childLayers.forEach((childLayer) => {
       childItems.push(
-        /* @__PURE__ */ jsx(LegendItem, { layer: sublayer, showBaseLayers }, sublayer.id)
+        /* @__PURE__ */ jsx(
+          LegendItem,
+          {
+            layer: childLayer,
+            showBaseLayers
+          },
+          childLayer.id
+        )
       );
     });
   }
@@ -106,14 +113,14 @@ function useLayers(map) {
     return layers;
   }, [map]);
 }
-function useSublayers(layer) {
+function useChildLayers(layer) {
   return useReactiveSnapshot(() => {
-    const sublayers = layer.sublayers?.getSublayers({ sortByDisplayOrder: true });
-    if (!sublayers) {
+    const childLayers = layer.sublayers ? layer.sublayers.getSublayers({ sortByDisplayOrder: true }) : layer.layers?.getLayers({ sortByDisplayOrder: true });
+    if (!childLayers) {
       return void 0;
     }
-    sublayers.reverse();
-    return sublayers;
+    childLayers.reverse();
+    return childLayers;
   }, [layer]);
 }
 function useLegendAttributes(layer) {

package/Legend.js.map

@@ -1 +1 @@
-{"version":3,"file":"Legend.js","sources":["Legend.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { WarningTwoIcon } from \"@chakra-ui/icons\";\nimport { Box, Image, List, Text } from \"@open-pioneer/chakra-integration\";\nimport {\n    Layer,\n    AnyLayer,\n    MapModel,\n    Sublayer,\n    useMapModel,\n    MapModelProps,\n    isLayer\n} from \"@open-pioneer/map\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport { useReactiveSnapshot } from \"@open-pioneer/reactivity\";\nimport classNames from \"classnames\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { ComponentType, FC, ReactNode } from \"react\";\n\n/**\n * Properties of a legend item React component.\n */\nexport interface LegendItemComponentProps {\n    /**\n     * Related layer of the legend.\n     */\n    layer: AnyLayer;\n}\n\n/**\n * Attributes of the legend attribute that can be specified on a layer.\n *\n * To show a legend for the layer, provide an imageUrl to an image to show\n * or provide a React component that will be rendered as a legend.\n */\nexport interface LegendItemAttributes {\n    /**\n     * (Optional) URL to an image that will be shown as a legend for the layer.\n     */\n    imageUrl?: string;\n\n    /**\n     * (Optional) React component that will be shown as customized legend for the layer.\n     */\n    Component?: ComponentType<LegendItemComponentProps>;\n}\n\n/**\n * These are special properties for the Legend.\n */\nexport interface LegendProps extends CommonComponentProps, MapModelProps {\n    /**\n     * Specifies whether legend for active base layer is shown in the legend UI.\n     * Defaults to `false`.\n     */\n    showBaseLayers?: boolean;\n}\n\n/**\n * The `Legend` component can be used to display the legend of layers that are visible in the map.\n */\nexport const Legend: FC<LegendProps> = (props) => {\n    const { showBaseLayers = false } = props;\n    const { containerProps } = useCommonComponentProps(\"legend\", props);\n    const { map } = useMapModel(props);\n\n    return (\n        <Box {...containerProps}>\n            {map ? <LegendList map={map} showBaseLayers={showBaseLayers} /> : null}\n        </Box>\n    );\n};\n\nfunction LegendList(props: { map: MapModel; showBaseLayers: boolean }): ReactNode {\n    const { map, showBaseLayers } = props;\n\n    const layers = useLayers(map);\n    const legendListItems: ReactNode[] = layers.map((layer) => {\n        return (\n            <LegendItem key={layer.id} layer={layer} showBaseLayers={showBaseLayers}></LegendItem>\n        );\n    });\n\n    return (\n        <List\n            // Note: not using UnorderedList because it adds default margins\n            as=\"ul\"\n            className=\"legend-layer-list\"\n            listStyleType=\"none\"\n            spacing={2}\n        >\n            {legendListItems}\n        </List>\n    );\n}\n\nfunction LegendItem(props: { layer: AnyLayer; showBaseLayers: boolean }): ReactNode {\n    const { layer, showBaseLayers } = props;\n    const isVisible = useReactiveSnapshot(() => layer.visible, [layer]);\n    const sublayers = useSublayers(layer);\n\n    if (!isVisible) {\n        return undefined;\n    }\n\n    if (!showBaseLayers && isLayer(layer) && isBaseLayer(layer)) {\n        return undefined;\n    }\n\n    // legend items for all sublayers\n    const childItems: ReactNode[] = [];\n    if (sublayers?.length) {\n        sublayers.forEach((sublayer) => {\n            childItems.push(\n                <LegendItem key={sublayer.id} layer={sublayer} showBaseLayers={showBaseLayers} />\n            );\n        });\n    }\n\n    return (\n        <>\n            <LegendContent layer={layer} showBaseLayers={showBaseLayers} />\n            {childItems}\n        </>\n    );\n}\n\nfunction LegendContent(props: { layer: AnyLayer; showBaseLayers: boolean }) {\n    const intl = useIntl();\n\n    const { layer, showBaseLayers } = props;\n    const baseLayer = isBaseLayer(layer);\n    const legendAttributes = useLegendAttributes(layer);\n    const legendUrl = useReactiveSnapshot(() => layer.legend, [layer]);\n\n    let renderedComponent: ReactNode | undefined;\n    if (legendAttributes?.Component) {\n        renderedComponent = <legendAttributes.Component layer={layer} />;\n    } else if (legendAttributes?.imageUrl) {\n        renderedComponent = <LegendImage layer={layer} imageUrl={legendAttributes.imageUrl} />;\n    } else {\n        if (legendUrl) {\n            renderedComponent = <LegendImage layer={layer} imageUrl={legendUrl} />;\n        }\n    }\n\n    return renderedComponent ? (\n        <Box as=\"li\" className={classNames(\"legend-item\", `layer-${slug(layer.id)}`)}>\n            {showBaseLayers && baseLayer ? (\n                /* Render additional text, if layer is a configured basemap */\n                <Text as=\"b\">{intl.formatMessage({ id: \"basemapLabel\" })}</Text>\n            ) : null}\n            {renderedComponent}\n        </Box>\n    ) : undefined;\n}\n\nfunction LegendImage(props: { imageUrl: string; layer: AnyLayer }) {\n    const intl = useIntl();\n\n    const { layer, imageUrl } = props;\n\n    return (\n        <Box>\n            <Text>{layer.title}</Text>\n            <Image\n                maxW=\"none\"\n                maxH=\"none\"\n                src={imageUrl}\n                alt={intl.formatMessage({ id: \"altLabel\" }, { layerName: layer.title })}\n                className={\"legend-item__image\"}\n                fallbackStrategy={\"onError\"}\n                fallback={\n                    <Box>\n                        <Text>\n                            <WarningTwoIcon me={2} />\n                            {intl.formatMessage({ id: \"fallbackLabel\" })}\n                        </Text>\n                    </Box>\n                }\n            />\n        </Box>\n    );\n}\n\n/** Returns the top level operational layers in render order (topmost layer first). */\nfunction useLayers(map: MapModel): Layer[] {\n    return useReactiveSnapshot(() => {\n        const layers = map.layers.getLayers({ sortByDisplayOrder: true }) ?? [];\n        layers.reverse(); // render topmost layer first\n        return layers;\n    }, [map]);\n}\n\n/**\n * Returns the sublayers of the given layer (or undefined, if the sublayer cannot have any).\n * Sublayers are returned in render order (topmost sublayer first).\n */\nfunction useSublayers(layer: AnyLayer): Sublayer[] | undefined {\n    return useReactiveSnapshot(() => {\n        const sublayers = layer.sublayers?.getSublayers({ sortByDisplayOrder: true });\n        if (!sublayers) {\n            return undefined;\n        }\n\n        sublayers.reverse(); // render topmost layer first\n        return sublayers;\n    }, [layer]);\n}\n\nfunction useLegendAttributes(layer: AnyLayer): LegendItemAttributes | undefined {\n    return useReactiveSnapshot(\n        () => layer.attributes.legend as LegendItemAttributes | undefined,\n        [layer]\n    );\n}\n\nfunction isBaseLayer(layer: AnyLayer) {\n    return !(\"parentLayer\" in layer) && layer.isBaseLayer;\n}\n\nfunction slug(id: string) {\n    return id\n        .toLowerCase()\n        .replace(/[^a-z0-9 -]/g, \"\")\n        .replace(/\\s+/g, \"-\")\n        .replace(/-+/g, \"-\");\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Legend.js","sources":["Legend.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { WarningTwoIcon } from \"@chakra-ui/icons\";\nimport { Box, Image, List, Text } from \"@open-pioneer/chakra-integration\";\nimport { Layer, AnyLayer, MapModel, useMapModel, MapModelProps, isLayer } from \"@open-pioneer/map\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport { useReactiveSnapshot } from \"@open-pioneer/reactivity\";\nimport classNames from \"classnames\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { ComponentType, FC, ReactNode } from \"react\";\n\n/**\n * Properties of a legend item React component.\n */\nexport interface LegendItemComponentProps {\n    /**\n     * Related layer of the legend.\n     */\n    layer: AnyLayer;\n}\n\n/**\n * Attributes of the legend attribute that can be specified on a layer.\n *\n * To show a legend for the layer, provide an imageUrl to an image to show\n * or provide a React component that will be rendered as a legend.\n */\nexport interface LegendItemAttributes {\n    /**\n     * (Optional) URL to an image that will be shown as a legend for the layer.\n     */\n    imageUrl?: string;\n\n    /**\n     * (Optional) React component that will be shown as customized legend for the layer.\n     */\n    Component?: ComponentType<LegendItemComponentProps>;\n}\n\n/**\n * These are special properties for the Legend.\n */\nexport interface LegendProps extends CommonComponentProps, MapModelProps {\n    /**\n     * Specifies whether legend for active base layer is shown in the legend UI.\n     * Defaults to `false`.\n     */\n    showBaseLayers?: boolean;\n}\n\n/**\n * The `Legend` component can be used to display the legend of layers that are visible in the map.\n */\nexport const Legend: FC<LegendProps> = (props) => {\n    const { showBaseLayers = false } = props;\n    const { containerProps } = useCommonComponentProps(\"legend\", props);\n    const { map } = useMapModel(props);\n\n    return (\n        <Box {...containerProps}>\n            {map ? <LegendList map={map} showBaseLayers={showBaseLayers} /> : null}\n        </Box>\n    );\n};\n\nfunction LegendList(props: { map: MapModel; showBaseLayers: boolean }): ReactNode {\n    const { map, showBaseLayers } = props;\n\n    const layers = useLayers(map);\n    const legendListItems: ReactNode[] = layers.map((layer) => {\n        return (\n            <LegendItem key={layer.id} layer={layer} showBaseLayers={showBaseLayers}></LegendItem>\n        );\n    });\n\n    return (\n        <List\n            // Note: not using UnorderedList because it adds default margins\n            as=\"ul\"\n            className=\"legend-layer-list\"\n            listStyleType=\"none\"\n            spacing={2}\n        >\n            {legendListItems}\n        </List>\n    );\n}\n\nfunction LegendItem(props: { layer: AnyLayer; showBaseLayers: boolean }): ReactNode {\n    const { layer, showBaseLayers } = props;\n    const isVisible = useReactiveSnapshot(() => layer.visible, [layer]);\n    const childLayers = useChildLayers(layer);\n\n    if (!isVisible) {\n        return undefined;\n    }\n\n    if (!showBaseLayers && isLayer(layer) && isBaseLayer(layer)) {\n        return undefined;\n    }\n\n    // legend items for all child layers (sublayers or layers in a group)\n    const childItems: ReactNode[] = [];\n    if (childLayers?.length) {\n        childLayers.forEach((childLayer) => {\n            childItems.push(\n                <LegendItem\n                    key={childLayer.id}\n                    layer={childLayer}\n                    showBaseLayers={showBaseLayers}\n                />\n            );\n        });\n    }\n\n    return (\n        <>\n            <LegendContent layer={layer} showBaseLayers={showBaseLayers} />\n            {childItems}\n        </>\n    );\n}\n\nfunction LegendContent(props: { layer: AnyLayer; showBaseLayers: boolean }) {\n    const intl = useIntl();\n\n    const { layer, showBaseLayers } = props;\n    const baseLayer = isBaseLayer(layer);\n    const legendAttributes = useLegendAttributes(layer);\n    const legendUrl = useReactiveSnapshot(() => layer.legend, [layer]);\n\n    let renderedComponent: ReactNode | undefined;\n    if (legendAttributes?.Component) {\n        renderedComponent = <legendAttributes.Component layer={layer} />;\n    } else if (legendAttributes?.imageUrl) {\n        renderedComponent = <LegendImage layer={layer} imageUrl={legendAttributes.imageUrl} />;\n    } else {\n        if (legendUrl) {\n            renderedComponent = <LegendImage layer={layer} imageUrl={legendUrl} />;\n        }\n    }\n\n    return renderedComponent ? (\n        <Box as=\"li\" className={classNames(\"legend-item\", `layer-${slug(layer.id)}`)}>\n            {showBaseLayers && baseLayer ? (\n                /* Render additional text, if layer is a configured basemap */\n                <Text as=\"b\">{intl.formatMessage({ id: \"basemapLabel\" })}</Text>\n            ) : null}\n            {renderedComponent}\n        </Box>\n    ) : undefined;\n}\n\nfunction LegendImage(props: { imageUrl: string; layer: AnyLayer }) {\n    const intl = useIntl();\n\n    const { layer, imageUrl } = props;\n\n    return (\n        <Box>\n            <Text>{layer.title}</Text>\n            <Image\n                maxW=\"none\"\n                maxH=\"none\"\n                src={imageUrl}\n                alt={intl.formatMessage({ id: \"altLabel\" }, { layerName: layer.title })}\n                className={\"legend-item__image\"}\n                fallbackStrategy={\"onError\"}\n                fallback={\n                    <Box>\n                        <Text>\n                            <WarningTwoIcon me={2} />\n                            {intl.formatMessage({ id: \"fallbackLabel\" })}\n                        </Text>\n                    </Box>\n                }\n            />\n        </Box>\n    );\n}\n\n/** Returns the top level operational layers in render order (topmost layer first). */\nfunction useLayers(map: MapModel): Layer[] {\n    return useReactiveSnapshot(() => {\n        const layers = map.layers.getLayers({ sortByDisplayOrder: true }) ?? [];\n        layers.reverse(); // render topmost layer first\n        return layers;\n    }, [map]);\n}\n\n/**\n * Returns the child layers (sublayers or layers belonging to a GroupLayer) of the given layer\n * (or undefined, if the child layer cannot have any).\n * Layers are returned in render order (topmost layer first).\n */\nfunction useChildLayers(layer: AnyLayer): AnyLayer[] | undefined {\n    return useReactiveSnapshot(() => {\n        const childLayers = layer.sublayers\n            ? layer.sublayers.getSublayers({ sortByDisplayOrder: true })\n            : layer.layers?.getLayers({ sortByDisplayOrder: true });\n        if (!childLayers) {\n            return undefined;\n        }\n\n        childLayers.reverse(); // render topmost layer first\n        return childLayers;\n    }, [layer]);\n}\n\nfunction useLegendAttributes(layer: AnyLayer): LegendItemAttributes | undefined {\n    return useReactiveSnapshot(\n        () => layer.attributes.legend as LegendItemAttributes | undefined,\n        [layer]\n    );\n}\n\nfunction isBaseLayer(layer: AnyLayer) {\n    return !(\"parentLayer\" in layer) && layer.isBaseLayer;\n}\n\nfunction slug(id: string) {\n    return id\n        .toLowerCase()\n        .replace(/[^a-z0-9 -]/g, \"\")\n        .replace(/\\s+/g, \"-\")\n        .replace(/-+/g, \"-\");\n}\n"],"names":[],"mappings":";;;;;;;;;AAqDa,MAAA,MAAA,GAA0B,CAAC,KAAU,KAAA;AAC9C,EAAM,MAAA,EAAE,cAAiB,GAAA,KAAA,EAAU,GAAA,KAAA;AACnC,EAAA,MAAM,EAAE,cAAA,EAAmB,GAAA,uBAAA,CAAwB,UAAU,KAAK,CAAA;AAClE,EAAA,MAAM,EAAE,GAAA,EAAQ,GAAA,WAAA,CAAY,KAAK,CAAA;AAEjC,EACI,uBAAA,GAAA,CAAC,GAAK,EAAA,EAAA,GAAG,cACJ,EAAA,QAAA,EAAA,GAAA,uBAAO,UAAW,EAAA,EAAA,GAAA,EAAU,cAAgC,EAAA,CAAA,GAAK,IACtE,EAAA,CAAA;AAER;AAEA,SAAS,WAAW,KAA8D,EAAA;AAC9E,EAAM,MAAA,EAAE,GAAK,EAAA,cAAA,EAAmB,GAAA,KAAA;AAEhC,EAAM,MAAA,MAAA,GAAS,UAAU,GAAG,CAAA;AAC5B,EAAA,MAAM,eAA+B,GAAA,MAAA,CAAO,GAAI,CAAA,CAAC,KAAU,KAAA;AACvD,IAAA,uBACK,GAAA,CAAA,UAAA,EAAA,EAA0B,KAAc,EAAA,cAAA,EAAA,EAAxB,MAAM,EAAkD,CAAA;AAAA,GAEhF,CAAA;AAED,EACI,uBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MAEG,EAAG,EAAA,IAAA;AAAA,MACH,SAAU,EAAA,mBAAA;AAAA,MACV,aAAc,EAAA,MAAA;AAAA,MACd,OAAS,EAAA,CAAA;AAAA,MAER,QAAA,EAAA;AAAA;AAAA,GACL;AAER;AAEA,SAAS,WAAW,KAAgE,EAAA;AAChF,EAAM,MAAA,EAAE,KAAO,EAAA,cAAA,EAAmB,GAAA,KAAA;AAClC,EAAA,MAAM,YAAY,mBAAoB,CAAA,MAAM,MAAM,OAAS,EAAA,CAAC,KAAK,CAAC,CAAA;AAClE,EAAM,MAAA,WAAA,GAAc,eAAe,KAAK,CAAA;AAExC,EAAA,IAAI,CAAC,SAAW,EAAA;AACZ,IAAO,OAAA,MAAA;AAAA;AAGX,EAAA,IAAI,CAAC,cAAkB,IAAA,OAAA,CAAQ,KAAK,CAAK,IAAA,WAAA,CAAY,KAAK,CAAG,EAAA;AACzD,IAAO,OAAA,MAAA;AAAA;AAIX,EAAA,MAAM,aAA0B,EAAC;AACjC,EAAA,IAAI,aAAa,MAAQ,EAAA;AACrB,IAAY,WAAA,CAAA,OAAA,CAAQ,CAAC,UAAe,KAAA;AAChC,MAAW,UAAA,CAAA,IAAA;AAAA,wBACP,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YAEG,KAAO,EAAA,UAAA;AAAA,YACP;AAAA,WAAA;AAAA,UAFK,UAAW,CAAA;AAAA;AAGpB,OACJ;AAAA,KACH,CAAA;AAAA;AAGL,EAAA,uBAEQ,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,aAAA,EAAA,EAAc,OAAc,cAAgC,EAAA,CAAA;AAAA,IAC5D;AAAA,GACL,EAAA,CAAA;AAER;AAEA,SAAS,cAAc,KAAqD,EAAA;AACxE,EAAA,MAAM,OAAO,OAAQ,EAAA;AAErB,EAAM,MAAA,EAAE,KAAO,EAAA,cAAA,EAAmB,GAAA,KAAA;AAClC,EAAM,MAAA,SAAA,GAAY,YAAY,KAAK,CAAA;AACnC,EAAM,MAAA,gBAAA,GAAmB,oBAAoB,KAAK,CAAA;AAClD,EAAA,MAAM,YAAY,mBAAoB,CAAA,MAAM,MAAM,MAAQ,EAAA,CAAC,KAAK,CAAC,CAAA;AAEjE,EAAI,IAAA,iBAAA;AACJ,EAAA,IAAI,kBAAkB,SAAW,EAAA;AAC7B,IAAA,iBAAA,mBAAqB,GAAA,CAAA,gBAAA,CAAiB,SAAjB,EAAA,EAA2B,KAAc,EAAA,CAAA;AAAA,GAClE,MAAA,IAAW,kBAAkB,QAAU,EAAA;AACnC,IAAA,iBAAA,mBAAqB,GAAA,CAAA,WAAA,EAAA,EAAY,KAAc,EAAA,QAAA,EAAU,iBAAiB,QAAU,EAAA,CAAA;AAAA,GACjF,MAAA;AACH,IAAA,IAAI,SAAW,EAAA;AACX,MAAA,iBAAA,mBAAqB,GAAA,CAAA,WAAA,EAAA,EAAY,KAAc,EAAA,QAAA,EAAU,SAAW,EAAA,CAAA;AAAA;AACxE;AAGJ,EAAA,OAAO,iBACH,mBAAA,IAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAG,MAAK,SAAW,EAAA,UAAA,CAAW,aAAe,EAAA,CAAA,MAAA,EAAS,IAAK,CAAA,KAAA,CAAM,EAAE,CAAC,EAAE,CACtE,EAAA,QAAA,EAAA;AAAA,IAAkB,cAAA,IAAA,SAAA;AAAA;AAAA,sBAEf,GAAA,CAAC,IAAK,EAAA,EAAA,EAAA,EAAG,GAAK,EAAA,QAAA,EAAA,IAAA,CAAK,cAAc,EAAE,EAAA,EAAI,cAAe,EAAC,CAAE,EAAA;AAAA,QACzD,IAAA;AAAA,IACH;AAAA,GAAA,EACL,CACA,GAAA,MAAA;AACR;AAEA,SAAS,YAAY,KAA8C,EAAA;AAC/D,EAAA,MAAM,OAAO,OAAQ,EAAA;AAErB,EAAM,MAAA,EAAE,KAAO,EAAA,QAAA,EAAa,GAAA,KAAA;AAE5B,EAAA,4BACK,GACG,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,IAAA,EAAA,EAAM,gBAAM,KAAM,EAAA,CAAA;AAAA,oBACnB,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACG,IAAK,EAAA,MAAA;AAAA,QACL,IAAK,EAAA,MAAA;AAAA,QACL,GAAK,EAAA,QAAA;AAAA,QACL,GAAA,EAAK,IAAK,CAAA,aAAA,CAAc,EAAE,EAAA,EAAI,UAAW,EAAA,EAAG,EAAE,SAAA,EAAW,KAAM,CAAA,KAAA,EAAO,CAAA;AAAA,QACtE,SAAW,EAAA,oBAAA;AAAA,QACX,gBAAkB,EAAA,SAAA;AAAA,QAClB,QACI,kBAAA,GAAA,CAAC,GACG,EAAA,EAAA,QAAA,kBAAA,IAAA,CAAC,IACG,EAAA,EAAA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,cAAA,EAAA,EAAe,IAAI,CAAG,EAAA,CAAA;AAAA,UACtB,IAAK,CAAA,aAAA,CAAc,EAAE,EAAA,EAAI,iBAAiB;AAAA,SAAA,EAC/C,CACJ,EAAA;AAAA;AAAA;AAER,GACJ,EAAA,CAAA;AAER;AAGA,SAAS,UAAU,GAAwB,EAAA;AACvC,EAAA,OAAO,oBAAoB,MAAM;AAC7B,IAAM,MAAA,MAAA,GAAS,IAAI,MAAO,CAAA,SAAA,CAAU,EAAE,kBAAoB,EAAA,IAAA,EAAM,CAAA,IAAK,EAAC;AACtE,IAAA,MAAA,CAAO,OAAQ,EAAA;AACf,IAAO,OAAA,MAAA;AAAA,GACX,EAAG,CAAC,GAAG,CAAC,CAAA;AACZ;AAOA,SAAS,eAAe,KAAyC,EAAA;AAC7D,EAAA,OAAO,oBAAoB,MAAM;AAC7B,IAAA,MAAM,cAAc,KAAM,CAAA,SAAA,GACpB,KAAM,CAAA,SAAA,CAAU,aAAa,EAAE,kBAAA,EAAoB,IAAK,EAAC,IACzD,KAAM,CAAA,MAAA,EAAQ,UAAU,EAAE,kBAAA,EAAoB,MAAM,CAAA;AAC1D,IAAA,IAAI,CAAC,WAAa,EAAA;AACd,MAAO,OAAA,MAAA;AAAA;AAGX,IAAA,WAAA,CAAY,OAAQ,EAAA;AACpB,IAAO,OAAA,WAAA;AAAA,GACX,EAAG,CAAC,KAAK,CAAC,CAAA;AACd;AAEA,SAAS,oBAAoB,KAAmD,EAAA;AAC5E,EAAO,OAAA,mBAAA;AAAA,IACH,MAAM,MAAM,UAAW,CAAA,MAAA;AAAA,IACvB,CAAC,KAAK;AAAA,GACV;AACJ;AAEA,SAAS,YAAY,KAAiB,EAAA;AAClC,EAAO,OAAA,EAAE,aAAiB,IAAA,KAAA,CAAA,IAAU,KAAM,CAAA,WAAA;AAC9C;AAEA,SAAS,KAAK,EAAY,EAAA;AACtB,EAAA,OAAO,EACF,CAAA,WAAA,EACA,CAAA,OAAA,CAAQ,cAAgB,EAAA,EAAE,CAC1B,CAAA,OAAA,CAAQ,MAAQ,EAAA,GAAG,CACnB,CAAA,OAAA,CAAQ,OAAO,GAAG,CAAA;AAC3B;;;;"}

package/README.md

@@ -6,10 +6,10 @@ The legend UI shows entries for layers that are currently visible (enabled) in t
 
 ## Usage
 
-To add the component to your app, insert the following snippet with a reference to a map ID:
+To add the component to your app, insert the following snippet (with a reference to a map):
 
 ```jsx
-<Legend mapId="map_id" />
+<Legend map={map} />
 ```
 
 ### Configuring legend content for layers
@@ -75,7 +75,7 @@ By default, the legend for the active basemap is not shown.
 To show the legend for the active basemap, set the `showBaseLayers` prop to `true`:
 
 ```jsx
-<Legend mapId="map_id" showBaseLayers={true} />
+<Legend map={map} showBaseLayers={true} />
 ```
 
 ## License

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@open-pioneer/legend",
-  "version": "0.9.0",
+  "version": "0.10.0-dev.20250324141112",
   "description": "This package provides a legend UI component that allows a user to see legend information for layers in the map.",
   "keywords": [
     "open-pioneer-trails"
@@ -22,7 +22,7 @@
     "ol": "^10.4.0",
     "react": "^19.0.0",
     "@open-pioneer/reactivity": "^3.0.0",
-    "@open-pioneer/map": "^0.9.0"
+    "@open-pioneer/map": "^0.10.0-dev.20250324141112"
   },
   "exports": {
     "./package.json": "./package.json",