@dynatrace/strato-geo 1.0.3 → 1.1.4

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 { 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;",
+  "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  ConnectionLayerBaseProps,\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  ConnectionColorProps,\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;AAyDtC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,yBAAyB;",
   "names": []
 }

package/esm/map/MapView.js

@@ -40,12 +40,13 @@ const _MapView = forwardRef(
       truncationMode,
       ...remaining
     } = props;
-    const { layerIds, parsedChildren, valueAccessor } = setLayersId(children);
-    const { flattenData: layersData, categories } = extractLayersData(
-      parsedChildren,
-      valueAccessor
-    );
-    const config = iterateConfigSlots(children);
+    const { layerIds, parsedChildren, valueAccessors } = setLayersId(children);
+    const {
+      flattenData: layersData,
+      categories,
+      legendDomain
+    } = extractLayersData(parsedChildren, valueAccessors);
+    const config = iterateConfigSlots(children, legendDomain);
     const isLegendHidden = !config.legend || !!config.legend.hidden;
     const legendPosition = config.legend?.position;
     const legendRatio = config.legend?.ratio;

package/esm/map/MapView.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/map/MapView.tsx"],
-  "sourcesContent": ["import React, { forwardRef, type PropsWithChildren } from 'react';\n\nimport {\n  _ChartLayout as ChartLayout,\n  _coerceSizeValue as coerceSizeValue,\n  _useAutoLegendRefresh as useAutoLegendRefresh,\n} from '@dynatrace/strato-components-preview/charts';\n\nimport { MapLegendRenderer } from './components/legend/MapLegendRenderer.js';\nimport { MapContent } from './components/MapContent.js';\nimport { MapUnavailable } from './components/MapUnavailable.js';\nimport {\n  DEFAULT_LEGEND_SIZES,\n  DEFAULT_MAP_HEIGHT,\n  DEFAULT_TRUNCATION_MODE,\n} from './constants.js';\nimport { FormatterContext } from './contexts/formatter.context.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 { MapLoadingContext } from './contexts/map-loading.context.js';\nimport { MapRawDataContext } from './contexts/map-raw-data.context.js';\nimport { MapTruncationModeContext } from './contexts/map-truncation-mode.context.js';\nimport { useLoadMapBaseLayer } from './hooks/use-load-map-base-layer.js';\nimport { ColorScaleProvider } from './providers/color-scale.provider.js';\nimport { LayerColorStrategyProvider } from './providers/layer-color-strategy.provider.js';\nimport { ErrorStateSlot } from './slots/states/ErrorStateSlot.js';\nimport { MapStoreProvider } from './store/map-store.provider.js';\nimport type { MapViewProps, MapViewRef } from './types/map-view.js';\nimport { extractLayersData } from './utils/extract-layers-data.js';\nimport { getMapStatesTemplates } from './utils/get-map-states-template.js';\nimport { iterateConfigSlots } from './utils/iterate-config-slots.js';\nimport { setLayersId } from './utils/set-layers-id.js';\n\n// eslint-disable-next-line no-restricted-imports\nimport './styles/react-mapgl-styles.css';\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      formatter,\n      truncationMode,\n      ...remaining\n    } = props;\n    const { layerIds, parsedChildren, valueAccessor } = setLayersId(children);\n\n    const { flattenData: layersData, categories } = extractLayersData(\n      parsedChildren,\n      valueAccessor,\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    const mapUnavailable = (!isLoading && !isMapEnabled) || error;\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          mapUnavailable ? (\n            <MapUnavailable\n              isLoading={isLoading}\n              isDisabled={!isMapEnabled}\n              chartHeight={chartHeight}\n              error={error}\n            />\n          ) : (\n            <MapLoadingContext.Provider value={loading}>\n              <MapBaseLayerFeaturesContext.Provider\n                value={baseFeatureCollection}\n              >\n                <MapConfigurationContext.Provider value={config}>\n                  <LayerIdsContext.Provider value={layerIds}>\n                    <MapTruncationModeContext.Provider\n                      value={truncationMode ?? DEFAULT_TRUNCATION_MODE}\n                    >\n                      <FormatterContext.Provider value={formatter}>\n                        <MapRawDataContext.Provider value={layersData}>\n                          <MapStoreProvider>\n                            <ColorScaleProvider categories={categories}>\n                              <LayerColorStrategyProvider>\n                                <ChartLayout\n                                  ref={chartLayoutRef}\n                                  chartHeight={chartHeight}\n                                  errorState={errorState}\n                                  showLoader={loading || isLoading}\n                                >\n                                  <ChartLayout.Graph>\n                                    {baseFeatureCollection && (\n                                      <MapContent\n                                        ref={forwardedRef}\n                                        {...remaining}\n                                      >\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                        </MapRawDataContext.Provider>\n                      </FormatterContext.Provider>\n                    </MapTruncationModeContext.Provider>\n                  </LayerIdsContext.Provider>\n                </MapConfigurationContext.Provider>\n              </MapBaseLayerFeaturesContext.Provider>\n            </MapLoadingContext.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": "AAAA,OAAO,SAAS,kBAA0C;AAE1D;AAAA,EACE,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,yBAAyB;AAAA,OACpB;AAEP,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,mCAAmC;AAC5C,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,gCAAgC;AACzC,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC,SAAS,kCAAkC;AAC3C,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AAEjC,SAAS,yBAAyB;AAClC,SAAS,6BAA6B;AACtC,SAAS,0BAA0B;AACnC,SAAS,mBAAmB;AAG5B,OAAO;AAKP,MAAM,WAAW;AAAA,EACf,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,UAAU;AAAA,MACV,OAAO;AAAA,MACP,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,EAAE,UAAU,gBAAgB,cAAc,IAAI,YAAY,QAAQ;AAExE,UAAM,EAAE,aAAa,YAAY,WAAW,IAAI;AAAA,MAC9C;AAAA,MACA;AAAA,IACF;AAEA,UAAM,SAAS,mBAAmB,QAAQ;AAE1C,UAAM,iBAAiB,CAAC,OAAO,UAAU,CAAC,CAAC,OAAO,OAAO;AACzD,UAAM,iBAAiB,OAAO,QAAQ;AACtC,UAAM,cAAc,OAAO,QAAQ;AACnC,UAAM,sBAAsB,OAAO,QAAQ;AAE3C,UAAM,EAAE,cAAc,WAAW,uBAAuB,MAAM,IAC5D,oBAAoB,OAAO,SAAS;AAEtC,UAAM,EAAE,WAAW,IAAI,sBAAsB,QAAQ;AAErD,UAAM,cAAc,gBAAgB,MAAM,MAAM,KAAK;AAErD,UAAM,kBAAkB,EAAE,OAAO,QAAQ,GAAG,cAAc;AAE1D,UAAM,iBAAiB,qBAAqB,UAAU;AACtD,UAAM,iBAAkB,CAAC,aAAa,CAAC,gBAAiB;AAExD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,WAAW;AAAA,QACX,eAAY;AAAA;AAAA;AAAA,MAIV,iBACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,YAAY,CAAC;AAAA,UACb;AAAA,UACA;AAAA;AAAA,MACF,IAEA,oCAAC,kBAAkB,UAAlB,EAA2B,OAAO,WACjC;AAAA,QAAC,4BAA4B;AAAA,QAA5B;AAAA,UACC,OAAO;AAAA;AAAA,QAEP,oCAAC,wBAAwB,UAAxB,EAAiC,OAAO,UACvC,oCAAC,gBAAgB,UAAhB,EAAyB,OAAO,YAC/B;AAAA,UAAC,yBAAyB;AAAA,UAAzB;AAAA,YACC,OAAO,kBAAkB;AAAA;AAAA,UAEzB,oCAAC,iBAAiB,UAAjB,EAA0B,OAAO,aAChC,oCAAC,kBAAkB,UAAlB,EAA2B,OAAO,cACjC,oCAAC,wBACC,oCAAC,sBAAmB,cAClB,oCAAC,kCACC;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL;AAAA,cACA;AAAA,cACA,YAAY,WAAW;AAAA;AAAA,YAEvB,oCAAC,YAAY,OAAZ,MACE,yBACC;AAAA,cAAC;AAAA;AAAA,gBACC,KAAK;AAAA,gBACJ,GAAG;AAAA;AAAA,cAEH;AAAA,YACH,CAEJ;AAAA,YACC,CAAC,kBACA;AAAA,cAAC,YAAY;AAAA,cAAZ;AAAA,gBACC,UAAU;AAAA,gBACV,OAAO;AAAA,gBACP,iBAAiB;AAAA,gBACjB,UAAU;AAAA;AAAA,cAEV,oCAAC,uBAAkB;AAAA,YACrB;AAAA,UAEJ,CACF,CACF,CACF,CACF,CACF;AAAA,QACF,CACF,CACF;AAAA,MACF,CACF;AAAA,IAGN;AAAA,EAEJ;AACF;AAEC,SAAuD,aAAa,IACnE;AAMK,MAAM,UAAU,OAAO,OAAO,UAAU;AAAA,EAC7C,YAAY;AACd,CAAC;",
+  "sourcesContent": ["import React, { forwardRef, type PropsWithChildren } from 'react';\n\nimport {\n  _ChartLayout as ChartLayout,\n  _coerceSizeValue as coerceSizeValue,\n  _useAutoLegendRefresh as useAutoLegendRefresh,\n} from '@dynatrace/strato-components-preview/charts';\n\nimport { MapLegendRenderer } from './components/legend/MapLegendRenderer.js';\nimport { MapContent } from './components/MapContent.js';\nimport { MapUnavailable } from './components/MapUnavailable.js';\nimport {\n  DEFAULT_LEGEND_SIZES,\n  DEFAULT_MAP_HEIGHT,\n  DEFAULT_TRUNCATION_MODE,\n} from './constants.js';\nimport { FormatterContext } from './contexts/formatter.context.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 { MapLoadingContext } from './contexts/map-loading.context.js';\nimport { MapRawDataContext } from './contexts/map-raw-data.context.js';\nimport { MapTruncationModeContext } from './contexts/map-truncation-mode.context.js';\nimport { useLoadMapBaseLayer } from './hooks/use-load-map-base-layer.js';\nimport { ColorScaleProvider } from './providers/color-scale.provider.js';\nimport { LayerColorStrategyProvider } from './providers/layer-color-strategy.provider.js';\nimport { ErrorStateSlot } from './slots/states/ErrorStateSlot.js';\nimport { MapStoreProvider } from './store/map-store.provider.js';\nimport type { MapViewProps, MapViewRef } from './types/map-view.js';\nimport { extractLayersData } from './utils/extract-layers-data.js';\nimport { getMapStatesTemplates } from './utils/get-map-states-template.js';\nimport { iterateConfigSlots } from './utils/iterate-config-slots.js';\nimport { setLayersId } from './utils/set-layers-id.js';\n\n// eslint-disable-next-line no-restricted-imports\nimport './styles/react-mapgl-styles.css';\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      formatter,\n      truncationMode,\n      ...remaining\n    } = props;\n    const { layerIds, parsedChildren, valueAccessors } = setLayersId(children);\n\n    const {\n      flattenData: layersData,\n      categories,\n      legendDomain,\n    } = extractLayersData(parsedChildren, valueAccessors);\n\n    const config = iterateConfigSlots(children, legendDomain);\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    const mapUnavailable = (!isLoading && !isMapEnabled) || error;\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          mapUnavailable ? (\n            <MapUnavailable\n              isLoading={isLoading}\n              isDisabled={!isMapEnabled}\n              chartHeight={chartHeight}\n              error={error}\n            />\n          ) : (\n            <MapLoadingContext.Provider value={loading}>\n              <MapBaseLayerFeaturesContext.Provider\n                value={baseFeatureCollection}\n              >\n                <MapConfigurationContext.Provider value={config}>\n                  <LayerIdsContext.Provider value={layerIds}>\n                    <MapTruncationModeContext.Provider\n                      value={truncationMode ?? DEFAULT_TRUNCATION_MODE}\n                    >\n                      <FormatterContext.Provider value={formatter}>\n                        <MapRawDataContext.Provider value={layersData}>\n                          <MapStoreProvider>\n                            <ColorScaleProvider categories={categories}>\n                              <LayerColorStrategyProvider>\n                                <ChartLayout\n                                  ref={chartLayoutRef}\n                                  chartHeight={chartHeight}\n                                  errorState={errorState}\n                                  showLoader={loading || isLoading}\n                                >\n                                  <ChartLayout.Graph>\n                                    {baseFeatureCollection && (\n                                      <MapContent\n                                        ref={forwardedRef}\n                                        {...remaining}\n                                      >\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                        </MapRawDataContext.Provider>\n                      </FormatterContext.Provider>\n                    </MapTruncationModeContext.Provider>\n                  </LayerIdsContext.Provider>\n                </MapConfigurationContext.Provider>\n              </MapBaseLayerFeaturesContext.Provider>\n            </MapLoadingContext.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/BubbleCircleLayer.js

@@ -6,8 +6,8 @@ import {
   BUBBLE_DEFAULT_OPACITY,
   BUBBLE_STROKE,
   DEFAULT_RADIUS_EXPRESSION,
-  LEGEND_DIM_OPACITY,
-  SHAPE_OPACITY
+  SHAPE_OPACITY_DIMMED,
+  SHAPE_OPACITY_DEFAULT
 } from "../../constants.js";
 const BubbleCircleLayer = ({
   id,
@@ -33,7 +33,7 @@ const BubbleCircleLayer = ({
           "case",
           ["boolean", ["feature-state", "legendHover"], true],
           BUBBLE_DEFAULT_OPACITY,
-          LEGEND_DIM_OPACITY
+          SHAPE_OPACITY_DIMMED
         ],
         "circle-stroke-width": BUBBLE_STROKE,
         "circle-stroke-color": [
@@ -45,8 +45,8 @@ const BubbleCircleLayer = ({
         "circle-stroke-opacity": [
           "case",
           ["boolean", ["feature-state", "legendHover"], true],
-          SHAPE_OPACITY,
-          LEGEND_DIM_OPACITY
+          SHAPE_OPACITY_DEFAULT,
+          SHAPE_OPACITY_DIMMED
         ]
       }
     }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/BubbleLayer/BubbleCircleLayer.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport { Layer } from 'react-map-gl/maplibre';\n\nimport { useSizeInterpolation } from './hooks/use-size-interpolation.js';\nimport { buildCircleStickToDistanceExpression } from './utils/build-stick-to-distance-expressions.js';\nimport {\n  BUBBLE_DEFAULT_OPACITY,\n  BUBBLE_STROKE,\n  DEFAULT_RADIUS_EXPRESSION,\n  LEGEND_DIM_OPACITY,\n  SHAPE_OPACITY,\n} from '../../constants.js';\n\nexport const BubbleCircleLayer = ({\n  id,\n  source,\n}: {\n  id: string;\n  source: string;\n}) => {\n  const sizeInterpolation = useSizeInterpolation();\n\n  const radiusExpression =\n    sizeInterpolation === 'fixed'\n      ? DEFAULT_RADIUS_EXPRESSION\n      : buildCircleStickToDistanceExpression();\n\n  return (\n    <Layer\n      type=\"circle\"\n      id={id}\n      source={source}\n      paint={{\n        'circle-color': [\n          'case',\n          ['boolean', ['feature-state', 'hover'], false],\n          ['get', '__hoveredColor'],\n          ['get', '__color'],\n        ],\n        'circle-radius': radiusExpression,\n        'circle-opacity': [\n          'case',\n          ['boolean', ['feature-state', 'legendHover'], true],\n          BUBBLE_DEFAULT_OPACITY,\n          LEGEND_DIM_OPACITY,\n        ],\n        'circle-stroke-width': BUBBLE_STROKE,\n        'circle-stroke-color': [\n          'case',\n          ['boolean', ['feature-state', 'hover'], false],\n          ['get', '__hoveredColor'],\n          ['get', '__color'],\n        ],\n        'circle-stroke-opacity': [\n          'case',\n          ['boolean', ['feature-state', 'legendHover'], true],\n          SHAPE_OPACITY,\n          LEGEND_DIM_OPACITY,\n        ],\n      }}\n    />\n  );\n};\n"],
+  "sourcesContent": ["import React from 'react';\nimport { Layer } from 'react-map-gl/maplibre';\n\nimport { useSizeInterpolation } from './hooks/use-size-interpolation.js';\nimport { buildCircleStickToDistanceExpression } from './utils/build-stick-to-distance-expressions.js';\nimport {\n  BUBBLE_DEFAULT_OPACITY,\n  BUBBLE_STROKE,\n  DEFAULT_RADIUS_EXPRESSION,\n  SHAPE_OPACITY_DIMMED,\n  SHAPE_OPACITY_DEFAULT,\n} from '../../constants.js';\n\nexport const BubbleCircleLayer = ({\n  id,\n  source,\n}: {\n  id: string;\n  source: string;\n}) => {\n  const sizeInterpolation = useSizeInterpolation();\n\n  const radiusExpression =\n    sizeInterpolation === 'fixed'\n      ? DEFAULT_RADIUS_EXPRESSION\n      : buildCircleStickToDistanceExpression();\n\n  return (\n    <Layer\n      type=\"circle\"\n      id={id}\n      source={source}\n      paint={{\n        'circle-color': [\n          'case',\n          ['boolean', ['feature-state', 'hover'], false],\n          ['get', '__hoveredColor'],\n          ['get', '__color'],\n        ],\n        'circle-radius': radiusExpression,\n        'circle-opacity': [\n          'case',\n          ['boolean', ['feature-state', 'legendHover'], true],\n          BUBBLE_DEFAULT_OPACITY,\n          SHAPE_OPACITY_DIMMED,\n        ],\n        'circle-stroke-width': BUBBLE_STROKE,\n        'circle-stroke-color': [\n          'case',\n          ['boolean', ['feature-state', 'hover'], false],\n          ['get', '__hoveredColor'],\n          ['get', '__color'],\n        ],\n        'circle-stroke-opacity': [\n          'case',\n          ['boolean', ['feature-state', 'legendHover'], true],\n          SHAPE_OPACITY_DEFAULT,\n          SHAPE_OPACITY_DIMMED,\n        ],\n      }}\n    />\n  );\n};\n"],
   "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,aAAa;AAEtB,SAAS,4BAA4B;AACrC,SAAS,4CAA4C;AACrD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AACF,MAGM;AACJ,QAAM,oBAAoB,qBAAqB;AAE/C,QAAM,mBACJ,sBAAsB,UAClB,4BACA,qCAAqC;AAE3C,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,gBAAgB;AAAA,UACxB,CAAC,OAAO,SAAS;AAAA,QACnB;AAAA,QACA,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,UAChB;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,UAClD;AAAA,UACA;AAAA,QACF;AAAA,QACA,uBAAuB;AAAA,QACvB,uBAAuB;AAAA,UACrB;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,UAC7C,CAAC,OAAO,gBAAgB;AAAA,UACxB,CAAC,OAAO,SAAS;AAAA,QACnB;AAAA,QACA,yBAAyB;AAAA,UACvB;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,UAClD;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

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

@@ -5,12 +5,15 @@ import { ChoroplethLayerTooltip } from "./ChoroplethLayerTooltip.js";
 import { parseRegionDataToGeoJSON } from "./utils/parse-region-data-to-geo-json.js";
 import {
   ACTIVE_COLOR,
-  ACTIVE_STATE_BORDERS_WIDTH,
+  ACTIVE_BORDER_WIDTH_OUTER,
+  COUNTRY_BORDER_WIDTH,
+  REGION_BORDER_WIDTH,
   DEFAULT_CHOROPLETH_COLOR,
-  DEFAULT_COUNTRIES_BORDER_COLOR,
-  LEGEND_DIM_OPACITY,
-  SHAPE_OPACITY,
-  TRANSPARENT_BORDER_COLOR
+  DEFAULT_BOUNDARIES_BORDER_COLOR,
+  SHAPE_OPACITY_DIMMED,
+  SHAPE_OPACITY_DEFAULT,
+  TRANSPARENT_BORDER_COLOR,
+  ACTIVE_BORDER_WIDTH_INNER
 } from "../../constants.js";
 import { useLayerColoringStrategy } from "../../hooks/use-layer-coloring-strategy.js";
 import { useLegendInteractionHighlighting } from "../../hooks/use-legend-interaction-highlighting.js";
@@ -41,47 +44,67 @@ const ChoroplethLayer = (props) => {
     Layer,
     {
       id: layerId,
-      type: "fill",
       source: sourceId,
+      type: "fill",
       paint: {
-        "fill-color": [
-          "case",
-          ["boolean", ["feature-state", "active"], false],
-          ["get", "__color"],
-          ["boolean", ["feature-state", "hover"], false],
-          ["get", "__hoveredColor"],
-          ["get", "__color"]
-        ],
+        "fill-color": ["get", "__color"],
         "fill-opacity": [
           "case",
-          ["boolean", ["feature-state", "legendHover"], true],
-          SHAPE_OPACITY,
-          LEGEND_DIM_OPACITY
+          ["==", ["feature-state", "legendHover"], false],
+          SHAPE_OPACITY_DIMMED,
+          ["==", ["feature-state", "active"], true],
+          SHAPE_OPACITY_DEFAULT,
+          ["==", ["feature-state", "hover"], true],
+          SHAPE_OPACITY_DEFAULT,
+          ["==", ["feature-state", "legendHover"], true],
+          SHAPE_OPACITY_DEFAULT,
+          ["==", ["feature-state", "isAnyActive"], true],
+          SHAPE_OPACITY_DIMMED,
+          SHAPE_OPACITY_DEFAULT
         ]
       }
     }
   ), /* @__PURE__ */ React.createElement(
     Layer,
     {
-      type: "line",
       source: sourceId,
+      type: "line",
       paint: {
-        "line-color": getCanvasColor(DEFAULT_COUNTRIES_BORDER_COLOR)
+        "line-color": [
+          "case",
+          ["==", ["feature-state", "active"], true],
+          getCanvasColor(DEFAULT_BOUNDARIES_BORDER_COLOR),
+          ["==", ["feature-state", "hover"], true],
+          getCanvasColor(DEFAULT_BOUNDARIES_BORDER_COLOR),
+          getCanvasColor(DEFAULT_BOUNDARIES_BORDER_COLOR)
+        ],
+        "line-width": [
+          "case",
+          ["==", ["feature-state", "active"], true],
+          ACTIVE_BORDER_WIDTH_OUTER,
+          ["==", ["feature-state", "hover"], true],
+          ACTIVE_BORDER_WIDTH_OUTER,
+          ["==", ["get", "region_type"], "REGION"],
+          REGION_BORDER_WIDTH,
+          COUNTRY_BORDER_WIDTH
+        ]
       }
     }
   ), /* @__PURE__ */ React.createElement(
     Layer,
     {
-      type: "line",
       source: sourceId,
+      type: "line",
       paint: {
         "line-color": [
           "case",
-          ["boolean", ["feature-state", "active"], false],
+          ["==", ["feature-state", "active"], true],
+          getCanvasColor(ACTIVE_COLOR),
+          ["==", ["feature-state", "hover"], true],
           getCanvasColor(ACTIVE_COLOR),
           getCanvasColor(TRANSPARENT_BORDER_COLOR)
         ],
-        "line-width": ACTIVE_STATE_BORDERS_WIDTH
+        "line-width": ACTIVE_BORDER_WIDTH_INNER
       }
     }
   )), /* @__PURE__ */ React.createElement(

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 './utils/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 { 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';\nimport { isChoroplethTooltipTemplate } from '../../utils/tooltip-type-guards.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 =\n    mapSource &&\n    parseRegionDataToGeoJSON(mapSource, data, regionAccessor, choroplethColor);\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,gCAAgC;AACzC,SAAS,wCAAwC;AACjD,SAAS,sCAAsC;AAC/C,SAAS,+BAA+B;AACxC,SAAS,iCAAiC;AAC1C,SAAS,0BAA0B;AACnC,SAAS,0BAA0B,kCAAkC;AAErE,SAAS,mCAAmC;AAErC,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,cACJ,aACA,yBAAyB,WAAW,MAAM,gBAAgB,eAAe;AAE3E,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 './utils/parse-region-data-to-geo-json.js';\nimport {\n  ACTIVE_COLOR,\n  ACTIVE_BORDER_WIDTH_OUTER,\n  COUNTRY_BORDER_WIDTH,\n  REGION_BORDER_WIDTH,\n  DEFAULT_CHOROPLETH_COLOR,\n  DEFAULT_BOUNDARIES_BORDER_COLOR,\n  SHAPE_OPACITY_DIMMED,\n  SHAPE_OPACITY_DEFAULT,\n  TRANSPARENT_BORDER_COLOR,\n  ACTIVE_BORDER_WIDTH_INNER,\n} from '../../constants.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';\nimport { isChoroplethTooltipTemplate } from '../../utils/tooltip-type-guards.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 =\n    mapSource &&\n    parseRegionDataToGeoJSON(mapSource, data, regionAccessor, choroplethColor);\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          source={sourceId}\n          type=\"fill\"\n          paint={{\n            'fill-color': ['get', '__color'],\n            'fill-opacity': [\n              'case',\n              ['==', ['feature-state', 'legendHover'], false],\n              SHAPE_OPACITY_DIMMED,\n              ['==', ['feature-state', 'active'], true],\n              SHAPE_OPACITY_DEFAULT,\n              ['==', ['feature-state', 'hover'], true],\n              SHAPE_OPACITY_DEFAULT,\n              ['==', ['feature-state', 'legendHover'], true],\n              SHAPE_OPACITY_DEFAULT,\n              ['==', ['feature-state', 'isAnyActive'], true],\n              SHAPE_OPACITY_DIMMED,\n              SHAPE_OPACITY_DEFAULT,\n            ],\n          }}\n        />\n\n        <Layer\n          source={sourceId}\n          type=\"line\"\n          paint={{\n            'line-color': [\n              'case',\n              ['==', ['feature-state', 'active'], true],\n              getCanvasColor(DEFAULT_BOUNDARIES_BORDER_COLOR),\n              ['==', ['feature-state', 'hover'], true],\n              getCanvasColor(DEFAULT_BOUNDARIES_BORDER_COLOR),\n              getCanvasColor(DEFAULT_BOUNDARIES_BORDER_COLOR),\n            ],\n            'line-width': [\n              'case',\n              ['==', ['feature-state', 'active'], true],\n              ACTIVE_BORDER_WIDTH_OUTER,\n              ['==', ['feature-state', 'hover'], true],\n              ACTIVE_BORDER_WIDTH_OUTER,\n              ['==', ['get', 'region_type'], 'REGION'],\n              REGION_BORDER_WIDTH,\n              COUNTRY_BORDER_WIDTH,\n            ],\n          }}\n        />\n\n        <Layer\n          source={sourceId}\n          type=\"line\"\n          paint={{\n            'line-color': [\n              'case',\n              ['==', ['feature-state', 'active'], true],\n              getCanvasColor(ACTIVE_COLOR),\n              ['==', ['feature-state', 'hover'], true],\n              getCanvasColor(ACTIVE_COLOR),\n              getCanvasColor(TRANSPARENT_BORDER_COLOR),\n            ],\n            'line-width': ACTIVE_BORDER_WIDTH_INNER,\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": "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",
   "names": []
 }

package/esm/map/components/ChoroplethLayer/utils/parse-region-data-to-geo-json.js

@@ -15,11 +15,12 @@ const parseRegionDataToGeoJSON = (mapSource, data, regionAccessor, color) => {
       const regionColor = defineColor(color, item);
       const canvasColor = getCanvasColor(regionColor);
       const hoveredColor = calculateHoveredColor(canvasColor);
-      const { name } = feature.properties;
+      const { name, region_type } = feature.properties;
       const feat = {
         ...feature,
         properties: {
           name,
+          region_type,
           data: item,
           ...item,
           __color: canvasColor,

package/esm/map/components/ChoroplethLayer/utils/parse-region-data-to-geo-json.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/map/components/ChoroplethLayer/utils/parse-region-data-to-geo-json.ts"],
-  "sourcesContent": ["import type GeoJSON from 'geojson';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components-preview/charts';\nimport { _accessValue as accessValue } from '@dynatrace/strato-components-preview/core';\n\nimport { calculateHoveredColor } from '../../../utils/calculate-hovered-color.js';\nimport { defineColor } from '../../../utils/define-color.js';\n\nexport const parseRegionDataToGeoJSON = <T extends Record<string, unknown>>(\n  mapSource: GeoJSON.FeatureCollection,\n  data: T[],\n  regionAccessor: string | ((i: T) => string),\n  color: string | ((i: T) => string),\n): GeoJSON.FeatureCollection => {\n  const features = data.reduce((features: GeoJSON.Feature[], item) => {\n    let id: string | undefined = '';\n\n    if (typeof regionAccessor === 'function') {\n      id = regionAccessor(item);\n    } else {\n      id = accessValue<string>(item, regionAccessor);\n    }\n\n    const feature = mapSource.features.find((region) => region.id === id);\n    if (feature !== undefined) {\n      const regionColor = defineColor(color, item);\n      const canvasColor = getCanvasColor(regionColor);\n      const hoveredColor = calculateHoveredColor(canvasColor);\n      const { name } = feature.properties as { name: string };\n      const feat = {\n        ...feature,\n        properties: {\n          name,\n          data: item,\n          ...item,\n          __color: canvasColor,\n          __hoveredColor: hoveredColor,\n        },\n      };\n\n      features.push(feat);\n    }\n\n    return features;\n  }, []);\n\n  return {\n    type: 'FeatureCollection',\n    features,\n  };\n};\n"],
-  "mappings": "AAEA,SAAS,mBAAmB,sBAAsB;AAClD,SAAS,gBAAgB,mBAAmB;AAE5C,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAErB,MAAM,2BAA2B,CACtC,WACA,MACA,gBACA,UAC8B;AAC9B,QAAM,WAAW,KAAK,OAAO,CAACA,WAA6B,SAAS;AAClE,QAAI,KAAyB;AAE7B,QAAI,OAAO,mBAAmB,YAAY;AACxC,WAAK,eAAe,IAAI;AAAA,IAC1B,OAAO;AACL,WAAK,YAAoB,MAAM,cAAc;AAAA,IAC/C;AAEA,UAAM,UAAU,UAAU,SAAS,KAAK,CAAC,WAAW,OAAO,OAAO,EAAE;AACpE,QAAI,YAAY,QAAW;AACzB,YAAM,cAAc,YAAY,OAAO,IAAI;AAC3C,YAAM,cAAc,eAAe,WAAW;AAC9C,YAAM,eAAe,sBAAsB,WAAW;AACtD,YAAM,EAAE,KAAK,IAAI,QAAQ;AACzB,YAAM,OAAO;AAAA,QACX,GAAG;AAAA,QACH,YAAY;AAAA,UACV;AAAA,UACA,MAAM;AAAA,UACN,GAAG;AAAA,UACH,SAAS;AAAA,UACT,gBAAgB;AAAA,QAClB;AAAA,MACF;AAEA,MAAAA,UAAS,KAAK,IAAI;AAAA,IACpB;AAEA,WAAOA;AAAA,EACT,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL,MAAM;AAAA,IACN;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type GeoJSON from 'geojson';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components-preview/charts';\nimport { _accessValue as accessValue } from '@dynatrace/strato-components-preview/core';\n\nimport { calculateHoveredColor } from '../../../utils/calculate-hovered-color.js';\nimport { defineColor } from '../../../utils/define-color.js';\n\nexport const parseRegionDataToGeoJSON = <T extends Record<string, unknown>>(\n  mapSource: GeoJSON.FeatureCollection,\n  data: T[],\n  regionAccessor: string | ((i: T) => string),\n  color: string | ((i: T) => string),\n): GeoJSON.FeatureCollection => {\n  const features = data.reduce((features: GeoJSON.Feature[], item) => {\n    let id: string | undefined = '';\n\n    if (typeof regionAccessor === 'function') {\n      id = regionAccessor(item);\n    } else {\n      id = accessValue<string>(item, regionAccessor);\n    }\n\n    const feature = mapSource.features.find((region) => region.id === id);\n    if (feature !== undefined) {\n      const regionColor = defineColor(color, item);\n      const canvasColor = getCanvasColor(regionColor);\n      const hoveredColor = calculateHoveredColor(canvasColor);\n      const { name, region_type } = feature.properties as {\n        name: string;\n        region_type: string;\n      };\n      const feat = {\n        ...feature,\n        properties: {\n          name,\n          region_type,\n          data: item,\n          ...item,\n          __color: canvasColor,\n          __hoveredColor: hoveredColor,\n        },\n      };\n\n      features.push(feat);\n    }\n\n    return features;\n  }, []);\n\n  return {\n    type: 'FeatureCollection',\n    features,\n  };\n};\n"],
+  "mappings": "AAEA,SAAS,mBAAmB,sBAAsB;AAClD,SAAS,gBAAgB,mBAAmB;AAE5C,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAErB,MAAM,2BAA2B,CACtC,WACA,MACA,gBACA,UAC8B;AAC9B,QAAM,WAAW,KAAK,OAAO,CAACA,WAA6B,SAAS;AAClE,QAAI,KAAyB;AAE7B,QAAI,OAAO,mBAAmB,YAAY;AACxC,WAAK,eAAe,IAAI;AAAA,IAC1B,OAAO;AACL,WAAK,YAAoB,MAAM,cAAc;AAAA,IAC/C;AAEA,UAAM,UAAU,UAAU,SAAS,KAAK,CAAC,WAAW,OAAO,OAAO,EAAE;AACpE,QAAI,YAAY,QAAW;AACzB,YAAM,cAAc,YAAY,OAAO,IAAI;AAC3C,YAAM,cAAc,eAAe,WAAW;AAC9C,YAAM,eAAe,sBAAsB,WAAW;AACtD,YAAM,EAAE,MAAM,YAAY,IAAI,QAAQ;AAItC,YAAM,OAAO;AAAA,QACX,GAAG;AAAA,QACH,YAAY;AAAA,UACV;AAAA,UACA;AAAA,UACA,MAAM;AAAA,UACN,GAAG;AAAA,UACH,SAAS;AAAA,UACT,gBAAgB;AAAA,QAClB;AAAA,MACF;AAEA,MAAAA,UAAS,KAAK,IAAI;AAAA,IACpB;AAEA,WAAOA;AAAA,EACT,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL,MAAM;AAAA,IACN;AAAA,EACF;AACF;",
   "names": ["features"]
 }

package/esm/map/components/ConnectionLayer/ConnectionLayer.js

@@ -1,16 +1,13 @@
 import React from "react";
-import { Layer, Source } from "react-map-gl/maplibre";
 import { ConnectionLayerDirection } from "./ConnectionLayerDirection.js";
+import { ConnectionLayerLine } from "./ConnectionLayerLine.js";
 import { ConnectionLayerTooltip } from "./ConnectionLayerTooltip.js";
-import { useConnectionLayerMouseMove } from "./hooks/use-connection-layer-mouse-move.js";
 import { parseConnectionDataToGeoJSON } from "./utils/parse-connection-data-to-geo-json.js";
-import {
-  DEFAULT_LINE_CAP,
-  DEFAULT_LINE_COLOR,
-  DEFAULT_LINE_DASH_ARRAY,
-  DEFAULT_LINE_JOIN,
-  DEFAULT_LINE_THICKNESS
-} from "../../constants.js";
+import { DEFAULT_LINE_COLOR, DEFAULT_LINE_THICKNESS } from "../../constants.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 { useResolveConnectionColor } from "../../hooks/use-resolve-color.js";
 import { useTooltipTemplate } from "../../hooks/use-tooltip-template.js";
 import { ConnectionLayerTooltip as ConnectionLayerTooltipSlot } from "../../slots/ConnectionLayerTooltip.js";
 import { isConnectionTooltipTemplate } from "../../utils/tooltip-type-guards.js";
@@ -19,67 +16,52 @@ const ConnectionLayer = (props) => {
     data,
     layerId,
     children,
-    color = DEFAULT_LINE_COLOR,
     curve,
     directionIndicator,
     line,
     thickness = DEFAULT_LINE_THICKNESS
   } = props;
+  const colorParser = useLayerColoringStrategy();
+  const connectionColor = useResolveConnectionColor(
+    DEFAULT_LINE_COLOR,
+    props,
+    colorParser
+  );
   const sourceId = `source-${layerId}`;
+  useLegendInteractionHighlighting(props, sourceId);
+  useLegendInteractionVisibility(props, layerId);
   const geoJsonData = parseConnectionDataToGeoJSON(
     data,
     thickness,
-    color,
+    connectionColor,
     curve
   );
   const tooltipTemplate = useTooltipTemplate(
     children,
     ConnectionLayerTooltipSlot
   );
-  const { layerIds } = useConnectionLayerMouseMove(geoJsonData.length, layerId);
-  return geoJsonData.map((featureCollection, index) => /* @__PURE__ */ React.createElement(React.Fragment, { key: index }, /* @__PURE__ */ React.createElement(
-    Source,
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    ConnectionLayerLine,
     {
-      id: `${sourceId}-${index}`,
-      type: "geojson",
-      data: featureCollection,
-      promoteId: "id"
-    },
-    /* @__PURE__ */ React.createElement(
-      Layer,
-      {
-        type: "line",
-        id: layerIds[index],
-        layout: {
-          "line-cap": DEFAULT_LINE_CAP,
-          "line-join": DEFAULT_LINE_JOIN
-        },
-        paint: {
-          "line-color": [
-            "case",
-            ["boolean", ["feature-state", "hover"], false],
-            ["get", "__lineHoveredColor"],
-            ["get", "__lineColor"]
-          ],
-          "line-width": ["get", "__lineWidth"],
-          ...line && line === "dashed" ? { "line-dasharray": DEFAULT_LINE_DASH_ARRAY } : null
-        }
-      }
-    )
-  ), /* @__PURE__ */ React.createElement(
-    ConnectionLayerTooltip,
-    {
-      layerId: layerIds[index],
-      tooltipTemplate: isConnectionTooltipTemplate(tooltipTemplate) ? tooltipTemplate : void 0
+      geoJsonData,
+      layerId,
+      sourceId,
+      line
     }
   ), directionIndicator && /* @__PURE__ */ React.createElement(
     ConnectionLayerDirection,
     {
-      geoJsonData: featureCollection,
-      layerId: layerIds[index],
+      geoJsonData,
+      layerId,
       directionIndicator
     }
-  )));
+  ), /* @__PURE__ */ React.createElement(
+    ConnectionLayerTooltip,
+    {
+      layerId,
+      tooltipTemplate: isConnectionTooltipTemplate(tooltipTemplate) ? tooltipTemplate : void 0
+    }
+  ));
 };
 ConnectionLayer["displayName"] = "ConnectionLayer";
 export {

package/esm/map/components/ConnectionLayer/ConnectionLayer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/ConnectionLayer/ConnectionLayer.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport { Layer, Source } from 'react-map-gl/maplibre';\n\nimport { ConnectionLayerDirection } from './ConnectionLayerDirection.js';\nimport { ConnectionLayerTooltip } from './ConnectionLayerTooltip.js';\nimport { useConnectionLayerMouseMove } from './hooks/use-connection-layer-mouse-move.js';\nimport { parseConnectionDataToGeoJSON } from './utils/parse-connection-data-to-geo-json.js';\nimport {\n  DEFAULT_LINE_CAP,\n  DEFAULT_LINE_COLOR,\n  DEFAULT_LINE_DASH_ARRAY,\n  DEFAULT_LINE_JOIN,\n  DEFAULT_LINE_THICKNESS,\n} from '../../constants.js';\nimport { useTooltipTemplate } from '../../hooks/use-tooltip-template.js';\nimport { ConnectionLayerTooltip as ConnectionLayerTooltipSlot } from '../../slots/ConnectionLayerTooltip.js';\nimport type {\n  InternalConnectionLayerProps,\n  Connection,\n} from '../../types/connection-layer.js';\nimport { isConnectionTooltipTemplate } from '../../utils/tooltip-type-guards.js';\n\nexport const ConnectionLayer = <T extends Connection>(\n  props: React.PropsWithChildren<InternalConnectionLayerProps<T>>,\n) => {\n  const {\n    data,\n    layerId,\n    children,\n    color = DEFAULT_LINE_COLOR,\n    curve,\n    directionIndicator,\n    line,\n    thickness = DEFAULT_LINE_THICKNESS,\n  } = props;\n\n  const sourceId = `source-${layerId}`;\n\n  const geoJsonData = parseConnectionDataToGeoJSON(\n    data,\n    thickness,\n    color,\n    curve,\n  );\n\n  const tooltipTemplate = useTooltipTemplate(\n    children,\n    ConnectionLayerTooltipSlot,\n  );\n\n  const { layerIds } = useConnectionLayerMouseMove(geoJsonData.length, layerId);\n\n  return geoJsonData.map((featureCollection, index) => (\n    <React.Fragment key={index}>\n      <Source\n        id={`${sourceId}-${index}`}\n        type=\"geojson\"\n        data={featureCollection}\n        promoteId={'id'}\n      >\n        <Layer\n          type=\"line\"\n          id={layerIds[index]}\n          layout={{\n            'line-cap': DEFAULT_LINE_CAP,\n            'line-join': DEFAULT_LINE_JOIN,\n          }}\n          paint={{\n            'line-color': [\n              'case',\n              ['boolean', ['feature-state', 'hover'], false],\n              ['get', '__lineHoveredColor'],\n              ['get', '__lineColor'],\n            ],\n            'line-width': ['get', '__lineWidth'],\n            ...(line && line === 'dashed'\n              ? { 'line-dasharray': DEFAULT_LINE_DASH_ARRAY }\n              : null),\n          }}\n        />\n      </Source>\n\n      <ConnectionLayerTooltip\n        layerId={layerIds[index]}\n        tooltipTemplate={\n          isConnectionTooltipTemplate(tooltipTemplate)\n            ? tooltipTemplate\n            : undefined\n        }\n      />\n\n      {directionIndicator && (\n        <ConnectionLayerDirection\n          geoJsonData={featureCollection}\n          layerId={layerIds[index]}\n          directionIndicator={directionIndicator}\n        />\n      )}\n    </React.Fragment>\n  ));\n};\n\nConnectionLayer['displayName'] = 'ConnectionLayer';\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,OAAO,cAAc;AAE9B,SAAS,gCAAgC;AACzC,SAAS,8BAA8B;AACvC,SAAS,mCAAmC;AAC5C,SAAS,oCAAoC;AAC7C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAA0B;AACnC,SAAS,0BAA0B,kCAAkC;AAKrE,SAAS,mCAAmC;AAErC,MAAM,kBAAkB,CAC7B,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd,IAAI;AAEJ,QAAM,WAAW,UAAU,OAAO;AAElC,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,kBAAkB;AAAA,IACtB;AAAA,IACA;AAAA,EACF;AAEA,QAAM,EAAE,SAAS,IAAI,4BAA4B,YAAY,QAAQ,OAAO;AAE5E,SAAO,YAAY,IAAI,CAAC,mBAAmB,UACzC,oCAAC,MAAM,UAAN,EAAe,KAAK,SACnB;AAAA,IAAC;AAAA;AAAA,MACC,IAAI,GAAG,QAAQ,IAAI,KAAK;AAAA,MACxB,MAAK;AAAA,MACL,MAAM;AAAA,MACN,WAAW;AAAA;AAAA,IAEX;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,IAAI,SAAS,KAAK;AAAA,QAClB,QAAQ;AAAA,UACN,YAAY;AAAA,UACZ,aAAa;AAAA,QACf;AAAA,QACA,OAAO;AAAA,UACL,cAAc;AAAA,YACZ;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,YAC7C,CAAC,OAAO,oBAAoB;AAAA,YAC5B,CAAC,OAAO,aAAa;AAAA,UACvB;AAAA,UACA,cAAc,CAAC,OAAO,aAAa;AAAA,UACnC,GAAI,QAAQ,SAAS,WACjB,EAAE,kBAAkB,wBAAwB,IAC5C;AAAA,QACN;AAAA;AAAA,IACF;AAAA,EACF,GAEA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,SAAS,KAAK;AAAA,MACvB,iBACE,4BAA4B,eAAe,IACvC,kBACA;AAAA;AAAA,EAER,GAEC,sBACC;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,SAAS,SAAS,KAAK;AAAA,MACvB;AAAA;AAAA,EACF,CAEJ,CACD;AACH;AAEA,gBAAgB,aAAa,IAAI;",
+  "sourcesContent": ["import React from 'react';\n\nimport { ConnectionLayerDirection } from './ConnectionLayerDirection.js';\nimport { ConnectionLayerLine } from './ConnectionLayerLine.js';\nimport { ConnectionLayerTooltip } from './ConnectionLayerTooltip.js';\nimport { parseConnectionDataToGeoJSON } from './utils/parse-connection-data-to-geo-json.js';\nimport { DEFAULT_LINE_COLOR, DEFAULT_LINE_THICKNESS } from '../../constants.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 { useResolveConnectionColor } from '../../hooks/use-resolve-color.js';\nimport { useTooltipTemplate } from '../../hooks/use-tooltip-template.js';\nimport { ConnectionLayerTooltip as ConnectionLayerTooltipSlot } from '../../slots/ConnectionLayerTooltip.js';\nimport type {\n  Connection,\n  InternalConnectionLayerProps,\n} from '../../types/connection-layer.js';\nimport { isConnectionTooltipTemplate } from '../../utils/tooltip-type-guards.js';\n\nexport const ConnectionLayer = <T extends Connection>(\n  props: React.PropsWithChildren<InternalConnectionLayerProps<T>>,\n) => {\n  const {\n    data,\n    layerId,\n    children,\n    curve,\n    directionIndicator,\n    line,\n    thickness = DEFAULT_LINE_THICKNESS,\n  } = props;\n\n  const colorParser = useLayerColoringStrategy();\n  const connectionColor = useResolveConnectionColor(\n    DEFAULT_LINE_COLOR,\n    props,\n    colorParser,\n  );\n\n  const sourceId = `source-${layerId}`;\n\n  useLegendInteractionHighlighting(props, sourceId);\n  useLegendInteractionVisibility(props, layerId);\n\n  const geoJsonData = parseConnectionDataToGeoJSON(\n    data,\n    thickness,\n    connectionColor,\n    curve,\n  );\n\n  const tooltipTemplate = useTooltipTemplate(\n    children,\n    ConnectionLayerTooltipSlot,\n  );\n\n  return (\n    <>\n      <ConnectionLayerLine\n        geoJsonData={geoJsonData}\n        layerId={layerId}\n        sourceId={sourceId}\n        line={line}\n      />\n\n      {directionIndicator && (\n        <ConnectionLayerDirection\n          geoJsonData={geoJsonData}\n          layerId={layerId}\n          directionIndicator={directionIndicator}\n        />\n      )}\n\n      <ConnectionLayerTooltip\n        layerId={layerId}\n        tooltipTemplate={\n          isConnectionTooltipTemplate(tooltipTemplate)\n            ? tooltipTemplate\n            : undefined\n        }\n      />\n    </>\n  );\n};\n\nConnectionLayer['displayName'] = 'ConnectionLayer';\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAElB,SAAS,gCAAgC;AACzC,SAAS,2BAA2B;AACpC,SAAS,8BAA8B;AACvC,SAAS,oCAAoC;AAC7C,SAAS,oBAAoB,8BAA8B;AAC3D,SAAS,gCAAgC;AACzC,SAAS,wCAAwC;AACjD,SAAS,sCAAsC;AAC/C,SAAS,iCAAiC;AAC1C,SAAS,0BAA0B;AACnC,SAAS,0BAA0B,kCAAkC;AAKrE,SAAS,mCAAmC;AAErC,MAAM,kBAAkB,CAC7B,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd,IAAI;AAEJ,QAAM,cAAc,yBAAyB;AAC7C,QAAM,kBAAkB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,WAAW,UAAU,OAAO;AAElC,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;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,GAEC,sBACC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,GAGF;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/ConnectionLayer/ConnectionLayerDirection.js

@@ -4,7 +4,9 @@ import { SorterIcon } from "@dynatrace/strato-icons";
 import { parseDirectionDataToGeoJSON } from "./utils/parse-direction-data-to-geo-json.js";
 import {
   DIRECTION_ICON_OUTPUT_SIZE,
-  DIRECTION_ICON_SHRINK_RATIO
+  DIRECTION_ICON_SHRINK_RATIO,
+  SHAPE_OPACITY_DEFAULT,
+  SHAPE_OPACITY_DIMMED
 } from "../../constants.js";
 import { useLoadSymbolIntoMap } from "../../hooks/use-load-symbol-into-map.js";
 const ConnectionLayerDirection = (props) => {
@@ -55,7 +57,12 @@ const ConnectionLayerDirection = (props) => {
             ["get", "__lineHoveredColor"],
             ["get", "__lineColor"]
           ],
-          "icon-opacity": ["get", "__lineOpacity"]
+          "icon-opacity": [
+            "case",
+            ["boolean", ["feature-state", "legendHover"], true],
+            SHAPE_OPACITY_DEFAULT,
+            SHAPE_OPACITY_DIMMED
+          ]
         }
       }
     )

package/esm/map/components/ConnectionLayer/ConnectionLayerDirection.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/ConnectionLayer/ConnectionLayerDirection.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport { Layer, Source } from 'react-map-gl';\n\nimport { SorterIcon } from '@dynatrace/strato-icons';\n\nimport { parseDirectionDataToGeoJSON } from './utils/parse-direction-data-to-geo-json.js';\nimport {\n  DIRECTION_ICON_OUTPUT_SIZE,\n  DIRECTION_ICON_SHRINK_RATIO,\n} from '../../constants.js';\nimport { useLoadSymbolIntoMap } from '../../hooks/use-load-symbol-into-map.js';\nimport type {\n  InternalConnectionLayerProps,\n  Connection,\n} from '../../types/connection-layer.js';\n\ninterface ConnectionLayerDirectionProps<T extends Connection>\n  extends Required<\n    Pick<InternalConnectionLayerProps<T>, 'layerId' | 'directionIndicator'>\n  > {\n  geoJsonData: GeoJSON.FeatureCollection;\n}\n\nexport const ConnectionLayerDirection = <T extends Connection>(\n  props: ConnectionLayerDirectionProps<T>,\n) => {\n  const { geoJsonData, layerId: connectionLayerId, directionIndicator } = props;\n\n  const layerId = `${connectionLayerId}-direction`;\n  const sourceId = `source-${layerId}`;\n\n  // To get an image with enough quality instead of creating a tiny pic\n  // and enlarge it, we create a huge image to shrink it\n  const { symbolName } = useLoadSymbolIntoMap(\n    <SorterIcon />,\n    layerId,\n    DIRECTION_ICON_OUTPUT_SIZE,\n  );\n\n  const parsedGeoJsonData = parseDirectionDataToGeoJSON({\n    geoJsonData,\n    directionIndicator,\n  });\n\n  /**\n   * This value is necessary due to the icon\n   * that comes from the '\\@dynatrace/strato-icons'\n   * SorterIcon points downwards, but it should point upwards\n   * for the sake of the angle calculation.\n   */\n  const iconRotationDegrees = 180;\n\n  return (\n    <Source\n      id={sourceId}\n      type=\"geojson\"\n      data={parsedGeoJsonData}\n      promoteId={'id'}\n    >\n      <Layer\n        id={layerId}\n        beforeId={connectionLayerId}\n        type=\"symbol\"\n        layout={{\n          'symbol-placement': 'point',\n          'icon-image': symbolName,\n          'icon-rotate': ['+', ['get', '__angle'], iconRotationDegrees],\n          'icon-rotation-alignment': 'map',\n          'icon-allow-overlap': true,\n          'icon-ignore-placement': true,\n          'icon-size': [\n            '*',\n            ['get', '__lineWidth'],\n            DIRECTION_ICON_SHRINK_RATIO,\n          ],\n        }}\n        paint={{\n          'icon-color': [\n            'case',\n            ['boolean', ['feature-state', 'hover'], false],\n            ['get', '__lineHoveredColor'],\n            ['get', '__lineColor'],\n          ],\n          'icon-opacity': ['get', '__lineOpacity'],\n        }}\n      />\n    </Source>\n  );\n};\n\nConnectionLayerDirection['displayName'] = 'ConnectionLayerDirection';\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,OAAO,cAAc;AAE9B,SAAS,kBAAkB;AAE3B,SAAS,mCAAmC;AAC5C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AAa9B,MAAM,2BAA2B,CACtC,UACG;AACH,QAAM,EAAE,aAAa,SAAS,mBAAmB,mBAAmB,IAAI;AAExE,QAAM,UAAU,GAAG,iBAAiB;AACpC,QAAM,WAAW,UAAU,OAAO;AAIlC,QAAM,EAAE,WAAW,IAAI;AAAA,IACrB,oCAAC,gBAAW;AAAA,IACZ;AAAA,IACA;AAAA,EACF;AAEA,QAAM,oBAAoB,4BAA4B;AAAA,IACpD;AAAA,IACA;AAAA,EACF,CAAC;AAQD,QAAM,sBAAsB;AAE5B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,MAAM;AAAA,MACN,WAAW;AAAA;AAAA,IAEX;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,MAAK;AAAA,QACL,QAAQ;AAAA,UACN,oBAAoB;AAAA,UACpB,cAAc;AAAA,UACd,eAAe,CAAC,KAAK,CAAC,OAAO,SAAS,GAAG,mBAAmB;AAAA,UAC5D,2BAA2B;AAAA,UAC3B,sBAAsB;AAAA,UACtB,yBAAyB;AAAA,UACzB,aAAa;AAAA,YACX;AAAA,YACA,CAAC,OAAO,aAAa;AAAA,YACrB;AAAA,UACF;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL,cAAc;AAAA,YACZ;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,YAC7C,CAAC,OAAO,oBAAoB;AAAA,YAC5B,CAAC,OAAO,aAAa;AAAA,UACvB;AAAA,UACA,gBAAgB,CAAC,OAAO,eAAe;AAAA,QACzC;AAAA;AAAA,IACF;AAAA,EACF;AAEJ;AAEA,yBAAyB,aAAa,IAAI;",
+  "sourcesContent": ["import React from 'react';\nimport { Layer, Source } from 'react-map-gl';\n\nimport { SorterIcon } from '@dynatrace/strato-icons';\n\nimport { parseDirectionDataToGeoJSON } from './utils/parse-direction-data-to-geo-json.js';\nimport {\n  DIRECTION_ICON_OUTPUT_SIZE,\n  DIRECTION_ICON_SHRINK_RATIO,\n  SHAPE_OPACITY_DEFAULT,\n  SHAPE_OPACITY_DIMMED,\n} from '../../constants.js';\nimport { useLoadSymbolIntoMap } from '../../hooks/use-load-symbol-into-map.js';\nimport type {\n  Connection,\n  InternalConnectionLayerProps,\n} from '../../types/connection-layer.js';\n\ninterface ConnectionLayerDirectionProps<T extends Connection>\n  extends Required<\n    Pick<InternalConnectionLayerProps<T>, 'layerId' | 'directionIndicator'>\n  > {\n  geoJsonData: GeoJSON.FeatureCollection;\n}\n\nexport const ConnectionLayerDirection = <T extends Connection>(\n  props: ConnectionLayerDirectionProps<T>,\n) => {\n  const { geoJsonData, layerId: connectionLayerId, directionIndicator } = props;\n\n  const layerId = `${connectionLayerId}-direction`;\n  const sourceId = `source-${layerId}`;\n\n  // To get an image with enough quality instead of creating a tiny pic\n  // and enlarge it, we create a huge image to shrink it\n  const { symbolName } = useLoadSymbolIntoMap(\n    <SorterIcon />,\n    layerId,\n    DIRECTION_ICON_OUTPUT_SIZE,\n  );\n\n  const parsedGeoJsonData = parseDirectionDataToGeoJSON({\n    geoJsonData,\n    directionIndicator,\n  });\n\n  /**\n   * This value is necessary due to the icon\n   * that comes from the '\\@dynatrace/strato-icons'\n   * SorterIcon points downwards, but it should point upwards\n   * for the sake of the angle calculation.\n   */\n  const iconRotationDegrees = 180;\n\n  return (\n    <Source\n      id={sourceId}\n      type=\"geojson\"\n      data={parsedGeoJsonData}\n      promoteId={'id'}\n    >\n      <Layer\n        id={layerId}\n        beforeId={connectionLayerId}\n        type=\"symbol\"\n        layout={{\n          'symbol-placement': 'point',\n          'icon-image': symbolName,\n          'icon-rotate': ['+', ['get', '__angle'], iconRotationDegrees],\n          'icon-rotation-alignment': 'map',\n          'icon-allow-overlap': true,\n          'icon-ignore-placement': true,\n          'icon-size': [\n            '*',\n            ['get', '__lineWidth'],\n            DIRECTION_ICON_SHRINK_RATIO,\n          ],\n        }}\n        paint={{\n          'icon-color': [\n            'case',\n            ['boolean', ['feature-state', 'hover'], false],\n            ['get', '__lineHoveredColor'],\n            ['get', '__lineColor'],\n          ],\n          'icon-opacity': [\n            'case',\n            ['boolean', ['feature-state', 'legendHover'], true],\n            SHAPE_OPACITY_DEFAULT,\n            SHAPE_OPACITY_DIMMED,\n          ],\n        }}\n      />\n    </Source>\n  );\n};\n\nConnectionLayerDirection['displayName'] = 'ConnectionLayerDirection';\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,OAAO,cAAc;AAE9B,SAAS,kBAAkB;AAE3B,SAAS,mCAAmC;AAC5C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AAa9B,MAAM,2BAA2B,CACtC,UACG;AACH,QAAM,EAAE,aAAa,SAAS,mBAAmB,mBAAmB,IAAI;AAExE,QAAM,UAAU,GAAG,iBAAiB;AACpC,QAAM,WAAW,UAAU,OAAO;AAIlC,QAAM,EAAE,WAAW,IAAI;AAAA,IACrB,oCAAC,gBAAW;AAAA,IACZ;AAAA,IACA;AAAA,EACF;AAEA,QAAM,oBAAoB,4BAA4B;AAAA,IACpD;AAAA,IACA;AAAA,EACF,CAAC;AAQD,QAAM,sBAAsB;AAE5B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,MAAM;AAAA,MACN,WAAW;AAAA;AAAA,IAEX;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,MAAK;AAAA,QACL,QAAQ;AAAA,UACN,oBAAoB;AAAA,UACpB,cAAc;AAAA,UACd,eAAe,CAAC,KAAK,CAAC,OAAO,SAAS,GAAG,mBAAmB;AAAA,UAC5D,2BAA2B;AAAA,UAC3B,sBAAsB;AAAA,UACtB,yBAAyB;AAAA,UACzB,aAAa;AAAA,YACX;AAAA,YACA,CAAC,OAAO,aAAa;AAAA,YACrB;AAAA,UACF;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL,cAAc;AAAA,YACZ;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,YAC7C,CAAC,OAAO,oBAAoB;AAAA,YAC5B,CAAC,OAAO,aAAa;AAAA,UACvB;AAAA,UACA,gBAAgB;AAAA,YACd;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,YAClD;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EACF;AAEJ;AAEA,yBAAyB,aAAa,IAAI;",
   "names": []
 }

package/esm/map/components/ConnectionLayer/ConnectionLayerLine.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { Layer, Source } from "react-map-gl/maplibre";
+import {
+  DEFAULT_LINE_CAP,
+  DEFAULT_LINE_DASH_ARRAY,
+  DEFAULT_LINE_JOIN,
+  SHAPE_OPACITY_DEFAULT,
+  SHAPE_OPACITY_DIMMED
+} from "../../constants.js";
+const ConnectionLayerLine = (props) => {
+  const { geoJsonData, layerId, sourceId, line } = props;
+  return /* @__PURE__ */ React.createElement(Source, { id: sourceId, type: "geojson", data: geoJsonData, promoteId: "id" }, /* @__PURE__ */ React.createElement(
+    Layer,
+    {
+      type: "line",
+      id: layerId,
+      layout: {
+        "line-cap": DEFAULT_LINE_CAP,
+        "line-join": DEFAULT_LINE_JOIN
+      },
+      paint: {
+        "line-color": [
+          "case",
+          ["boolean", ["feature-state", "hover"], false],
+          ["get", "__lineHoveredColor"],
+          ["get", "__lineColor"]
+        ],
+        "line-opacity": [
+          "case",
+          ["boolean", ["feature-state", "legendHover"], true],
+          SHAPE_OPACITY_DEFAULT,
+          SHAPE_OPACITY_DIMMED
+        ],
+        "line-width": ["get", "__lineWidth"],
+        ...line && line === "dashed" ? { "line-dasharray": DEFAULT_LINE_DASH_ARRAY } : null
+      }
+    }
+  ));
+};
+ConnectionLayerLine["displayName"] = "ConnectionLayerLine";
+export {
+  ConnectionLayerLine
+};
+//# sourceMappingURL=ConnectionLayerLine.js.map

package/esm/map/components/ConnectionLayer/ConnectionLayerLine.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/map/components/ConnectionLayer/ConnectionLayerLine.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport { Layer, Source } from 'react-map-gl/maplibre';\n\nimport {\n  DEFAULT_LINE_CAP,\n  DEFAULT_LINE_DASH_ARRAY,\n  DEFAULT_LINE_JOIN,\n  SHAPE_OPACITY_DEFAULT,\n  SHAPE_OPACITY_DIMMED,\n} from '../../constants.js';\nimport type {\n  Connection,\n  InternalConnectionLayerProps,\n} from '../../types/connection-layer.js';\n\ninterface ConnectionLayerLineProps<T extends Connection>\n  extends Required<Pick<InternalConnectionLayerProps<T>, 'layerId'>> {\n  geoJsonData: GeoJSON.FeatureCollection;\n  sourceId: string;\n  line: 'dashed' | 'solid' | undefined;\n}\n\nexport const ConnectionLayerLine = <T extends Connection>(\n  props: ConnectionLayerLineProps<T>,\n) => {\n  const { geoJsonData, layerId, sourceId, line } = props;\n\n  return (\n    <Source id={sourceId} type=\"geojson\" data={geoJsonData} promoteId={'id'}>\n      <Layer\n        type=\"line\"\n        id={layerId}\n        layout={{\n          'line-cap': DEFAULT_LINE_CAP,\n          'line-join': DEFAULT_LINE_JOIN,\n        }}\n        paint={{\n          'line-color': [\n            'case',\n            ['boolean', ['feature-state', 'hover'], false],\n            ['get', '__lineHoveredColor'],\n            ['get', '__lineColor'],\n          ],\n          'line-opacity': [\n            'case',\n            ['boolean', ['feature-state', 'legendHover'], true],\n            SHAPE_OPACITY_DEFAULT,\n            SHAPE_OPACITY_DIMMED,\n          ],\n          'line-width': ['get', '__lineWidth'],\n          ...(line && line === 'dashed'\n            ? { 'line-dasharray': DEFAULT_LINE_DASH_ARRAY }\n            : null),\n        }}\n      />\n    </Source>\n  );\n};\n\nConnectionLayerLine['displayName'] = 'ConnectionLayerLine';\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,OAAO,cAAc;AAE9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAaA,MAAM,sBAAsB,CACjC,UACG;AACH,QAAM,EAAE,aAAa,SAAS,UAAU,KAAK,IAAI;AAEjD,SACE,oCAAC,UAAO,IAAI,UAAU,MAAK,WAAU,MAAM,aAAa,WAAW,QACjE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,IAAI;AAAA,MACJ,QAAQ;AAAA,QACN,YAAY;AAAA,QACZ,aAAa;AAAA,MACf;AAAA,MACA,OAAO;AAAA,QACL,cAAc;AAAA,UACZ;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,UAC7C,CAAC,OAAO,oBAAoB;AAAA,UAC5B,CAAC,OAAO,aAAa;AAAA,QACvB;AAAA,QACA,gBAAgB;AAAA,UACd;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,UAClD;AAAA,UACA;AAAA,QACF;AAAA,QACA,cAAc,CAAC,OAAO,aAAa;AAAA,QACnC,GAAI,QAAQ,SAAS,WACjB,EAAE,kBAAkB,wBAAwB,IAC5C;AAAA,MACN;AAAA;AAAA,EACF,CACF;AAEJ;AAEA,oBAAoB,aAAa,IAAI;",
+  "names": []
+}