@dynatrace/strato-geo 0.9.25 → 0.10.2

package/esm/index.js

@@ -3,12 +3,14 @@ import { MapView } from "./map/MapView.js";
 import { ConnectionLayer } from "./map/slots/ConnectionLayer.js";
 import { DotLayer } from "./map/slots/DotLayer.js";
 import { BubbleLayer } from "./map/slots/BubbleLayer.js";
+import { BaseLayer } from "./map/slots/BaseLayer.js";
 import { ChoroplethLayer } from "./map/slots/ChoroplethLayer.js";
 import { Tooltip, TooltipAtoms } from "./map/slots/Tooltip.js";
 import { SequentialLegend } from "./map/slots/SequentialLegend.js";
 import { ThresholdLegend } from "./map/slots/ThresholdLegend.js";
 import { CategoricalLegend } from "./map/slots/CategoricalLegend.js";
 export {
+  BaseLayer,
   BubbleLayer,
   CategoricalLegend,
   ChartInteractions,

package/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "sourcesContent": ["export { ChartInteractions } from './map/slots/ChartInteractions.js';\nexport { MapView } from './map/MapView.js';\nexport { ConnectionLayer } from './map/slots/ConnectionLayer.js';\nexport { DotLayer } from './map/slots/DotLayer.js';\nexport { BubbleLayer } from './map/slots/BubbleLayer.js';\nexport { ChoroplethLayer } from './map/slots/ChoroplethLayer.js';\nexport { Tooltip, TooltipAtoms } from './map/slots/Tooltip.js';\n\nexport type {\n  MapViewProps,\n  MapViewBaseProps,\n  MapViewUncontrolledProps,\n  MapViewControlledProps,\n  DisallowAll,\n  ViewState,\n  MapViewRef,\n} from './map/types/map-view.js';\n\nexport type {\n  Connection,\n  ConnectionLayerProps,\n  CurvedLine,\n} from './map/types/connection-layer.js';\n\nexport type {\n  DotLayerBaseProps,\n  DotLayerProps,\n} from './map/types/dot-layer.js';\n\nexport type {\n  BubbleLayerBaseProps,\n  BubbleLayerProps,\n  ScaleNoneProps,\n  ScaleRadiusProps,\n} from './map/types/bubble-layer.js';\n\nexport type {\n  ChoroplethLayerBaseProps,\n  ChoroplethLayerProps,\n} from './map/types/choropleth-layer.js';\n\nexport type { Location } from './map/types/location.js';\nexport type { MapShape } from './map/types/shapes.js';\nexport type { ChartInteractionsProps } from './map/types/toolbar.js';\nexport type { ErrorStateSlotProps } from './map/slots/states/ErrorStateSlot.js';\n\nexport type {\n  BaseLegendProps,\n  CategoricalLegendProps,\n  SequentialLegendProps,\n  ThresholdLegendProps,\n} from './map/types/legend.js';\n\nexport type {\n  LocationColorProps,\n  LegendColorLayerProps,\n  ChoroplethCustomColorProps,\n} from './map/types/coloring.js';\n\nexport { SequentialLegend } from './map/slots/SequentialLegend.js';\nexport { ThresholdLegend } from './map/slots/ThresholdLegend.js';\nexport { CategoricalLegend } from './map/slots/CategoricalLegend.js';\n\nexport type {\n  BubbleLayerTooltipHandler,\n  BubbleLayerTooltipHandlerProps,\n  DotLayerTooltipHandler,\n  DotLayerTooltipHandlerProps,\n  ConnectionLayerTooltipHandler,\n  ConnectionLayerTooltipHandlerProps,\n  ChoroplethLayerTooltipHandlerProps,\n  ChoroplethLayerTooltipHandler,\n  ChartTooltip,\n  DotLayerTooltipData,\n  BubbleLayerTooltipData,\n  ConnectionLayerTooltipData,\n  ChoroplethLayerTooltipData,\n} from './map/types/tooltip.js';\n"],
-  "mappings": "AAAA,SAAS,yBAAyB;AAClC,SAAS,eAAe;AACxB,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,SAAS,oBAAoB;AAqDtC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,yBAAyB;",
+  "sourcesContent": ["export { ChartInteractions } from './map/slots/ChartInteractions.js';\nexport { MapView } from './map/MapView.js';\nexport { ConnectionLayer } from './map/slots/ConnectionLayer.js';\nexport { DotLayer } from './map/slots/DotLayer.js';\nexport { BubbleLayer } from './map/slots/BubbleLayer.js';\nexport { BaseLayer } from './map/slots/BaseLayer.js';\nexport { ChoroplethLayer } from './map/slots/ChoroplethLayer.js';\nexport { Tooltip, TooltipAtoms } from './map/slots/Tooltip.js';\n\nexport type {\n  MapViewProps,\n  MapViewBaseProps,\n  MapViewUncontrolledProps,\n  MapViewControlledProps,\n  DisallowAll,\n  ViewState,\n  MapViewRef,\n} from './map/types/map-view.js';\n\nexport type { BaseLayerProps } from './map/types/base-layer.js';\n\nexport type {\n  Connection,\n  ConnectionLayerProps,\n  CurvedLine,\n} from './map/types/connection-layer.js';\n\nexport type {\n  DotLayerBaseProps,\n  DotLayerProps,\n} from './map/types/dot-layer.js';\n\nexport type {\n  BubbleLayerBaseProps,\n  BubbleLayerProps,\n  ScaleNoneProps,\n  ScaleRadiusProps,\n} from './map/types/bubble-layer.js';\n\nexport type {\n  ChoroplethLayerBaseProps,\n  ChoroplethLayerProps,\n} from './map/types/choropleth-layer.js';\n\nexport type { Location } from './map/types/location.js';\nexport type { MapShape } from './map/types/shapes.js';\nexport type { ChartInteractionsProps } from './map/types/toolbar.js';\nexport type { ErrorStateSlotProps } from './map/slots/states/ErrorStateSlot.js';\n\nexport type {\n  BaseLegendProps,\n  CategoricalLegendProps,\n  SequentialLegendProps,\n  ThresholdLegendProps,\n} from './map/types/legend.js';\n\nexport type {\n  LocationColorProps,\n  LegendColorLayerProps,\n  ChoroplethCustomColorProps,\n} from './map/types/coloring.js';\n\nexport { SequentialLegend } from './map/slots/SequentialLegend.js';\nexport { ThresholdLegend } from './map/slots/ThresholdLegend.js';\nexport { CategoricalLegend } from './map/slots/CategoricalLegend.js';\n\nexport type {\n  BubbleLayerTooltipHandler,\n  BubbleLayerTooltipHandlerProps,\n  DotLayerTooltipHandler,\n  DotLayerTooltipHandlerProps,\n  ConnectionLayerTooltipHandler,\n  ConnectionLayerTooltipHandlerProps,\n  ChoroplethLayerTooltipHandlerProps,\n  ChoroplethLayerTooltipHandler,\n  ChartTooltip,\n  DotLayerTooltipData,\n  BubbleLayerTooltipData,\n  ConnectionLayerTooltipData,\n  ChoroplethLayerTooltipData,\n} from './map/types/tooltip.js';\n"],
+  "mappings": "AAAA,SAAS,yBAAyB;AAClC,SAAS,eAAe;AACxB,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,SAAS,oBAAoB;AAuDtC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,yBAAyB;",
   "names": []
 }

package/esm/map/MapView.js

@@ -12,8 +12,8 @@ import { MapLegendRenderer } from "./components/legend/MapLegendRenderer.js";
 import { MapContent } from "./components/MapContent.js";
 import { DEFAULT_LEGEND_SIZES, DEFAULT_MAP_HEIGHT } from "./constants.js";
 import { LayerIdsContext } from "./contexts/layer-ids.context.js";
+import { MapBaseLayerFeaturesContext } from "./contexts/map-base-layer.context.js";
 import { MapConfigurationContext } from "./contexts/map-configuration.context.js";
-import { MapCountryCodeContext } from "./contexts/map-country-code.context.js";
 import { MapDataBoundingBoxContext } from "./contexts/map-data-bounding-box.context.js";
 import { MapRawDataContext } from "./contexts/map-raw-data.context.js";
 import { buildAndDownloadCsv } from "./functions/build-and-download-csv.js";
@@ -22,7 +22,7 @@ import { getDataLayersBoundingBox } from "./functions/get-data-layers-bounding-b
 import { getMapStatesTemplates } from "./functions/get-map-states-template.js";
 import { iterateConfigSlots } from "./functions/iterate-config-slots.js";
 import { setLayersId } from "./functions/set-layers-id.js";
-import { useMapSettings } from "./hooks/use-map-settings.js";
+import { useLoadMapBaseLayer } from "./hooks/use-load-map-base-layer.js";
 import { useAutoLegendRefresh } from "./hooks/useAutoLegendRefresh.js";
 import { ColorScaleProvider } from "./providers/color-scale.provider.js";
 import { LayerColorStrategyProvider } from "./providers/layer-color-strategy.provider.js";
@@ -58,12 +58,8 @@ const _MapView = forwardRef(
     const legendPosition = config.legend?.position;
     const legendRatio = config.legend?.ratio;
     const legendOnRatioChange = config.legend?.onRatioChange;
+    const { isMapEnabled, isLoading, baseFeatureCollection, error } = useLoadMapBaseLayer(config.baseLayer);
     const { errorState } = getMapStatesTemplates(children);
-    const {
-      isLoading: isLoadingSettings,
-      isMapEnabled,
-      countryCode
-    } = useMapSettings();
     const chartHeight = coerceSizeValue(props.height) || DEFAULT_MAP_HEIGHT;
     const containerStyles = { width: "100%", ...costumerStyle };
     const chartLayoutRef = useAutoLegendRefresh(layersData);
@@ -74,15 +70,16 @@ const _MapView = forwardRef(
         className: customerClassNames,
         "data-testid": "mapview-container"
       },
-      !isLoadingSettings && !isMapEnabled ? /* @__PURE__ */ React.createElement(DisabledState, { height: chartHeight }) : /* @__PURE__ */ React.createElement(MapCountryCodeContext.Provider, { value: countryCode }, /* @__PURE__ */ React.createElement(MapConfigurationContext.Provider, { value: config }, /* @__PURE__ */ React.createElement(LayerIdsContext.Provider, { value: layerIds }, /* @__PURE__ */ React.createElement(MapRawDataContext.Provider, { value: layersData }, /* @__PURE__ */ React.createElement(MapDataBoundingBoxContext.Provider, { value: dataLayersBBox }, /* @__PURE__ */ React.createElement(MapStoreProvider, null, /* @__PURE__ */ React.createElement(ColorScaleProvider, null, /* @__PURE__ */ React.createElement(LayerColorStrategyProvider, null, /* @__PURE__ */ React.createElement(
+      // TODO: Error boundaries global fix needed - this error state only purpose is to make map not rendering when there error in response
+      !isLoading && !isMapEnabled || error ? /* @__PURE__ */ React.createElement(DisabledState, { height: chartHeight }) : /* @__PURE__ */ React.createElement(MapBaseLayerFeaturesContext.Provider, { value: baseFeatureCollection }, /* @__PURE__ */ React.createElement(MapConfigurationContext.Provider, { value: config }, /* @__PURE__ */ React.createElement(LayerIdsContext.Provider, { value: layerIds }, /* @__PURE__ */ React.createElement(MapRawDataContext.Provider, { value: layersData }, /* @__PURE__ */ React.createElement(MapDataBoundingBoxContext.Provider, { value: dataLayersBBox }, /* @__PURE__ */ React.createElement(MapStoreProvider, null, /* @__PURE__ */ React.createElement(ColorScaleProvider, null, /* @__PURE__ */ React.createElement(LayerColorStrategyProvider, null, /* @__PURE__ */ React.createElement(
         ChartLayout,
         {
           ref: chartLayoutRef,
           chartHeight,
           errorState,
-          showLoader: loading || isLoadingSettings
+          showLoader: loading || isLoading
         },
-        /* @__PURE__ */ React.createElement(ChartLayout.Graph, null, !isLoadingSettings && /* @__PURE__ */ React.createElement(MapContent, { ref: rootRef, ...remaining }, parsedChildren)),
+        /* @__PURE__ */ React.createElement(ChartLayout.Graph, null, !isLoading && /* @__PURE__ */ React.createElement(MapContent, { ref: rootRef, ...remaining }, parsedChildren)),
         !isLegendHidden && /* @__PURE__ */ React.createElement(
           ChartLayout.Legend,
           {

package/esm/map/MapView.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/map/MapView.tsx"],
-  "sourcesContent": ["import React, {\n  forwardRef,\n  type PropsWithChildren,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport {\n  _ChartLayout as ChartLayout,\n  _coerceSizeValue as coerceSizeValue,\n} from '@dynatrace/strato-components-preview/charts';\nimport { useMergeRefs } from '@dynatrace/strato-components-preview/core';\n\nimport { MapLegendRenderer } from './components/legend/MapLegendRenderer.js';\nimport { MapContent } from './components/MapContent.js';\nimport { DEFAULT_LEGEND_SIZES, DEFAULT_MAP_HEIGHT } from './constants.js';\nimport { LayerIdsContext } from './contexts/layer-ids.context.js';\nimport { MapConfigurationContext } from './contexts/map-configuration.context.js';\nimport { MapCountryCodeContext } from './contexts/map-country-code.context.js';\nimport { MapDataBoundingBoxContext } from './contexts/map-data-bounding-box.context.js';\nimport { MapRawDataContext } from './contexts/map-raw-data.context.js';\nimport { buildAndDownloadCsv } from './functions/build-and-download-csv.js';\nimport { extractLayersData } from './functions/extract-layers-data.js';\nimport { getDataLayersBoundingBox } from './functions/get-data-layers-bounding-box.js';\nimport { getMapStatesTemplates } from './functions/get-map-states-template.js';\nimport { iterateConfigSlots } from './functions/iterate-config-slots.js';\nimport { setLayersId } from './functions/set-layers-id.js';\nimport { useMapSettings } from './hooks/use-map-settings.js';\nimport { useAutoLegendRefresh } from './hooks/useAutoLegendRefresh.js';\nimport { ColorScaleProvider } from './providers/color-scale.provider.js';\nimport { LayerColorStrategyProvider } from './providers/layer-color-strategy.provider.js';\nimport { DisabledState } from './slots/states/DisabledState.js';\nimport { ErrorStateSlot } from './slots/states/ErrorStateSlot.js';\nimport { MapStoreProvider } from './store/map-store.provider.js';\n// eslint-disable-next-line no-restricted-imports\nimport './styles/react-mapgl-styles.css';\nimport type { MapViewProps, MapViewRef } from './types/map-view.js';\n\n/**\n * MapView Component\n */\nconst _MapView = forwardRef<MapViewRef, PropsWithChildren<MapViewProps>>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      loading = false,\n      style: costumerStyle,\n      className: customerClassNames,\n      ...remaining\n    } = props;\n    const { layerIds, parsedChildren } = setLayersId(children);\n\n    const layersData = extractLayersData(parsedChildren);\n    const dataLayersBBox = getDataLayersBoundingBox(children);\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const rootRef = useMergeRefs<MapViewRef | HTMLDivElement>([\n      forwardedRef,\n      containerRef,\n    ]);\n\n    useImperativeHandle(forwardedRef, () => ({\n      element: containerRef.current,\n      downloadData: () => {\n        buildAndDownloadCsv(layersData);\n      },\n    }));\n\n    const config = iterateConfigSlots(children);\n\n    const isLegendHidden = !config.legend || !!config.legend.hidden;\n    const legendPosition = config.legend?.position;\n    const legendRatio = config.legend?.ratio;\n    const legendOnRatioChange = config.legend?.onRatioChange;\n\n    const { errorState } = getMapStatesTemplates(children);\n\n    const {\n      isLoading: isLoadingSettings,\n      isMapEnabled,\n      countryCode,\n    } = useMapSettings();\n\n    const chartHeight = coerceSizeValue(props.height) || DEFAULT_MAP_HEIGHT;\n\n    const containerStyles = { width: '100%', ...costumerStyle };\n\n    const chartLayoutRef = useAutoLegendRefresh(layersData);\n\n    return (\n      <div\n        style={containerStyles}\n        className={customerClassNames}\n        data-testid=\"mapview-container\"\n      >\n        {!isLoadingSettings && !isMapEnabled ? (\n          <DisabledState height={chartHeight} />\n        ) : (\n          <MapCountryCodeContext.Provider value={countryCode}>\n            <MapConfigurationContext.Provider value={config}>\n              <LayerIdsContext.Provider value={layerIds}>\n                <MapRawDataContext.Provider value={layersData}>\n                  <MapDataBoundingBoxContext.Provider value={dataLayersBBox}>\n                    <MapStoreProvider>\n                      <ColorScaleProvider>\n                        <LayerColorStrategyProvider>\n                          <ChartLayout\n                            ref={chartLayoutRef}\n                            chartHeight={chartHeight}\n                            errorState={errorState}\n                            showLoader={loading || isLoadingSettings}\n                          >\n                            <ChartLayout.Graph>\n                              {!isLoadingSettings && (\n                                <MapContent ref={rootRef} {...remaining}>\n                                  {parsedChildren}\n                                </MapContent>\n                              )}\n                            </ChartLayout.Graph>\n                            {!isLegendHidden && (\n                              <ChartLayout.Legend\n                                position={legendPosition}\n                                ratio={legendRatio}\n                                ratioBoundaries={DEFAULT_LEGEND_SIZES}\n                                onResize={legendOnRatioChange}\n                              >\n                                <MapLegendRenderer />\n                              </ChartLayout.Legend>\n                            )}\n                          </ChartLayout>\n                        </LayerColorStrategyProvider>\n                      </ColorScaleProvider>\n                    </MapStoreProvider>\n                  </MapDataBoundingBoxContext.Provider>\n                </MapRawDataContext.Provider>\n              </LayerIdsContext.Provider>\n            </MapConfigurationContext.Provider>\n          </MapCountryCodeContext.Provider>\n        )}\n      </div>\n    );\n  },\n);\n\n_MapView['displayName'] = 'MapView';\n\n/**\n * The `MapView` is a component that renders a map with various geospatial data layers.\n * @beta\n */\nexport const MapView = Object.assign(_MapView, {\n  ErrorState: ErrorStateSlot,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, {\n  forwardRef,\n  type PropsWithChildren,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport {\n  _ChartLayout as ChartLayout,\n  _coerceSizeValue as coerceSizeValue,\n} from '@dynatrace/strato-components-preview/charts';\nimport { useMergeRefs } from '@dynatrace/strato-components-preview/core';\n\nimport { MapLegendRenderer } from './components/legend/MapLegendRenderer.js';\nimport { MapContent } from './components/MapContent.js';\nimport { DEFAULT_LEGEND_SIZES, DEFAULT_MAP_HEIGHT } from './constants.js';\nimport { LayerIdsContext } from './contexts/layer-ids.context.js';\nimport { MapBaseLayerFeaturesContext } from './contexts/map-base-layer.context.js';\nimport { MapConfigurationContext } from './contexts/map-configuration.context.js';\nimport { MapDataBoundingBoxContext } from './contexts/map-data-bounding-box.context.js';\nimport { MapRawDataContext } from './contexts/map-raw-data.context.js';\nimport { buildAndDownloadCsv } from './functions/build-and-download-csv.js';\nimport { extractLayersData } from './functions/extract-layers-data.js';\nimport { getDataLayersBoundingBox } from './functions/get-data-layers-bounding-box.js';\nimport { getMapStatesTemplates } from './functions/get-map-states-template.js';\nimport { iterateConfigSlots } from './functions/iterate-config-slots.js';\nimport { setLayersId } from './functions/set-layers-id.js';\nimport { useLoadMapBaseLayer } from './hooks/use-load-map-base-layer.js';\nimport { useAutoLegendRefresh } from './hooks/useAutoLegendRefresh.js';\nimport { ColorScaleProvider } from './providers/color-scale.provider.js';\nimport { LayerColorStrategyProvider } from './providers/layer-color-strategy.provider.js';\nimport { DisabledState } from './slots/states/DisabledState.js';\nimport { ErrorStateSlot } from './slots/states/ErrorStateSlot.js';\nimport { MapStoreProvider } from './store/map-store.provider.js';\n// eslint-disable-next-line no-restricted-imports\nimport './styles/react-mapgl-styles.css';\nimport type { MapViewProps, MapViewRef } from './types/map-view.js';\n\n/**\n * MapView Component\n */\nconst _MapView = forwardRef<MapViewRef, PropsWithChildren<MapViewProps>>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      loading = false,\n      style: costumerStyle,\n      className: customerClassNames,\n      ...remaining\n    } = props;\n    const { layerIds, parsedChildren } = setLayersId(children);\n\n    const layersData = extractLayersData(parsedChildren);\n    const dataLayersBBox = getDataLayersBoundingBox(children);\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const rootRef = useMergeRefs<MapViewRef | HTMLDivElement>([\n      forwardedRef,\n      containerRef,\n    ]);\n\n    useImperativeHandle(forwardedRef, () => ({\n      element: containerRef.current,\n      downloadData: () => {\n        buildAndDownloadCsv(layersData);\n      },\n    }));\n\n    const config = iterateConfigSlots(children);\n\n    const isLegendHidden = !config.legend || !!config.legend.hidden;\n    const legendPosition = config.legend?.position;\n    const legendRatio = config.legend?.ratio;\n    const legendOnRatioChange = config.legend?.onRatioChange;\n\n    const { isMapEnabled, isLoading, baseFeatureCollection, error } =\n      useLoadMapBaseLayer(config.baseLayer);\n\n    const { errorState } = getMapStatesTemplates(children);\n\n    const chartHeight = coerceSizeValue(props.height) || DEFAULT_MAP_HEIGHT;\n\n    const containerStyles = { width: '100%', ...costumerStyle };\n\n    const chartLayoutRef = useAutoLegendRefresh(layersData);\n\n    return (\n      <div\n        style={containerStyles}\n        className={customerClassNames}\n        data-testid=\"mapview-container\"\n      >\n        {\n          // TODO: Error boundaries global fix needed - this error state only purpose is to make map not rendering when there error in response\n          (!isLoading && !isMapEnabled) || error ? (\n            <DisabledState height={chartHeight} />\n          ) : (\n            <MapBaseLayerFeaturesContext.Provider value={baseFeatureCollection}>\n              <MapConfigurationContext.Provider value={config}>\n                <LayerIdsContext.Provider value={layerIds}>\n                  <MapRawDataContext.Provider value={layersData}>\n                    <MapDataBoundingBoxContext.Provider value={dataLayersBBox}>\n                      <MapStoreProvider>\n                        <ColorScaleProvider>\n                          <LayerColorStrategyProvider>\n                            <ChartLayout\n                              ref={chartLayoutRef}\n                              chartHeight={chartHeight}\n                              errorState={errorState}\n                              showLoader={loading || isLoading}\n                            >\n                              <ChartLayout.Graph>\n                                {!isLoading && (\n                                  <MapContent ref={rootRef} {...remaining}>\n                                    {parsedChildren}\n                                  </MapContent>\n                                )}\n                              </ChartLayout.Graph>\n                              {!isLegendHidden && (\n                                <ChartLayout.Legend\n                                  position={legendPosition}\n                                  ratio={legendRatio}\n                                  ratioBoundaries={DEFAULT_LEGEND_SIZES}\n                                  onResize={legendOnRatioChange}\n                                >\n                                  <MapLegendRenderer />\n                                </ChartLayout.Legend>\n                              )}\n                            </ChartLayout>\n                          </LayerColorStrategyProvider>\n                        </ColorScaleProvider>\n                      </MapStoreProvider>\n                    </MapDataBoundingBoxContext.Provider>\n                  </MapRawDataContext.Provider>\n                </LayerIdsContext.Provider>\n              </MapConfigurationContext.Provider>\n            </MapBaseLayerFeaturesContext.Provider>\n          )\n        }\n      </div>\n    );\n  },\n);\n\n(_MapView as typeof _MapView & { displayName: string })['displayName'] =\n  'MapView';\n\n/**\n * The `MapView` is a component that renders a map with various geospatial data layers.\n * @beta\n */\nexport const MapView = Object.assign(_MapView, {\n  ErrorState: ErrorStateSlot,\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/map/components/BubbleLayer/BubbleLayer.js

@@ -11,7 +11,7 @@ import { isBubbleTooltipTemplate } from "../../functions/tooltip-type-guards.js"
 import { useLayerColoringStrategy } from "../../hooks/use-layer-coloring-strategy.js";
 import { useLegendInteractionHighlighting } from "../../hooks/use-legend-interaction-highlighting.js";
 import { useLegendInteractionVisibility } from "../../hooks/use-legend-interaction-visibility.js";
-import { useResolveColor } from "../../hooks/use-resolve-color.js";
+import { useResolveLocationColor } from "../../hooks/use-resolve-color.js";
 import { useTooltipTemplate } from "../../hooks/use-tooltip-template.js";
 import { BubbleLayerTooltip as BubbleLayerTooltipSlot } from "../../slots/BubbleLayerTooltip.js";
 import {
@@ -26,7 +26,11 @@ const BubbleLayer = (props) => {
     sizeInterpolation = "fixed"
   } = props;
   const colorParser = useLayerColoringStrategy();
-  const bubbleColor = useResolveColor(DEFAULT_BUBBLE_COLOR, props, colorParser);
+  const bubbleColor = useResolveLocationColor(
+    DEFAULT_BUBBLE_COLOR,
+    props,
+    colorParser
+  );
   const sourceId = `source-${layerId}`;
   useLegendInteractionHighlighting(props, sourceId);
   useLegendInteractionVisibility(props, layerId);

package/esm/map/components/BubbleLayer/BubbleLayer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/BubbleLayer/BubbleLayer.tsx"],
-  "sourcesContent": ["import React, { type PropsWithChildren } from 'react';\nimport { Source } from 'react-map-gl/maplibre';\n\nimport { BubbleCircleLayer } from './BubbleCircleLayer.js';\nimport { BubbleLayerTooltip } from './BubbleLayerTooltip.js';\nimport { BubbleOutlineLayer } from './BubbleOutlineLayer.js';\nimport { SizeInterpolationContext } from './contexts/size-interpolation.context.js';\nimport { buildRadiusScale } from './functions/build-radius-scale.js';\nimport { parseBubbleDataToGeoJSON } from './functions/parse-bubble-data-to-geo-json.js';\nimport { DEFAULT_BUBBLE_COLOR, DEFAULT_RADIUS } from '../../constants.js';\nimport { isBubbleTooltipTemplate } from '../../functions/tooltip-type-guards.js';\nimport { useLayerColoringStrategy } from '../../hooks/use-layer-coloring-strategy.js';\nimport { useLegendInteractionHighlighting } from '../../hooks/use-legend-interaction-highlighting.js';\nimport { useLegendInteractionVisibility } from '../../hooks/use-legend-interaction-visibility.js';\nimport { useResolveColor } from '../../hooks/use-resolve-color.js';\nimport { useTooltipTemplate } from '../../hooks/use-tooltip-template.js';\nimport { BubbleLayerTooltip as BubbleLayerTooltipSlot } from '../../slots/BubbleLayerTooltip.js';\nimport {\n  type InternalBubbleLayerProps,\n  isScaleRadius,\n} from '../../types/bubble-layer.js';\nimport type { Location } from '../../types/location.js';\n\nexport const BubbleLayer = <T extends Location>(\n  props: PropsWithChildren<InternalBubbleLayerProps<T>>,\n) => {\n  const {\n    data,\n    layerId,\n    radius = DEFAULT_RADIUS,\n    children,\n    sizeInterpolation = 'fixed',\n  } = props;\n\n  const colorParser = useLayerColoringStrategy();\n  const bubbleColor = useResolveColor(DEFAULT_BUBBLE_COLOR, props, colorParser);\n\n  const sourceId = `source-${layerId}`;\n  useLegendInteractionHighlighting(props, sourceId);\n  useLegendInteractionVisibility(props, layerId);\n\n  let radiusScale = (value: number) => value;\n\n  if (isScaleRadius(props)) {\n    const { radiusRange = [10, 100], radius, scale = 'linear' } = props;\n\n    radiusScale = buildRadiusScale(data, radius, scale, radiusRange);\n  }\n\n  const dataGeoJson = parseBubbleDataToGeoJSON(\n    data,\n    bubbleColor,\n    radius,\n    radiusScale,\n  );\n\n  const tooltipTemplate = useTooltipTemplate(children, BubbleLayerTooltipSlot);\n\n  return (\n    <>\n      <SizeInterpolationContext.Provider value={sizeInterpolation}>\n        <Source id={sourceId} type=\"geojson\" data={dataGeoJson} generateId>\n          <BubbleCircleLayer id={layerId} source={sourceId} />\n          <BubbleOutlineLayer beforeId={layerId} source={sourceId} />\n        </Source>\n      </SizeInterpolationContext.Provider>\n\n      <BubbleLayerTooltip\n        layerId={layerId}\n        tooltipTemplate={\n          isBubbleTooltipTemplate(tooltipTemplate) ? tooltipTemplate : undefined\n        }\n      />\n    </>\n  );\n};\n\nBubbleLayer['displayName'] = 'BubbleLayer';\n"],
-  "mappings": "AAAA,OAAO,WAAuC;AAC9C,SAAS,cAAc;AAEvB,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AACnC,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AACzC,SAAS,sBAAsB,sBAAsB;AACrD,SAAS,+BAA+B;AACxC,SAAS,gCAAgC;AACzC,SAAS,wCAAwC;AACjD,SAAS,sCAAsC;AAC/C,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,sBAAsB,8BAA8B;AAC7D;AAAA,EAEE;AAAA,OACK;AAGA,MAAM,cAAc,CACzB,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,oBAAoB;AAAA,EACtB,IAAI;AAEJ,QAAM,cAAc,yBAAyB;AAC7C,QAAM,cAAc,gBAAgB,sBAAsB,OAAO,WAAW;AAE5E,QAAM,WAAW,UAAU,OAAO;AAClC,mCAAiC,OAAO,QAAQ;AAChD,iCAA+B,OAAO,OAAO;AAE7C,MAAI,cAAc,CAAC,UAAkB;AAErC,MAAI,cAAc,KAAK,GAAG;AACxB,UAAM,EAAE,cAAc,CAAC,IAAI,GAAG,GAAG,QAAAA,SAAQ,QAAQ,SAAS,IAAI;AAE9D,kBAAc,iBAAiB,MAAMA,SAAQ,OAAO,WAAW;AAAA,EACjE;AAEA,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,kBAAkB,mBAAmB,UAAU,sBAAsB;AAE3E,SACE,0DACE,oCAAC,yBAAyB,UAAzB,EAAkC,OAAO,qBACxC,oCAAC,UAAO,IAAI,UAAU,MAAK,WAAU,MAAM,aAAa,YAAU,QAChE,oCAAC,qBAAkB,IAAI,SAAS,QAAQ,UAAU,GAClD,oCAAC,sBAAmB,UAAU,SAAS,QAAQ,UAAU,CAC3D,CACF,GAEA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,iBACE,wBAAwB,eAAe,IAAI,kBAAkB;AAAA;AAAA,EAEjE,CACF;AAEJ;AAEA,YAAY,aAAa,IAAI;",
+  "sourcesContent": ["import React, { type PropsWithChildren } from 'react';\nimport { Source } from 'react-map-gl/maplibre';\n\nimport { BubbleCircleLayer } from './BubbleCircleLayer.js';\nimport { BubbleLayerTooltip } from './BubbleLayerTooltip.js';\nimport { BubbleOutlineLayer } from './BubbleOutlineLayer.js';\nimport { SizeInterpolationContext } from './contexts/size-interpolation.context.js';\nimport { buildRadiusScale } from './functions/build-radius-scale.js';\nimport { parseBubbleDataToGeoJSON } from './functions/parse-bubble-data-to-geo-json.js';\nimport { DEFAULT_BUBBLE_COLOR, DEFAULT_RADIUS } from '../../constants.js';\nimport { isBubbleTooltipTemplate } from '../../functions/tooltip-type-guards.js';\nimport { useLayerColoringStrategy } from '../../hooks/use-layer-coloring-strategy.js';\nimport { useLegendInteractionHighlighting } from '../../hooks/use-legend-interaction-highlighting.js';\nimport { useLegendInteractionVisibility } from '../../hooks/use-legend-interaction-visibility.js';\nimport { useResolveLocationColor } from '../../hooks/use-resolve-color.js';\nimport { useTooltipTemplate } from '../../hooks/use-tooltip-template.js';\nimport { BubbleLayerTooltip as BubbleLayerTooltipSlot } from '../../slots/BubbleLayerTooltip.js';\nimport {\n  type InternalBubbleLayerProps,\n  isScaleRadius,\n} from '../../types/bubble-layer.js';\nimport type { Location } from '../../types/location.js';\n\nexport const BubbleLayer = <T extends Location>(\n  props: PropsWithChildren<InternalBubbleLayerProps<T>>,\n) => {\n  const {\n    data,\n    layerId,\n    radius = DEFAULT_RADIUS,\n    children,\n    sizeInterpolation = 'fixed',\n  } = props;\n\n  const colorParser = useLayerColoringStrategy();\n  const bubbleColor = useResolveLocationColor(\n    DEFAULT_BUBBLE_COLOR,\n    props,\n    colorParser,\n  );\n\n  const sourceId = `source-${layerId}`;\n  useLegendInteractionHighlighting(props, sourceId);\n  useLegendInteractionVisibility(props, layerId);\n\n  let radiusScale = (value: number) => value;\n\n  if (isScaleRadius(props)) {\n    const { radiusRange = [10, 100], radius, scale = 'linear' } = props;\n\n    radiusScale = buildRadiusScale(data, radius, scale, radiusRange);\n  }\n\n  const dataGeoJson = parseBubbleDataToGeoJSON(\n    data,\n    bubbleColor,\n    radius,\n    radiusScale,\n  );\n\n  const tooltipTemplate = useTooltipTemplate(children, BubbleLayerTooltipSlot);\n\n  return (\n    <>\n      <SizeInterpolationContext.Provider value={sizeInterpolation}>\n        <Source id={sourceId} type=\"geojson\" data={dataGeoJson} generateId>\n          <BubbleCircleLayer id={layerId} source={sourceId} />\n          <BubbleOutlineLayer beforeId={layerId} source={sourceId} />\n        </Source>\n      </SizeInterpolationContext.Provider>\n\n      <BubbleLayerTooltip\n        layerId={layerId}\n        tooltipTemplate={\n          isBubbleTooltipTemplate(tooltipTemplate) ? tooltipTemplate : undefined\n        }\n      />\n    </>\n  );\n};\n\nBubbleLayer['displayName'] = 'BubbleLayer';\n"],
+  "mappings": "AAAA,OAAO,WAAuC;AAC9C,SAAS,cAAc;AAEvB,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AACnC,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AACzC,SAAS,sBAAsB,sBAAsB;AACrD,SAAS,+BAA+B;AACxC,SAAS,gCAAgC;AACzC,SAAS,wCAAwC;AACjD,SAAS,sCAAsC;AAC/C,SAAS,+BAA+B;AACxC,SAAS,0BAA0B;AACnC,SAAS,sBAAsB,8BAA8B;AAC7D;AAAA,EAEE;AAAA,OACK;AAGA,MAAM,cAAc,CACzB,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,oBAAoB;AAAA,EACtB,IAAI;AAEJ,QAAM,cAAc,yBAAyB;AAC7C,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,WAAW,UAAU,OAAO;AAClC,mCAAiC,OAAO,QAAQ;AAChD,iCAA+B,OAAO,OAAO;AAE7C,MAAI,cAAc,CAAC,UAAkB;AAErC,MAAI,cAAc,KAAK,GAAG;AACxB,UAAM,EAAE,cAAc,CAAC,IAAI,GAAG,GAAG,QAAAA,SAAQ,QAAQ,SAAS,IAAI;AAE9D,kBAAc,iBAAiB,MAAMA,SAAQ,OAAO,WAAW;AAAA,EACjE;AAEA,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,kBAAkB,mBAAmB,UAAU,sBAAsB;AAE3E,SACE,0DACE,oCAAC,yBAAyB,UAAzB,EAAkC,OAAO,qBACxC,oCAAC,UAAO,IAAI,UAAU,MAAK,WAAU,MAAM,aAAa,YAAU,QAChE,oCAAC,qBAAkB,IAAI,SAAS,QAAQ,UAAU,GAClD,oCAAC,sBAAmB,UAAU,SAAS,QAAQ,UAAU,CAC3D,CACF,GAEA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,iBACE,wBAAwB,eAAe,IAAI,kBAAkB;AAAA;AAAA,EAEjE,CACF;AAEJ;AAEA,YAAY,aAAa,IAAI;",
   "names": ["radius"]
 }

package/esm/map/components/ChoroplethLayer/ChoroplethLayer.js

@@ -16,15 +16,15 @@ import { isChoroplethTooltipTemplate } from "../../functions/tooltip-type-guards
 import { useLayerColoringStrategy } from "../../hooks/use-layer-coloring-strategy.js";
 import { useLegendInteractionHighlighting } from "../../hooks/use-legend-interaction-highlighting.js";
 import { useLegendInteractionVisibility } from "../../hooks/use-legend-interaction-visibility.js";
-import { useMapSource } from "../../hooks/use-map-source.js";
-import { useResolveColor } from "../../hooks/use-resolve-color.js";
+import { useMapBaseLayerFeatures } from "../../hooks/use-map-base-layer-features.js";
+import { useResolveChoroplethColor } from "../../hooks/use-resolve-color.js";
 import { useTooltipTemplate } from "../../hooks/use-tooltip-template.js";
 import { ChoroplethLayerTooltip as ChoroplethLayerTooltipSlot } from "../../slots/ChoroplethLayerTooltip.js";
 const ChoroplethLayer = (props) => {
   const { layerId, data, regionAccessor, children } = props;
-  const mapSource = useMapSource();
+  const mapSource = useMapBaseLayerFeatures();
   const colorParser = useLayerColoringStrategy();
-  const choroplethColor = useResolveColor(
+  const choroplethColor = useResolveChoroplethColor(
     DEFAULT_CHOROPLETH_COLOR,
     props,
     colorParser

package/esm/map/components/ChoroplethLayer/ChoroplethLayer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/ChoroplethLayer/ChoroplethLayer.tsx"],
-  "sourcesContent": ["import React, { type PropsWithChildren } from 'react';\nimport { Layer, Source } from 'react-map-gl/maplibre';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components-preview/charts';\n\nimport { ChoroplethLayerTooltip } from './ChoroplethLayerTooltip.js';\nimport { parseRegionDataToGeoJSON } from './functions/parse-region-data-to-geo-json.js';\nimport {\n  ACTIVE_COLOR,\n  ACTIVE_STATE_BORDERS_WIDTH,\n  DEFAULT_CHOROPLETH_COLOR,\n  DEFAULT_COUNTRIES_BORDER_COLOR,\n  LEGEND_DIM_OPACITY,\n  SHAPE_OPACITY,\n  TRANSPARENT_BORDER_COLOR,\n} from '../../constants.js';\nimport { isChoroplethTooltipTemplate } from '../../functions/tooltip-type-guards.js';\nimport { useLayerColoringStrategy } from '../../hooks/use-layer-coloring-strategy.js';\nimport { useLegendInteractionHighlighting } from '../../hooks/use-legend-interaction-highlighting.js';\nimport { useLegendInteractionVisibility } from '../../hooks/use-legend-interaction-visibility.js';\nimport { useMapSource } from '../../hooks/use-map-source.js';\nimport { useResolveColor } from '../../hooks/use-resolve-color.js';\nimport { useTooltipTemplate } from '../../hooks/use-tooltip-template.js';\nimport { ChoroplethLayerTooltip as ChoroplethLayerTooltipSlot } from '../../slots/ChoroplethLayerTooltip.js';\nimport type { InternalChoroplethLayerProps } from '../../types/choropleth-layer.js';\n\nexport const ChoroplethLayer = <T extends Record<string, unknown>>(\n  props: PropsWithChildren<InternalChoroplethLayerProps<T>>,\n) => {\n  const { layerId, data, regionAccessor, children } = props;\n\n  const mapSource = useMapSource();\n\n  const colorParser = useLayerColoringStrategy();\n  const choroplethColor = useResolveColor(\n    DEFAULT_CHOROPLETH_COLOR,\n    props,\n    colorParser,\n  );\n  const sourceId = layerId.replace('layer', 'source');\n  useLegendInteractionHighlighting(props, sourceId);\n  useLegendInteractionVisibility(props, layerId);\n\n  const dataGeoJSON = parseRegionDataToGeoJSON(\n    mapSource,\n    data,\n    regionAccessor,\n    choroplethColor,\n  );\n\n  const tooltipTemplate = useTooltipTemplate(\n    children,\n    ChoroplethLayerTooltipSlot,\n  );\n\n  return (\n    <>\n      <Source id={sourceId} type=\"geojson\" data={dataGeoJSON} generateId>\n        <Layer\n          id={layerId}\n          type=\"fill\"\n          source={sourceId}\n          paint={{\n            'fill-color': [\n              'case',\n              ['boolean', ['feature-state', 'active'], false],\n              ['get', '__color'],\n              ['boolean', ['feature-state', 'hover'], false],\n              ['get', '__hoveredColor'],\n              ['get', '__color'],\n            ],\n            'fill-opacity': [\n              'case',\n              ['boolean', ['feature-state', 'legendHover'], true],\n              SHAPE_OPACITY,\n              LEGEND_DIM_OPACITY,\n            ],\n          }}\n        />\n        <Layer\n          type=\"line\"\n          source={sourceId}\n          paint={{\n            'line-color': getCanvasColor(DEFAULT_COUNTRIES_BORDER_COLOR),\n          }}\n        />\n        <Layer\n          type=\"line\"\n          source={sourceId}\n          paint={{\n            'line-color': [\n              'case',\n              ['boolean', ['feature-state', 'active'], false],\n              getCanvasColor(ACTIVE_COLOR),\n              getCanvasColor(TRANSPARENT_BORDER_COLOR),\n            ],\n            'line-width': ACTIVE_STATE_BORDERS_WIDTH,\n          }}\n        />\n      </Source>\n\n      <ChoroplethLayerTooltip\n        layerId={layerId}\n        tooltipTemplate={\n          isChoroplethTooltipTemplate(tooltipTemplate)\n            ? tooltipTemplate\n            : undefined\n        }\n      />\n    </>\n  );\n};\n\nChoroplethLayer['displayName'] = 'ChoroplethLayer';\n"],
-  "mappings": "AAAA,OAAO,WAAuC;AAC9C,SAAS,OAAO,cAAc;AAE9B,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,8BAA8B;AACvC,SAAS,gCAAgC;AACzC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mCAAmC;AAC5C,SAAS,gCAAgC;AACzC,SAAS,wCAAwC;AACjD,SAAS,sCAAsC;AAC/C,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,0BAA0B,kCAAkC;AAG9D,MAAM,kBAAkB,CAC7B,UACG;AACH,QAAM,EAAE,SAAS,MAAM,gBAAgB,SAAS,IAAI;AAEpD,QAAM,YAAY,aAAa;AAE/B,QAAM,cAAc,yBAAyB;AAC7C,QAAM,kBAAkB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,WAAW,QAAQ,QAAQ,SAAS,QAAQ;AAClD,mCAAiC,OAAO,QAAQ;AAChD,iCAA+B,OAAO,OAAO;AAE7C,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,kBAAkB;AAAA,IACtB;AAAA,IACA;AAAA,EACF;AAEA,SACE,0DACE,oCAAC,UAAO,IAAI,UAAU,MAAK,WAAU,MAAM,aAAa,YAAU,QAChE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,QACL,cAAc;AAAA,UACZ;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,QAAQ,GAAG,KAAK;AAAA,UAC9C,CAAC,OAAO,SAAS;AAAA,UACjB,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,UAC7C,CAAC,OAAO,gBAAgB;AAAA,UACxB,CAAC,OAAO,SAAS;AAAA,QACnB;AAAA,QACA,gBAAgB;AAAA,UACd;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,UAClD;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA;AAAA,EACF,GACA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,QACL,cAAc,eAAe,8BAA8B;AAAA,MAC7D;AAAA;AAAA,EACF,GACA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,QACL,cAAc;AAAA,UACZ;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,QAAQ,GAAG,KAAK;AAAA,UAC9C,eAAe,YAAY;AAAA,UAC3B,eAAe,wBAAwB;AAAA,QACzC;AAAA,QACA,cAAc;AAAA,MAChB;AAAA;AAAA,EACF,CACF,GAEA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,iBACE,4BAA4B,eAAe,IACvC,kBACA;AAAA;AAAA,EAER,CACF;AAEJ;AAEA,gBAAgB,aAAa,IAAI;",
+  "sourcesContent": ["import React, { type PropsWithChildren } from 'react';\nimport { Layer, Source } from 'react-map-gl/maplibre';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components-preview/charts';\n\nimport { ChoroplethLayerTooltip } from './ChoroplethLayerTooltip.js';\nimport { parseRegionDataToGeoJSON } from './functions/parse-region-data-to-geo-json.js';\nimport {\n  ACTIVE_COLOR,\n  ACTIVE_STATE_BORDERS_WIDTH,\n  DEFAULT_CHOROPLETH_COLOR,\n  DEFAULT_COUNTRIES_BORDER_COLOR,\n  LEGEND_DIM_OPACITY,\n  SHAPE_OPACITY,\n  TRANSPARENT_BORDER_COLOR,\n} from '../../constants.js';\nimport { isChoroplethTooltipTemplate } from '../../functions/tooltip-type-guards.js';\nimport { useLayerColoringStrategy } from '../../hooks/use-layer-coloring-strategy.js';\nimport { useLegendInteractionHighlighting } from '../../hooks/use-legend-interaction-highlighting.js';\nimport { useLegendInteractionVisibility } from '../../hooks/use-legend-interaction-visibility.js';\nimport { useMapBaseLayerFeatures } from '../../hooks/use-map-base-layer-features.js';\nimport { useResolveChoroplethColor } from '../../hooks/use-resolve-color.js';\nimport { useTooltipTemplate } from '../../hooks/use-tooltip-template.js';\nimport { ChoroplethLayerTooltip as ChoroplethLayerTooltipSlot } from '../../slots/ChoroplethLayerTooltip.js';\nimport type { InternalChoroplethLayerProps } from '../../types/choropleth-layer.js';\n\nexport const ChoroplethLayer = <T extends Record<string, unknown>>(\n  props: PropsWithChildren<InternalChoroplethLayerProps<T>>,\n) => {\n  const { layerId, data, regionAccessor, children } = props;\n\n  const mapSource = useMapBaseLayerFeatures();\n\n  const colorParser = useLayerColoringStrategy();\n  const choroplethColor = useResolveChoroplethColor(\n    DEFAULT_CHOROPLETH_COLOR,\n    props,\n    colorParser,\n  );\n  const sourceId = layerId.replace('layer', 'source');\n  useLegendInteractionHighlighting(props, sourceId);\n  useLegendInteractionVisibility(props, layerId);\n\n  const dataGeoJSON = parseRegionDataToGeoJSON(\n    mapSource!,\n    data,\n    regionAccessor,\n    choroplethColor,\n  );\n\n  const tooltipTemplate = useTooltipTemplate(\n    children,\n    ChoroplethLayerTooltipSlot,\n  );\n\n  return (\n    <>\n      <Source id={sourceId} type=\"geojson\" data={dataGeoJSON} generateId>\n        <Layer\n          id={layerId}\n          type=\"fill\"\n          source={sourceId}\n          paint={{\n            'fill-color': [\n              'case',\n              ['boolean', ['feature-state', 'active'], false],\n              ['get', '__color'],\n              ['boolean', ['feature-state', 'hover'], false],\n              ['get', '__hoveredColor'],\n              ['get', '__color'],\n            ],\n            'fill-opacity': [\n              'case',\n              ['boolean', ['feature-state', 'legendHover'], true],\n              SHAPE_OPACITY,\n              LEGEND_DIM_OPACITY,\n            ],\n          }}\n        />\n        <Layer\n          type=\"line\"\n          source={sourceId}\n          paint={{\n            'line-color': getCanvasColor(DEFAULT_COUNTRIES_BORDER_COLOR),\n          }}\n        />\n        <Layer\n          type=\"line\"\n          source={sourceId}\n          paint={{\n            'line-color': [\n              'case',\n              ['boolean', ['feature-state', 'active'], false],\n              getCanvasColor(ACTIVE_COLOR),\n              getCanvasColor(TRANSPARENT_BORDER_COLOR),\n            ],\n            'line-width': ACTIVE_STATE_BORDERS_WIDTH,\n          }}\n        />\n      </Source>\n\n      <ChoroplethLayerTooltip\n        layerId={layerId}\n        tooltipTemplate={\n          isChoroplethTooltipTemplate(tooltipTemplate)\n            ? tooltipTemplate\n            : undefined\n        }\n      />\n    </>\n  );\n};\n\nChoroplethLayer['displayName'] = 'ChoroplethLayer';\n"],
+  "mappings": "AAAA,OAAO,WAAuC;AAC9C,SAAS,OAAO,cAAc;AAE9B,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,8BAA8B;AACvC,SAAS,gCAAgC;AACzC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mCAAmC;AAC5C,SAAS,gCAAgC;AACzC,SAAS,wCAAwC;AACjD,SAAS,sCAAsC;AAC/C,SAAS,+BAA+B;AACxC,SAAS,iCAAiC;AAC1C,SAAS,0BAA0B;AACnC,SAAS,0BAA0B,kCAAkC;AAG9D,MAAM,kBAAkB,CAC7B,UACG;AACH,QAAM,EAAE,SAAS,MAAM,gBAAgB,SAAS,IAAI;AAEpD,QAAM,YAAY,wBAAwB;AAE1C,QAAM,cAAc,yBAAyB;AAC7C,QAAM,kBAAkB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,WAAW,QAAQ,QAAQ,SAAS,QAAQ;AAClD,mCAAiC,OAAO,QAAQ;AAChD,iCAA+B,OAAO,OAAO;AAE7C,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,kBAAkB;AAAA,IACtB;AAAA,IACA;AAAA,EACF;AAEA,SACE,0DACE,oCAAC,UAAO,IAAI,UAAU,MAAK,WAAU,MAAM,aAAa,YAAU,QAChE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,QACL,cAAc;AAAA,UACZ;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,QAAQ,GAAG,KAAK;AAAA,UAC9C,CAAC,OAAO,SAAS;AAAA,UACjB,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,UAC7C,CAAC,OAAO,gBAAgB;AAAA,UACxB,CAAC,OAAO,SAAS;AAAA,QACnB;AAAA,QACA,gBAAgB;AAAA,UACd;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,UAClD;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA;AAAA,EACF,GACA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,QACL,cAAc,eAAe,8BAA8B;AAAA,MAC7D;AAAA;AAAA,EACF,GACA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,QACL,cAAc;AAAA,UACZ;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,QAAQ,GAAG,KAAK;AAAA,UAC9C,eAAe,YAAY;AAAA,UAC3B,eAAe,wBAAwB;AAAA,QACzC;AAAA,QACA,cAAc;AAAA,MAChB;AAAA;AAAA,EACF,CACF,GAEA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,iBACE,4BAA4B,eAAe,IACvC,kBACA;AAAA;AAAA,EAER,CACF;AAEJ;AAEA,gBAAgB,aAAa,IAAI;",
   "names": []
 }

package/esm/map/components/DefaultTooltip/DefaultTooltip.js

@@ -1,12 +1,17 @@
+import { isNil } from "lodash-es";
 import React from "react";
 import { _ChartTooltip as ChartTooltip } from "@dynatrace/strato-components-preview/charts";
 import { getDefaultActions } from "./utils/get-default-actions.js";
 import { handleCopyToClipboard } from "./utils/handle-copy-to-clipboard.js";
 import { isConnection, isRegion } from "../../functions/tooltip-type-guards.js";
+const isChoroplethTooltip = (props) => isRegion(props.closestPoint);
+const isConnectionTooltip = (props) => isConnection(props.closestPoint);
+const isBubbleTooltip = (props) => !isNil(props.layerData);
+const isDotTooltip = (props) => true;
 const DefaultTooltip = (props) => {
-  const { closestPoint, layerData } = props;
-  let locations;
-  if (isRegion(closestPoint)) {
+  let locations = [];
+  if (isChoroplethTooltip(props)) {
+    const { closestPoint } = props;
     return /* @__PURE__ */ React.createElement(ChartTooltip.Body, { "data-testid": "default-tooltip-template" }, /* @__PURE__ */ React.createElement(
       ChartTooltip.SeriesItem,
       {
@@ -15,13 +20,13 @@ const DefaultTooltip = (props) => {
         value: closestPoint.data.value && closestPoint.data.value.toString() ? closestPoint.data.value.toString() : void 0
       }
     ));
-  }
-  if (isConnection(closestPoint)) {
-    locations = closestPoint.data.path;
-  } else {
-    locations = layerData === void 0 || layerData === null || layerData.length === 0 ? [closestPoint.data] : layerData.map(
-      (point) => point.data
-    );
+  } else if (isConnectionTooltip(props)) {
+    locations = props.closestPoint.data.path;
+  } else if (isBubbleTooltip(props)) {
+    const { closestPoint, layerData } = props;
+    locations = layerData === void 0 || layerData === null || layerData.length === 0 ? [closestPoint.data] : layerData.map((point) => point.data);
+  } else if (isDotTooltip(props)) {
+    locations = [props.closestPoint.data];
   }
   return /* @__PURE__ */ React.createElement(
     ChartTooltip.Body,

package/esm/map/components/DefaultTooltip/DefaultTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/DefaultTooltip/DefaultTooltip.tsx"],
-  "sourcesContent": ["import React from 'react';\n\nimport { _ChartTooltip as ChartTooltip } from '@dynatrace/strato-components-preview/charts';\n\nimport { getDefaultActions } from './utils/get-default-actions.js';\nimport { handleCopyToClipboard } from './utils/handle-copy-to-clipboard.js';\nimport { isConnection, isRegion } from '../../functions/tooltip-type-guards.js';\nimport type { Location } from '../../types/location.js';\nimport type {\n  BubbleLayerTooltipData,\n  DotLayerTooltipData,\n  LayerTooltipData,\n} from '../../types/tooltip.js';\n\ninterface DefaultTooltipProps {\n  closestPoint: LayerTooltipData;\n  layerData?: LayerTooltipData[];\n}\n\nexport const DefaultTooltip = (props: DefaultTooltipProps) => {\n  const { closestPoint, layerData } = props;\n  let locations: Location[];\n\n  if (isRegion(closestPoint)) {\n    return (\n      <ChartTooltip.Body data-testid=\"default-tooltip-template\">\n        <ChartTooltip.SeriesItem\n          color={closestPoint.color}\n          name={closestPoint.name}\n          value={\n            closestPoint.data.value && closestPoint.data.value.toString()\n              ? closestPoint.data.value.toString()\n              : undefined\n          }\n        />\n      </ChartTooltip.Body>\n    );\n  }\n  if (isConnection(closestPoint)) {\n    locations = closestPoint.data.path;\n  } else {\n    locations =\n      layerData === undefined || layerData === null || layerData.length === 0\n        ? [closestPoint.data]\n        : layerData.map(\n            (point: DotLayerTooltipData | BubbleLayerTooltipData) => point.data,\n          );\n  }\n\n  return (\n    <ChartTooltip.Body\n      data-testid=\"default-tooltip-template\"\n      virtualization={false}\n    >\n      {locations.map((location) => (\n        <ChartTooltip.GeoItem\n          key={`${location.latitude}-${location.longitude}`}\n          latitude={location.latitude}\n          longitude={location.longitude}\n          actions={() =>\n            getDefaultActions(() => handleCopyToClipboard(location))\n          }\n        ></ChartTooltip.GeoItem>\n      ))}\n    </ChartTooltip.Body>\n  );\n};\n\nDefaultTooltip['displayName'] = 'DefaultTooltip';\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAElB,SAAS,iBAAiB,oBAAoB;AAE9C,SAAS,yBAAyB;AAClC,SAAS,6BAA6B;AACtC,SAAS,cAAc,gBAAgB;AAahC,MAAM,iBAAiB,CAAC,UAA+B;AAC5D,QAAM,EAAE,cAAc,UAAU,IAAI;AACpC,MAAI;AAEJ,MAAI,SAAS,YAAY,GAAG;AAC1B,WACE,oCAAC,aAAa,MAAb,EAAkB,eAAY,8BAC7B;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,OAAO,aAAa;AAAA,QACpB,MAAM,aAAa;AAAA,QACnB,OACE,aAAa,KAAK,SAAS,aAAa,KAAK,MAAM,SAAS,IACxD,aAAa,KAAK,MAAM,SAAS,IACjC;AAAA;AAAA,IAER,CACF;AAAA,EAEJ;AACA,MAAI,aAAa,YAAY,GAAG;AAC9B,gBAAY,aAAa,KAAK;AAAA,EAChC,OAAO;AACL,gBACE,cAAc,UAAa,cAAc,QAAQ,UAAU,WAAW,IAClE,CAAC,aAAa,IAAI,IAClB,UAAU;AAAA,MACR,CAAC,UAAwD,MAAM;AAAA,IACjE;AAAA,EACR;AAEA,SACE;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MACC,eAAY;AAAA,MACZ,gBAAgB;AAAA;AAAA,IAEf,UAAU,IAAI,CAAC,aACd;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,KAAK,GAAG,SAAS,QAAQ,IAAI,SAAS,SAAS;AAAA,QAC/C,UAAU,SAAS;AAAA,QACnB,WAAW,SAAS;AAAA,QACpB,SAAS,MACP,kBAAkB,MAAM,sBAAsB,QAAQ,CAAC;AAAA;AAAA,IAE1D,CACF;AAAA,EACH;AAEJ;AAEA,eAAe,aAAa,IAAI;",
+  "sourcesContent": ["import { isNil } from 'lodash-es';\nimport React from 'react';\n\nimport { _ChartTooltip as ChartTooltip } from '@dynatrace/strato-components-preview/charts';\n\nimport { getDefaultActions } from './utils/get-default-actions.js';\nimport { handleCopyToClipboard } from './utils/handle-copy-to-clipboard.js';\nimport { isConnection, isRegion } from '../../functions/tooltip-type-guards.js';\nimport type { Location } from '../../types/location.js';\nimport type {\n  BubbleLayerTooltipData,\n  ConnectionLayerTooltipData,\n  DotLayerTooltipData,\n  LayerTooltipData,\n} from '../../types/tooltip.js';\nimport { ChoroplethLayerTooltipData } from '../../types/tooltip.js';\n\nconst isChoroplethTooltip = (\n  props: DefaultTooltipProps,\n): props is {\n  closestPoint: ChoroplethLayerTooltipData;\n} => isRegion(props.closestPoint);\nconst isConnectionTooltip = (\n  props: DefaultTooltipProps,\n): props is {\n  closestPoint: ConnectionLayerTooltipData;\n} => isConnection(props.closestPoint);\nconst isBubbleTooltip = (\n  props: DefaultTooltipProps,\n): props is {\n  closestPoint: BubbleLayerTooltipData;\n  layerData: BubbleLayerTooltipData[];\n} => !isNil(props.layerData);\n\nconst isDotTooltip = (\n  props: DefaultTooltipProps,\n): props is {\n  closestPoint: DotLayerTooltipData;\n} => true; // if it's not any of the other tooltips, it will be Dot\n\ninterface DefaultTooltipProps {\n  closestPoint: LayerTooltipData;\n  layerData?: LayerTooltipData[];\n}\n\nexport const DefaultTooltip = (props: DefaultTooltipProps) => {\n  let locations: Location[] = [];\n\n  if (isChoroplethTooltip(props)) {\n    const { closestPoint } = props;\n\n    return (\n      <ChartTooltip.Body data-testid=\"default-tooltip-template\">\n        <ChartTooltip.SeriesItem\n          color={closestPoint.color}\n          name={closestPoint.name}\n          value={\n            closestPoint.data.value && closestPoint.data.value.toString()\n              ? closestPoint.data.value.toString()\n              : undefined\n          }\n        />\n      </ChartTooltip.Body>\n    );\n  } else if (isConnectionTooltip(props)) {\n    locations = props.closestPoint.data.path;\n  } else if (isBubbleTooltip(props)) {\n    const { closestPoint, layerData } = props;\n    locations =\n      layerData === undefined || layerData === null || layerData.length === 0\n        ? [closestPoint.data]\n        : layerData.map((point) => point.data);\n  } else if (isDotTooltip(props)) {\n    locations = [props.closestPoint.data];\n  }\n\n  return (\n    <ChartTooltip.Body\n      data-testid=\"default-tooltip-template\"\n      virtualization={false}\n    >\n      {locations.map((location) => (\n        <ChartTooltip.GeoItem\n          key={`${location.latitude}-${location.longitude}`}\n          latitude={location.latitude}\n          longitude={location.longitude}\n          actions={() =>\n            getDefaultActions(() => handleCopyToClipboard(location))\n          }\n        ></ChartTooltip.GeoItem>\n      ))}\n    </ChartTooltip.Body>\n  );\n};\n\nDefaultTooltip['displayName'] = 'DefaultTooltip';\n"],
+  "mappings": "AAAA,SAAS,aAAa;AACtB,OAAO,WAAW;AAElB,SAAS,iBAAiB,oBAAoB;AAE9C,SAAS,yBAAyB;AAClC,SAAS,6BAA6B;AACtC,SAAS,cAAc,gBAAgB;AAUvC,MAAM,sBAAsB,CAC1B,UAGG,SAAS,MAAM,YAAY;AAChC,MAAM,sBAAsB,CAC1B,UAGG,aAAa,MAAM,YAAY;AACpC,MAAM,kBAAkB,CACtB,UAIG,CAAC,MAAM,MAAM,SAAS;AAE3B,MAAM,eAAe,CACnB,UAGG;AAOE,MAAM,iBAAiB,CAAC,UAA+B;AAC5D,MAAI,YAAwB,CAAC;AAE7B,MAAI,oBAAoB,KAAK,GAAG;AAC9B,UAAM,EAAE,aAAa,IAAI;AAEzB,WACE,oCAAC,aAAa,MAAb,EAAkB,eAAY,8BAC7B;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,OAAO,aAAa;AAAA,QACpB,MAAM,aAAa;AAAA,QACnB,OACE,aAAa,KAAK,SAAS,aAAa,KAAK,MAAM,SAAS,IACxD,aAAa,KAAK,MAAM,SAAS,IACjC;AAAA;AAAA,IAER,CACF;AAAA,EAEJ,WAAW,oBAAoB,KAAK,GAAG;AACrC,gBAAY,MAAM,aAAa,KAAK;AAAA,EACtC,WAAW,gBAAgB,KAAK,GAAG;AACjC,UAAM,EAAE,cAAc,UAAU,IAAI;AACpC,gBACE,cAAc,UAAa,cAAc,QAAQ,UAAU,WAAW,IAClE,CAAC,aAAa,IAAI,IAClB,UAAU,IAAI,CAAC,UAAU,MAAM,IAAI;AAAA,EAC3C,WAAW,aAAa,KAAK,GAAG;AAC9B,gBAAY,CAAC,MAAM,aAAa,IAAI;AAAA,EACtC;AAEA,SACE;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MACC,eAAY;AAAA,MACZ,gBAAgB;AAAA;AAAA,IAEf,UAAU,IAAI,CAAC,aACd;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,KAAK,GAAG,SAAS,QAAQ,IAAI,SAAS,SAAS;AAAA,QAC/C,UAAU,SAAS;AAAA,QACnB,WAAW,SAAS;AAAA,QACpB,SAAS,MACP,kBAAkB,MAAM,sBAAsB,QAAQ,CAAC;AAAA;AAAA,IAE1D,CACF;AAAA,EACH;AAEJ;AAEA,eAAe,aAAa,IAAI;",
   "names": []
 }

package/esm/map/components/DotLayer/BackgroundLayer.js

@@ -1,16 +1,12 @@
 import React from "react";
 import { Layer } from "react-map-gl";
 import { calculateCircleTranslate } from "./functions/calculate-circle-translate.js";
-import { resolveIconBackground } from "./functions/resolve-icon-background.js";
 import {
   BUBBLE_OUTLINE_STROKE,
   ICON_BACKGROUND_OPACITY
 } from "../../constants.js";
-import { calculateHoveredColor } from "../../functions/calculate-hovered-color.js";
 const BackgroundLayer = (props) => {
   const { background, beforeId, source, radius, iconAnchor } = props;
-  const iconBackground = resolveIconBackground(background);
-  const hoveredColor = calculateHoveredColor(iconBackground.color);
   const circleTranslate = calculateCircleTranslate(iconAnchor, radius);
   return /* @__PURE__ */ React.createElement(
     Layer,
@@ -22,13 +18,13 @@ const BackgroundLayer = (props) => {
         "circle-color": [
           "case",
           ["boolean", ["feature-state", "hover"], false],
-          hoveredColor,
-          iconBackground.color
+          ["get", "__hoveredBackgroundColor"],
+          ["get", "__backgroundColor"]
         ],
         "circle-radius": radius,
         "circle-opacity": [
           "case",
-          ["boolean", iconBackground.enabled, false],
+          ["boolean", background, false],
           ICON_BACKGROUND_OPACITY,
           ["boolean", ["feature-state", "hover"], false],
           ICON_BACKGROUND_OPACITY,

package/esm/map/components/DotLayer/BackgroundLayer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/DotLayer/BackgroundLayer.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport { Layer } from 'react-map-gl';\n\nimport { calculateCircleTranslate } from './functions/calculate-circle-translate.js';\nimport { resolveIconBackground } from './functions/resolve-icon-background.js';\nimport {\n  BUBBLE_OUTLINE_STROKE,\n  ICON_BACKGROUND_OPACITY,\n} from '../../constants.js';\nimport { calculateHoveredColor } from '../../functions/calculate-hovered-color.js';\n\ninterface BackgroundLayerProps {\n  background: boolean | string;\n  beforeId: string;\n  source: string;\n  radius: number;\n  iconAnchor: 'bottom' | 'center';\n}\n\nexport const BackgroundLayer = (props: BackgroundLayerProps) => {\n  const { background, beforeId, source, radius, iconAnchor } = props;\n\n  const iconBackground = resolveIconBackground(background);\n\n  const hoveredColor = calculateHoveredColor(iconBackground.color);\n\n  const circleTranslate = calculateCircleTranslate(iconAnchor, radius);\n\n  return (\n    <Layer\n      type=\"circle\"\n      beforeId={beforeId}\n      source={source}\n      paint={{\n        'circle-color': [\n          'case',\n          ['boolean', ['feature-state', 'hover'], false],\n          hoveredColor,\n          iconBackground.color,\n        ],\n        'circle-radius': radius,\n        'circle-opacity': [\n          'case',\n          ['boolean', iconBackground.enabled, false],\n          ICON_BACKGROUND_OPACITY,\n          ['boolean', ['feature-state', 'hover'], false],\n          ICON_BACKGROUND_OPACITY,\n          0,\n        ],\n        'circle-stroke-width': [\n          'case',\n          ['boolean', ['feature-state', 'active'], false],\n          BUBBLE_OUTLINE_STROKE,\n          0,\n        ],\n        'circle-translate': circleTranslate,\n      }}\n    />\n  );\n};\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,aAAa;AAEtB,SAAS,gCAAgC;AACzC,SAAS,6BAA6B;AACtC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AAU/B,MAAM,kBAAkB,CAAC,UAAgC;AAC9D,QAAM,EAAE,YAAY,UAAU,QAAQ,QAAQ,WAAW,IAAI;AAE7D,QAAM,iBAAiB,sBAAsB,UAAU;AAEvD,QAAM,eAAe,sBAAsB,eAAe,KAAK;AAE/D,QAAM,kBAAkB,yBAAyB,YAAY,MAAM;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,OAAO;AAAA,QACL,gBAAgB;AAAA,UACd;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,UAC7C;AAAA,UACA,eAAe;AAAA,QACjB;AAAA,QACA,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,UAChB;AAAA,UACA,CAAC,WAAW,eAAe,SAAS,KAAK;AAAA,UACzC;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,UAC7C;AAAA,UACA;AAAA,QACF;AAAA,QACA,uBAAuB;AAAA,UACrB;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,QAAQ,GAAG,KAAK;AAAA,UAC9C;AAAA,UACA;AAAA,QACF;AAAA,QACA,oBAAoB;AAAA,MACtB;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import React from 'react';\nimport { Layer } from 'react-map-gl';\n\nimport { calculateCircleTranslate } from './functions/calculate-circle-translate.js';\nimport {\n  BUBBLE_OUTLINE_STROKE,\n  ICON_BACKGROUND_OPACITY,\n} from '../../constants.js';\n\ninterface BackgroundLayerProps {\n  background: boolean;\n  beforeId: string;\n  source: string;\n  radius: number;\n  iconAnchor: 'bottom' | 'center';\n}\n\nexport const BackgroundLayer = (props: BackgroundLayerProps) => {\n  const { background, beforeId, source, radius, iconAnchor } = props;\n  const circleTranslate = calculateCircleTranslate(iconAnchor, radius);\n\n  return (\n    <Layer\n      type=\"circle\"\n      beforeId={beforeId}\n      source={source}\n      paint={{\n        'circle-color': [\n          'case',\n          ['boolean', ['feature-state', 'hover'], false],\n          ['get', '__hoveredBackgroundColor'],\n          ['get', '__backgroundColor'],\n        ],\n        'circle-radius': radius,\n        'circle-opacity': [\n          'case',\n          ['boolean', background, false],\n          ICON_BACKGROUND_OPACITY,\n          ['boolean', ['feature-state', 'hover'], false],\n          ICON_BACKGROUND_OPACITY,\n          0,\n        ],\n        'circle-stroke-width': [\n          'case',\n          ['boolean', ['feature-state', 'active'], false],\n          BUBBLE_OUTLINE_STROKE,\n          0,\n        ],\n        'circle-translate': circleTranslate,\n      }}\n    />\n  );\n};\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,aAAa;AAEtB,SAAS,gCAAgC;AACzC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAUA,MAAM,kBAAkB,CAAC,UAAgC;AAC9D,QAAM,EAAE,YAAY,UAAU,QAAQ,QAAQ,WAAW,IAAI;AAC7D,QAAM,kBAAkB,yBAAyB,YAAY,MAAM;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,OAAO;AAAA,QACL,gBAAgB;AAAA,UACd;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,UAC7C,CAAC,OAAO,0BAA0B;AAAA,UAClC,CAAC,OAAO,mBAAmB;AAAA,QAC7B;AAAA,QACA,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,UAChB;AAAA,UACA,CAAC,WAAW,YAAY,KAAK;AAAA,UAC7B;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,UAC7C;AAAA,UACA;AAAA,QACF;AAAA,QACA,uBAAuB;AAAA,UACrB;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,QAAQ,GAAG,KAAK;AAAA,UAC9C;AAAA,UACA;AAAA,QACF;AAAA,QACA,oBAAoB;AAAA,MACtB;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/esm/map/components/DotLayer/DotLayer.js

@@ -16,7 +16,7 @@ import { useLayerColoringStrategy } from "../../hooks/use-layer-coloring-strateg
 import { useLegendInteractionHighlighting } from "../../hooks/use-legend-interaction-highlighting.js";
 import { useLegendInteractionVisibility } from "../../hooks/use-legend-interaction-visibility.js";
 import { useLoadSymbolIntoMap } from "../../hooks/use-load-symbol-into-map.js";
-import { useResolveColor } from "../../hooks/use-resolve-color.js";
+import { useResolveLocationColor } from "../../hooks/use-resolve-color.js";
 import { useTooltipTemplate } from "../../hooks/use-tooltip-template.js";
 import { DotLayerTooltip as DotLayerTooltipSlot } from "../../slots/DotLayerTooltip.js";
 const DotLayer = (props) => {
@@ -36,12 +36,21 @@ const DotLayer = (props) => {
   );
   const defaultSymbolColor = symbolType === "shape" ? DEFAULT_SHAPE_COLOR : DEFAULT_ICON_COLOR;
   const colorParser = useLayerColoringStrategy();
-  const shapeColor = useResolveColor(defaultSymbolColor, props, colorParser);
+  const shapeColor = useResolveLocationColor(
+    defaultSymbolColor,
+    props,
+    colorParser
+  );
   const tooltipTemplate = useTooltipTemplate(children, DotLayerTooltipSlot);
   const sourceId = `source-${layerId}`;
   useLegendInteractionHighlighting(props, sourceId);
   useLegendInteractionVisibility(props, layerId);
-  const dataGeoJson = parseDotDataToGeoJSON(data, shapeColor, bearing);
+  const dataGeoJson = parseDotDataToGeoJSON(
+    data,
+    shapeColor,
+    bearing,
+    background
+  );
   const iconAnchor = shape === "pin" ? "bottom" : "center";
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Source, { id: sourceId, type: "geojson", data: dataGeoJson, generateId: true }, /* @__PURE__ */ React.createElement(
     Layer,
@@ -69,7 +78,7 @@ const DotLayer = (props) => {
   ), /* @__PURE__ */ React.createElement(
     BackgroundLayer,
     {
-      background,
+      background: Boolean(background),
       beforeId: layerId,
       source: sourceId,
       radius: shapeSize / 2,

package/esm/map/components/DotLayer/DotLayer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/DotLayer/DotLayer.tsx"],
-  "sourcesContent": ["import React, { type PropsWithChildren } from 'react';\nimport { Layer, Source } from 'react-map-gl/maplibre';\n\nimport { BackgroundLayer } from './BackgroundLayer.js';\nimport { DotLayerTooltip } from './DotLayerTooltip.js';\nimport { parseDotDataToGeoJSON } from './functions/parse-dot-data-to-geo-json.js';\nimport {\n  DEFAULT_ICON_COLOR,\n  DEFAULT_ICON_SIZE_RATIO,\n  DEFAULT_SHAPE_COLOR,\n  DEFAULT_SYMBOL_SIZE,\n  LEGEND_DIM_OPACITY,\n  SHAPE_OPACITY,\n} from '../../constants.js';\nimport { isDotTooltipTemplate } from '../../functions/tooltip-type-guards.js';\nimport { useLayerColoringStrategy } from '../../hooks/use-layer-coloring-strategy.js';\nimport { useLegendInteractionHighlighting } from '../../hooks/use-legend-interaction-highlighting.js';\nimport { useLegendInteractionVisibility } from '../../hooks/use-legend-interaction-visibility.js';\nimport { useLoadSymbolIntoMap } from '../../hooks/use-load-symbol-into-map.js';\nimport { useResolveColor } from '../../hooks/use-resolve-color.js';\nimport { useTooltipTemplate } from '../../hooks/use-tooltip-template.js';\nimport { DotLayerTooltip as DotLayerTooltipSlot } from '../../slots/DotLayerTooltip.js';\nimport type { InternalDotLayerProps } from '../../types/dot-layer.js';\nimport type { Location } from '../../types/location.js';\n\n/**\n * DotLayer Component\n */\nexport const DotLayer = <T extends Location>(\n  props: PropsWithChildren<InternalDotLayerProps<T>>,\n) => {\n  const {\n    data,\n    layerId,\n    bearing = 0,\n    children,\n    shape = 'pin',\n    background = false,\n    shapeSize = DEFAULT_SYMBOL_SIZE,\n  } = props;\n\n  const { symbolName, symbolType } = useLoadSymbolIntoMap(\n    shape,\n    layerId,\n    shapeSize,\n  );\n\n  const defaultSymbolColor =\n    symbolType === 'shape' ? DEFAULT_SHAPE_COLOR : DEFAULT_ICON_COLOR;\n\n  const colorParser = useLayerColoringStrategy();\n  const shapeColor = useResolveColor(defaultSymbolColor, props, colorParser);\n\n  const tooltipTemplate = useTooltipTemplate(children, DotLayerTooltipSlot);\n\n  const sourceId = `source-${layerId}`;\n  useLegendInteractionHighlighting(props, sourceId);\n  useLegendInteractionVisibility(props, layerId);\n\n  const dataGeoJson = parseDotDataToGeoJSON(data, shapeColor, bearing);\n\n  const iconAnchor = shape === 'pin' ? 'bottom' : 'center';\n\n  return (\n    <>\n      <Source id={sourceId} type=\"geojson\" data={dataGeoJson} generateId>\n        <Layer\n          type=\"symbol\"\n          id={layerId}\n          layout={{\n            'icon-image': symbolName,\n            'icon-size': DEFAULT_ICON_SIZE_RATIO,\n            'icon-rotate': ['get', '__bearing'],\n            // https://maplibre.org/maplibre-style-spec/layers/#layout-symbol-icon-ignore-placement\n            'icon-ignore-placement': true,\n            'icon-anchor': iconAnchor,\n          }}\n          paint={{\n            'icon-color': ['get', '__color'],\n            'icon-opacity': [\n              'case',\n              ['boolean', ['feature-state', 'legendHover'], true],\n              SHAPE_OPACITY,\n              LEGEND_DIM_OPACITY,\n            ],\n          }}\n        />\n        <BackgroundLayer\n          background={background}\n          beforeId={layerId}\n          source={sourceId}\n          radius={shapeSize / 2}\n          iconAnchor={iconAnchor}\n        />\n      </Source>\n\n      <DotLayerTooltip\n        layerId={layerId}\n        tooltipTemplate={\n          isDotTooltipTemplate(tooltipTemplate) ? tooltipTemplate : undefined\n        }\n      />\n    </>\n  );\n};\n\nDotLayer['displayName'] = 'DotLayer';\n"],
-  "mappings": "AAAA,OAAO,WAAuC;AAC9C,SAAS,OAAO,cAAc;AAE9B,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AACrC,SAAS,gCAAgC;AACzC,SAAS,wCAAwC;AACjD,SAAS,sCAAsC;AAC/C,SAAS,4BAA4B;AACrC,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,mBAAmB,2BAA2B;AAOhD,MAAM,WAAW,CACtB,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,YAAY;AAAA,EACd,IAAI;AAEJ,QAAM,EAAE,YAAY,WAAW,IAAI;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,qBACJ,eAAe,UAAU,sBAAsB;AAEjD,QAAM,cAAc,yBAAyB;AAC7C,QAAM,aAAa,gBAAgB,oBAAoB,OAAO,WAAW;AAEzE,QAAM,kBAAkB,mBAAmB,UAAU,mBAAmB;AAExE,QAAM,WAAW,UAAU,OAAO;AAClC,mCAAiC,OAAO,QAAQ;AAChD,iCAA+B,OAAO,OAAO;AAE7C,QAAM,cAAc,sBAAsB,MAAM,YAAY,OAAO;AAEnE,QAAM,aAAa,UAAU,QAAQ,WAAW;AAEhD,SACE,0DACE,oCAAC,UAAO,IAAI,UAAU,MAAK,WAAU,MAAM,aAAa,YAAU,QAChE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,IAAI;AAAA,MACJ,QAAQ;AAAA,QACN,cAAc;AAAA,QACd,aAAa;AAAA,QACb,eAAe,CAAC,OAAO,WAAW;AAAA;AAAA,QAElC,yBAAyB;AAAA,QACzB,eAAe;AAAA,MACjB;AAAA,MACA,OAAO;AAAA,QACL,cAAc,CAAC,OAAO,SAAS;AAAA,QAC/B,gBAAgB;AAAA,UACd;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,UAClD;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA;AAAA,EACF,GACA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,QAAQ,YAAY;AAAA,MACpB;AAAA;AAAA,EACF,CACF,GAEA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,iBACE,qBAAqB,eAAe,IAAI,kBAAkB;AAAA;AAAA,EAE9D,CACF;AAEJ;AAEA,SAAS,aAAa,IAAI;",
+  "sourcesContent": ["import React, { type PropsWithChildren } from 'react';\nimport { Layer, Source } from 'react-map-gl/maplibre';\n\nimport { BackgroundLayer } from './BackgroundLayer.js';\nimport { DotLayerTooltip } from './DotLayerTooltip.js';\nimport { parseDotDataToGeoJSON } from './functions/parse-dot-data-to-geo-json.js';\nimport {\n  DEFAULT_ICON_COLOR,\n  DEFAULT_ICON_SIZE_RATIO,\n  DEFAULT_SHAPE_COLOR,\n  DEFAULT_SYMBOL_SIZE,\n  LEGEND_DIM_OPACITY,\n  SHAPE_OPACITY,\n} from '../../constants.js';\nimport { isDotTooltipTemplate } from '../../functions/tooltip-type-guards.js';\nimport { useLayerColoringStrategy } from '../../hooks/use-layer-coloring-strategy.js';\nimport { useLegendInteractionHighlighting } from '../../hooks/use-legend-interaction-highlighting.js';\nimport { useLegendInteractionVisibility } from '../../hooks/use-legend-interaction-visibility.js';\nimport { useLoadSymbolIntoMap } from '../../hooks/use-load-symbol-into-map.js';\nimport { useResolveLocationColor } from '../../hooks/use-resolve-color.js';\nimport { useTooltipTemplate } from '../../hooks/use-tooltip-template.js';\nimport { DotLayerTooltip as DotLayerTooltipSlot } from '../../slots/DotLayerTooltip.js';\nimport type { InternalDotLayerProps } from '../../types/dot-layer.js';\nimport type { Location } from '../../types/location.js';\n\n/**\n * DotLayer Component\n */\nexport const DotLayer = <T extends Location>(\n  props: PropsWithChildren<InternalDotLayerProps<T>>,\n) => {\n  const {\n    data,\n    layerId,\n    bearing = 0,\n    children,\n    shape = 'pin',\n    background = false,\n    shapeSize = DEFAULT_SYMBOL_SIZE,\n  } = props;\n\n  const { symbolName, symbolType } = useLoadSymbolIntoMap(\n    shape,\n    layerId,\n    shapeSize,\n  );\n\n  const defaultSymbolColor =\n    symbolType === 'shape' ? DEFAULT_SHAPE_COLOR : DEFAULT_ICON_COLOR;\n\n  const colorParser = useLayerColoringStrategy();\n  const shapeColor = useResolveLocationColor(\n    defaultSymbolColor,\n    props,\n    colorParser,\n  );\n\n  const tooltipTemplate = useTooltipTemplate(children, DotLayerTooltipSlot);\n\n  const sourceId = `source-${layerId}`;\n  useLegendInteractionHighlighting(props, sourceId);\n  useLegendInteractionVisibility(props, layerId);\n\n  const dataGeoJson = parseDotDataToGeoJSON(\n    data,\n    shapeColor,\n    bearing,\n    background,\n  );\n\n  const iconAnchor = shape === 'pin' ? 'bottom' : 'center';\n\n  return (\n    <>\n      <Source id={sourceId} type=\"geojson\" data={dataGeoJson} generateId>\n        <Layer\n          type=\"symbol\"\n          id={layerId}\n          layout={{\n            'icon-image': symbolName,\n            'icon-size': DEFAULT_ICON_SIZE_RATIO,\n            'icon-rotate': ['get', '__bearing'],\n            // https://maplibre.org/maplibre-style-spec/layers/#layout-symbol-icon-ignore-placement\n            'icon-ignore-placement': true,\n            'icon-anchor': iconAnchor,\n          }}\n          paint={{\n            'icon-color': ['get', '__color'],\n            'icon-opacity': [\n              'case',\n              ['boolean', ['feature-state', 'legendHover'], true],\n              SHAPE_OPACITY,\n              LEGEND_DIM_OPACITY,\n            ],\n          }}\n        />\n        <BackgroundLayer\n          background={Boolean(background)}\n          beforeId={layerId}\n          source={sourceId}\n          radius={shapeSize / 2}\n          iconAnchor={iconAnchor}\n        />\n      </Source>\n\n      <DotLayerTooltip\n        layerId={layerId}\n        tooltipTemplate={\n          isDotTooltipTemplate(tooltipTemplate) ? tooltipTemplate : undefined\n        }\n      />\n    </>\n  );\n};\n\nDotLayer['displayName'] = 'DotLayer';\n"],
+  "mappings": "AAAA,OAAO,WAAuC;AAC9C,SAAS,OAAO,cAAc;AAE9B,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AACrC,SAAS,gCAAgC;AACzC,SAAS,wCAAwC;AACjD,SAAS,sCAAsC;AAC/C,SAAS,4BAA4B;AACrC,SAAS,+BAA+B;AACxC,SAAS,0BAA0B;AACnC,SAAS,mBAAmB,2BAA2B;AAOhD,MAAM,WAAW,CACtB,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,YAAY;AAAA,EACd,IAAI;AAEJ,QAAM,EAAE,YAAY,WAAW,IAAI;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,qBACJ,eAAe,UAAU,sBAAsB;AAEjD,QAAM,cAAc,yBAAyB;AAC7C,QAAM,aAAa;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,kBAAkB,mBAAmB,UAAU,mBAAmB;AAExE,QAAM,WAAW,UAAU,OAAO;AAClC,mCAAiC,OAAO,QAAQ;AAChD,iCAA+B,OAAO,OAAO;AAE7C,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,aAAa,UAAU,QAAQ,WAAW;AAEhD,SACE,0DACE,oCAAC,UAAO,IAAI,UAAU,MAAK,WAAU,MAAM,aAAa,YAAU,QAChE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,IAAI;AAAA,MACJ,QAAQ;AAAA,QACN,cAAc;AAAA,QACd,aAAa;AAAA,QACb,eAAe,CAAC,OAAO,WAAW;AAAA;AAAA,QAElC,yBAAyB;AAAA,QACzB,eAAe;AAAA,MACjB;AAAA,MACA,OAAO;AAAA,QACL,cAAc,CAAC,OAAO,SAAS;AAAA,QAC/B,gBAAgB;AAAA,UACd;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,UAClD;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA;AAAA,EACF,GACA;AAAA,IAAC;AAAA;AAAA,MACC,YAAY,QAAQ,UAAU;AAAA,MAC9B,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,QAAQ,YAAY;AAAA,MACpB;AAAA;AAAA,EACF,CACF,GAEA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,iBACE,qBAAqB,eAAe,IAAI,kBAAkB;AAAA;AAAA,EAE9D,CACF;AAEJ;AAEA,SAAS,aAAa,IAAI;",
   "names": []
 }

package/esm/map/components/DotLayer/functions/parse-dot-data-to-geo-json.js

@@ -1,14 +1,16 @@
 import { _getCanvasColor as getCanvasColor } from "@dynatrace/strato-components-preview/charts";
 import { defineBearing } from "./define-bearing.js";
+import { resolveIconBackground } from "./resolve-icon-background.js";
 import { calculateHoveredColor } from "../../../functions/calculate-hovered-color.js";
 import { defineColor } from "../../../functions/define-color.js";
-const parseDotDataToGeoJSON = (data, color, bearing) => {
+const parseDotDataToGeoJSON = (data, color, bearing, backgroundColor) => {
   return {
     type: "FeatureCollection",
     features: data.map((feature) => {
       const { longitude, latitude, ...properties } = feature;
       const canvasColor = getCanvasColor(defineColor(color, feature));
       const hoveredColor = calculateHoveredColor(canvasColor);
+      const { parsedBackgroundColor, parsedHoveredBackgroundColor } = resolveIconBackground(feature, backgroundColor);
       return {
         type: "Feature",
         properties: {
@@ -16,6 +18,8 @@ const parseDotDataToGeoJSON = (data, color, bearing) => {
           ...properties,
           __color: canvasColor,
           __hoveredColor: hoveredColor,
+          __backgroundColor: parsedBackgroundColor,
+          __hoveredBackgroundColor: parsedHoveredBackgroundColor,
           __bearing: defineBearing(bearing, feature)
         },
         geometry: { type: "Point", coordinates: [longitude, latitude] }

package/esm/map/components/DotLayer/functions/parse-dot-data-to-geo-json.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/map/components/DotLayer/functions/parse-dot-data-to-geo-json.ts"],
-  "sourcesContent": ["import { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components-preview/charts';\n\nimport { defineBearing } from './define-bearing.js';\nimport { calculateHoveredColor } from '../../../functions/calculate-hovered-color.js';\nimport { defineColor } from '../../../functions/define-color.js';\nimport type { Location } from '../../../types/location.js';\n\nexport const parseDotDataToGeoJSON = <T extends Location>(\n  data: T[],\n  color: string | ((item: T) => string),\n  bearing: number | ((item: T) => number),\n) => {\n  return {\n    type: 'FeatureCollection',\n    features: data.map((feature) => {\n      const { longitude, latitude, ...properties } = feature;\n      const canvasColor = getCanvasColor(defineColor(color, feature));\n      const hoveredColor = calculateHoveredColor(canvasColor);\n\n      return {\n        type: 'Feature',\n        properties: {\n          data: feature,\n          ...properties,\n          __color: canvasColor,\n          __hoveredColor: hoveredColor,\n          __bearing: defineBearing(bearing, feature),\n        },\n        geometry: { type: 'Point', coordinates: [longitude, latitude] },\n      };\n    }),\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAGrB,MAAM,wBAAwB,CACnC,MACA,OACA,YACG;AACH,SAAO;AAAA,IACL,MAAM;AAAA,IACN,UAAU,KAAK,IAAI,CAAC,YAAY;AAC9B,YAAM,EAAE,WAAW,UAAU,GAAG,WAAW,IAAI;AAC/C,YAAM,cAAc,eAAe,YAAY,OAAO,OAAO,CAAC;AAC9D,YAAM,eAAe,sBAAsB,WAAW;AAEtD,aAAO;AAAA,QACL,MAAM;AAAA,QACN,YAAY;AAAA,UACV,MAAM;AAAA,UACN,GAAG;AAAA,UACH,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,WAAW,cAAc,SAAS,OAAO;AAAA,QAC3C;AAAA,QACA,UAAU,EAAE,MAAM,SAAS,aAAa,CAAC,WAAW,QAAQ,EAAE;AAAA,MAChE;AAAA,IACF,CAAC;AAAA,EACH;AACF;",
+  "sourcesContent": ["import { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components-preview/charts';\n\nimport { defineBearing } from './define-bearing.js';\nimport { resolveIconBackground } from './resolve-icon-background.js';\nimport { calculateHoveredColor } from '../../../functions/calculate-hovered-color.js';\nimport { defineColor } from '../../../functions/define-color.js';\nimport type { Location } from '../../../types/location.js';\n\nexport const parseDotDataToGeoJSON = <T extends Location>(\n  data: T[],\n  color: string | ((item: T) => string),\n  bearing: number | ((item: T) => number),\n  backgroundColor: boolean | string | ((item: T) => string),\n) => {\n  return {\n    type: 'FeatureCollection',\n    features: data.map((feature) => {\n      const { longitude, latitude, ...properties } = feature;\n      const canvasColor = getCanvasColor(defineColor(color, feature));\n      const hoveredColor = calculateHoveredColor(canvasColor);\n\n      const { parsedBackgroundColor, parsedHoveredBackgroundColor } =\n        resolveIconBackground(feature, backgroundColor);\n\n      return {\n        type: 'Feature',\n        properties: {\n          data: feature,\n          ...properties,\n          __color: canvasColor,\n          __hoveredColor: hoveredColor,\n          __backgroundColor: parsedBackgroundColor,\n          __hoveredBackgroundColor: parsedHoveredBackgroundColor,\n          __bearing: defineBearing(bearing, feature),\n        },\n        geometry: { type: 'Point', coordinates: [longitude, latitude] },\n      };\n    }),\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AACtC,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAGrB,MAAM,wBAAwB,CACnC,MACA,OACA,SACA,oBACG;AACH,SAAO;AAAA,IACL,MAAM;AAAA,IACN,UAAU,KAAK,IAAI,CAAC,YAAY;AAC9B,YAAM,EAAE,WAAW,UAAU,GAAG,WAAW,IAAI;AAC/C,YAAM,cAAc,eAAe,YAAY,OAAO,OAAO,CAAC;AAC9D,YAAM,eAAe,sBAAsB,WAAW;AAEtD,YAAM,EAAE,uBAAuB,6BAA6B,IAC1D,sBAAsB,SAAS,eAAe;AAEhD,aAAO;AAAA,QACL,MAAM;AAAA,QACN,YAAY;AAAA,UACV,MAAM;AAAA,UACN,GAAG;AAAA,UACH,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,mBAAmB;AAAA,UACnB,0BAA0B;AAAA,UAC1B,WAAW,cAAc,SAAS,OAAO;AAAA,QAC3C;AAAA,QACA,UAAU,EAAE,MAAM,SAAS,aAAa,CAAC,WAAW,QAAQ,EAAE;AAAA,MAChE;AAAA,IACF,CAAC;AAAA,EACH;AACF;",
   "names": []
 }

package/esm/map/components/DotLayer/functions/resolve-icon-background.js

@@ -1,15 +1,28 @@
+import { isEmpty } from "lodash-es";
 import { _getCanvasColor as getCanvasColor } from "@dynatrace/strato-components-preview/charts";
 import { DEFAULT_ICON_BACKGROUND_COLOR } from "../../../constants.js";
-const resolveIconBackground = (background) => {
-  if (typeof background === "string") {
-    return {
-      enabled: true,
-      color: getCanvasColor(background, DEFAULT_ICON_BACKGROUND_COLOR)
-    };
+import { calculateHoveredColor } from "../../../functions/calculate-hovered-color.js";
+import { defineColor } from "../../../functions/define-color.js";
+const resolveIconBackground = (datapoint, backgroundColor) => {
+  let parsedBackgroundColor = getCanvasColor(DEFAULT_ICON_BACKGROUND_COLOR);
+  let parsedHoveredBackgroundColor = calculateHoveredColor(
+    parsedBackgroundColor
+  );
+  if (typeof backgroundColor !== "boolean") {
+    const definedBgColor = defineColor(backgroundColor, datapoint);
+    if (!isEmpty(definedBgColor)) {
+      parsedBackgroundColor = getCanvasColor(
+        definedBgColor,
+        DEFAULT_ICON_BACKGROUND_COLOR
+      );
+      parsedHoveredBackgroundColor = calculateHoveredColor(
+        parsedBackgroundColor
+      );
+    }
   }
   return {
-    enabled: background,
-    color: getCanvasColor(DEFAULT_ICON_BACKGROUND_COLOR)
+    parsedBackgroundColor,
+    parsedHoveredBackgroundColor
   };
 };
 export {

package/esm/map/components/DotLayer/functions/resolve-icon-background.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/map/components/DotLayer/functions/resolve-icon-background.ts"],
-  "sourcesContent": ["import { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components-preview/charts';\n\nimport { DEFAULT_ICON_BACKGROUND_COLOR } from '../../../constants.js';\n\nexport const resolveIconBackground = (background: string | boolean) => {\n  if (typeof background === 'string') {\n    return {\n      enabled: true,\n      color: getCanvasColor(background, DEFAULT_ICON_BACKGROUND_COLOR),\n    };\n  }\n\n  return {\n    enabled: background,\n    color: getCanvasColor(DEFAULT_ICON_BACKGROUND_COLOR),\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,qCAAqC;AAEvC,MAAM,wBAAwB,CAAC,eAAiC;AACrE,MAAI,OAAO,eAAe,UAAU;AAClC,WAAO;AAAA,MACL,SAAS;AAAA,MACT,OAAO,eAAe,YAAY,6BAA6B;AAAA,IACjE;AAAA,EACF;AAEA,SAAO;AAAA,IACL,SAAS;AAAA,IACT,OAAO,eAAe,6BAA6B;AAAA,EACrD;AACF;",
+  "sourcesContent": ["import { isEmpty } from 'lodash-es';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components-preview/charts';\n\nimport { DEFAULT_ICON_BACKGROUND_COLOR } from '../../../constants.js';\nimport { calculateHoveredColor } from '../../../functions/calculate-hovered-color.js';\nimport { defineColor } from '../../../functions/define-color.js';\nimport { Location } from '../../../types/location.js';\n\ninterface ResolvedIconBackgroundColor {\n  parsedBackgroundColor: string;\n  parsedHoveredBackgroundColor: string;\n}\n\nexport const resolveIconBackground = <T extends Location>(\n  datapoint: T,\n  backgroundColor: boolean | string | ((item: T) => string),\n): ResolvedIconBackgroundColor => {\n  let parsedBackgroundColor = getCanvasColor(DEFAULT_ICON_BACKGROUND_COLOR);\n  let parsedHoveredBackgroundColor = calculateHoveredColor(\n    parsedBackgroundColor,\n  );\n\n  if (typeof backgroundColor !== 'boolean') {\n    const definedBgColor = defineColor(backgroundColor, datapoint);\n\n    // check if the background color was successfully extracted out of the feature\n    if (!isEmpty(definedBgColor)) {\n      parsedBackgroundColor = getCanvasColor(\n        definedBgColor,\n        DEFAULT_ICON_BACKGROUND_COLOR,\n      );\n      parsedHoveredBackgroundColor = calculateHoveredColor(\n        parsedBackgroundColor,\n      );\n    }\n  }\n\n  return {\n    parsedBackgroundColor: parsedBackgroundColor,\n    parsedHoveredBackgroundColor: parsedHoveredBackgroundColor,\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,eAAe;AAExB,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,qCAAqC;AAC9C,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAQrB,MAAM,wBAAwB,CACnC,WACA,oBACgC;AAChC,MAAI,wBAAwB,eAAe,6BAA6B;AACxE,MAAI,+BAA+B;AAAA,IACjC;AAAA,EACF;AAEA,MAAI,OAAO,oBAAoB,WAAW;AACxC,UAAM,iBAAiB,YAAY,iBAAiB,SAAS;AAG7D,QAAI,CAAC,QAAQ,cAAc,GAAG;AAC5B,8BAAwB;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AACA,qCAA+B;AAAA,QAC7B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }