@dynatrace/strato-geo 3.5.2 → 3.6.0

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

@@ -48,7 +48,13 @@ const BubbleLayer = (props) => {
     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,
@@ -62,7 +68,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 { 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 {\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          {...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": "AA0EM,SACE,KADF;AA1EN,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;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,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,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/ChoroplethLayer/ChoroplethLayer.js

@@ -32,10 +32,13 @@ const ChoroplethLayer = (props) => {
   useLegendInteractionHighlighting(props, sourceId);
   useLegendInteractionVisibility(props, layerId);
   const dataGeoJSON = mapSource && parseRegionDataToGeoJSON(mapSource, data, regionAccessor, choroplethColor);
-  const tooltipTemplate = useTooltipTemplate(
-    children,
-    ChoroplethLayerTooltipSlot
-  );
+  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,
@@ -67,7 +70,9 @@ const ChoroplethLayer = (props) => {
     /* @__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 { 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 {\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          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            hidden={tooltipHidden}\n            symbolAlignment={symbolAlignment}\n          />\n        </TooltipWrapper>\n      </Source>\n    )\n  );\n};\n\nChoroplethLayer['displayName'] = 'ChoroplethLayer';\n"],
+  "mappings": "AAuDM,SACE,KADF;AAvDN,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;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,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,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  __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": "AAsDI;AAtDJ,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,0BAA0B;AAKnC,SAAS,+BAA+B;AAejC,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/ConnectionLayer/ConnectionLayer.js

@@ -39,10 +39,13 @@ const ConnectionLayer = (props) => {
     connectionColor,
     curve
   );
-  const tooltipTemplate = useTooltipTemplate(
-    children,
-    ConnectionLayerTooltipSlot
-  );
+  const {
+    handler: tooltipTemplate,
+    hidden: tooltipHidden,
+    symbolAlignment
+  } = useTooltipTemplate(children, ConnectionLayerTooltipSlot, {
+    extractProps: true
+  });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       ConnectionLayerLine,
@@ -55,7 +58,9 @@ const ConnectionLayer = (props) => {
         children: /* @__PURE__ */ jsx(TooltipWrapper, { layerId, children: /* @__PURE__ */ jsx(
           ConnectionLayerTooltip,
           {
-            tooltipTemplate: isConnectionTooltipTemplate(tooltipTemplate) ? tooltipTemplate : void 0
+            tooltipTemplate: isConnectionTooltipTemplate(tooltipTemplate) ? tooltipTemplate : void 0,
+            hidden: tooltipHidden,
+            symbolAlignment
           }
         ) })
       }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/ConnectionLayer/ConnectionLayer.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren } from 'react';\n\nimport { _useBehavioralTrackingProps as useBehavioralTrackingProps } from '@dynatrace/strato-components/core';\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';\nimport { TooltipWrapper } from '../TooltipWrapper.js';\n\nexport const ConnectionLayer = <T extends Connection>(\n  props: PropsWithChildren<InternalConnectionLayerProps<T>>,\n) => {\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n\n  const {\n    data,\n    layerId,\n    children,\n    curve,\n    directionIndicator,\n    line,\n    thickness = DEFAULT_LINE_THICKNESS,\n  } = props;\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        {...behavioralTrackingProps}\n      >\n        <TooltipWrapper layerId={layerId}>\n          <ConnectionLayerTooltip\n            tooltipTemplate={\n              isConnectionTooltipTemplate(tooltipTemplate)\n                ? tooltipTemplate\n                : undefined\n            }\n          />\n        </TooltipWrapper>\n      </ConnectionLayerLine>\n\n      {directionIndicator && (\n        <ConnectionLayerDirection\n          geoJsonData={geoJsonData}\n          layerId={layerId}\n          directionIndicator={directionIndicator}\n        />\n      )}\n    </>\n  );\n};\n\nConnectionLayer['displayName'] = 'ConnectionLayer';\n"],
-  "mappings": "AA6DI,mBASM,KATN;AA3DJ,SAAS,+BAA+B,kCAAkC;AAE1E,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;AAC5C,SAAS,sBAAsB;AAExB,MAAM,kBAAkB,CAC7B,UACG;AACH,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,KAAK;AAElE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd,IAAI;AACJ,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,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEJ,8BAAC,kBAAe,SACd;AAAA,UAAC;AAAA;AAAA,YACC,iBACE,4BAA4B,eAAe,IACvC,kBACA;AAAA;AAAA,QAER,GACF;AAAA;AAAA,IACF;AAAA,IAEC,sBACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KAEJ;AAEJ;AAEA,gBAAgB,aAAa,IAAI;",
+  "sourcesContent": ["import { type PropsWithChildren } from 'react';\n\nimport { _useBehavioralTrackingProps as useBehavioralTrackingProps } from '@dynatrace/strato-components/core';\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';\nimport { TooltipWrapper } from '../TooltipWrapper.js';\n\nexport const ConnectionLayer = <T extends Connection>(\n  props: PropsWithChildren<InternalConnectionLayerProps<T>>,\n) => {\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n\n  const {\n    data,\n    layerId,\n    children,\n    curve,\n    directionIndicator,\n    line,\n    thickness = DEFAULT_LINE_THICKNESS,\n  } = props;\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 {\n    handler: tooltipTemplate,\n    hidden: tooltipHidden,\n    symbolAlignment,\n  } = useTooltipTemplate(children, ConnectionLayerTooltipSlot, {\n    extractProps: true,\n  });\n\n  return (\n    <>\n      <ConnectionLayerLine\n        geoJsonData={geoJsonData}\n        layerId={layerId}\n        sourceId={sourceId}\n        line={line}\n        {...behavioralTrackingProps}\n      >\n        <TooltipWrapper layerId={layerId}>\n          <ConnectionLayerTooltip\n            tooltipTemplate={\n              isConnectionTooltipTemplate(tooltipTemplate)\n                ? tooltipTemplate\n                : undefined\n            }\n            hidden={tooltipHidden}\n            symbolAlignment={symbolAlignment}\n          />\n        </TooltipWrapper>\n      </ConnectionLayerLine>\n\n      {directionIndicator && (\n        <ConnectionLayerDirection\n          geoJsonData={geoJsonData}\n          layerId={layerId}\n          directionIndicator={directionIndicator}\n        />\n      )}\n    </>\n  );\n};\n\nConnectionLayer['displayName'] = 'ConnectionLayer';\n"],
+  "mappings": "AAgEI,mBASM,KATN;AA9DJ,SAAS,+BAA+B,kCAAkC;AAE1E,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;AAC5C,SAAS,sBAAsB;AAExB,MAAM,kBAAkB,CAC7B,UACG;AACH,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,KAAK;AAElE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd,IAAI;AACJ,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;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR;AAAA,EACF,IAAI,mBAAmB,UAAU,4BAA4B;AAAA,IAC3D,cAAc;AAAA,EAChB,CAAC;AAED,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEJ,8BAAC,kBAAe,SACd;AAAA,UAAC;AAAA;AAAA,YACC,iBACE,4BAA4B,eAAe,IACvC,kBACA;AAAA,YAEN,QAAQ;AAAA,YACR;AAAA;AAAA,QACF,GACF;AAAA;AAAA,IACF;AAAA,IAEC,sBACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KAEJ;AAEJ;AAEA,gBAAgB,aAAa,IAAI;",
   "names": []
 }

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

@@ -4,14 +4,14 @@ import { restoreNullProps } from "./utils/restore-null-props.js";
 import { useGeoLayerTooltip } from "../../hooks/use-geo-layer-tooltip.js";
 import { isDefaultTooltipHandler } from "../../utils/tooltip-type-guards.js";
 const ConnectionLayerTooltip = (props) => {
-  const { tooltipTemplate } = props;
+  const { tooltipTemplate, hidden, symbolAlignment } = props;
   const {
     data: rawData,
     inBounds,
     position
   } = useGeoLayerTooltip("geoConnection");
   const data = restoreNullProps(rawData);
-  if (!tooltipTemplate || !inBounds || !position) {
+  if (hidden || !tooltipTemplate || !inBounds || !position) {
     return null;
   }
   if (!data || !data[0]) {
@@ -30,7 +30,13 @@ const ConnectionLayerTooltip = (props) => {
   if (isDefaultTooltipHandler(tooltipTemplate)) {
     return template;
   }
-  return /* @__PURE__ */ jsx(OverlayTooltip, { legacyTemplate: template });
+  return /* @__PURE__ */ jsx(
+    OverlayTooltip,
+    {
+      legacyTemplate: template,
+      symbolAlignment
+    }
+  );
 };
 ConnectionLayerTooltip["displayName"] = "ConnectionLayerTooltip";
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/ConnectionLayer/ConnectionLayerTooltip.tsx"],
-  "sourcesContent": ["import { _OverlayTooltip as OverlayTooltip } from '@dynatrace/strato-components/charts';\n\nimport { restoreNullProps } from './utils/restore-null-props.js';\nimport { useGeoLayerTooltip } from '../../hooks/use-geo-layer-tooltip.js';\nimport type {\n  Connection,\n  ConnectionTooltipStatePayload,\n} from '../../types/connection-layer.js';\nimport type {\n  ConnectionLayerTooltipData,\n  ConnectionLayerTooltipHandler,\n} from '../../types/tooltip.js';\nimport { isDefaultTooltipHandler } from '../../utils/tooltip-type-guards.js';\n\nexport interface ConnectionLayerTooltipProps {\n  tooltipTemplate?: ConnectionLayerTooltipHandler;\n}\n\nexport const ConnectionLayerTooltip = (props: ConnectionLayerTooltipProps) => {\n  const { tooltipTemplate } = props;\n\n  const {\n    data: rawData,\n    inBounds,\n    position,\n  } = useGeoLayerTooltip<ConnectionTooltipStatePayload>('geoConnection');\n\n  const data = restoreNullProps(rawData);\n\n  if (!tooltipTemplate || !inBounds || !position) {\n    return null;\n  }\n\n  if (!data || !data[0]) {\n    return null;\n  }\n\n  const { __lineColor: color, __lineWidth: thickness, ...rest } = data[0];\n  const connectionData: ConnectionLayerTooltipData<Connection> = {\n    color,\n    thickness,\n    data: rest as Connection,\n  };\n\n  const template = tooltipTemplate(connectionData);\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\nConnectionLayerTooltip['displayName'] = 'ConnectionLayerTooltip';\n"],
-  "mappings": "AAsDS;AAtDT,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AASnC,SAAS,+BAA+B;AAMjC,MAAM,yBAAyB,CAAC,UAAuC;AAC5E,QAAM,EAAE,gBAAgB,IAAI;AAE5B,QAAM;AAAA,IACJ,MAAM;AAAA,IACN;AAAA,IACA;AAAA,EACF,IAAI,mBAAkD,eAAe;AAErE,QAAM,OAAO,iBAAiB,OAAO;AAErC,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,aAAa,OAAO,aAAa,WAAW,GAAG,KAAK,IAAI,KAAK,CAAC;AACtE,QAAM,iBAAyD;AAAA,IAC7D;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EACR;AAEA,QAAM,WAAW,gBAAgB,cAAc;AAE/C,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 { restoreNullProps } from './utils/restore-null-props.js';\nimport { useGeoLayerTooltip } from '../../hooks/use-geo-layer-tooltip.js';\nimport type {\n  Connection,\n  ConnectionTooltipStatePayload,\n} from '../../types/connection-layer.js';\nimport type {\n  ConnectionLayerTooltipData,\n  ConnectionLayerTooltipHandler,\n} from '../../types/tooltip.js';\nimport { isDefaultTooltipHandler } from '../../utils/tooltip-type-guards.js';\n\nexport interface ConnectionLayerTooltipProps {\n  tooltipTemplate?: ConnectionLayerTooltipHandler;\n  hidden?: boolean;\n  symbolAlignment?: 'left' | 'right';\n}\n\nexport const ConnectionLayerTooltip = (props: ConnectionLayerTooltipProps) => {\n  const { tooltipTemplate, hidden, symbolAlignment } = props;\n\n  const {\n    data: rawData,\n    inBounds,\n    position,\n  } = useGeoLayerTooltip<ConnectionTooltipStatePayload>('geoConnection');\n\n  const data = restoreNullProps(rawData);\n\n  if (hidden || !tooltipTemplate || !inBounds || !position) {\n    return null;\n  }\n\n  if (!data || !data[0]) {\n    return null;\n  }\n\n  const { __lineColor: color, __lineWidth: thickness, ...rest } = data[0];\n  const connectionData: ConnectionLayerTooltipData<Connection> = {\n    color,\n    thickness,\n    data: rest as Connection,\n  };\n\n  const template = tooltipTemplate(connectionData);\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\nConnectionLayerTooltip['displayName'] = 'ConnectionLayerTooltip';\n"],
+  "mappings": "AAyDI;AAzDJ,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AASnC,SAAS,+BAA+B;AAQjC,MAAM,yBAAyB,CAAC,UAAuC;AAC5E,QAAM,EAAE,iBAAiB,QAAQ,gBAAgB,IAAI;AAErD,QAAM;AAAA,IACJ,MAAM;AAAA,IACN;AAAA,IACA;AAAA,EACF,IAAI,mBAAkD,eAAe;AAErE,QAAM,OAAO,iBAAiB,OAAO;AAErC,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,aAAa,OAAO,aAAa,WAAW,GAAG,KAAK,IAAI,KAAK,CAAC;AACtE,QAAM,iBAAyD;AAAA,IAC7D;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EACR;AAEA,QAAM,WAAW,gBAAgB,cAAc;AAE/C,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/DotLayer/DotLayer.js

@@ -53,7 +53,11 @@ const DotLayer = (props) => {
     props,
     colorParser
   );
-  const tooltipTemplate = useTooltipTemplate(children, DotLayerTooltipSlot);
+  const {
+    handler: tooltipTemplate,
+    hidden: tooltipHidden,
+    symbolAlignment
+  } = useTooltipTemplate(children, DotLayerTooltipSlot, { extractProps: true });
   const sourceId = `source-${layerId}`;
   useLegendInteractionHighlighting(props, sourceId);
   useLegendInteractionVisibility(props, layerId);
@@ -115,7 +119,9 @@ const DotLayer = (props) => {
     /* @__PURE__ */ jsx(TooltipWrapper, { layerId, children: /* @__PURE__ */ jsx(
       DotLayerTooltip,
       {
-        tooltipTemplate: isDotTooltipTemplate(tooltipTemplate) ? tooltipTemplate : void 0
+        tooltipTemplate: isDotTooltipTemplate(tooltipTemplate) ? tooltipTemplate : void 0,
+        hidden: tooltipHidden,
+        symbolAlignment
       }
     ) })
   ] });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/DotLayer/DotLayer.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 { BackgroundLayer } from './BackgroundLayer.js';\nimport { BackgroundSymbolLayer } from './BackgroundSymbolLayer.js';\nimport { DotLayerTooltip } from './DotLayerTooltip.js';\nimport { parseDotDataToGeoJSON } from './utils/parse-dot-data-to-geo-json.js';\nimport {\n  DEFAULT_ICON_COLOR,\n  DEFAULT_ICON_SIZE_RATIO,\n  DEFAULT_SHAPE_COLOR,\n  DEFAULT_SYMBOL_SIZE,\n  FALLBACK_SYMBOL_SIZE,\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 { useLoadSymbolIntoMap } from '../../hooks/use-load-symbol-into-map.js';\nimport { useResolveLocationColor } from '../../hooks/use-resolve-color.js';\nimport { useTooltipTemplate } from '../../hooks/use-tooltip-template.js';\nimport { DotLayerTooltip as DotLayerTooltipSlot } from '../../slots/DotLayerTooltip.js';\nimport type { InternalDotLayerProps } from '../../types/dot-layer.js';\nimport type { Location } from '../../types/location.js';\nimport { isDotTooltipTemplate } from '../../utils/tooltip-type-guards.js';\nimport { TooltipWrapper } from '../TooltipWrapper.js';\n\n/**\n * DotLayer Component\n */\nexport const DotLayer = <T extends Location>(\n  props: PropsWithChildren<InternalDotLayerProps<T>>,\n) => {\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n\n  const {\n    data,\n    layerId,\n    bearing = 0,\n    children,\n    shape = 'pin',\n    background = false,\n    shapeSize = DEFAULT_SYMBOL_SIZE,\n  } = props;\n\n  const calculatedShapeSize = shapeSize > 0 ? shapeSize : FALLBACK_SYMBOL_SIZE;\n\n  const { symbolName, symbolType } = useLoadSymbolIntoMap(\n    shape,\n    layerId,\n    calculatedShapeSize,\n  );\n\n  const bgLayerId = `${layerId}-background`;\n\n  const { symbolName: bgName } = useLoadSymbolIntoMap(\n    'circle',\n    bgLayerId,\n    calculatedShapeSize,\n  );\n\n  const defaultSymbolColor =\n    symbolType === 'shape' ? DEFAULT_SHAPE_COLOR : DEFAULT_ICON_COLOR;\n\n  const colorParser = useLayerColoringStrategy();\n  const shapeColor = useResolveLocationColor(\n    defaultSymbolColor,\n    props,\n    colorParser,\n  );\n\n  const tooltipTemplate = useTooltipTemplate(children, DotLayerTooltipSlot);\n\n  const sourceId = `source-${layerId}`;\n  useLegendInteractionHighlighting(props, sourceId);\n  useLegendInteractionVisibility(props, layerId);\n\n  const dataGeoJson = parseDotDataToGeoJSON(\n    data,\n    shapeColor,\n    bearing,\n    background,\n  );\n\n  const iconAnchor = shape === 'pin' ? 'bottom' : 'center';\n\n  return (\n    <Source id={sourceId} type=\"geojson\" data={dataGeoJson} generateId>\n      <Layer\n        type=\"symbol\"\n        id={layerId}\n        layout={{\n          'icon-image': symbolName,\n          'icon-size': DEFAULT_ICON_SIZE_RATIO,\n          'icon-rotate': ['get', '__bearing'],\n          // https://maplibre.org/maplibre-style-spec/layers/#layout-symbol-icon-ignore-placement\n          'icon-ignore-placement': true,\n          'icon-anchor': iconAnchor,\n        }}\n        paint={{\n          'icon-color': ['get', '__color'],\n          'icon-opacity': [\n            'case',\n            ['boolean', ['feature-state', 'legendHover'], true],\n            SHAPE_OPACITY_DEFAULT,\n            SHAPE_OPACITY_DIMMED,\n          ],\n        }}\n        {...behavioralTrackingProps}\n      />\n      {shape !== 'pin' ? (\n        <BackgroundLayer\n          background={Boolean(background)}\n          beforeId={layerId}\n          source={sourceId}\n          radius={calculatedShapeSize / 2}\n          iconAnchor={iconAnchor}\n        />\n      ) : (\n        <BackgroundSymbolLayer\n          background={Boolean(background)}\n          beforeId={layerId}\n          source={sourceId}\n          radius={calculatedShapeSize / 2}\n          iconAnchor={iconAnchor}\n          symbolName={bgName}\n          layerId={bgLayerId}\n          shape={shape}\n        />\n      )}\n      <TooltipWrapper layerId={layerId}>\n        <DotLayerTooltip\n          tooltipTemplate={\n            isDotTooltipTemplate(tooltipTemplate) ? tooltipTemplate : undefined\n          }\n        />\n      </TooltipWrapper>\n    </Source>\n  );\n};\n\nDotLayer['displayName'] = 'DotLayer';\n"],
-  "mappings": "AA0FI,SACE,KADF;AA1FJ,SAAS,OAAO,cAAc;AAG9B,SAAS,+BAA+B,kCAAkC;AAE1E,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC;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,4BAA4B;AACrC,SAAS,+BAA+B;AACxC,SAAS,0BAA0B;AACnC,SAAS,mBAAmB,2BAA2B;AAGvD,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAKxB,MAAM,WAAW,CACtB,UACG;AACH,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,KAAK;AAElE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,YAAY;AAAA,EACd,IAAI;AAEJ,QAAM,sBAAsB,YAAY,IAAI,YAAY;AAExD,QAAM,EAAE,YAAY,WAAW,IAAI;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,YAAY,GAAG,OAAO;AAE5B,QAAM,EAAE,YAAY,OAAO,IAAI;AAAA,IAC7B;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,qBACJ,eAAe,UAAU,sBAAsB;AAEjD,QAAM,cAAc,yBAAyB;AAC7C,QAAM,aAAa;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,kBAAkB,mBAAmB,UAAU,mBAAmB;AAExE,QAAM,WAAW,UAAU,OAAO;AAClC,mCAAiC,OAAO,QAAQ;AAChD,iCAA+B,OAAO,OAAO;AAE7C,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,aAAa,UAAU,QAAQ,WAAW;AAEhD,SACE,qBAAC,UAAO,IAAI,UAAU,MAAK,WAAU,MAAM,aAAa,YAAU,MAChE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,IAAI;AAAA,QACJ,QAAQ;AAAA,UACN,cAAc;AAAA,UACd,aAAa;AAAA,UACb,eAAe,CAAC,OAAO,WAAW;AAAA;AAAA,UAElC,yBAAyB;AAAA,UACzB,eAAe;AAAA,QACjB;AAAA,QACA,OAAO;AAAA,UACL,cAAc,CAAC,OAAO,SAAS;AAAA,UAC/B,gBAAgB;AAAA,YACd;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,YAClD;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,IACC,UAAU,QACT;AAAA,MAAC;AAAA;AAAA,QACC,YAAY,QAAQ,UAAU;AAAA,QAC9B,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,QAAQ,sBAAsB;AAAA,QAC9B;AAAA;AAAA,IACF,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,YAAY,QAAQ,UAAU;AAAA,QAC9B,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,QAAQ,sBAAsB;AAAA,QAC9B;AAAA,QACA,YAAY;AAAA,QACZ,SAAS;AAAA,QACT;AAAA;AAAA,IACF;AAAA,IAEF,oBAAC,kBAAe,SACd;AAAA,MAAC;AAAA;AAAA,QACC,iBACE,qBAAqB,eAAe,IAAI,kBAAkB;AAAA;AAAA,IAE9D,GACF;AAAA,KACF;AAEJ;AAEA,SAAS,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 { BackgroundLayer } from './BackgroundLayer.js';\nimport { BackgroundSymbolLayer } from './BackgroundSymbolLayer.js';\nimport { DotLayerTooltip } from './DotLayerTooltip.js';\nimport { parseDotDataToGeoJSON } from './utils/parse-dot-data-to-geo-json.js';\nimport {\n  DEFAULT_ICON_COLOR,\n  DEFAULT_ICON_SIZE_RATIO,\n  DEFAULT_SHAPE_COLOR,\n  DEFAULT_SYMBOL_SIZE,\n  FALLBACK_SYMBOL_SIZE,\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 { useLoadSymbolIntoMap } from '../../hooks/use-load-symbol-into-map.js';\nimport { useResolveLocationColor } from '../../hooks/use-resolve-color.js';\nimport { useTooltipTemplate } from '../../hooks/use-tooltip-template.js';\nimport { DotLayerTooltip as DotLayerTooltipSlot } from '../../slots/DotLayerTooltip.js';\nimport type { InternalDotLayerProps } from '../../types/dot-layer.js';\nimport type { Location } from '../../types/location.js';\nimport { isDotTooltipTemplate } from '../../utils/tooltip-type-guards.js';\nimport { TooltipWrapper } from '../TooltipWrapper.js';\n\n/**\n * DotLayer Component\n */\nexport const DotLayer = <T extends Location>(\n  props: PropsWithChildren<InternalDotLayerProps<T>>,\n) => {\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n\n  const {\n    data,\n    layerId,\n    bearing = 0,\n    children,\n    shape = 'pin',\n    background = false,\n    shapeSize = DEFAULT_SYMBOL_SIZE,\n  } = props;\n\n  const calculatedShapeSize = shapeSize > 0 ? shapeSize : FALLBACK_SYMBOL_SIZE;\n\n  const { symbolName, symbolType } = useLoadSymbolIntoMap(\n    shape,\n    layerId,\n    calculatedShapeSize,\n  );\n\n  const bgLayerId = `${layerId}-background`;\n\n  const { symbolName: bgName } = useLoadSymbolIntoMap(\n    'circle',\n    bgLayerId,\n    calculatedShapeSize,\n  );\n\n  const defaultSymbolColor =\n    symbolType === 'shape' ? DEFAULT_SHAPE_COLOR : DEFAULT_ICON_COLOR;\n\n  const colorParser = useLayerColoringStrategy();\n  const shapeColor = useResolveLocationColor(\n    defaultSymbolColor,\n    props,\n    colorParser,\n  );\n\n  const {\n    handler: tooltipTemplate,\n    hidden: tooltipHidden,\n    symbolAlignment,\n  } = useTooltipTemplate(children, DotLayerTooltipSlot, { extractProps: true });\n\n  const sourceId = `source-${layerId}`;\n  useLegendInteractionHighlighting(props, sourceId);\n  useLegendInteractionVisibility(props, layerId);\n\n  const dataGeoJson = parseDotDataToGeoJSON(\n    data,\n    shapeColor,\n    bearing,\n    background,\n  );\n\n  const iconAnchor = shape === 'pin' ? 'bottom' : 'center';\n\n  return (\n    <Source id={sourceId} type=\"geojson\" data={dataGeoJson} generateId>\n      <Layer\n        type=\"symbol\"\n        id={layerId}\n        layout={{\n          'icon-image': symbolName,\n          'icon-size': DEFAULT_ICON_SIZE_RATIO,\n          'icon-rotate': ['get', '__bearing'],\n          // https://maplibre.org/maplibre-style-spec/layers/#layout-symbol-icon-ignore-placement\n          'icon-ignore-placement': true,\n          'icon-anchor': iconAnchor,\n        }}\n        paint={{\n          'icon-color': ['get', '__color'],\n          'icon-opacity': [\n            'case',\n            ['boolean', ['feature-state', 'legendHover'], true],\n            SHAPE_OPACITY_DEFAULT,\n            SHAPE_OPACITY_DIMMED,\n          ],\n        }}\n        {...behavioralTrackingProps}\n      />\n      {shape !== 'pin' ? (\n        <BackgroundLayer\n          background={Boolean(background)}\n          beforeId={layerId}\n          source={sourceId}\n          radius={calculatedShapeSize / 2}\n          iconAnchor={iconAnchor}\n        />\n      ) : (\n        <BackgroundSymbolLayer\n          background={Boolean(background)}\n          beforeId={layerId}\n          source={sourceId}\n          radius={calculatedShapeSize / 2}\n          iconAnchor={iconAnchor}\n          symbolName={bgName}\n          layerId={bgLayerId}\n          shape={shape}\n        />\n      )}\n      <TooltipWrapper layerId={layerId}>\n        <DotLayerTooltip\n          tooltipTemplate={\n            isDotTooltipTemplate(tooltipTemplate) ? tooltipTemplate : undefined\n          }\n          hidden={tooltipHidden}\n          symbolAlignment={symbolAlignment}\n        />\n      </TooltipWrapper>\n    </Source>\n  );\n};\n\nDotLayer['displayName'] = 'DotLayer';\n"],
+  "mappings": "AA8FI,SACE,KADF;AA9FJ,SAAS,OAAO,cAAc;AAG9B,SAAS,+BAA+B,kCAAkC;AAE1E,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC;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,4BAA4B;AACrC,SAAS,+BAA+B;AACxC,SAAS,0BAA0B;AACnC,SAAS,mBAAmB,2BAA2B;AAGvD,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAKxB,MAAM,WAAW,CACtB,UACG;AACH,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,KAAK;AAElE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,YAAY;AAAA,EACd,IAAI;AAEJ,QAAM,sBAAsB,YAAY,IAAI,YAAY;AAExD,QAAM,EAAE,YAAY,WAAW,IAAI;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,YAAY,GAAG,OAAO;AAE5B,QAAM,EAAE,YAAY,OAAO,IAAI;AAAA,IAC7B;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,qBACJ,eAAe,UAAU,sBAAsB;AAEjD,QAAM,cAAc,yBAAyB;AAC7C,QAAM,aAAa;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR;AAAA,EACF,IAAI,mBAAmB,UAAU,qBAAqB,EAAE,cAAc,KAAK,CAAC;AAE5E,QAAM,WAAW,UAAU,OAAO;AAClC,mCAAiC,OAAO,QAAQ;AAChD,iCAA+B,OAAO,OAAO;AAE7C,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,aAAa,UAAU,QAAQ,WAAW;AAEhD,SACE,qBAAC,UAAO,IAAI,UAAU,MAAK,WAAU,MAAM,aAAa,YAAU,MAChE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,IAAI;AAAA,QACJ,QAAQ;AAAA,UACN,cAAc;AAAA,UACd,aAAa;AAAA,UACb,eAAe,CAAC,OAAO,WAAW;AAAA;AAAA,UAElC,yBAAyB;AAAA,UACzB,eAAe;AAAA,QACjB;AAAA,QACA,OAAO;AAAA,UACL,cAAc,CAAC,OAAO,SAAS;AAAA,UAC/B,gBAAgB;AAAA,YACd;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,YAClD;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,IACC,UAAU,QACT;AAAA,MAAC;AAAA;AAAA,QACC,YAAY,QAAQ,UAAU;AAAA,QAC9B,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,QAAQ,sBAAsB;AAAA,QAC9B;AAAA;AAAA,IACF,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,YAAY,QAAQ,UAAU;AAAA,QAC9B,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,QAAQ,sBAAsB;AAAA,QAC9B;AAAA,QACA,YAAY;AAAA,QACZ,SAAS;AAAA,QACT;AAAA;AAAA,IACF;AAAA,IAEF,oBAAC,kBAAe,SACd;AAAA,MAAC;AAAA;AAAA,QACC,iBACE,qBAAqB,eAAe,IAAI,kBAAkB;AAAA,QAE5D,QAAQ;AAAA,QACR;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;AAEA,SAAS,aAAa,IAAI;",
   "names": []
 }

package/esm/map/components/DotLayer/DotLayerTooltip.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 DotLayerTooltip = (props) => {
-  const { tooltipTemplate } = props;
+  const { tooltipTemplate, hidden, symbolAlignment } = props;
   const { data, inBounds, position } = useGeoLayerTooltip("geoDot");
-  if (!tooltipTemplate || !inBounds || !position) {
+  if (hidden || !tooltipTemplate || !inBounds || !position) {
     return null;
   }
   if (!data || !data[0]) {
@@ -24,7 +24,13 @@ const DotLayerTooltip = (props) => {
   if (isDefaultTooltipHandler(tooltipTemplate)) {
     return template;
   }
-  return /* @__PURE__ */ jsx(OverlayTooltip, { legacyTemplate: template });
+  return /* @__PURE__ */ jsx(
+    OverlayTooltip,
+    {
+      legacyTemplate: template,
+      symbolAlignment
+    }
+  );
 };
 DotLayerTooltip["displayName"] = "DotLayerTooltip";
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/DotLayer/DotLayerTooltip.tsx"],
-  "sourcesContent": ["import { _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  DotLayerTooltipData,\n  DotLayerTooltipHandler,\n} from '../../types/tooltip.js';\nimport { isDefaultTooltipHandler } from '../../utils/tooltip-type-guards.js';\n\ninterface DotTooltipStatePayload {\n  __color: string;\n  __hoveredColor: string;\n  __bearing: number;\n  data: Location;\n}\n\nexport interface DotLayerTooltipProps {\n  tooltipTemplate?: DotLayerTooltipHandler;\n}\n\nexport const DotLayerTooltip = (props: DotLayerTooltipProps) => {\n  const { tooltipTemplate } = props;\n\n  const { data, inBounds, position } =\n    useGeoLayerTooltip<DotTooltipStatePayload>('geoDot');\n\n  if (!tooltipTemplate || !inBounds || !position) {\n    return null;\n  }\n\n  if (!data || !data[0]) {\n    return null;\n  }\n\n  const { __color: color, __bearing: bearing, data: customData } = data[0];\n  const dotData: DotLayerTooltipData = {\n    color,\n    bearing,\n    data: customData,\n  };\n\n  const template = tooltipTemplate(dotData);\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\nDotLayerTooltip['displayName'] = 'DotLayerTooltip';\n"],
-  "mappings": "AAoDS;AApDT,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,0BAA0B;AAMnC,SAAS,+BAA+B;AAajC,MAAM,kBAAkB,CAAC,UAAgC;AAC9D,QAAM,EAAE,gBAAgB,IAAI;AAE5B,QAAM,EAAE,MAAM,UAAU,SAAS,IAC/B,mBAA2C,QAAQ;AAErD,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,SAAS,OAAO,WAAW,SAAS,MAAM,WAAW,IAAI,KAAK,CAAC;AACvE,QAAM,UAA+B;AAAA,IACnC;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EACR;AAEA,QAAM,WAAW,gBAAgB,OAAO;AAExC,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,MAAI,wBAAwB,eAAe,GAAG;AAC5C,WAAO;AAAA,EACT;AAEA,SAAO,oBAAC,kBAAe,gBAAgB,UAAU;AACnD;AAEA,gBAAgB,aAAa,IAAI;",
+  "sourcesContent": ["import { _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  DotLayerTooltipData,\n  DotLayerTooltipHandler,\n} from '../../types/tooltip.js';\nimport { isDefaultTooltipHandler } from '../../utils/tooltip-type-guards.js';\n\ninterface DotTooltipStatePayload {\n  __color: string;\n  __hoveredColor: string;\n  __bearing: number;\n  data: Location;\n}\n\nexport interface DotLayerTooltipProps {\n  tooltipTemplate?: DotLayerTooltipHandler;\n  hidden?: boolean;\n  symbolAlignment?: 'left' | 'right';\n}\n\nexport const DotLayerTooltip = (props: DotLayerTooltipProps) => {\n  const { tooltipTemplate, hidden, symbolAlignment } = props;\n\n  const { data, inBounds, position } =\n    useGeoLayerTooltip<DotTooltipStatePayload>('geoDot');\n\n  if (hidden || !tooltipTemplate || !inBounds || !position) {\n    return null;\n  }\n\n  if (!data || !data[0]) {\n    return null;\n  }\n\n  const { __color: color, __bearing: bearing, data: customData } = data[0];\n  const dotData: DotLayerTooltipData = {\n    color,\n    bearing,\n    data: customData,\n  };\n\n  const template = tooltipTemplate(dotData);\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\nDotLayerTooltip['displayName'] = 'DotLayerTooltip';\n"],
+  "mappings": "AAuDI;AAvDJ,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,0BAA0B;AAMnC,SAAS,+BAA+B;AAejC,MAAM,kBAAkB,CAAC,UAAgC;AAC9D,QAAM,EAAE,iBAAiB,QAAQ,gBAAgB,IAAI;AAErD,QAAM,EAAE,MAAM,UAAU,SAAS,IAC/B,mBAA2C,QAAQ;AAErD,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,SAAS,OAAO,WAAW,SAAS,MAAM,WAAW,IAAI,KAAK,CAAC;AACvE,QAAM,UAA+B;AAAA,IACnC;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EACR;AAEA,QAAM,WAAW,gBAAgB,OAAO;AAExC,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,gBAAgB,aAAa,IAAI;",
   "names": []
 }

package/esm/map/contexts/map-view-provider.context.js

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+const MapViewProviderContext = createContext({
+  countryCode: void 0,
+  displayWorldMap: void 0
+});
+export {
+  MapViewProviderContext
+};
+//# sourceMappingURL=map-view-provider.context.js.map

package/esm/map/contexts/map-view-provider.context.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/map/contexts/map-view-provider.context.ts"],
+  "sourcesContent": ["import { createContext } from 'react';\n\nimport type { MapViewProviderProps } from '../types/map-view-provider.js';\n\nexport const MapViewProviderContext = createContext<MapViewProviderProps>({\n  countryCode: undefined,\n  displayWorldMap: undefined,\n});\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAIvB,MAAM,yBAAyB,cAAoC;AAAA,EACxE,aAAa;AAAA,EACb,iBAAiB;AACnB,CAAC;",
+  "names": []
+}

package/esm/map/hooks/use-load-map-base-layer.js

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
+import { useMapViewProviderContext } from "./use-map-view-provider-context.js";
 import { applyFeatureFilterRules } from "../utils/apply-feature-filter-rules.js";
 import {
   getCountryRegionsRules,
@@ -18,13 +19,17 @@ const useLoadMapBaseLayer = (baseLayerConfig) => {
   const [isMapEnabled, setIsMapEnabled] = useState(false);
   const [baseFeatureCollection, setBaseFeatureCollection] = useState(void 0);
   const [error, setError] = useState(false);
+  const {
+    countryCode: providerCountryCode,
+    displayWorldMap: providerDisplayWorldMap
+  } = useMapViewProviderContext();
   const getData = useCallback(async () => {
     setIsFetchingFeatures(true);
-    const isMapEnabledResponse = await fetchClientConfigMapEnabled();
+    const isMapEnabledResponse = providerDisplayWorldMap ?? await fetchClientConfigMapEnabled();
     setIsMapEnabled(isMapEnabledResponse);
     try {
       if (isMapEnabledResponse) {
-        const tenantCountryCode = await getTenantCountryCode();
+        const tenantCountryCode = providerCountryCode ?? await getTenantCountryCode();
         const { includeWorldView, countryRegions } = getBaseLayerShapesRequestConfig(baseLayerConfig.include);
         const featuresRequests = [];
         if (includeWorldView) {
@@ -55,7 +60,12 @@ const useLoadMapBaseLayer = (baseLayerConfig) => {
       setError(true);
     }
     setIsFetchingFeatures(false);
-  }, [baseLayerConfig.include, baseLayerConfig.exclude]);
+  }, [
+    baseLayerConfig.include,
+    baseLayerConfig.exclude,
+    providerCountryCode,
+    providerDisplayWorldMap
+  ]);
   useEffect(() => {
     getData();
   }, [getData]);

package/esm/map/hooks/use-load-map-base-layer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/hooks/use-load-map-base-layer.ts"],
-  "sourcesContent": ["import { FeatureCollection } from 'geojson';\nimport { useCallback, useEffect, useState } from 'react';\n\nimport type { BaseLayerRules } from '../types/base-layer.js';\nimport { applyFeatureFilterRules } from '../utils/apply-feature-filter-rules.js';\nimport {\n  getCountryRegionsRules,\n  getRegionsRules,\n  getWorldViewRules,\n} from '../utils/base-layer-rules.js';\nimport {\n  fetchCountryFeatures,\n  fetchWorldViewFeatures,\n} from '../utils/fetch-base-layer-features.js';\nimport { fetchClientConfigMapEnabled } from '../utils/fetch-client-config-map-enabled.js';\nimport { getBaseLayerShapesRequestConfig } from '../utils/get-base-layer-shapes-request-config.js';\nimport { getTenantCountryCode } from '../utils/get-tenant-country-code.js';\nimport { mergeFeatureCollections } from '../utils/merge-feature-collections.js';\n\nexport const useLoadMapBaseLayer = (baseLayerConfig: BaseLayerRules) => {\n  const [isFetchingFeatures, setIsFetchingFeatures] = useState(true);\n  const [isMapEnabled, setIsMapEnabled] = useState(false);\n  const [baseFeatureCollection, setBaseFeatureCollection] = useState<\n    FeatureCollection | undefined\n  >(undefined);\n  const [error, setError] = useState<boolean>(false);\n\n  const getData = useCallback(async () => {\n    setIsFetchingFeatures(true);\n\n    const isMapEnabledResponse = await fetchClientConfigMapEnabled();\n\n    setIsMapEnabled(isMapEnabledResponse);\n\n    try {\n      if (isMapEnabledResponse) {\n        const tenantCountryCode = await getTenantCountryCode();\n\n        const { includeWorldView, countryRegions } =\n          getBaseLayerShapesRequestConfig(baseLayerConfig.include);\n\n        const featuresRequests: Promise<FeatureCollection>[] = [];\n\n        if (includeWorldView) {\n          const worldViewRules = getWorldViewRules(baseLayerConfig);\n          const worldViewRequest = fetchWorldViewFeatures(\n            tenantCountryCode,\n          ).then(applyFeatureFilterRules(worldViewRules));\n          featuresRequests.push(worldViewRequest);\n        }\n\n        if (countryRegions.length > 0) {\n          const regionsRules = getRegionsRules(baseLayerConfig);\n          countryRegions.forEach((countryCode: string) => {\n            const countryRules = getCountryRegionsRules(\n              regionsRules,\n              countryCode,\n            );\n            const countryRequest = fetchCountryFeatures(\n              tenantCountryCode,\n              countryCode,\n            ).then(applyFeatureFilterRules(countryRules, countryCode));\n            featuresRequests.push(countryRequest);\n          });\n        }\n\n        const featureCollections = await Promise.all(featuresRequests);\n\n        setBaseFeatureCollection(mergeFeatureCollections(featureCollections));\n      }\n    } catch {\n      setError(true);\n    }\n\n    setIsFetchingFeatures(false);\n  }, [baseLayerConfig.include, baseLayerConfig.exclude]);\n\n  useEffect(() => {\n    getData();\n  }, [getData]);\n  return { isFetchingFeatures, baseFeatureCollection, isMapEnabled, error };\n};\n"],
-  "mappings": "AACA,SAAS,aAAa,WAAW,gBAAgB;AAGjD,SAAS,+BAA+B;AACxC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,mCAAmC;AAC5C,SAAS,uCAAuC;AAChD,SAAS,4BAA4B;AACrC,SAAS,+BAA+B;AAEjC,MAAM,sBAAsB,CAAC,oBAAoC;AACtE,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,IAAI;AACjE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AACtD,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,SAExD,MAAS;AACX,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAkB,KAAK;AAEjD,QAAM,UAAU,YAAY,YAAY;AACtC,0BAAsB,IAAI;AAE1B,UAAM,uBAAuB,MAAM,4BAA4B;AAE/D,oBAAgB,oBAAoB;AAEpC,QAAI;AACF,UAAI,sBAAsB;AACxB,cAAM,oBAAoB,MAAM,qBAAqB;AAErD,cAAM,EAAE,kBAAkB,eAAe,IACvC,gCAAgC,gBAAgB,OAAO;AAEzD,cAAM,mBAAiD,CAAC;AAExD,YAAI,kBAAkB;AACpB,gBAAM,iBAAiB,kBAAkB,eAAe;AACxD,gBAAM,mBAAmB;AAAA,YACvB;AAAA,UACF,EAAE,KAAK,wBAAwB,cAAc,CAAC;AAC9C,2BAAiB,KAAK,gBAAgB;AAAA,QACxC;AAEA,YAAI,eAAe,SAAS,GAAG;AAC7B,gBAAM,eAAe,gBAAgB,eAAe;AACpD,yBAAe,QAAQ,CAAC,gBAAwB;AAC9C,kBAAM,eAAe;AAAA,cACnB;AAAA,cACA;AAAA,YACF;AACA,kBAAM,iBAAiB;AAAA,cACrB;AAAA,cACA;AAAA,YACF,EAAE,KAAK,wBAAwB,cAAc,WAAW,CAAC;AACzD,6BAAiB,KAAK,cAAc;AAAA,UACtC,CAAC;AAAA,QACH;AAEA,cAAM,qBAAqB,MAAM,QAAQ,IAAI,gBAAgB;AAE7D,iCAAyB,wBAAwB,kBAAkB,CAAC;AAAA,MACtE;AAAA,IACF,QAAQ;AACN,eAAS,IAAI;AAAA,IACf;AAEA,0BAAsB,KAAK;AAAA,EAC7B,GAAG,CAAC,gBAAgB,SAAS,gBAAgB,OAAO,CAAC;AAErD,YAAU,MAAM;AACd,YAAQ;AAAA,EACV,GAAG,CAAC,OAAO,CAAC;AACZ,SAAO,EAAE,oBAAoB,uBAAuB,cAAc,MAAM;AAC1E;",
+  "sourcesContent": ["import { FeatureCollection } from 'geojson';\nimport { useCallback, useEffect, useState } from 'react';\n\nimport { useMapViewProviderContext } from './use-map-view-provider-context.js';\nimport type { BaseLayerRules } from '../types/base-layer.js';\nimport { applyFeatureFilterRules } from '../utils/apply-feature-filter-rules.js';\nimport {\n  getCountryRegionsRules,\n  getRegionsRules,\n  getWorldViewRules,\n} from '../utils/base-layer-rules.js';\nimport {\n  fetchCountryFeatures,\n  fetchWorldViewFeatures,\n} from '../utils/fetch-base-layer-features.js';\nimport { fetchClientConfigMapEnabled } from '../utils/fetch-client-config-map-enabled.js';\nimport { getBaseLayerShapesRequestConfig } from '../utils/get-base-layer-shapes-request-config.js';\nimport { getTenantCountryCode } from '../utils/get-tenant-country-code.js';\nimport { mergeFeatureCollections } from '../utils/merge-feature-collections.js';\n\nexport const useLoadMapBaseLayer = (baseLayerConfig: BaseLayerRules) => {\n  const [isFetchingFeatures, setIsFetchingFeatures] = useState(true);\n  const [isMapEnabled, setIsMapEnabled] = useState(false);\n  const [baseFeatureCollection, setBaseFeatureCollection] = useState<\n    FeatureCollection | undefined\n  >(undefined);\n  const [error, setError] = useState<boolean>(false);\n\n  const {\n    countryCode: providerCountryCode,\n    displayWorldMap: providerDisplayWorldMap,\n  } = useMapViewProviderContext();\n\n  const getData = useCallback(async () => {\n    setIsFetchingFeatures(true);\n\n    const isMapEnabledResponse =\n      providerDisplayWorldMap ?? (await fetchClientConfigMapEnabled());\n\n    setIsMapEnabled(isMapEnabledResponse);\n\n    try {\n      if (isMapEnabledResponse) {\n        const tenantCountryCode =\n          providerCountryCode ?? (await getTenantCountryCode());\n\n        const { includeWorldView, countryRegions } =\n          getBaseLayerShapesRequestConfig(baseLayerConfig.include);\n\n        const featuresRequests: Promise<FeatureCollection>[] = [];\n\n        if (includeWorldView) {\n          const worldViewRules = getWorldViewRules(baseLayerConfig);\n          const worldViewRequest = fetchWorldViewFeatures(\n            tenantCountryCode,\n          ).then(applyFeatureFilterRules(worldViewRules));\n          featuresRequests.push(worldViewRequest);\n        }\n\n        if (countryRegions.length > 0) {\n          const regionsRules = getRegionsRules(baseLayerConfig);\n          countryRegions.forEach((countryCode: string) => {\n            const countryRules = getCountryRegionsRules(\n              regionsRules,\n              countryCode,\n            );\n            const countryRequest = fetchCountryFeatures(\n              tenantCountryCode,\n              countryCode,\n            ).then(applyFeatureFilterRules(countryRules, countryCode));\n            featuresRequests.push(countryRequest);\n          });\n        }\n\n        const featureCollections = await Promise.all(featuresRequests);\n\n        setBaseFeatureCollection(mergeFeatureCollections(featureCollections));\n      }\n    } catch {\n      setError(true);\n    }\n\n    setIsFetchingFeatures(false);\n  }, [\n    baseLayerConfig.include,\n    baseLayerConfig.exclude,\n    providerCountryCode,\n    providerDisplayWorldMap,\n  ]);\n\n  useEffect(() => {\n    getData();\n  }, [getData]);\n  return { isFetchingFeatures, baseFeatureCollection, isMapEnabled, error };\n};\n"],
+  "mappings": "AACA,SAAS,aAAa,WAAW,gBAAgB;AAEjD,SAAS,iCAAiC;AAE1C,SAAS,+BAA+B;AACxC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,mCAAmC;AAC5C,SAAS,uCAAuC;AAChD,SAAS,4BAA4B;AACrC,SAAS,+BAA+B;AAEjC,MAAM,sBAAsB,CAAC,oBAAoC;AACtE,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,IAAI;AACjE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AACtD,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,SAExD,MAAS;AACX,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAkB,KAAK;AAEjD,QAAM;AAAA,IACJ,aAAa;AAAA,IACb,iBAAiB;AAAA,EACnB,IAAI,0BAA0B;AAE9B,QAAM,UAAU,YAAY,YAAY;AACtC,0BAAsB,IAAI;AAE1B,UAAM,uBACJ,2BAA4B,MAAM,4BAA4B;AAEhE,oBAAgB,oBAAoB;AAEpC,QAAI;AACF,UAAI,sBAAsB;AACxB,cAAM,oBACJ,uBAAwB,MAAM,qBAAqB;AAErD,cAAM,EAAE,kBAAkB,eAAe,IACvC,gCAAgC,gBAAgB,OAAO;AAEzD,cAAM,mBAAiD,CAAC;AAExD,YAAI,kBAAkB;AACpB,gBAAM,iBAAiB,kBAAkB,eAAe;AACxD,gBAAM,mBAAmB;AAAA,YACvB;AAAA,UACF,EAAE,KAAK,wBAAwB,cAAc,CAAC;AAC9C,2BAAiB,KAAK,gBAAgB;AAAA,QACxC;AAEA,YAAI,eAAe,SAAS,GAAG;AAC7B,gBAAM,eAAe,gBAAgB,eAAe;AACpD,yBAAe,QAAQ,CAAC,gBAAwB;AAC9C,kBAAM,eAAe;AAAA,cACnB;AAAA,cACA;AAAA,YACF;AACA,kBAAM,iBAAiB;AAAA,cACrB;AAAA,cACA;AAAA,YACF,EAAE,KAAK,wBAAwB,cAAc,WAAW,CAAC;AACzD,6BAAiB,KAAK,cAAc;AAAA,UACtC,CAAC;AAAA,QACH;AAEA,cAAM,qBAAqB,MAAM,QAAQ,IAAI,gBAAgB;AAE7D,iCAAyB,wBAAwB,kBAAkB,CAAC;AAAA,MACtE;AAAA,IACF,QAAQ;AACN,eAAS,IAAI;AAAA,IACf;AAEA,0BAAsB,KAAK;AAAA,EAC7B,GAAG;AAAA,IACD,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,EACF,CAAC;AAED,YAAU,MAAM;AACd,YAAQ;AAAA,EACV,GAAG,CAAC,OAAO,CAAC;AACZ,SAAO,EAAE,oBAAoB,uBAAuB,cAAc,MAAM;AAC1E;",
   "names": []
 }

package/esm/map/hooks/use-map-view-provider-context.js

@@ -0,0 +1,7 @@
+import { useContext } from "react";
+import { MapViewProviderContext } from "../contexts/map-view-provider.context.js";
+const useMapViewProviderContext = () => useContext(MapViewProviderContext);
+export {
+  useMapViewProviderContext
+};
+//# sourceMappingURL=use-map-view-provider-context.js.map

package/esm/map/hooks/use-map-view-provider-context.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/map/hooks/use-map-view-provider-context.ts"],
+  "sourcesContent": ["import { useContext } from 'react';\n\nimport { MapViewProviderContext } from '../contexts/map-view-provider.context.js';\n\nexport const useMapViewProviderContext = () =>\n  useContext(MapViewProviderContext);\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAE3B,SAAS,8BAA8B;AAEhC,MAAM,4BAA4B,MACvC,WAAW,sBAAsB;",
+  "names": []
+}

package/esm/map/hooks/use-tooltip-template.js

@@ -20,10 +20,18 @@ const createDefaultHandlerWithActions = (seriesActions) => {
   return handler;
 };
 const isDefaultTooltipHandler = (handler) => handler.__isDefault ?? false;
-function useTooltipTemplate(children, layerType) {
+function useTooltipTemplate(children, layerType, options) {
   let template = void 0;
+  let hidden = void 0;
+  let symbolAlignment = void 0;
   Children.forEach(children, (child) => {
     if (isValidElement(child) && child.type === layerType) {
+      hidden = child.props.hidden;
+      symbolAlignment = child.props.symbolAlignment;
+      if (child.props.hidden) {
+        template = void 0;
+        return;
+      }
       if (isNil(child.props.children)) {
         template = child.props.seriesActions ? createDefaultHandlerWithActions(child.props.seriesActions) : defaultTooltipHandler;
       } else {
@@ -31,7 +39,14 @@ function useTooltipTemplate(children, layerType) {
       }
     }
   });
-  return template;
+  if (options?.extractProps) {
+    return {
+      handler: hidden ? void 0 : template ?? defaultTooltipHandler,
+      hidden,
+      symbolAlignment
+    };
+  }
+  return hidden ? void 0 : template ?? defaultTooltipHandler;
 }
 export {
   defaultTooltipHandler,