@dynatrace/strato-geo 3.5.2 → 3.7.0

package/esm/map/MapView.js

@@ -18,6 +18,7 @@ import {
   MAP_VIEW_ARIA_LABEL
 } from "./constants.js";
 import { FormatterContext } from "./contexts/formatter.context.js";
+import { GeoDataLookupContext } from "./contexts/geo-data-lookup.context.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";
@@ -57,7 +58,8 @@ const _MapView = forwardRef(
     const {
       flattenData: layersData,
       categories,
-      legendDomain
+      legendDomain,
+      dataLookupRegistry
     } = extractLayersData(parsedChildren, valueAccessors);
     const config = iterateConfigSlots(children, legendDomain);
     const getMaxRange = () => {
@@ -107,43 +109,49 @@ const _MapView = forwardRef(
               MapTruncationModeContext.Provider,
               {
                 value: truncationMode ?? DEFAULT_TRUNCATION_MODE,
-                children: /* @__PURE__ */ jsx(FormatterContext.Provider, { value: formatter, children: /* @__PURE__ */ jsx(MapRawDataContext.Provider, { value: layersData, children: /* @__PURE__ */ jsx(OverlayProvider, { children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(MapStoreProvider, { children: /* @__PURE__ */ jsx(
-                  ColorScaleProvider,
+                children: /* @__PURE__ */ jsx(FormatterContext.Provider, { value: formatter, children: /* @__PURE__ */ jsx(MapRawDataContext.Provider, { value: layersData, children: /* @__PURE__ */ jsx(
+                  GeoDataLookupContext.Provider,
                   {
-                    categories,
-                    dataMax,
-                    children: /* @__PURE__ */ jsx(LayerColorStrategyProvider, { children: /* @__PURE__ */ jsxs(
-                      ChartLayout,
+                    value: dataLookupRegistry,
+                    children: /* @__PURE__ */ jsx(OverlayProvider, { children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(MapStoreProvider, { children: /* @__PURE__ */ jsx(
+                      ColorScaleProvider,
                       {
-                        ref: chartLayoutRef,
-                        chartHeight,
-                        errorState,
-                        showLoader: loading || isLoading,
-                        children: [
-                          /* @__PURE__ */ jsx(ChartLayout.Graph, { children: baseFeatureCollection && /* @__PURE__ */ jsx(
-                            MapContent,
-                            {
-                              ref: forwardedRef,
-                              onMapLoad: () => setIsMapLoaded(true),
-                              ...remaining,
-                              children: parsedChildren
-                            }
-                          ) }),
-                          !isLegendHidden && /* @__PURE__ */ jsx(
-                            ChartLayout.Legend,
-                            {
-                              position: legendPosition,
-                              ratio: legendRatio,
-                              ratioBoundaries: DEFAULT_LEGEND_SIZES,
-                              onResize: legendOnRatioChange,
-                              children: /* @__PURE__ */ jsx(MapLegendRenderer, {})
-                            }
-                          )
-                        ]
+                        categories,
+                        dataMax,
+                        children: /* @__PURE__ */ jsx(LayerColorStrategyProvider, { children: /* @__PURE__ */ jsxs(
+                          ChartLayout,
+                          {
+                            ref: chartLayoutRef,
+                            chartHeight,
+                            errorState,
+                            showLoader: loading || isLoading,
+                            children: [
+                              /* @__PURE__ */ jsx(ChartLayout.Graph, { children: baseFeatureCollection && /* @__PURE__ */ jsx(
+                                MapContent,
+                                {
+                                  ref: forwardedRef,
+                                  onMapLoad: () => setIsMapLoaded(true),
+                                  ...remaining,
+                                  children: parsedChildren
+                                }
+                              ) }),
+                              !isLegendHidden && /* @__PURE__ */ jsx(
+                                ChartLayout.Legend,
+                                {
+                                  position: legendPosition,
+                                  ratio: legendRatio,
+                                  ratioBoundaries: DEFAULT_LEGEND_SIZES,
+                                  onResize: legendOnRatioChange,
+                                  children: /* @__PURE__ */ jsx(MapLegendRenderer, {})
+                                }
+                              )
+                            ]
+                          }
+                        ) })
                       }
-                    ) })
+                    ) }) }) })
                   }
-                ) }) }) }) }) })
+                ) }) })
               }
             ) }) })
           }

package/esm/map/MapView.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/map/MapView.tsx"],
-  "sourcesContent": ["import { forwardRef, type PropsWithChildren, useState } from 'react';\n\nimport {\n  _ChartLayout as ChartLayout,\n  _coerceSizeValue as coerceSizeValue,\n  _useAutoLegendRefresh as useAutoLegendRefresh,\n  _OverlayProvider as OverlayProvider,\n  _OverlayTooltipProvider as TooltipProvider,\n} from '@dynatrace/strato-components/charts';\nimport { _useBehavioralTrackingProps as useBehavioralTrackingProps } from '@dynatrace/strato-components/core';\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  MAP_VIEW_ARIA_LABEL,\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 { DownloadCSV } from './slots/DownloadCSV.js';\nimport { ErrorStateSlot } from './slots/states/ErrorStateSlot.js';\nimport { Toolbar } from './slots/Toolbar.js';\nimport { Zoom } from './slots/Zoom.js';\nimport { MapStoreProvider } from './store/map-store.provider.js';\nimport type { MapViewProps, MapViewRef } from './types/map-view.js';\nimport { isThresholdLegend } from './utils/build-scale-from-legend-config.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';\nimport './styles/react-mapgl-styles.css';\n\n/**\n * MapView Component\n */\nconst _MapView = forwardRef<MapViewRef, PropsWithChildren<MapViewProps>>(\n  (props, forwardedRef) => {\n    const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n\n    const {\n      children,\n      loading = false,\n      style: costumerStyle,\n      className: customerClassNames,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      'data-testid': dataTestId,\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 getMaxRange = (): number => {\n      if (config.legend && isThresholdLegend(config.legend)) {\n        return config.legend.ranges.at(-1)?.to ?? legendDomain[1];\n      }\n      return legendDomain[1];\n    };\n\n    const dataMax = getMaxRange();\n\n    const isLegendHidden = !config.legend || !!config.legend.hidden;\n    const legendPosition = config.legend?.position;\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    const legendRatio = config.legend?.ratio;\n    const legendOnRatioChange = config.legend?.onRatioChange;\n\n    const { isMapEnabled, isFetchingFeatures, baseFeatureCollection, error } =\n      useLoadMapBaseLayer(config.baseLayer);\n\n    const [isMapLoaded, setIsMapLoaded] = useState<boolean>(false);\n    const { errorState } = getMapStatesTemplates(children);\n\n    const chartHeight = coerceSizeValue(props.height) || DEFAULT_MAP_HEIGHT;\n\n    const containerStyles = { width: '100%', ...costumerStyle };\n    const chartLayoutRef = useAutoLegendRefresh(categories.join(':'));\n    const mapUnavailable = (!isFetchingFeatures && !isMapEnabled) || error;\n\n    const isLoading = isFetchingFeatures || !isMapLoaded;\n\n    return (\n      <div\n        style={containerStyles}\n        className={customerClassNames}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        data-testid={dataTestId}\n        role=\"img\"\n        aria-label={MAP_VIEW_ARIA_LABEL}\n        {...behavioralTrackingProps}\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              isFetchingFeatures={isFetchingFeatures}\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                          <OverlayProvider>\n                            <TooltipProvider>\n                              <MapStoreProvider>\n                                <ColorScaleProvider\n                                  categories={categories}\n                                  dataMax={dataMax}\n                                >\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                                            onMapLoad={() =>\n                                              setIsMapLoaded(true)\n                                            }\n                                            {...remaining}\n                                          >\n                                            {parsedChildren}\n                                          </MapContent>\n                                        )}\n                                      </ChartLayout.Graph>\n                                      {!isLegendHidden && (\n                                        <ChartLayout.Legend\n                                          position={legendPosition}\n                                          // eslint-disable-next-line @typescript-eslint/no-deprecated\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                            </TooltipProvider>\n                          </OverlayProvider>\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 * @public\n */\nexport const MapView = Object.assign(_MapView, {\n  ErrorState: ErrorStateSlot,\n  Toolbar,\n  DownloadCSV,\n  Zoom,\n});\n"],
-  "mappings": "AAmHY,cA0BwB,YA1BxB;AAnHZ,SAAS,YAAoC,gBAAgB;AAE7D;AAAA,EACE,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,yBAAyB;AAAA,EACzB,oBAAoB;AAAA,EACpB,2BAA2B;AAAA,OACtB;AACP,SAAS,+BAA+B,kCAAkC;AAE1E,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;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,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,SAAS,wBAAwB;AAEjC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,6BAA6B;AACtC,SAAS,0BAA0B;AACnC,SAAS,mBAAmB;AAC5B,OAAO;AAKP,MAAM,WAAW;AAAA,EACf,CAAC,OAAO,iBAAiB;AACvB,UAAM,CAAC,uBAAuB,IAAI,2BAA2B,KAAK;AAElE,UAAM;AAAA,MACJ;AAAA,MACA,UAAU;AAAA,MACV,OAAO;AAAA,MACP,WAAW;AAAA,MACX,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,EAAE,UAAU,gBAAgB,eAAe,IAAI,YAAY,QAAQ;AAEzE,UAAM;AAAA,MACJ,aAAa;AAAA,MACb;AAAA,MACA;AAAA,IACF,IAAI,kBAAkB,gBAAgB,cAAc;AAEpD,UAAM,SAAS,mBAAmB,UAAU,YAAY;AAExD,UAAM,cAAc,MAAc;AAChC,UAAI,OAAO,UAAU,kBAAkB,OAAO,MAAM,GAAG;AACrD,eAAO,OAAO,OAAO,OAAO,GAAG,EAAE,GAAG,MAAM,aAAa,CAAC;AAAA,MAC1D;AACA,aAAO,aAAa,CAAC;AAAA,IACvB;AAEA,UAAM,UAAU,YAAY;AAE5B,UAAM,iBAAiB,CAAC,OAAO,UAAU,CAAC,CAAC,OAAO,OAAO;AACzD,UAAM,iBAAiB,OAAO,QAAQ;AAEtC,UAAM,cAAc,OAAO,QAAQ;AACnC,UAAM,sBAAsB,OAAO,QAAQ;AAE3C,UAAM,EAAE,cAAc,oBAAoB,uBAAuB,MAAM,IACrE,oBAAoB,OAAO,SAAS;AAEtC,UAAM,CAAC,aAAa,cAAc,IAAI,SAAkB,KAAK;AAC7D,UAAM,EAAE,WAAW,IAAI,sBAAsB,QAAQ;AAErD,UAAM,cAAc,gBAAgB,MAAM,MAAM,KAAK;AAErD,UAAM,kBAAkB,EAAE,OAAO,QAAQ,GAAG,cAAc;AAC1D,UAAM,iBAAiB,qBAAqB,WAAW,KAAK,GAAG,CAAC;AAChE,UAAM,iBAAkB,CAAC,sBAAsB,CAAC,gBAAiB;AAEjE,UAAM,YAAY,sBAAsB,CAAC;AAEzC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,WAAW;AAAA,QACX,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,eAAa;AAAA,QACb,MAAK;AAAA,QACL,cAAY;AAAA,QACX,GAAG;AAAA;AAAA,QAIF,2BACE;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,YAAY,CAAC;AAAA,YACb;AAAA,YACA;AAAA;AAAA,QACF,IAEA,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,SACjC;AAAA,UAAC,4BAA4B;AAAA,UAA5B;AAAA,YACC,OAAO;AAAA,YAEP,8BAAC,wBAAwB,UAAxB,EAAiC,OAAO,QACvC,8BAAC,gBAAgB,UAAhB,EAAyB,OAAO,UAC/B;AAAA,cAAC,yBAAyB;AAAA,cAAzB;AAAA,gBACC,OAAO,kBAAkB;AAAA,gBAEzB,8BAAC,iBAAiB,UAAjB,EAA0B,OAAO,WAChC,8BAAC,kBAAkB,UAAlB,EAA2B,OAAO,YACjC,8BAAC,mBACC,8BAAC,mBACC,8BAAC,oBACC;AAAA,kBAAC;AAAA;AAAA,oBACC;AAAA,oBACA;AAAA,oBAEA,8BAAC,8BACC;AAAA,sBAAC;AAAA;AAAA,wBACC,KAAK;AAAA,wBACL;AAAA,wBACA;AAAA,wBACA,YAAY,WAAW;AAAA,wBAEvB;AAAA,8CAAC,YAAY,OAAZ,EACE,mCACC;AAAA,4BAAC;AAAA;AAAA,8BACC,KAAK;AAAA,8BACL,WAAW,MACT,eAAe,IAAI;AAAA,8BAEpB,GAAG;AAAA,8BAEH;AAAA;AAAA,0BACH,GAEJ;AAAA,0BACC,CAAC,kBACA;AAAA,4BAAC,YAAY;AAAA,4BAAZ;AAAA,8BACC,UAAU;AAAA,8BAEV,OAAO;AAAA,8BACP,iBAAiB;AAAA,8BACjB,UAAU;AAAA,8BAEV,8BAAC,qBAAkB;AAAA;AAAA,0BACrB;AAAA;AAAA;AAAA,oBAEJ,GACF;AAAA;AAAA,gBACF,GACF,GACF,GACF,GACF,GACF;AAAA;AAAA,YACF,GACF,GACF;AAAA;AAAA,QACF,GACF;AAAA;AAAA,IAGN;AAAA,EAEJ;AACF;AAEC,SAAuD,aAAa,IACnE;AAMK,MAAM,UAAU,OAAO,OAAO,UAAU;AAAA,EAC7C,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
+  "sourcesContent": ["import { forwardRef, type PropsWithChildren, useState } from 'react';\n\nimport {\n  _ChartLayout as ChartLayout,\n  _coerceSizeValue as coerceSizeValue,\n  _useAutoLegendRefresh as useAutoLegendRefresh,\n  _OverlayProvider as OverlayProvider,\n  _OverlayTooltipProvider as TooltipProvider,\n} from '@dynatrace/strato-components/charts';\nimport { _useBehavioralTrackingProps as useBehavioralTrackingProps } from '@dynatrace/strato-components/core';\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  MAP_VIEW_ARIA_LABEL,\n} from './constants.js';\nimport { FormatterContext } from './contexts/formatter.context.js';\nimport { GeoDataLookupContext } from './contexts/geo-data-lookup.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 { DownloadCSV } from './slots/DownloadCSV.js';\nimport { ErrorStateSlot } from './slots/states/ErrorStateSlot.js';\nimport { Toolbar } from './slots/Toolbar.js';\nimport { Zoom } from './slots/Zoom.js';\nimport { MapStoreProvider } from './store/map-store.provider.js';\nimport type { MapViewProps, MapViewRef } from './types/map-view.js';\nimport { isThresholdLegend } from './utils/build-scale-from-legend-config.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';\nimport './styles/react-mapgl-styles.css';\n\n/**\n * MapView Component\n */\nconst _MapView = forwardRef<MapViewRef, PropsWithChildren<MapViewProps>>(\n  (props, forwardedRef) => {\n    const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n\n    const {\n      children,\n      loading = false,\n      style: costumerStyle,\n      className: customerClassNames,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      'data-testid': dataTestId,\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      dataLookupRegistry,\n    } = extractLayersData(parsedChildren, valueAccessors);\n\n    const config = iterateConfigSlots(children, legendDomain);\n\n    const getMaxRange = (): number => {\n      if (config.legend && isThresholdLegend(config.legend)) {\n        return config.legend.ranges.at(-1)?.to ?? legendDomain[1];\n      }\n      return legendDomain[1];\n    };\n\n    const dataMax = getMaxRange();\n\n    const isLegendHidden = !config.legend || !!config.legend.hidden;\n    const legendPosition = config.legend?.position;\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    const legendRatio = config.legend?.ratio;\n    const legendOnRatioChange = config.legend?.onRatioChange;\n\n    const { isMapEnabled, isFetchingFeatures, baseFeatureCollection, error } =\n      useLoadMapBaseLayer(config.baseLayer);\n\n    const [isMapLoaded, setIsMapLoaded] = useState<boolean>(false);\n    const { errorState } = getMapStatesTemplates(children);\n\n    const chartHeight = coerceSizeValue(props.height) || DEFAULT_MAP_HEIGHT;\n\n    const containerStyles = { width: '100%', ...costumerStyle };\n    const chartLayoutRef = useAutoLegendRefresh(categories.join(':'));\n    const mapUnavailable = (!isFetchingFeatures && !isMapEnabled) || error;\n\n    const isLoading = isFetchingFeatures || !isMapLoaded;\n\n    return (\n      <div\n        style={containerStyles}\n        className={customerClassNames}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        data-testid={dataTestId}\n        role=\"img\"\n        aria-label={MAP_VIEW_ARIA_LABEL}\n        {...behavioralTrackingProps}\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              isFetchingFeatures={isFetchingFeatures}\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                          <GeoDataLookupContext.Provider\n                            value={dataLookupRegistry}\n                          >\n                            <OverlayProvider>\n                              <TooltipProvider>\n                                <MapStoreProvider>\n                                  <ColorScaleProvider\n                                    categories={categories}\n                                    dataMax={dataMax}\n                                  >\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                                              onMapLoad={() =>\n                                                setIsMapLoaded(true)\n                                              }\n                                              {...remaining}\n                                            >\n                                              {parsedChildren}\n                                            </MapContent>\n                                          )}\n                                        </ChartLayout.Graph>\n                                        {!isLegendHidden && (\n                                          <ChartLayout.Legend\n                                            position={legendPosition}\n                                            // eslint-disable-next-line @typescript-eslint/no-deprecated\n                                            ratio={legendRatio}\n                                            ratioBoundaries={\n                                              DEFAULT_LEGEND_SIZES\n                                            }\n                                            onResize={legendOnRatioChange}\n                                          >\n                                            <MapLegendRenderer />\n                                          </ChartLayout.Legend>\n                                        )}\n                                      </ChartLayout>\n                                    </LayerColorStrategyProvider>\n                                  </ColorScaleProvider>\n                                </MapStoreProvider>\n                              </TooltipProvider>\n                            </OverlayProvider>\n                          </GeoDataLookupContext.Provider>\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 * @public\n */\nexport const MapView = Object.assign(_MapView, {\n  ErrorState: ErrorStateSlot,\n  Toolbar,\n  DownloadCSV,\n  Zoom,\n});\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -12,6 +12,7 @@ import {
 const BubbleCircleLayer = ({
   id,
   source,
+  beforeId,
   ...behavioralTrackingProps
 }) => {
   const sizeInterpolation = useSizeInterpolation();
@@ -22,6 +23,7 @@ const BubbleCircleLayer = ({
       type: "circle",
       id,
       source,
+      beforeId,
       paint: {
         "circle-color": [
           "case",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/BubbleLayer/BubbleCircleLayer.tsx"],
-  "sourcesContent": ["import { Layer } from '@vis.gl/react-maplibre';\n\nimport type { BehaviorTrackingProps } from '@dynatrace/strato-components/core';\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  ...behavioralTrackingProps\n}: {\n  id: string;\n  source: string;\n} & BehaviorTrackingProps) => {\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      {...behavioralTrackingProps}\n    />\n  );\n};\n"],
-  "mappings": "AA8BI;AA9BJ,SAAS,aAAa;AAItB,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;AAAA,EACA,GAAG;AACL,MAG8B;AAC5B,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,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;",
+  "sourcesContent": ["import { Layer } from '@vis.gl/react-maplibre';\n\nimport type { BehaviorTrackingProps } from '@dynatrace/strato-components/core';\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  beforeId,\n  ...behavioralTrackingProps\n}: {\n  id: string;\n  source: string;\n  beforeId?: string;\n} & BehaviorTrackingProps) => {\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      beforeId={beforeId}\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      {...behavioralTrackingProps}\n    />\n  );\n};\n"],
+  "mappings": "AAgCI;AAhCJ,SAAS,aAAa;AAItB,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;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAI8B;AAC5B,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;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,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;",
   "names": []
 }

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

@@ -8,6 +8,7 @@ import { SizeInterpolationContext } from "./contexts/size-interpolation.context.
 import { buildRadiusScale } from "./utils/build-radius-scale.js";
 import { parseBubbleDataToGeoJSON } from "./utils/parse-bubble-data-to-geo-json.js";
 import { DEFAULT_BUBBLE_COLOR, DEFAULT_RADIUS } from "../../constants.js";
+import { useLayerBeforeId } from "../../hooks/use-layer-before-id.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";
@@ -37,24 +38,32 @@ const BubbleLayer = (props) => {
   const sourceId = `source-${layerId}`;
   useLegendInteractionHighlighting(props, sourceId);
   useLegendInteractionVisibility(props, layerId);
+  const beforeId = useLayerBeforeId(layerId);
   let radiusScale = (value) => value;
   if (isScaleRadius(props)) {
     const { radiusRange = [10, 100], radius: radius2, scale = "linear" } = props;
     radiusScale = buildRadiusScale(data, radius2, scale, radiusRange);
   }
-  const dataGeoJson = parseBubbleDataToGeoJSON(
+  const { geoJson: dataGeoJson } = parseBubbleDataToGeoJSON(
     data,
     bubbleColor,
     radius,
     radiusScale
   );
-  const tooltipTemplate = useTooltipTemplate(children, BubbleLayerTooltipSlot);
+  const {
+    handler: tooltipTemplate,
+    hidden: tooltipHidden,
+    symbolAlignment
+  } = useTooltipTemplate(children, BubbleLayerTooltipSlot, {
+    extractProps: true
+  });
   return /* @__PURE__ */ jsx(SizeInterpolationContext.Provider, { value: sizeInterpolation, children: /* @__PURE__ */ jsxs(Source, { id: sourceId, type: "geojson", data: dataGeoJson, generateId: true, children: [
     /* @__PURE__ */ jsx(
       BubbleCircleLayer,
       {
         id: layerId,
         source: sourceId,
+        beforeId,
         ...behavioralTrackingProps
       }
     ),
@@ -62,7 +71,9 @@ const BubbleLayer = (props) => {
     /* @__PURE__ */ jsx(TooltipWrapper, { layerId, children: /* @__PURE__ */ jsx(
       BubbleLayerTooltip,
       {
-        tooltipTemplate: isBubbleTooltipTemplate(tooltipTemplate) ? tooltipTemplate : void 0
+        tooltipTemplate: isBubbleTooltipTemplate(tooltipTemplate) ? tooltipTemplate : void 0,
+        hidden: tooltipHidden,
+        symbolAlignment
       }
     ) })
   ] }) });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/BubbleLayer/BubbleLayer.tsx"],
-  "sourcesContent": ["import { Source } from '@vis.gl/react-maplibre';\nimport { type PropsWithChildren } from 'react';\n\nimport { _useBehavioralTrackingProps as useBehavioralTrackingProps } from '@dynatrace/strato-components/core';\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 './utils/build-radius-scale.js';\nimport { parseBubbleDataToGeoJSON } from './utils/parse-bubble-data-to-geo-json.js';\nimport { DEFAULT_BUBBLE_COLOR, DEFAULT_RADIUS } 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 { 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';\nimport { isBubbleTooltipTemplate } from '../../utils/tooltip-type-guards.js';\nimport { TooltipWrapper } from '../TooltipWrapper.js';\n\nexport const BubbleLayer = <T extends Location>(\n  props: PropsWithChildren<InternalBubbleLayerProps<T>>,\n) => {\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n\n  const {\n    data,\n    layerId,\n    radius = DEFAULT_RADIUS,\n    children,\n    sizeInterpolation = 'fixed',\n  } = props;\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    <SizeInterpolationContext.Provider value={sizeInterpolation}>\n      <Source id={sourceId} type=\"geojson\" data={dataGeoJson} generateId>\n        <BubbleCircleLayer\n          id={layerId}\n          source={sourceId}\n          {...behavioralTrackingProps}\n        />\n        <BubbleOutlineLayer beforeId={layerId} source={sourceId} />\n        <TooltipWrapper layerId={layerId}>\n          <BubbleLayerTooltip\n            tooltipTemplate={\n              isBubbleTooltipTemplate(tooltipTemplate)\n                ? tooltipTemplate\n                : undefined\n            }\n          />\n        </TooltipWrapper>\n      </Source>\n    </SizeInterpolationContext.Provider>\n  );\n};\n\nBubbleLayer['displayName'] = 'BubbleLayer';\n"],
-  "mappings": "AAoEM,SACE,KADF;AApEN,SAAS,cAAc;AAGvB,SAAS,+BAA+B,kCAAkC;AAE1E,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AACnC,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AACzC,SAAS,sBAAsB,sBAAsB;AACrD,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;AAEP,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAExB,MAAM,cAAc,CACzB,UACG;AACH,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,KAAK;AAElE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,oBAAoB;AAAA,EACtB,IAAI;AACJ,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,oBAAC,yBAAyB,UAAzB,EAAkC,OAAO,mBACxC,+BAAC,UAAO,IAAI,UAAU,MAAK,WAAU,MAAM,aAAa,YAAU,MAChE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,QAAQ;AAAA,QACP,GAAG;AAAA;AAAA,IACN;AAAA,IACA,oBAAC,sBAAmB,UAAU,SAAS,QAAQ,UAAU;AAAA,IACzD,oBAAC,kBAAe,SACd;AAAA,MAAC;AAAA;AAAA,QACC,iBACE,wBAAwB,eAAe,IACnC,kBACA;AAAA;AAAA,IAER,GACF;AAAA,KACF,GACF;AAEJ;AAEA,YAAY,aAAa,IAAI;",
+  "sourcesContent": ["import { Source } from '@vis.gl/react-maplibre';\nimport { type PropsWithChildren } from 'react';\n\nimport { _useBehavioralTrackingProps as useBehavioralTrackingProps } from '@dynatrace/strato-components/core';\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 './utils/build-radius-scale.js';\nimport { parseBubbleDataToGeoJSON } from './utils/parse-bubble-data-to-geo-json.js';\nimport { DEFAULT_BUBBLE_COLOR, DEFAULT_RADIUS } from '../../constants.js';\nimport { useLayerBeforeId } from '../../hooks/use-layer-before-id.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';\nimport { isBubbleTooltipTemplate } from '../../utils/tooltip-type-guards.js';\nimport { TooltipWrapper } from '../TooltipWrapper.js';\n\nexport const BubbleLayer = <T extends Location>(\n  props: PropsWithChildren<InternalBubbleLayerProps<T>>,\n) => {\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n\n  const {\n    data,\n    layerId,\n    radius = DEFAULT_RADIUS,\n    children,\n    sizeInterpolation = 'fixed',\n  } = props;\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  const beforeId = useLayerBeforeId(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 { geoJson: dataGeoJson } = parseBubbleDataToGeoJSON(\n    data,\n    bubbleColor,\n    radius,\n    radiusScale,\n  );\n\n  const {\n    handler: tooltipTemplate,\n    hidden: tooltipHidden,\n    symbolAlignment,\n  } = useTooltipTemplate(children, BubbleLayerTooltipSlot, {\n    extractProps: true,\n  });\n\n  return (\n    <SizeInterpolationContext.Provider value={sizeInterpolation}>\n      <Source id={sourceId} type=\"geojson\" data={dataGeoJson} generateId>\n        <BubbleCircleLayer\n          id={layerId}\n          source={sourceId}\n          beforeId={beforeId}\n          {...behavioralTrackingProps}\n        />\n        <BubbleOutlineLayer beforeId={layerId} source={sourceId} />\n        <TooltipWrapper layerId={layerId}>\n          <BubbleLayerTooltip\n            tooltipTemplate={\n              isBubbleTooltipTemplate(tooltipTemplate)\n                ? tooltipTemplate\n                : undefined\n            }\n            hidden={tooltipHidden}\n            symbolAlignment={symbolAlignment}\n          />\n        </TooltipWrapper>\n      </Source>\n    </SizeInterpolationContext.Provider>\n  );\n};\n\nBubbleLayer['displayName'] = 'BubbleLayer';\n"],
+  "mappings": "AA4EM,SACE,KADF;AA5EN,SAAS,cAAc;AAGvB,SAAS,+BAA+B,kCAAkC;AAE1E,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AACnC,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AACzC,SAAS,sBAAsB,sBAAsB;AACrD,SAAS,wBAAwB;AACjC,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;AAEP,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAExB,MAAM,cAAc,CACzB,UACG;AACH,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,KAAK;AAElE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,oBAAoB;AAAA,EACtB,IAAI;AACJ,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;AAC7C,QAAM,WAAW,iBAAiB,OAAO;AAEzC,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,EAAE,SAAS,YAAY,IAAI;AAAA,IAC/B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR;AAAA,EACF,IAAI,mBAAmB,UAAU,wBAAwB;AAAA,IACvD,cAAc;AAAA,EAChB,CAAC;AAED,SACE,oBAAC,yBAAyB,UAAzB,EAAkC,OAAO,mBACxC,+BAAC,UAAO,IAAI,UAAU,MAAK,WAAU,MAAM,aAAa,YAAU,MAChE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,QAAQ;AAAA,QACR;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,IACA,oBAAC,sBAAmB,UAAU,SAAS,QAAQ,UAAU;AAAA,IACzD,oBAAC,kBAAe,SACd;AAAA,MAAC;AAAA;AAAA,QACC,iBACE,wBAAwB,eAAe,IACnC,kBACA;AAAA,QAEN,QAAQ;AAAA,QACR;AAAA;AAAA,IACF,GACF;AAAA,KACF,GACF;AAEJ;AAEA,YAAY,aAAa,IAAI;",
   "names": ["radius"]
 }

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

@@ -4,9 +4,9 @@ import { _OverlayTooltip as OverlayTooltip } from "@dynatrace/strato-components/
 import { useGeoLayerTooltip } from "../../hooks/use-geo-layer-tooltip.js";
 import { isDefaultTooltipHandler } from "../../utils/tooltip-type-guards.js";
 const BubbleLayerTooltip = (props) => {
-  const { tooltipTemplate } = props;
+  const { tooltipTemplate, hidden, symbolAlignment } = props;
   const { data, inBounds, position } = useGeoLayerTooltip("geoBubble");
-  if (!tooltipTemplate || !inBounds || !position) {
+  if (hidden || !tooltipTemplate || !inBounds || !position) {
     return null;
   }
   if (!data || !data[0]) {
@@ -32,7 +32,13 @@ const BubbleLayerTooltip = (props) => {
   if (isDefaultTooltipHandler(tooltipTemplate)) {
     return template;
   }
-  return /* @__PURE__ */ jsx(OverlayTooltip, { legacyTemplate: template });
+  return /* @__PURE__ */ jsx(
+    OverlayTooltip,
+    {
+      legacyTemplate: template,
+      symbolAlignment
+    }
+  );
 };
 BubbleLayerTooltip["displayName"] = "BubbleLayerTooltip";
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/BubbleLayer/BubbleLayerTooltip.tsx"],
-  "sourcesContent": ["import { sortBy } from 'lodash-es';\n\nimport { _OverlayTooltip as OverlayTooltip } from '@dynatrace/strato-components/charts';\n\nimport { useGeoLayerTooltip } from '../../hooks/use-geo-layer-tooltip.js';\nimport type { Location } from '../../types/location.js';\nimport type {\n  BubbleLayerTooltipData,\n  BubbleLayerTooltipHandler,\n} from '../../types/tooltip.js';\nimport { isDefaultTooltipHandler } from '../../utils/tooltip-type-guards.js';\n\ninterface BubbleTooltipStatePayload {\n  __color: string;\n  __hoveredColor: string;\n  __radius: number;\n  __lat: number;\n  data: Location;\n}\n\nexport interface BubbleLayerTooltipProps {\n  tooltipTemplate?: BubbleLayerTooltipHandler;\n}\n\nexport const BubbleLayerTooltip = (props: BubbleLayerTooltipProps) => {\n  const { tooltipTemplate } = props;\n\n  const { data, inBounds, position } =\n    useGeoLayerTooltip<BubbleTooltipStatePayload>('geoBubble');\n\n  if (!tooltipTemplate || !inBounds || !position) {\n    return null;\n  }\n\n  if (!data || !data[0]) {\n    return null;\n  }\n\n  const sanitizedData: BubbleLayerTooltipData[] = data.map((bubbleProps) => {\n    const { __color: color, __radius: radius, data: customData } = bubbleProps;\n\n    return {\n      color,\n      radius,\n      data: customData,\n    };\n  });\n\n  const sortedBubbles: BubbleLayerTooltipData[] = [\n    ...sortBy(sanitizedData, ({ radius }) => radius),\n  ];\n  const closestPoint = sortedBubbles[0];\n  const remainingPoints = sortedBubbles.slice(1);\n\n  const template = closestPoint\n    ? tooltipTemplate(closestPoint, remainingPoints)\n    : null;\n\n  if (!template) {\n    return null;\n  }\n\n  if (isDefaultTooltipHandler(tooltipTemplate)) {\n    return template;\n  }\n\n  return <OverlayTooltip legacyTemplate={template} />;\n};\n\nBubbleLayerTooltip['displayName'] = 'BubbleLayerTooltip';\n"],
-  "mappings": "AAkES;AAlET,SAAS,cAAc;AAEvB,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,0BAA0B;AAMnC,SAAS,+BAA+B;AAcjC,MAAM,qBAAqB,CAAC,UAAmC;AACpE,QAAM,EAAE,gBAAgB,IAAI;AAE5B,QAAM,EAAE,MAAM,UAAU,SAAS,IAC/B,mBAA8C,WAAW;AAE3D,MAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC,UAAU;AAC9C,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG;AACrB,WAAO;AAAA,EACT;AAEA,QAAM,gBAA0C,KAAK,IAAI,CAAC,gBAAgB;AACxE,UAAM,EAAE,SAAS,OAAO,UAAU,QAAQ,MAAM,WAAW,IAAI;AAE/D,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,MAAM;AAAA,IACR;AAAA,EACF,CAAC;AAED,QAAM,gBAA0C;AAAA,IAC9C,GAAG,OAAO,eAAe,CAAC,EAAE,OAAO,MAAM,MAAM;AAAA,EACjD;AACA,QAAM,eAAe,cAAc,CAAC;AACpC,QAAM,kBAAkB,cAAc,MAAM,CAAC;AAE7C,QAAM,WAAW,eACb,gBAAgB,cAAc,eAAe,IAC7C;AAEJ,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,MAAI,wBAAwB,eAAe,GAAG;AAC5C,WAAO;AAAA,EACT;AAEA,SAAO,oBAAC,kBAAe,gBAAgB,UAAU;AACnD;AAEA,mBAAmB,aAAa,IAAI;",
+  "sourcesContent": ["import { sortBy } from 'lodash-es';\n\nimport { _OverlayTooltip as OverlayTooltip } from '@dynatrace/strato-components/charts';\n\nimport { useGeoLayerTooltip } from '../../hooks/use-geo-layer-tooltip.js';\nimport type { Location } from '../../types/location.js';\nimport type {\n  BubbleLayerTooltipData,\n  BubbleLayerTooltipHandler,\n} from '../../types/tooltip.js';\nimport { isDefaultTooltipHandler } from '../../utils/tooltip-type-guards.js';\n\ninterface BubbleTooltipStatePayload {\n  __color: string;\n  __hoveredColor: string;\n  __radius: number;\n  __lat: number;\n  data: Location;\n}\n\nexport interface BubbleLayerTooltipProps {\n  tooltipTemplate?: BubbleLayerTooltipHandler;\n  hidden?: boolean;\n  symbolAlignment?: 'left' | 'right';\n}\n\nexport const BubbleLayerTooltip = (props: BubbleLayerTooltipProps) => {\n  const { tooltipTemplate, hidden, symbolAlignment } = props;\n\n  const { data, inBounds, position } =\n    useGeoLayerTooltip<BubbleTooltipStatePayload>('geoBubble');\n\n  if (hidden || !tooltipTemplate || !inBounds || !position) {\n    return null;\n  }\n\n  if (!data || !data[0]) {\n    return null;\n  }\n\n  const sanitizedData: BubbleLayerTooltipData[] = data.map((bubbleProps) => {\n    const { __color: color, __radius: radius, data: customData } = bubbleProps;\n\n    return {\n      color,\n      radius,\n      data: customData,\n    };\n  });\n\n  const sortedBubbles: BubbleLayerTooltipData[] = [\n    ...sortBy(sanitizedData, ({ radius }) => radius),\n  ];\n  const closestPoint = sortedBubbles[0];\n  const remainingPoints = sortedBubbles.slice(1);\n\n  const template = closestPoint\n    ? tooltipTemplate(closestPoint, remainingPoints)\n    : null;\n\n  if (!template) {\n    return null;\n  }\n\n  if (isDefaultTooltipHandler(tooltipTemplate)) {\n    return template;\n  }\n\n  return (\n    <OverlayTooltip\n      legacyTemplate={template}\n      symbolAlignment={symbolAlignment}\n    />\n  );\n};\n\nBubbleLayerTooltip['displayName'] = 'BubbleLayerTooltip';\n"],
+  "mappings": "AAqEI;AArEJ,SAAS,cAAc;AAEvB,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,0BAA0B;AAMnC,SAAS,+BAA+B;AAgBjC,MAAM,qBAAqB,CAAC,UAAmC;AACpE,QAAM,EAAE,iBAAiB,QAAQ,gBAAgB,IAAI;AAErD,QAAM,EAAE,MAAM,UAAU,SAAS,IAC/B,mBAA8C,WAAW;AAE3D,MAAI,UAAU,CAAC,mBAAmB,CAAC,YAAY,CAAC,UAAU;AACxD,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG;AACrB,WAAO;AAAA,EACT;AAEA,QAAM,gBAA0C,KAAK,IAAI,CAAC,gBAAgB;AACxE,UAAM,EAAE,SAAS,OAAO,UAAU,QAAQ,MAAM,WAAW,IAAI;AAE/D,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,MAAM;AAAA,IACR;AAAA,EACF,CAAC;AAED,QAAM,gBAA0C;AAAA,IAC9C,GAAG,OAAO,eAAe,CAAC,EAAE,OAAO,MAAM,MAAM;AAAA,EACjD;AACA,QAAM,eAAe,cAAc,CAAC;AACpC,QAAM,kBAAkB,cAAc,MAAM,CAAC;AAE7C,QAAM,WAAW,eACb,gBAAgB,cAAc,eAAe,IAC7C;AAEJ,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,MAAI,wBAAwB,eAAe,GAAG;AAC5C,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAgB;AAAA,MAChB;AAAA;AAAA,EACF;AAEJ;AAEA,mBAAmB,aAAa,IAAI;",
   "names": []
 }

package/esm/map/components/BubbleLayer/utils/parse-bubble-data-to-geo-json.js

@@ -3,18 +3,17 @@ import { defineRadius } from "./define-radius.js";
 import { calculateHoveredColor } from "../../../utils/calculate-hovered-color.js";
 import { defineColor } from "../../../utils/define-color.js";
 const parseBubbleDataToGeoJSON = (data, color, radius, scale) => {
-  return {
+  const geoJson = {
     type: "FeatureCollection",
-    features: data.map((feature) => {
-      const { longitude, latitude, ...properties } = feature;
+    features: data.map((feature, index) => {
+      const { longitude, latitude } = feature;
       const canvasColor = getCanvasColor(defineColor(color, feature));
       const hoveredColor = calculateHoveredColor(canvasColor);
       const scaledRadius = scale(defineRadius(radius, feature));
       return {
         type: "Feature",
         properties: {
-          data: feature,
-          ...properties,
+          __dataIndex: index,
           __color: canvasColor,
           __hoveredColor: hoveredColor,
           __radius: scaledRadius,
@@ -24,6 +23,7 @@ const parseBubbleDataToGeoJSON = (data, color, radius, scale) => {
       };
     })
   };
+  return { geoJson };
 };
 export {
   parseBubbleDataToGeoJSON

package/esm/map/components/BubbleLayer/utils/parse-bubble-data-to-geo-json.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/map/components/BubbleLayer/utils/parse-bubble-data-to-geo-json.ts"],
-  "sourcesContent": ["import type { ScaleLinear, ScaleLogarithmic } from 'd3-scale';\nimport type GeoJSON from 'geojson';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components/charts';\n\nimport { defineRadius } from './define-radius.js';\nimport type { Location } from '../../../types/location.js';\nimport { calculateHoveredColor } from '../../../utils/calculate-hovered-color.js';\nimport { defineColor } from '../../../utils/define-color.js';\n\ntype RadiusScale =\n  | ScaleLinear<number, number>\n  | ScaleLogarithmic<number, number>\n  | ((value: number) => number);\n\nexport const parseBubbleDataToGeoJSON = <T extends Location>(\n  data: T[],\n  color: string | ((item: T) => string),\n  radius: number | ((item: T) => number),\n  scale: RadiusScale,\n): GeoJSON.FeatureCollection => {\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      const scaledRadius = scale(defineRadius(radius, feature));\n\n      return {\n        type: 'Feature',\n        properties: {\n          data: feature,\n          ...properties,\n          __color: canvasColor,\n          __hoveredColor: hoveredColor,\n          __radius: scaledRadius,\n          __lat: latitude,\n        },\n        geometry: { type: 'Point', coordinates: [longitude, latitude] },\n      };\n    }),\n  };\n};\n"],
-  "mappings": "AAGA,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,oBAAoB;AAE7B,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAOrB,MAAM,2BAA2B,CACtC,MACA,OACA,QACA,UAC8B;AAC9B,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;AACtD,YAAM,eAAe,MAAM,aAAa,QAAQ,OAAO,CAAC;AAExD,aAAO;AAAA,QACL,MAAM;AAAA,QACN,YAAY;AAAA,UACV,MAAM;AAAA,UACN,GAAG;AAAA,UACH,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,UAAU;AAAA,UACV,OAAO;AAAA,QACT;AAAA,QACA,UAAU,EAAE,MAAM,SAAS,aAAa,CAAC,WAAW,QAAQ,EAAE;AAAA,MAChE;AAAA,IACF,CAAC;AAAA,EACH;AACF;",
+  "sourcesContent": ["import type { ScaleLinear, ScaleLogarithmic } from 'd3-scale';\nimport type GeoJSON from 'geojson';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components/charts';\n\nimport { defineRadius } from './define-radius.js';\nimport type { Location } from '../../../types/location.js';\nimport { calculateHoveredColor } from '../../../utils/calculate-hovered-color.js';\nimport { defineColor } from '../../../utils/define-color.js';\n\ntype RadiusScale =\n  | ScaleLinear<number, number>\n  | ScaleLogarithmic<number, number>\n  | ((value: number) => number);\n\nexport const parseBubbleDataToGeoJSON = <T extends Location>(\n  data: T[],\n  color: string | ((item: T) => string),\n  radius: number | ((item: T) => number),\n  scale: RadiusScale,\n): { geoJson: GeoJSON.FeatureCollection } => {\n  const geoJson: GeoJSON.FeatureCollection = {\n    type: 'FeatureCollection',\n    features: data.map((feature, index) => {\n      const { longitude, latitude } = feature;\n      const canvasColor = getCanvasColor(defineColor(color, feature));\n      const hoveredColor = calculateHoveredColor(canvasColor);\n      const scaledRadius = scale(defineRadius(radius, feature));\n\n      return {\n        type: 'Feature',\n        properties: {\n          __dataIndex: index,\n          __color: canvasColor,\n          __hoveredColor: hoveredColor,\n          __radius: scaledRadius,\n          __lat: latitude,\n        },\n        geometry: { type: 'Point', coordinates: [longitude, latitude] },\n      };\n    }),\n  };\n\n  return { geoJson };\n};\n"],
+  "mappings": "AAGA,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,oBAAoB;AAE7B,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAOrB,MAAM,2BAA2B,CACtC,MACA,OACA,QACA,UAC2C;AAC3C,QAAM,UAAqC;AAAA,IACzC,MAAM;AAAA,IACN,UAAU,KAAK,IAAI,CAAC,SAAS,UAAU;AACrC,YAAM,EAAE,WAAW,SAAS,IAAI;AAChC,YAAM,cAAc,eAAe,YAAY,OAAO,OAAO,CAAC;AAC9D,YAAM,eAAe,sBAAsB,WAAW;AACtD,YAAM,eAAe,MAAM,aAAa,QAAQ,OAAO,CAAC;AAExD,aAAO;AAAA,QACL,MAAM;AAAA,QACN,YAAY;AAAA,UACV,aAAa;AAAA,UACb,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,UAAU;AAAA,UACV,OAAO;AAAA,QACT;AAAA,QACA,UAAU,EAAE,MAAM,SAAS,aAAa,CAAC,WAAW,QAAQ,EAAE;AAAA,MAChE;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO,EAAE,QAAQ;AACnB;",
   "names": []
 }

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

@@ -9,6 +9,7 @@ import {
   SHAPE_OPACITY_DIMMED,
   SHAPE_OPACITY_DEFAULT
 } from "../../constants.js";
+import { useLayerBeforeId } from "../../hooks/use-layer-before-id.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";
@@ -31,11 +32,15 @@ const ChoroplethLayer = (props) => {
   const sourceId = layerId.replace("layer", "source");
   useLegendInteractionHighlighting(props, sourceId);
   useLegendInteractionVisibility(props, layerId);
-  const dataGeoJSON = mapSource && parseRegionDataToGeoJSON(mapSource, data, regionAccessor, choroplethColor);
-  const tooltipTemplate = useTooltipTemplate(
-    children,
-    ChoroplethLayerTooltipSlot
-  );
+  const beforeId = useLayerBeforeId(layerId);
+  const dataGeoJSON = mapSource ? parseRegionDataToGeoJSON(mapSource, data, regionAccessor, choroplethColor).geoJson : void 0;
+  const {
+    handler: tooltipTemplate,
+    hidden: tooltipHidden,
+    symbolAlignment
+  } = useTooltipTemplate(children, ChoroplethLayerTooltipSlot, {
+    extractProps: true
+  });
   return dataGeoJSON && /* @__PURE__ */ jsxs(Source, { id: sourceId, type: "geojson", data: dataGeoJSON, generateId: true, children: [
     /* @__PURE__ */ jsx(
       Layer,
@@ -43,6 +48,7 @@ const ChoroplethLayer = (props) => {
         id: layerId,
         source: sourceId,
         type: "fill",
+        beforeId,
         paint: {
           "fill-color": ["get", "__color"],
           "fill-opacity": [
@@ -63,11 +69,13 @@ const ChoroplethLayer = (props) => {
         ...behavioralTrackingProps
       }
     ),
-    /* @__PURE__ */ jsx(ChoroplethOutlineLayer, { sourceId }),
+    /* @__PURE__ */ jsx(ChoroplethOutlineLayer, { sourceId, beforeId }),
     /* @__PURE__ */ jsx(TooltipWrapper, { layerId, children: /* @__PURE__ */ jsx(
       ChoroplethLayerTooltip,
       {
-        tooltipTemplate: isChoroplethTooltipTemplate(tooltipTemplate) ? tooltipTemplate : void 0
+        tooltipTemplate: isChoroplethTooltipTemplate(tooltipTemplate) ? tooltipTemplate : void 0,
+        hidden: tooltipHidden,
+        symbolAlignment
       }
     ) })
   ] });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/ChoroplethLayer/ChoroplethLayer.tsx"],
-  "sourcesContent": ["import { Layer, Source } from '@vis.gl/react-maplibre';\nimport { type PropsWithChildren } from 'react';\n\nimport { _useBehavioralTrackingProps as useBehavioralTrackingProps } from '@dynatrace/strato-components/core';\n\nimport { ChoroplethLayerTooltip } from './ChoroplethLayerTooltip.js';\nimport { ChoroplethOutlineLayer } from './ChoroplethOutlineLayer.js';\nimport { parseRegionDataToGeoJSON } from './utils/parse-region-data-to-geo-json.js';\nimport {\n  DEFAULT_CHOROPLETH_COLOR,\n  SHAPE_OPACITY_DIMMED,\n  SHAPE_OPACITY_DEFAULT,\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';\nimport { TooltipWrapper } from '../TooltipWrapper.js';\n\nexport const ChoroplethLayer = <T extends Record<string, unknown>>(\n  props: PropsWithChildren<InternalChoroplethLayerProps<T>>,\n) => {\n  const { layerId, data, regionAccessor, children } = props;\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\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    dataGeoJSON && (\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          {...behavioralTrackingProps}\n        />\n        <ChoroplethOutlineLayer sourceId={sourceId} />\n        <TooltipWrapper layerId={layerId}>\n          <ChoroplethLayerTooltip\n            tooltipTemplate={\n              isChoroplethTooltipTemplate(tooltipTemplate)\n                ? tooltipTemplate\n                : undefined\n            }\n          />\n        </TooltipWrapper>\n      </Source>\n    )\n  );\n};\n\nChoroplethLayer['displayName'] = 'ChoroplethLayer';\n"],
-  "mappings": "AAoDM,SACE,KADF;AApDN,SAAS,OAAO,cAAc;AAG9B,SAAS,+BAA+B,kCAAkC;AAE1E,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AACvC,SAAS,gCAAgC;AACzC;AAAA,EACE;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;AAC5C,SAAS,sBAAsB;AAExB,MAAM,kBAAkB,CAC7B,UACG;AACH,QAAM,EAAE,SAAS,MAAM,gBAAgB,SAAS,IAAI;AACpD,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,KAAK;AAClE,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,eACE,qBAAC,UAAO,IAAI,UAAU,MAAK,WAAU,MAAM,aAAa,YAAU,MAChE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,QAAQ;AAAA,QACR,MAAK;AAAA,QACL,OAAO;AAAA,UACL,cAAc,CAAC,OAAO,SAAS;AAAA,UAC/B,gBAAgB;AAAA,YACd;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,aAAa,GAAG,KAAK;AAAA,YAC9C;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,QAAQ,GAAG,IAAI;AAAA,YACxC;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,OAAO,GAAG,IAAI;AAAA,YACvC;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,YAC7C;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,YAC7C;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,IACA,oBAAC,0BAAuB,UAAoB;AAAA,IAC5C,oBAAC,kBAAe,SACd;AAAA,MAAC;AAAA;AAAA,QACC,iBACE,4BAA4B,eAAe,IACvC,kBACA;AAAA;AAAA,IAER,GACF;AAAA,KACF;AAGN;AAEA,gBAAgB,aAAa,IAAI;",
+  "sourcesContent": ["import { Layer, Source } from '@vis.gl/react-maplibre';\nimport { type PropsWithChildren } from 'react';\n\nimport { _useBehavioralTrackingProps as useBehavioralTrackingProps } from '@dynatrace/strato-components/core';\n\nimport { ChoroplethLayerTooltip } from './ChoroplethLayerTooltip.js';\nimport { ChoroplethOutlineLayer } from './ChoroplethOutlineLayer.js';\nimport { parseRegionDataToGeoJSON } from './utils/parse-region-data-to-geo-json.js';\nimport {\n  DEFAULT_CHOROPLETH_COLOR,\n  SHAPE_OPACITY_DIMMED,\n  SHAPE_OPACITY_DEFAULT,\n} from '../../constants.js';\nimport { useLayerBeforeId } from '../../hooks/use-layer-before-id.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';\nimport { TooltipWrapper } from '../TooltipWrapper.js';\n\nexport const ChoroplethLayer = <T extends Record<string, unknown>>(\n  props: PropsWithChildren<InternalChoroplethLayerProps<T>>,\n) => {\n  const { layerId, data, regionAccessor, children } = props;\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\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  // Keep stack order aligned with JSX order even when this layer mounts after\n  const beforeId = useLayerBeforeId(layerId);\n\n  const dataGeoJSON = mapSource\n    ? parseRegionDataToGeoJSON(mapSource, data, regionAccessor, choroplethColor)\n        .geoJson\n    : undefined;\n\n  const {\n    handler: tooltipTemplate,\n    hidden: tooltipHidden,\n    symbolAlignment,\n  } = useTooltipTemplate(children, ChoroplethLayerTooltipSlot, {\n    extractProps: true,\n  });\n\n  return (\n    dataGeoJSON && (\n      <Source id={sourceId} type=\"geojson\" data={dataGeoJSON} generateId>\n        <Layer\n          id={layerId}\n          source={sourceId}\n          type=\"fill\"\n          beforeId={beforeId}\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          {...behavioralTrackingProps}\n        />\n        <ChoroplethOutlineLayer sourceId={sourceId} beforeId={beforeId} />\n        <TooltipWrapper layerId={layerId}>\n          <ChoroplethLayerTooltip\n            tooltipTemplate={\n              isChoroplethTooltipTemplate(tooltipTemplate)\n                ? tooltipTemplate\n                : undefined\n            }\n            hidden={tooltipHidden}\n            symbolAlignment={symbolAlignment}\n          />\n        </TooltipWrapper>\n      </Source>\n    )\n  );\n};\n\nChoroplethLayer['displayName'] = 'ChoroplethLayer';\n"],
+  "mappings": "AA2DM,SACE,KADF;AA3DN,SAAS,OAAO,cAAc;AAG9B,SAAS,+BAA+B,kCAAkC;AAE1E,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AACvC,SAAS,gCAAgC;AACzC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,wBAAwB;AACjC,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;AAC5C,SAAS,sBAAsB;AAExB,MAAM,kBAAkB,CAC7B,UACG;AACH,QAAM,EAAE,SAAS,MAAM,gBAAgB,SAAS,IAAI;AACpD,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,KAAK;AAClE,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,WAAW,iBAAiB,OAAO;AAEzC,QAAM,cAAc,YAChB,yBAAyB,WAAW,MAAM,gBAAgB,eAAe,EACtE,UACH;AAEJ,QAAM;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR;AAAA,EACF,IAAI,mBAAmB,UAAU,4BAA4B;AAAA,IAC3D,cAAc;AAAA,EAChB,CAAC;AAED,SACE,eACE,qBAAC,UAAO,IAAI,UAAU,MAAK,WAAU,MAAM,aAAa,YAAU,MAChE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,QAAQ;AAAA,QACR,MAAK;AAAA,QACL;AAAA,QACA,OAAO;AAAA,UACL,cAAc,CAAC,OAAO,SAAS;AAAA,UAC/B,gBAAgB;AAAA,YACd;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,aAAa,GAAG,KAAK;AAAA,YAC9C;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,QAAQ,GAAG,IAAI;AAAA,YACxC;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,OAAO,GAAG,IAAI;AAAA,YACvC;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,YAC7C;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,YAC7C;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,IACA,oBAAC,0BAAuB,UAAoB,UAAoB;AAAA,IAChE,oBAAC,kBAAe,SACd;AAAA,MAAC;AAAA;AAAA,QACC,iBACE,4BAA4B,eAAe,IACvC,kBACA;AAAA,QAEN,QAAQ;AAAA,QACR;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAGN;AAEA,gBAAgB,aAAa,IAAI;",
   "names": []
 }

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

@@ -3,9 +3,9 @@ import { _OverlayTooltip as OverlayTooltip } from "@dynatrace/strato-components/
 import { useGeoLayerTooltip } from "../../hooks/use-geo-layer-tooltip.js";
 import { isDefaultTooltipHandler } from "../../utils/tooltip-type-guards.js";
 const ChoroplethLayerTooltip = (props) => {
-  const { tooltipTemplate } = props;
+  const { tooltipTemplate, hidden, symbolAlignment } = props;
   const { data, inBounds, position } = useGeoLayerTooltip("geoChoropleth");
-  if (!tooltipTemplate || !inBounds || !position) {
+  if (hidden || !tooltipTemplate || !inBounds || !position) {
     return null;
   }
   if (!data || !data[0]) {
@@ -24,7 +24,13 @@ const ChoroplethLayerTooltip = (props) => {
   if (isDefaultTooltipHandler(tooltipTemplate)) {
     return template;
   }
-  return /* @__PURE__ */ jsx(OverlayTooltip, { legacyTemplate: template });
+  return /* @__PURE__ */ jsx(
+    OverlayTooltip,
+    {
+      legacyTemplate: template,
+      symbolAlignment
+    }
+  );
 };
 ChoroplethLayerTooltip["displayName"] = "ChoroplethLayerTooltip";
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/ChoroplethLayer/ChoroplethLayerTooltip.tsx"],
-  "sourcesContent": ["import { _OverlayTooltip as OverlayTooltip } from '@dynatrace/strato-components/charts';\n\nimport { useGeoLayerTooltip } from '../../hooks/use-geo-layer-tooltip.js';\nimport type {\n  ChoroplethLayerTooltipData,\n  ChoroplethLayerTooltipHandler,\n} from '../../types/tooltip.js';\nimport { isDefaultTooltipHandler } from '../../utils/tooltip-type-guards.js';\n\ninterface ChoroplethTooltipStatePayload {\n  name: string;\n  __color: string;\n  __hoveredColor: string;\n  data: Record<string, unknown>;\n}\n\nexport interface ChoroplethLayerTooltipProps {\n  tooltipTemplate?: ChoroplethLayerTooltipHandler;\n}\n\nexport const ChoroplethLayerTooltip = (props: ChoroplethLayerTooltipProps) => {\n  const { tooltipTemplate } = props;\n\n  const { data, inBounds, position } =\n    useGeoLayerTooltip<ChoroplethTooltipStatePayload>('geoChoropleth');\n\n  if (!tooltipTemplate || !inBounds || !position) {\n    return null;\n  }\n\n  if (!data || !data[0]) {\n    return null;\n  }\n\n  const { name, __color: color, data: customData } = data[0];\n  const regionData: ChoroplethLayerTooltipData = {\n    data: customData,\n    name,\n    color,\n  };\n\n  const template = tooltipTemplate(regionData);\n\n  if (!template) {\n    return null;\n  }\n\n  if (isDefaultTooltipHandler(tooltipTemplate)) {\n    return template;\n  }\n\n  return <OverlayTooltip legacyTemplate={template} />;\n};\n\nChoroplethLayerTooltip['displayName'] = 'ChoroplethLayerTooltip';\n"],
-  "mappings": "AAmDS;AAnDT,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,0BAA0B;AAKnC,SAAS,+BAA+B;AAajC,MAAM,yBAAyB,CAAC,UAAuC;AAC5E,QAAM,EAAE,gBAAgB,IAAI;AAE5B,QAAM,EAAE,MAAM,UAAU,SAAS,IAC/B,mBAAkD,eAAe;AAEnE,MAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC,UAAU;AAC9C,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG;AACrB,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,MAAM,SAAS,OAAO,MAAM,WAAW,IAAI,KAAK,CAAC;AACzD,QAAM,aAAyC;AAAA,IAC7C,MAAM;AAAA,IACN;AAAA,IACA;AAAA,EACF;AAEA,QAAM,WAAW,gBAAgB,UAAU;AAE3C,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,MAAI,wBAAwB,eAAe,GAAG;AAC5C,WAAO;AAAA,EACT;AAEA,SAAO,oBAAC,kBAAe,gBAAgB,UAAU;AACnD;AAEA,uBAAuB,aAAa,IAAI;",
+  "sourcesContent": ["import { _OverlayTooltip as OverlayTooltip } from '@dynatrace/strato-components/charts';\n\nimport { useGeoLayerTooltip } from '../../hooks/use-geo-layer-tooltip.js';\nimport type {\n  ChoroplethLayerTooltipData,\n  ChoroplethLayerTooltipHandler,\n} from '../../types/tooltip.js';\nimport { isDefaultTooltipHandler } from '../../utils/tooltip-type-guards.js';\n\ninterface ChoroplethTooltipStatePayload {\n  name: string;\n  region_type: string;\n  __color: string;\n  __hoveredColor: string;\n  data: Record<string, unknown>;\n}\n\nexport interface ChoroplethLayerTooltipProps {\n  tooltipTemplate?: ChoroplethLayerTooltipHandler;\n  hidden?: boolean;\n  symbolAlignment?: 'left' | 'right';\n}\n\nexport const ChoroplethLayerTooltip = (props: ChoroplethLayerTooltipProps) => {\n  const { tooltipTemplate, hidden, symbolAlignment } = props;\n\n  const { data, inBounds, position } =\n    useGeoLayerTooltip<ChoroplethTooltipStatePayload>('geoChoropleth');\n\n  if (hidden || !tooltipTemplate || !inBounds || !position) {\n    return null;\n  }\n\n  if (!data || !data[0]) {\n    return null;\n  }\n\n  const { name, __color: color, data: customData } = data[0];\n  const regionData: ChoroplethLayerTooltipData = {\n    data: customData,\n    name,\n    color,\n  };\n\n  const template = tooltipTemplate(regionData);\n\n  if (!template) {\n    return null;\n  }\n\n  if (isDefaultTooltipHandler(tooltipTemplate)) {\n    return template;\n  }\n\n  return (\n    <OverlayTooltip\n      legacyTemplate={template}\n      symbolAlignment={symbolAlignment}\n    />\n  );\n};\n\nChoroplethLayerTooltip['displayName'] = 'ChoroplethLayerTooltip';\n"],
+  "mappings": "AAuDI;AAvDJ,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,0BAA0B;AAKnC,SAAS,+BAA+B;AAgBjC,MAAM,yBAAyB,CAAC,UAAuC;AAC5E,QAAM,EAAE,iBAAiB,QAAQ,gBAAgB,IAAI;AAErD,QAAM,EAAE,MAAM,UAAU,SAAS,IAC/B,mBAAkD,eAAe;AAEnE,MAAI,UAAU,CAAC,mBAAmB,CAAC,YAAY,CAAC,UAAU;AACxD,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG;AACrB,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,MAAM,SAAS,OAAO,MAAM,WAAW,IAAI,KAAK,CAAC;AACzD,QAAM,aAAyC;AAAA,IAC7C,MAAM;AAAA,IACN;AAAA,IACA;AAAA,EACF;AAEA,QAAM,WAAW,gBAAgB,UAAU;AAE3C,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,MAAI,wBAAwB,eAAe,GAAG;AAC5C,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAgB;AAAA,MAChB;AAAA;AAAA,EACF;AAEJ;AAEA,uBAAuB,aAAa,IAAI;",
   "names": []
 }

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

@@ -11,7 +11,7 @@ import {
   ACTIVE_BORDER_WIDTH_INNER
 } from "../../constants.js";
 const ChoroplethOutlineLayer = (props) => {
-  const { sourceId } = props;
+  const { sourceId, beforeId } = props;
   const activeColor = getCanvasColor(ACTIVE_COLOR);
   const defaultBoundariesBorderColor = getCanvasColor(
     DEFAULT_BOUNDARIES_BORDER_COLOR
@@ -23,6 +23,7 @@ const ChoroplethOutlineLayer = (props) => {
       {
         source: sourceId,
         type: "line",
+        beforeId,
         paint: {
           "line-color": [
             "case",
@@ -50,6 +51,7 @@ const ChoroplethOutlineLayer = (props) => {
       {
         source: sourceId,
         type: "line",
+        beforeId,
         paint: {
           "line-color": [
             "case",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/ChoroplethLayer/ChoroplethOutlineLayer.tsx"],
-  "sourcesContent": ["import { Layer } from '@vis.gl/react-maplibre';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components/charts';\n\nimport {\n  ACTIVE_COLOR,\n  ACTIVE_BORDER_WIDTH_OUTER,\n  COUNTRY_BORDER_WIDTH,\n  REGION_BORDER_WIDTH,\n  DEFAULT_BOUNDARIES_BORDER_COLOR,\n  TRANSPARENT_BORDER_COLOR,\n  ACTIVE_BORDER_WIDTH_INNER,\n} from '../../constants.js';\n\nexport const ChoroplethOutlineLayer = (props: { sourceId: string }) => {\n  const { sourceId } = props;\n  const activeColor = getCanvasColor(ACTIVE_COLOR);\n  const defaultBoundariesBorderColor = getCanvasColor(\n    DEFAULT_BOUNDARIES_BORDER_COLOR,\n  );\n  const transparentBorderColor = getCanvasColor(TRANSPARENT_BORDER_COLOR);\n\n  return (\n    <>\n      <Layer\n        source={sourceId}\n        type=\"line\"\n        paint={{\n          'line-color': [\n            'case',\n            ['==', ['feature-state', 'active'], true],\n            defaultBoundariesBorderColor,\n            ['==', ['feature-state', 'hover'], true],\n            defaultBoundariesBorderColor,\n            defaultBoundariesBorderColor,\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      <Layer\n        source={sourceId}\n        type=\"line\"\n        paint={{\n          'line-color': [\n            'case',\n            ['==', ['feature-state', 'active'], true],\n            activeColor,\n            ['==', ['feature-state', 'hover'], true],\n            activeColor,\n            transparentBorderColor,\n          ],\n          'line-width': ACTIVE_BORDER_WIDTH_INNER,\n        }}\n      />\n    </>\n  );\n};\n"],
-  "mappings": "AAuBI,mBACE,KADF;AAvBJ,SAAS,aAAa;AAEtB,SAAS,mBAAmB,sBAAsB;AAElD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,yBAAyB,CAAC,UAAgC;AACrE,QAAM,EAAE,SAAS,IAAI;AACrB,QAAM,cAAc,eAAe,YAAY;AAC/C,QAAM,+BAA+B;AAAA,IACnC;AAAA,EACF;AACA,QAAM,yBAAyB,eAAe,wBAAwB;AAEtE,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,MAAK;AAAA,QACL,OAAO;AAAA,UACL,cAAc;AAAA,YACZ;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,QAAQ,GAAG,IAAI;AAAA,YACxC;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,OAAO,GAAG,IAAI;AAAA,YACvC;AAAA,YACA;AAAA,UACF;AAAA,UACA,cAAc;AAAA,YACZ;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,QAAQ,GAAG,IAAI;AAAA,YACxC;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,OAAO,GAAG,IAAI;AAAA,YACvC;AAAA,YACA,CAAC,MAAM,CAAC,OAAO,aAAa,GAAG,QAAQ;AAAA,YACvC;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,MAAK;AAAA,QACL,OAAO;AAAA,UACL,cAAc;AAAA,YACZ;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,QAAQ,GAAG,IAAI;AAAA,YACxC;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,OAAO,GAAG,IAAI;AAAA,YACvC;AAAA,YACA;AAAA,UACF;AAAA,UACA,cAAc;AAAA,QAChB;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { Layer } from '@vis.gl/react-maplibre';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components/charts';\n\nimport {\n  ACTIVE_COLOR,\n  ACTIVE_BORDER_WIDTH_OUTER,\n  COUNTRY_BORDER_WIDTH,\n  REGION_BORDER_WIDTH,\n  DEFAULT_BOUNDARIES_BORDER_COLOR,\n  TRANSPARENT_BORDER_COLOR,\n  ACTIVE_BORDER_WIDTH_INNER,\n} from '../../constants.js';\n\nexport const ChoroplethOutlineLayer = (props: {\n  sourceId: string;\n  beforeId?: string;\n}) => {\n  const { sourceId, beforeId } = props;\n  const activeColor = getCanvasColor(ACTIVE_COLOR);\n  const defaultBoundariesBorderColor = getCanvasColor(\n    DEFAULT_BOUNDARIES_BORDER_COLOR,\n  );\n  const transparentBorderColor = getCanvasColor(TRANSPARENT_BORDER_COLOR);\n\n  return (\n    <>\n      <Layer\n        source={sourceId}\n        type=\"line\"\n        beforeId={beforeId}\n        paint={{\n          'line-color': [\n            'case',\n            ['==', ['feature-state', 'active'], true],\n            defaultBoundariesBorderColor,\n            ['==', ['feature-state', 'hover'], true],\n            defaultBoundariesBorderColor,\n            defaultBoundariesBorderColor,\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      <Layer\n        source={sourceId}\n        type=\"line\"\n        beforeId={beforeId}\n        paint={{\n          'line-color': [\n            'case',\n            ['==', ['feature-state', 'active'], true],\n            activeColor,\n            ['==', ['feature-state', 'hover'], true],\n            activeColor,\n            transparentBorderColor,\n          ],\n          'line-width': ACTIVE_BORDER_WIDTH_INNER,\n        }}\n      />\n    </>\n  );\n};\n"],
+  "mappings": "AA0BI,mBACE,KADF;AA1BJ,SAAS,aAAa;AAEtB,SAAS,mBAAmB,sBAAsB;AAElD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,yBAAyB,CAAC,UAGjC;AACJ,QAAM,EAAE,UAAU,SAAS,IAAI;AAC/B,QAAM,cAAc,eAAe,YAAY;AAC/C,QAAM,+BAA+B;AAAA,IACnC;AAAA,EACF;AACA,QAAM,yBAAyB,eAAe,wBAAwB;AAEtE,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,MAAK;AAAA,QACL;AAAA,QACA,OAAO;AAAA,UACL,cAAc;AAAA,YACZ;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,QAAQ,GAAG,IAAI;AAAA,YACxC;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,OAAO,GAAG,IAAI;AAAA,YACvC;AAAA,YACA;AAAA,UACF;AAAA,UACA,cAAc;AAAA,YACZ;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,QAAQ,GAAG,IAAI;AAAA,YACxC;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,OAAO,GAAG,IAAI;AAAA,YACvC;AAAA,YACA,CAAC,MAAM,CAAC,OAAO,aAAa,GAAG,QAAQ;AAAA,YACvC;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,MAAK;AAAA,QACL;AAAA,QACA,OAAO;AAAA,UACL,cAAc;AAAA,YACZ;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,QAAQ,GAAG,IAAI;AAAA,YACxC;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,OAAO,GAAG,IAAI;AAAA,YACvC;AAAA,YACA;AAAA,UACF;AAAA,UACA,cAAc;AAAA,QAChB;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
   "names": []
 }