@dynatrace/strato-geo 2.10.2 → 2.11.2

package/esm/map/store/selectors.js

@@ -9,6 +9,8 @@ const useMapTooltipState = () => useSelector(({ tooltip }) => {
   const { pinned, ...tooltipState } = tooltip;
   return tooltipState;
 });
+const useMapTooltipLocationState = () => useSelector(({ tooltip }) => tooltip.location);
+const useMapTooltipHoveredLayerIdState = () => useSelector(({ tooltip }) => tooltip.hoveredLayerId);
 const useMapTooltipPinnedState = () => useSelector(({ tooltip }) => {
   const { pinned } = tooltip;
   return pinned;
@@ -18,6 +20,8 @@ const useMapZoomState = () => useSelector(({ zoom }) => zoom);
 export {
   useMapOverlayState,
   useMapSelectionState,
+  useMapTooltipHoveredLayerIdState,
+  useMapTooltipLocationState,
   useMapTooltipPinnedState,
   useMapTooltipState,
   useMapZoomState,

package/esm/map/store/selectors.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/store/selectors.ts"],
-  "sourcesContent": ["import { isEqual } from 'lodash-es';\nimport { type Context } from 'react';\n\nimport {\n  Store,\n  useStoreSelector,\n} from '@dynatrace/strato-components-preview/core';\n\nimport { MapStore } from './map-store.context.js';\nimport type { MapState } from '../types/state.js';\n\nexport const useSelector = <T, O>(selector: (state: MapState<T>) => O): O =>\n  useStoreSelector(MapStore as Context<Store<MapState<T>>>, selector, isEqual);\n\nexport const useMapSelectionState = <T>() =>\n  useSelector(({ selection }: MapState<T>) => selection);\n\nexport const useMapTooltipState = <T>() =>\n  useSelector(({ tooltip }: MapState<T>) => {\n    const { pinned, ...tooltipState } = tooltip;\n\n    return tooltipState;\n  });\n\nexport const useMapTooltipPinnedState = <T>() =>\n  useSelector(({ tooltip }: MapState<T>) => {\n    const { pinned } = tooltip;\n\n    return pinned;\n  });\n\nexport const useMapOverlayState = <T>() =>\n  useSelector(({ overlay }: MapState<T>) => overlay);\n\nexport const useMapZoomState = <T>() =>\n  useSelector(({ zoom }: MapState<T>) => zoom);\n"],
-  "mappings": "AAAA,SAAS,eAAe;AAGxB;AAAA,EAEE;AAAA,OACK;AAEP,SAAS,gBAAgB;AAGlB,MAAM,cAAc,CAAO,aAChC,iBAAiB,UAAyC,UAAU,OAAO;AAEtE,MAAM,uBAAuB,MAClC,YAAY,CAAC,EAAE,UAAU,MAAmB,SAAS;AAEhD,MAAM,qBAAqB,MAChC,YAAY,CAAC,EAAE,QAAQ,MAAmB;AACxC,QAAM,EAAE,QAAQ,GAAG,aAAa,IAAI;AAEpC,SAAO;AACT,CAAC;AAEI,MAAM,2BAA2B,MACtC,YAAY,CAAC,EAAE,QAAQ,MAAmB;AACxC,QAAM,EAAE,OAAO,IAAI;AAEnB,SAAO;AACT,CAAC;AAEI,MAAM,qBAAqB,MAChC,YAAY,CAAC,EAAE,QAAQ,MAAmB,OAAO;AAE5C,MAAM,kBAAkB,MAC7B,YAAY,CAAC,EAAE,KAAK,MAAmB,IAAI;",
+  "sourcesContent": ["import { isEqual } from 'lodash-es';\nimport { type Context } from 'react';\n\nimport {\n  Store,\n  useStoreSelector,\n} from '@dynatrace/strato-components-preview/core';\n\nimport { MapStore } from './map-store.context.js';\nimport type { MapState } from '../types/state.js';\n\nexport const useSelector = <T, O>(selector: (state: MapState<T>) => O): O =>\n  useStoreSelector(MapStore as Context<Store<MapState<T>>>, selector, isEqual);\n\nexport const useMapSelectionState = <T>() =>\n  useSelector(({ selection }: MapState<T>) => selection);\n\nexport const useMapTooltipState = <T>() =>\n  useSelector(({ tooltip }: MapState<T>) => {\n    const { pinned, ...tooltipState } = tooltip;\n\n    return tooltipState;\n  });\n\nexport const useMapTooltipLocationState = <T>() =>\n  useSelector(({ tooltip }: MapState<T>) => tooltip.location);\n\nexport const useMapTooltipHoveredLayerIdState = <T>() =>\n  useSelector(({ tooltip }: MapState<T>) => tooltip.hoveredLayerId);\n\nexport const useMapTooltipPinnedState = <T>() =>\n  useSelector(({ tooltip }: MapState<T>) => {\n    const { pinned } = tooltip;\n\n    return pinned;\n  });\n\nexport const useMapOverlayState = <T>() =>\n  useSelector(({ overlay }: MapState<T>) => overlay);\n\nexport const useMapZoomState = <T>() =>\n  useSelector(({ zoom }: MapState<T>) => zoom);\n"],
+  "mappings": "AAAA,SAAS,eAAe;AAGxB;AAAA,EAEE;AAAA,OACK;AAEP,SAAS,gBAAgB;AAGlB,MAAM,cAAc,CAAO,aAChC,iBAAiB,UAAyC,UAAU,OAAO;AAEtE,MAAM,uBAAuB,MAClC,YAAY,CAAC,EAAE,UAAU,MAAmB,SAAS;AAEhD,MAAM,qBAAqB,MAChC,YAAY,CAAC,EAAE,QAAQ,MAAmB;AACxC,QAAM,EAAE,QAAQ,GAAG,aAAa,IAAI;AAEpC,SAAO;AACT,CAAC;AAEI,MAAM,6BAA6B,MACxC,YAAY,CAAC,EAAE,QAAQ,MAAmB,QAAQ,QAAQ;AAErD,MAAM,mCAAmC,MAC9C,YAAY,CAAC,EAAE,QAAQ,MAAmB,QAAQ,cAAc;AAE3D,MAAM,2BAA2B,MACtC,YAAY,CAAC,EAAE,QAAQ,MAAmB;AACxC,QAAM,EAAE,OAAO,IAAI;AAEnB,SAAO;AACT,CAAC;AAEI,MAAM,qBAAqB,MAChC,YAAY,CAAC,EAAE,QAAQ,MAAmB,OAAO;AAE5C,MAAM,kBAAkB,MAC7B,YAAY,CAAC,EAAE,KAAK,MAAmB,IAAI;",
   "names": []
 }

package/esm/map/store/store.js

@@ -1,5 +1,6 @@
 import { useContext } from "react";
 import { MapStore } from "./map-store.context.js";
+import { extractDataFromEvent } from "../utils/parse-tooltip-data.js";
 const useSetState = () => {
   const { setState } = useContext(MapStore);
   return setState;
@@ -20,13 +21,63 @@ const useSetStateSelection = () => {
 const useSetStateTooltip = () => {
   const setState = useSetState();
   return (newTooltipState) => {
-    setState((prev) => ({
-      ...prev,
-      tooltip: {
-        ...prev.tooltip,
-        ...newTooltipState
+    setState((prev) => {
+      const { location, data, hoveredLayerId, ...tooltipState } = newTooltipState;
+      return {
+        ...prev,
+        tooltip: {
+          ...prev.tooltip,
+          ...tooltipState,
+          hoveredLayerId: prev.tooltip.pinned ? prev.tooltip.hoveredLayerId : hoveredLayerId,
+          data: prev.tooltip.pinned ? prev.tooltip.data : data,
+          location: prev.tooltip.pinned ? prev.tooltip.location : location
+        }
+      };
+    });
+  };
+};
+const clearTooltip = (prev) => {
+  return {
+    ...prev,
+    tooltip: {
+      ...prev.tooltip,
+      pinned: false,
+      data: void 0,
+      pinnedId: void 0,
+      hoveredLayerId: void 0,
+      visible: false,
+      location: void 0
+    }
+  };
+};
+const useClearTooltip = () => {
+  const setState = useSetState();
+  return () => {
+    setState(clearTooltip);
+  };
+};
+const useTooltipPinnedState = () => {
+  const setState = useSetState();
+  return (event) => {
+    setState((prev) => {
+      const { data, featureId, hoveredLayerId } = extractDataFromEvent(event);
+      if (!featureId) {
+        return clearTooltip(prev);
       }
-    }));
+      const isPinned = prev.tooltip.pinnedId !== featureId;
+      return {
+        ...prev,
+        tooltip: {
+          ...prev.tooltip,
+          data,
+          hoveredLayerId,
+          visible: true,
+          location: event.lngLat,
+          pinned: isPinned,
+          pinnedId: isPinned ? featureId : void 0
+        }
+      };
+    });
   };
 };
 const useSetStateOverlay = () => {
@@ -41,23 +92,6 @@ const useSetStateOverlay = () => {
     }));
   };
 };
-const useToggleStatePinnedTooltip = () => {
-  const setState = useSetState();
-  return () => {
-    setState((prev) => {
-      if (prev.tooltip.visible || prev.tooltip.pinned) {
-        return {
-          ...prev,
-          tooltip: {
-            ...prev.tooltip,
-            pinned: !prev.tooltip.pinned
-          }
-        };
-      }
-      return { ...prev };
-    });
-  };
-};
 const useSetStateZoom = () => {
   const setState = useSetState();
   return (newZoomState) => {
@@ -71,11 +105,12 @@ const useSetStateZoom = () => {
   };
 };
 export {
+  useClearTooltip,
   useSetState,
   useSetStateOverlay,
   useSetStateSelection,
   useSetStateTooltip,
   useSetStateZoom,
-  useToggleStatePinnedTooltip
+  useTooltipPinnedState
 };
 //# sourceMappingURL=store.js.map

package/esm/map/store/store.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/store/store.ts"],
-  "sourcesContent": ["import { useContext } from 'react';\n\nimport { MapStore } from './map-store.context.js';\nimport type {\n  MapOverlayState,\n  MapSelectionState,\n  MapTooltipState,\n  ZoomState,\n} from '../types/state.js';\n\nexport const useSetState = () => {\n  const { setState } = useContext(MapStore);\n\n  return setState;\n};\n\nexport * from './selectors.js';\n\nexport const useSetStateSelection = () => {\n  const setState = useSetState();\n\n  return (newSelectionState: Partial<MapSelectionState>) => {\n    setState((prev) => ({\n      ...prev,\n      selection: {\n        ...prev.selection,\n        ...newSelectionState,\n      },\n    }));\n  };\n};\n\nexport const useSetStateTooltip = <T>() => {\n  const setState = useSetState();\n\n  return (newTooltipState: Partial<MapTooltipState<T>>) => {\n    setState((prev) => ({\n      ...prev,\n      tooltip: {\n        ...prev.tooltip,\n        ...newTooltipState,\n      },\n    }));\n  };\n};\n\nexport const useSetStateOverlay = () => {\n  const setState = useSetState();\n\n  return (newOverlayState: Partial<MapOverlayState>) => {\n    setState((prev) => ({\n      ...prev,\n      overlay: {\n        ...prev.overlay,\n        ...newOverlayState,\n      },\n    }));\n  };\n};\n\nexport const useToggleStatePinnedTooltip = () => {\n  const setState = useSetState();\n\n  return () => {\n    setState((prev) => {\n      if (prev.tooltip.visible || prev.tooltip.pinned) {\n        return {\n          ...prev,\n          tooltip: {\n            ...prev.tooltip,\n            pinned: !prev.tooltip.pinned,\n          },\n        };\n      }\n      return { ...prev };\n    });\n  };\n};\n\nexport const useSetStateZoom = () => {\n  const setState = useSetState();\n\n  return (newZoomState: Partial<ZoomState>) => {\n    setState((prev) => ({\n      ...prev,\n      zoom: {\n        ...prev.zoom,\n        ...newZoomState,\n      },\n    }));\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,kBAAkB;AAE3B,SAAS,gBAAgB;AAQlB,MAAM,cAAc,MAAM;AAC/B,QAAM,EAAE,SAAS,IAAI,WAAW,QAAQ;AAExC,SAAO;AACT;AAEA,cAAc;AAEP,MAAM,uBAAuB,MAAM;AACxC,QAAM,WAAW,YAAY;AAE7B,SAAO,CAAC,sBAAkD;AACxD,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,WAAW;AAAA,QACT,GAAG,KAAK;AAAA,QACR,GAAG;AAAA,MACL;AAAA,IACF,EAAE;AAAA,EACJ;AACF;AAEO,MAAM,qBAAqB,MAAS;AACzC,QAAM,WAAW,YAAY;AAE7B,SAAO,CAAC,oBAAiD;AACvD,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,SAAS;AAAA,QACP,GAAG,KAAK;AAAA,QACR,GAAG;AAAA,MACL;AAAA,IACF,EAAE;AAAA,EACJ;AACF;AAEO,MAAM,qBAAqB,MAAM;AACtC,QAAM,WAAW,YAAY;AAE7B,SAAO,CAAC,oBAA8C;AACpD,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,SAAS;AAAA,QACP,GAAG,KAAK;AAAA,QACR,GAAG;AAAA,MACL;AAAA,IACF,EAAE;AAAA,EACJ;AACF;AAEO,MAAM,8BAA8B,MAAM;AAC/C,QAAM,WAAW,YAAY;AAE7B,SAAO,MAAM;AACX,aAAS,CAAC,SAAS;AACjB,UAAI,KAAK,QAAQ,WAAW,KAAK,QAAQ,QAAQ;AAC/C,eAAO;AAAA,UACL,GAAG;AAAA,UACH,SAAS;AAAA,YACP,GAAG,KAAK;AAAA,YACR,QAAQ,CAAC,KAAK,QAAQ;AAAA,UACxB;AAAA,QACF;AAAA,MACF;AACA,aAAO,EAAE,GAAG,KAAK;AAAA,IACnB,CAAC;AAAA,EACH;AACF;AAEO,MAAM,kBAAkB,MAAM;AACnC,QAAM,WAAW,YAAY;AAE7B,SAAO,CAAC,iBAAqC;AAC3C,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,MAAM;AAAA,QACJ,GAAG,KAAK;AAAA,QACR,GAAG;AAAA,MACL;AAAA,IACF,EAAE;AAAA,EACJ;AACF;",
+  "sourcesContent": ["import type { MapLayerMouseEvent } from 'maplibre-gl';\nimport { useContext } from 'react';\n\nimport { MapStore } from './map-store.context.js';\nimport type {\n  MapOverlayState,\n  MapSelectionState,\n  MapState,\n  MapTooltipState,\n  ZoomState,\n} from '../types/state.js';\nimport { extractDataFromEvent } from '../utils/parse-tooltip-data.js';\n\nexport const useSetState = () => {\n  const { setState } = useContext(MapStore);\n\n  return setState;\n};\n\nexport * from './selectors.js';\n\nexport const useSetStateSelection = () => {\n  const setState = useSetState();\n\n  return (newSelectionState: Partial<MapSelectionState>) => {\n    setState((prev) => ({\n      ...prev,\n      selection: {\n        ...prev.selection,\n        ...newSelectionState,\n      },\n    }));\n  };\n};\n\nexport const useSetStateTooltip = <T>() => {\n  const setState = useSetState();\n\n  return (newTooltipState: Partial<MapTooltipState<T>>) => {\n    setState((prev) => {\n      const { location, data, hoveredLayerId, ...tooltipState } =\n        newTooltipState;\n      return {\n        ...prev,\n        tooltip: {\n          ...prev.tooltip,\n          ...tooltipState,\n          hoveredLayerId: prev.tooltip.pinned\n            ? prev.tooltip.hoveredLayerId\n            : hoveredLayerId,\n          data: prev.tooltip.pinned ? prev.tooltip.data : data,\n          location: prev.tooltip.pinned ? prev.tooltip.location : location,\n        },\n      };\n    });\n  };\n};\nconst clearTooltip = (prev: MapState<unknown>) => {\n  return {\n    ...prev,\n    tooltip: {\n      ...prev.tooltip,\n      pinned: false,\n      data: undefined,\n      pinnedId: undefined,\n      hoveredLayerId: undefined,\n      visible: false,\n      location: undefined,\n    },\n  };\n};\nexport const useClearTooltip = () => {\n  const setState = useSetState();\n\n  return () => {\n    setState(clearTooltip);\n  };\n};\n\nexport const useTooltipPinnedState = () => {\n  const setState = useSetState();\n\n  return (event: MapLayerMouseEvent) => {\n    setState((prev) => {\n      const { data, featureId, hoveredLayerId } = extractDataFromEvent(event);\n      if (!featureId) {\n        return clearTooltip(prev);\n      }\n\n      const isPinned = prev.tooltip.pinnedId !== featureId;\n      return {\n        ...prev,\n        tooltip: {\n          ...prev.tooltip,\n          data,\n          hoveredLayerId,\n          visible: true,\n          location: event.lngLat,\n          pinned: isPinned,\n          pinnedId: isPinned ? featureId : undefined,\n        },\n      };\n    });\n  };\n};\n\nexport const useSetStateOverlay = () => {\n  const setState = useSetState();\n\n  return (newOverlayState: Partial<MapOverlayState>) => {\n    setState((prev) => ({\n      ...prev,\n      overlay: {\n        ...prev.overlay,\n        ...newOverlayState,\n      },\n    }));\n  };\n};\n\nexport const useSetStateZoom = () => {\n  const setState = useSetState();\n\n  return (newZoomState: Partial<ZoomState>) => {\n    setState((prev) => ({\n      ...prev,\n      zoom: {\n        ...prev.zoom,\n        ...newZoomState,\n      },\n    }));\n  };\n};\n"],
+  "mappings": "AACA,SAAS,kBAAkB;AAE3B,SAAS,gBAAgB;AAQzB,SAAS,4BAA4B;AAE9B,MAAM,cAAc,MAAM;AAC/B,QAAM,EAAE,SAAS,IAAI,WAAW,QAAQ;AAExC,SAAO;AACT;AAEA,cAAc;AAEP,MAAM,uBAAuB,MAAM;AACxC,QAAM,WAAW,YAAY;AAE7B,SAAO,CAAC,sBAAkD;AACxD,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,WAAW;AAAA,QACT,GAAG,KAAK;AAAA,QACR,GAAG;AAAA,MACL;AAAA,IACF,EAAE;AAAA,EACJ;AACF;AAEO,MAAM,qBAAqB,MAAS;AACzC,QAAM,WAAW,YAAY;AAE7B,SAAO,CAAC,oBAAiD;AACvD,aAAS,CAAC,SAAS;AACjB,YAAM,EAAE,UAAU,MAAM,gBAAgB,GAAG,aAAa,IACtD;AACF,aAAO;AAAA,QACL,GAAG;AAAA,QACH,SAAS;AAAA,UACP,GAAG,KAAK;AAAA,UACR,GAAG;AAAA,UACH,gBAAgB,KAAK,QAAQ,SACzB,KAAK,QAAQ,iBACb;AAAA,UACJ,MAAM,KAAK,QAAQ,SAAS,KAAK,QAAQ,OAAO;AAAA,UAChD,UAAU,KAAK,QAAQ,SAAS,KAAK,QAAQ,WAAW;AAAA,QAC1D;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AACF;AACA,MAAM,eAAe,CAAC,SAA4B;AAChD,SAAO;AAAA,IACL,GAAG;AAAA,IACH,SAAS;AAAA,MACP,GAAG,KAAK;AAAA,MACR,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,SAAS;AAAA,MACT,UAAU;AAAA,IACZ;AAAA,EACF;AACF;AACO,MAAM,kBAAkB,MAAM;AACnC,QAAM,WAAW,YAAY;AAE7B,SAAO,MAAM;AACX,aAAS,YAAY;AAAA,EACvB;AACF;AAEO,MAAM,wBAAwB,MAAM;AACzC,QAAM,WAAW,YAAY;AAE7B,SAAO,CAAC,UAA8B;AACpC,aAAS,CAAC,SAAS;AACjB,YAAM,EAAE,MAAM,WAAW,eAAe,IAAI,qBAAqB,KAAK;AACtE,UAAI,CAAC,WAAW;AACd,eAAO,aAAa,IAAI;AAAA,MAC1B;AAEA,YAAM,WAAW,KAAK,QAAQ,aAAa;AAC3C,aAAO;AAAA,QACL,GAAG;AAAA,QACH,SAAS;AAAA,UACP,GAAG,KAAK;AAAA,UACR;AAAA,UACA;AAAA,UACA,SAAS;AAAA,UACT,UAAU,MAAM;AAAA,UAChB,QAAQ;AAAA,UACR,UAAU,WAAW,YAAY;AAAA,QACnC;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AACF;AAEO,MAAM,qBAAqB,MAAM;AACtC,QAAM,WAAW,YAAY;AAE7B,SAAO,CAAC,oBAA8C;AACpD,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,SAAS;AAAA,QACP,GAAG,KAAK;AAAA,QACR,GAAG;AAAA,MACL;AAAA,IACF,EAAE;AAAA,EACJ;AACF;AAEO,MAAM,kBAAkB,MAAM;AACnC,QAAM,WAAW,YAAY;AAE7B,SAAO,CAAC,iBAAqC;AAC3C,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,MAAM;AAAA,QACJ,GAAG,KAAK;AAAA,QACR,GAAG;AAAA,MACL;AAAA,IACF,EAAE;AAAA,EACJ;AACF;",
   "names": []
 }

package/esm/map/utils/iterate-config-slots.js

@@ -1,3 +1,4 @@
+import { isEmpty } from "lodash-es";
 import { Children } from "react";
 import { ChartToolbar } from "@dynatrace/strato-components-preview/charts";
 import {
@@ -11,8 +12,11 @@ import { replaceInfiniteValuesInRanges } from "./replace-infinite-values-in-rang
 import { BaseLayer } from "../slots/BaseLayer.js";
 import { CategoricalLegend } from "../slots/CategoricalLegend.js";
 import { ChartInteractions } from "../slots/ChartInteractions.js";
+import { DownloadCSV } from "../slots/DownloadCSV.js";
 import { SequentialLegend } from "../slots/SequentialLegend.js";
 import { ThresholdLegend } from "../slots/ThresholdLegend.js";
+import { Toolbar } from "../slots/Toolbar.js";
+import { Zoom } from "../slots/Zoom.js";
 const iterateConfigSlots = (children, legendDomain) => {
   let slots = {
     toolbar: void 0,
@@ -20,6 +24,7 @@ const iterateConfigSlots = (children, legendDomain) => {
     legend: void 0,
     baseLayer: DEFAULT_BASE_LAYER_RULES
   };
+  let slotMapToolbarConfig = {};
   Children.forEach(children, (child) => {
     if (isSlot(child, ChartInteractions)) {
       const { children: children2, ...previousInteractions } = child.props;
@@ -79,6 +84,18 @@ const iterateConfigSlots = (children, legendDomain) => {
           ranges
         }
       };
+    } else if (isSlot(child, Toolbar)) {
+      slotMapToolbarConfig = { ...slotMapToolbarConfig, ...child.props };
+    } else if (isSlot(child, DownloadCSV)) {
+      slotMapToolbarConfig = {
+        ...slotMapToolbarConfig,
+        downloadCSV: { enabled: true }
+      };
+    } else if (isSlot(child, Zoom)) {
+      slotMapToolbarConfig = {
+        ...slotMapToolbarConfig,
+        zoom: { enabled: true }
+      };
     } else if (isSlot(child, BaseLayer)) {
       slots = {
         ...slots,
@@ -89,6 +106,9 @@ const iterateConfigSlots = (children, legendDomain) => {
       };
     }
   });
+  if (!isEmpty(slotMapToolbarConfig)) {
+    slots.toolbar = { ...slots.toolbar, ...slotMapToolbarConfig };
+  }
   return slots;
 };
 const iterateChartInteractionsSlots = (children) => {
@@ -108,7 +128,7 @@ const iterateChartToolbarSlots = (children) => {
     if (isSlot(childToolbar, ChartToolbar.DownloadData)) {
       toolbar = {
         ...toolbar,
-        downloadData: { enabled: true }
+        downloadCSV: { enabled: true }
       };
     }
   });

package/esm/map/utils/iterate-config-slots.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/utils/iterate-config-slots.ts"],
-  "sourcesContent": ["import { Children, type ReactNode } from 'react';\n\nimport { ChartToolbar } from '@dynatrace/strato-components-preview/charts';\n\nimport {\n  DEFAULT_BASE_LAYER_RULES,\n  DEFAULT_MAP_LEGEND_RATIO,\n  DEFAULT_MAP_POSITION,\n  DEFAULT_SEQUENTIAL_LEGEND_COLOR_PALETTE,\n} from '../constants.js';\nimport { isSlot } from './is-slot.js';\nimport { replaceInfiniteValuesInRanges } from './replace-infinite-values-in-ranges.js';\nimport { BaseLayer } from '../slots/BaseLayer.js';\nimport { CategoricalLegend } from '../slots/CategoricalLegend.js';\nimport { ChartInteractions } from '../slots/ChartInteractions.js';\nimport { SequentialLegend } from '../slots/SequentialLegend.js';\nimport { ThresholdLegend } from '../slots/ThresholdLegend.js';\nimport type { MapConfig } from '../types/configuration.js';\nimport type { ChartInteractionsConfig } from '../types/toolbar.js';\n\n/**\n * Generate map config based on slots\n * @param children - Map children\n * @param legendDomain - Domain containing min and max value relevant for legend\n * @returns Map slot config\n */\nexport const iterateConfigSlots = (\n  children: ReactNode,\n  legendDomain: [number, number],\n) => {\n  let slots: MapConfig = {\n    toolbar: undefined,\n    interactions: undefined,\n    legend: undefined,\n    baseLayer: DEFAULT_BASE_LAYER_RULES,\n  };\n\n  Children.forEach(children, (child) => {\n    if (isSlot(child, ChartInteractions)) {\n      const { children, ...previousInteractions } = child.props;\n\n      const interactions = iterateChartInteractionsSlots(children);\n\n      slots = {\n        ...slots,\n        interactions: {\n          ...previousInteractions,\n          ...interactions,\n        },\n      };\n    } else if (isSlot(child, ChartToolbar)) {\n      const { children, ...toolbar } = child.props;\n      const childrenToolbar = iterateChartToolbarSlots(children);\n\n      slots = {\n        ...slots,\n        toolbar: {\n          ...toolbar,\n          ...childrenToolbar,\n        },\n      };\n    } else if (isSlot(child, SequentialLegend)) {\n      slots = {\n        ...slots,\n        legend: {\n          type: 'sequential',\n          colorPalette: DEFAULT_SEQUENTIAL_LEGEND_COLOR_PALETTE,\n          position: DEFAULT_MAP_POSITION,\n          ratio: DEFAULT_MAP_LEGEND_RATIO,\n          ...child.props,\n          min: child.props.min ?? legendDomain[0],\n          max: child.props.max ?? legendDomain[1],\n        },\n      };\n    } else if (isSlot(child, CategoricalLegend)) {\n      slots = {\n        ...slots,\n        legend: {\n          type: 'categorical',\n          position: DEFAULT_MAP_POSITION,\n          ...child.props,\n        },\n      };\n    } else if (isSlot(child, ThresholdLegend)) {\n      const getDomainValue = (index: number, legendDomainValue: number) =>\n        Number.isFinite(legendDomainValue)\n          ? legendDomainValue\n          : child.props.ranges?.at(index)?.to ?? legendDomainValue;\n\n      const ranges = replaceInfiniteValuesInRanges(child.props.ranges, [\n        getDomainValue(0, legendDomain[0]),\n        getDomainValue(-1, legendDomain[1]),\n      ]);\n\n      slots = {\n        ...slots,\n        legend: {\n          type: 'threshold',\n          position: DEFAULT_MAP_POSITION,\n          ratio: DEFAULT_MAP_LEGEND_RATIO,\n          ...child.props,\n          ranges,\n        },\n      };\n    } else if (isSlot(child, BaseLayer)) {\n      slots = {\n        ...slots,\n        baseLayer: {\n          ...slots.baseLayer,\n          ...child.props,\n        },\n      };\n    }\n  });\n\n  return slots;\n};\n\nconst iterateChartInteractionsSlots = (children: ReactNode) => {\n  let interactions: ChartInteractionsConfig = {};\n\n  Children.forEach(children, (childInteractions) => {\n    if (isSlot(childInteractions, ChartInteractions.Zoom)) {\n      interactions = { ...interactions, zoom: { enabled: true } };\n    } else if (isSlot(childInteractions, ChartInteractions.ZoomToFit)) {\n      interactions = { ...interactions, zoomToFit: { enabled: true } };\n    }\n  });\n\n  return interactions;\n};\n\n/**\n * Generates chart config based on slots\n * @param children - CharInteraction children\n * @returns ChartInteraction slot config\n */\nconst iterateChartToolbarSlots = (children: ReactNode) => {\n  let toolbar = {};\n\n  Children.forEach(children, (childToolbar) => {\n    if (isSlot(childToolbar, ChartToolbar.DownloadData)) {\n      toolbar = {\n        ...toolbar,\n        downloadData: { enabled: true },\n      };\n    }\n  });\n\n  return toolbar;\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { isEmpty } from 'lodash-es';\nimport { Children, type ReactNode } from 'react';\n\nimport { ChartToolbar } from '@dynatrace/strato-components-preview/charts';\n\nimport {\n  DEFAULT_BASE_LAYER_RULES,\n  DEFAULT_MAP_LEGEND_RATIO,\n  DEFAULT_MAP_POSITION,\n  DEFAULT_SEQUENTIAL_LEGEND_COLOR_PALETTE,\n} from '../constants.js';\nimport { isSlot } from './is-slot.js';\nimport { replaceInfiniteValuesInRanges } from './replace-infinite-values-in-ranges.js';\nimport { BaseLayer } from '../slots/BaseLayer.js';\nimport { CategoricalLegend } from '../slots/CategoricalLegend.js';\nimport { ChartInteractions } from '../slots/ChartInteractions.js';\nimport { DownloadCSV } from '../slots/DownloadCSV.js';\nimport { SequentialLegend } from '../slots/SequentialLegend.js';\nimport { ThresholdLegend } from '../slots/ThresholdLegend.js';\nimport { Toolbar } from '../slots/Toolbar.js';\nimport { Zoom } from '../slots/Zoom.js';\nimport type { MapConfig } from '../types/configuration.js';\nimport type {\n  ChartInteractionsConfig,\n  MapToolbarConfig,\n} from '../types/toolbar.js';\n\n/**\n * Generate map config based on slots\n * @param children - Map children\n * @param legendDomain - Domain containing min and max value relevant for legend\n * @returns Map slot config\n */\nexport const iterateConfigSlots = (\n  children: ReactNode,\n  legendDomain: [number, number],\n) => {\n  let slots: MapConfig = {\n    toolbar: undefined,\n    interactions: undefined,\n    legend: undefined,\n    baseLayer: DEFAULT_BASE_LAYER_RULES,\n  };\n\n  let slotMapToolbarConfig: MapToolbarConfig = {};\n\n  Children.forEach(children, (child) => {\n    if (isSlot(child, ChartInteractions)) {\n      const { children, ...previousInteractions } = child.props;\n\n      const interactions = iterateChartInteractionsSlots(children);\n\n      slots = {\n        ...slots,\n        interactions: {\n          ...previousInteractions,\n          ...interactions,\n        },\n      };\n    } else if (isSlot(child, ChartToolbar)) {\n      const { children, ...toolbar } = child.props;\n      const childrenToolbar = iterateChartToolbarSlots(children);\n\n      slots = {\n        ...slots,\n        toolbar: {\n          ...toolbar,\n          ...childrenToolbar,\n        },\n      };\n    } else if (isSlot(child, SequentialLegend)) {\n      slots = {\n        ...slots,\n        legend: {\n          type: 'sequential',\n          colorPalette: DEFAULT_SEQUENTIAL_LEGEND_COLOR_PALETTE,\n          position: DEFAULT_MAP_POSITION,\n          ratio: DEFAULT_MAP_LEGEND_RATIO,\n          ...child.props,\n          min: child.props.min ?? legendDomain[0],\n          max: child.props.max ?? legendDomain[1],\n        },\n      };\n    } else if (isSlot(child, CategoricalLegend)) {\n      slots = {\n        ...slots,\n        legend: {\n          type: 'categorical',\n          position: DEFAULT_MAP_POSITION,\n          ...child.props,\n        },\n      };\n    } else if (isSlot(child, ThresholdLegend)) {\n      const getDomainValue = (index: number, legendDomainValue: number) =>\n        Number.isFinite(legendDomainValue)\n          ? legendDomainValue\n          : child.props.ranges?.at(index)?.to ?? legendDomainValue;\n\n      const ranges = replaceInfiniteValuesInRanges(child.props.ranges, [\n        getDomainValue(0, legendDomain[0]),\n        getDomainValue(-1, legendDomain[1]),\n      ]);\n\n      slots = {\n        ...slots,\n        legend: {\n          type: 'threshold',\n          position: DEFAULT_MAP_POSITION,\n          ratio: DEFAULT_MAP_LEGEND_RATIO,\n          ...child.props,\n          ranges,\n        },\n      };\n    } else if (isSlot(child, Toolbar)) {\n      slotMapToolbarConfig = { ...slotMapToolbarConfig, ...child.props };\n    } else if (isSlot(child, DownloadCSV)) {\n      slotMapToolbarConfig = {\n        ...slotMapToolbarConfig,\n        downloadCSV: { enabled: true },\n      };\n    } else if (isSlot(child, Zoom)) {\n      slotMapToolbarConfig = {\n        ...slotMapToolbarConfig,\n        zoom: { enabled: true },\n      };\n    } else if (isSlot(child, BaseLayer)) {\n      slots = {\n        ...slots,\n        baseLayer: {\n          ...slots.baseLayer,\n          ...child.props,\n        },\n      };\n    }\n  });\n  if (!isEmpty(slotMapToolbarConfig)) {\n    slots.toolbar = { ...slots.toolbar, ...slotMapToolbarConfig };\n  }\n\n  return slots;\n};\n\nconst iterateChartInteractionsSlots = (children: ReactNode) => {\n  let interactions: ChartInteractionsConfig = {};\n\n  Children.forEach(children, (childInteractions) => {\n    if (isSlot(childInteractions, ChartInteractions.Zoom)) {\n      interactions = { ...interactions, zoom: { enabled: true } };\n    } else if (isSlot(childInteractions, ChartInteractions.ZoomToFit)) {\n      interactions = { ...interactions, zoomToFit: { enabled: true } };\n    }\n  });\n\n  return interactions;\n};\n\n/**\n * Generates chart config based on slots\n * @param children - CharInteraction children\n * @returns ChartInteraction slot config\n */\nconst iterateChartToolbarSlots = (children: ReactNode) => {\n  let toolbar = {};\n\n  Children.forEach(children, (childToolbar) => {\n    if (isSlot(childToolbar, ChartToolbar.DownloadData)) {\n      toolbar = {\n        ...toolbar,\n        downloadCSV: { enabled: true },\n      };\n    }\n  });\n\n  return toolbar;\n};\n"],
+  "mappings": "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",
   "names": ["children"]
 }

package/esm/map/utils/parse-tooltip-data.js

@@ -29,7 +29,24 @@ const parseTooltipData = (features) => {
   }
   return data;
 };
+const extractDataFromEvent = (event) => {
+  if (!event.features?.length) {
+    return {};
+  }
+  const feature = event.features[0];
+  const hoveredLayerId = feature.layer.id;
+  const hoveredFeatures = event.features.filter(
+    (feature2) => feature2.layer.id === hoveredLayerId
+  );
+  const data = parseTooltipData(hoveredFeatures);
+  return {
+    featureId: `${hoveredLayerId}-${feature.id}`,
+    hoveredLayerId,
+    data
+  };
+};
 export {
+  extractDataFromEvent,
   parseTooltipData
 };
 //# sourceMappingURL=parse-tooltip-data.js.map

package/esm/map/utils/parse-tooltip-data.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/utils/parse-tooltip-data.ts"],
-  "sourcesContent": ["import type GeoJSON from 'geojson';\nimport type { MapGeoJSONFeature } from 'maplibre-gl';\n\n/**\n * Tries to deserialize an object, if serialized\n * @param serializedObject - string\n */\nconst deserializeObject = (\n  serializedObject: string,\n): string | Record<string, unknown> => {\n  try {\n    return JSON.parse(serializedObject);\n  } catch {\n    return serializedObject;\n  }\n};\n\n/**\n * Deserializes map feature properties that are serialized\n *\n * @param featureProperties - map feature properties\n */\nconst parseFeatureProperties = (featureProperties: Record<string, unknown>) => {\n  const properties: Record<string, unknown> = {};\n\n  for (const [key, value] of Object.entries(featureProperties)) {\n    if (typeof value === 'string') {\n      properties[key] = deserializeObject(value);\n    } else {\n      properties[key] = value;\n    }\n  }\n\n  return properties;\n};\n\n/**\n * Extracts useful map features data for the tooltip\n * @param features - map features\n */\nexport const parseTooltipData = (features: MapGeoJSONFeature[]) => {\n  const data: unknown[] = [];\n\n  for (const feature of features) {\n    const properties = parseFeatureProperties(feature.properties);\n    const [latitude, longitude] = (feature.geometry as GeoJSON.Point)\n      .coordinates;\n\n    data.push({\n      ...properties,\n      latitude,\n      longitude,\n    });\n  }\n\n  return data;\n};\n"],
-  "mappings": "AAOA,MAAM,oBAAoB,CACxB,qBACqC;AACrC,MAAI;AACF,WAAO,KAAK,MAAM,gBAAgB;AAAA,EACpC,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAOA,MAAM,yBAAyB,CAAC,sBAA+C;AAC7E,QAAM,aAAsC,CAAC;AAE7C,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,iBAAiB,GAAG;AAC5D,QAAI,OAAO,UAAU,UAAU;AAC7B,iBAAW,GAAG,IAAI,kBAAkB,KAAK;AAAA,IAC3C,OAAO;AACL,iBAAW,GAAG,IAAI;AAAA,IACpB;AAAA,EACF;AAEA,SAAO;AACT;AAMO,MAAM,mBAAmB,CAAC,aAAkC;AACjE,QAAM,OAAkB,CAAC;AAEzB,aAAW,WAAW,UAAU;AAC9B,UAAM,aAAa,uBAAuB,QAAQ,UAAU;AAC5D,UAAM,CAAC,UAAU,SAAS,IAAK,QAAQ,SACpC;AAEH,SAAK,KAAK;AAAA,MACR,GAAG;AAAA,MACH;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO;AACT;",
-  "names": []
+  "sourcesContent": ["import type GeoJSON from 'geojson';\nimport type { MapGeoJSONFeature, MapLayerMouseEvent } from 'maplibre-gl';\n\n/**\n * Tries to deserialize an object, if serialized\n * @param serializedObject - string\n */\nconst deserializeObject = (\n  serializedObject: string,\n): string | Record<string, unknown> => {\n  try {\n    return JSON.parse(serializedObject);\n  } catch {\n    return serializedObject;\n  }\n};\n\n/**\n * Deserializes map feature properties that are serialized\n *\n * @param featureProperties - map feature properties\n */\nconst parseFeatureProperties = (featureProperties: Record<string, unknown>) => {\n  const properties: Record<string, unknown> = {};\n\n  for (const [key, value] of Object.entries(featureProperties)) {\n    if (typeof value === 'string') {\n      properties[key] = deserializeObject(value);\n    } else {\n      properties[key] = value;\n    }\n  }\n\n  return properties;\n};\n\n/**\n * Extracts useful map features data for the tooltip\n * @param features - map features\n */\nexport const parseTooltipData = (features: MapGeoJSONFeature[]) => {\n  const data: unknown[] = [];\n\n  for (const feature of features) {\n    const properties = parseFeatureProperties(feature.properties);\n    const [latitude, longitude] = (feature.geometry as GeoJSON.Point)\n      .coordinates;\n\n    data.push({\n      ...properties,\n      latitude,\n      longitude,\n    });\n  }\n\n  return data;\n};\n\nexport const extractDataFromEvent = (event: MapLayerMouseEvent) => {\n  if (!event.features?.length) {\n    return {};\n  }\n  const feature = event.features[0];\n  const hoveredLayerId = feature.layer.id;\n  const hoveredFeatures = event.features.filter(\n    (feature) => feature.layer.id === hoveredLayerId,\n  );\n\n  const data = parseTooltipData(hoveredFeatures);\n\n  return {\n    featureId: `${hoveredLayerId}-${feature.id}`,\n    hoveredLayerId,\n    data,\n  };\n};\n"],
+  "mappings": "AAOA,MAAM,oBAAoB,CACxB,qBACqC;AACrC,MAAI;AACF,WAAO,KAAK,MAAM,gBAAgB;AAAA,EACpC,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAOA,MAAM,yBAAyB,CAAC,sBAA+C;AAC7E,QAAM,aAAsC,CAAC;AAE7C,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,iBAAiB,GAAG;AAC5D,QAAI,OAAO,UAAU,UAAU;AAC7B,iBAAW,GAAG,IAAI,kBAAkB,KAAK;AAAA,IAC3C,OAAO;AACL,iBAAW,GAAG,IAAI;AAAA,IACpB;AAAA,EACF;AAEA,SAAO;AACT;AAMO,MAAM,mBAAmB,CAAC,aAAkC;AACjE,QAAM,OAAkB,CAAC;AAEzB,aAAW,WAAW,UAAU;AAC9B,UAAM,aAAa,uBAAuB,QAAQ,UAAU;AAC5D,UAAM,CAAC,UAAU,SAAS,IAAK,QAAQ,SACpC;AAEH,SAAK,KAAK;AAAA,MACR,GAAG;AAAA,MACH;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO;AACT;AAEO,MAAM,uBAAuB,CAAC,UAA8B;AACjE,MAAI,CAAC,MAAM,UAAU,QAAQ;AAC3B,WAAO,CAAC;AAAA,EACV;AACA,QAAM,UAAU,MAAM,SAAS,CAAC;AAChC,QAAM,iBAAiB,QAAQ,MAAM;AACrC,QAAM,kBAAkB,MAAM,SAAS;AAAA,IACrC,CAACA,aAAYA,SAAQ,MAAM,OAAO;AAAA,EACpC;AAEA,QAAM,OAAO,iBAAiB,eAAe;AAE7C,SAAO;AAAA,IACL,WAAW,GAAG,cAAc,IAAI,QAAQ,EAAE;AAAA,IAC1C;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": ["feature"]
 }

package/map/MapView.d.ts

@@ -7,4 +7,16 @@ import './styles/react-mapgl-styles.css';
  */
 export declare const MapView: ((props: PropsWithChildren<MapViewProps> & import("react").RefAttributes<MapViewRef>) => React.ReactElement | null) & {
     ErrorState: (props: import("./slots/states/ErrorStateSlot.js").ErrorStateSlotProps) => null;
+    Toolbar: {
+        (props: import("./index.js").MapToolbarSlotProps): null;
+        displayName: string;
+    };
+    DownloadCSV: {
+        (): null;
+        displayName: string;
+    };
+    Zoom: {
+        (): null;
+        displayName: string;
+    };
 };

package/map/MapView.js

@@ -38,7 +38,10 @@ var import_map_truncation_mode_context = require("./contexts/map-truncation-mode
 var import_use_load_map_base_layer = require("./hooks/use-load-map-base-layer.js");
 var import_color_scale_provider = require("./providers/color-scale.provider.js");
 var import_layer_color_strategy_provider = require("./providers/layer-color-strategy.provider.js");
+var import_DownloadCSV = require("./slots/DownloadCSV.js");
 var import_ErrorStateSlot = require("./slots/states/ErrorStateSlot.js");
+var import_Toolbar = require("./slots/Toolbar.js");
+var import_Zoom = require("./slots/Zoom.js");
 var import_map_store_provider = require("./store/map-store.provider.js");
 var import_build_scale_from_legend_config = require("./utils/build-scale-from-legend-config.js");
 var import_extract_layers_data = require("./utils/extract-layers-data.js");
@@ -160,5 +163,8 @@ const _MapView = (0, import_react.forwardRef)(
 );
 _MapView["displayName"] = "MapView";
 const MapView = Object.assign(_MapView, {
-  ErrorState: import_ErrorStateSlot.ErrorStateSlot
+  ErrorState: import_ErrorStateSlot.ErrorStateSlot,
+  Toolbar: import_Toolbar.Toolbar,
+  DownloadCSV: import_DownloadCSV.DownloadCSV,
+  Zoom: import_Zoom.Zoom
 });

package/map/components/BubbleLayer/BubbleLayer.js

@@ -38,6 +38,7 @@ var import_use_tooltip_template = require("../../hooks/use-tooltip-template.js")
 var import_BubbleLayerTooltip2 = require("../../slots/BubbleLayerTooltip.js");
 var import_bubble_layer = require("../../types/bubble-layer.js");
 var import_tooltip_type_guards = require("../../utils/tooltip-type-guards.js");
+var import_TooltipWrapper = require("../TooltipWrapper.js");
 const BubbleLayer = (props) => {
   const {
     data,
@@ -67,18 +68,15 @@ const BubbleLayer = (props) => {
     radiusScale
   );
   const tooltipTemplate = (0, import_use_tooltip_template.useTooltipTemplate)(children, import_BubbleLayerTooltip2.BubbleLayerTooltip);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_size_interpolation_context.SizeInterpolationContext.Provider, { value: sizeInterpolation, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_maplibre.Source, { id: sourceId, type: "geojson", data: dataGeoJson, generateId: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_BubbleCircleLayer.BubbleCircleLayer, { id: layerId, source: sourceId }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_BubbleOutlineLayer.BubbleOutlineLayer, { beforeId: layerId, source: sourceId })
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_size_interpolation_context.SizeInterpolationContext.Provider, { value: sizeInterpolation, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_maplibre.Source, { id: sourceId, type: "geojson", data: dataGeoJson, generateId: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_BubbleCircleLayer.BubbleCircleLayer, { id: layerId, source: sourceId }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_BubbleOutlineLayer.BubbleOutlineLayer, { beforeId: layerId, source: sourceId }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TooltipWrapper.TooltipWrapper, { layerId, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_BubbleLayerTooltip.BubbleLayerTooltip,
       {
-        layerId,
         tooltipTemplate: (0, import_tooltip_type_guards.isBubbleTooltipTemplate)(tooltipTemplate) ? tooltipTemplate : void 0
       }
-    )
-  ] });
+    ) })
+  ] }) });
 };
 BubbleLayer["displayName"] = "BubbleLayer";

package/map/components/BubbleLayer/BubbleLayerTooltip.d.ts

@@ -1,6 +1,5 @@
 import type { BubbleLayerTooltipHandler } from '../../types/tooltip.js';
 export interface BubbleLayerTooltipProps {
-    layerId: string;
     tooltipTemplate?: BubbleLayerTooltipHandler;
 }
 export declare const BubbleLayerTooltip: {

package/map/components/BubbleLayer/BubbleLayerTooltip.js

@@ -25,9 +25,10 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_lodash_es = require("lodash");
 var import_react = require("react");
 var import_charts = require("@dynatrace/strato-components-preview/charts");
+var import_use_get_position = require("../../hooks/use-get-position.js");
 var import_selectors = require("../../store/selectors.js");
 const BubbleLayerTooltip = (props) => {
-  const { layerId, tooltipTemplate } = props;
+  const { tooltipTemplate } = props;
   const {
     selectedItem: selectedItemId,
     actionsMenuRef,
@@ -35,15 +36,16 @@ const BubbleLayerTooltip = (props) => {
     onLeave
   } = (0, import_charts._useChartActionsMenu)();
   const tooltipRef = (0, import_react.useRef)(null);
-  const { hoveredLayerId, data, position, visible, enabled } = (0, import_selectors.useMapTooltipState)();
+  const { data, visible, enabled } = (0, import_selectors.useMapTooltipState)();
   const pinned = (0, import_selectors.useMapTooltipPinnedState)();
   const closestPoint = (0, import_react.useRef)(null);
   const remainingPoints = (0, import_react.useRef)([]);
-  const forceHideTooltip = !pinned && (hoveredLayerId !== layerId || !visible || !enabled);
+  const forceHideTooltip = !pinned && (!visible || !enabled);
+  const position = (0, import_use_get_position.useGetPosition)(pinned, !forceHideTooltip);
   if (!tooltipTemplate || forceHideTooltip || !position) {
     return null;
   }
-  if (!pinned && data?.[0]) {
+  if (data?.[0]) {
     const sanitizedData = data.map((bubbleProps) => {
       const {
         __color: color,
@@ -60,9 +62,14 @@ const BubbleLayerTooltip = (props) => {
     closestPoint.current = sortedBubbles[0];
     remainingPoints.current = sortedBubbles.slice(1);
   }
+  const template = closestPoint.current ? tooltipTemplate(closestPoint.current, remainingPoints.current) : null;
+  if (!template) {
+    return null;
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_charts._ChartTooltip,
     {
+      updatePositionWhenPinned: true,
       position,
       pinned,
       ref: tooltipRef,
@@ -72,7 +79,7 @@ const BubbleLayerTooltip = (props) => {
         actionsMenuRef,
         updateSelectedItem
       },
-      children: closestPoint.current ? tooltipTemplate(closestPoint.current, remainingPoints.current) : null
+      children: template
     }
   );
 };

package/map/components/ChoroplethLayer/ChoroplethLayer.js

@@ -23,8 +23,8 @@ __export(ChoroplethLayer_exports, {
 module.exports = __toCommonJS(ChoroplethLayer_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react_maplibre = require("@vis.gl/react-maplibre");
-var import_charts = require("@dynatrace/strato-components-preview/charts");
 var import_ChoroplethLayerTooltip = require("./ChoroplethLayerTooltip.js");
+var import_ChoroplethOutlineLayer = require("./ChoroplethOutlineLayer.js");
 var import_parse_region_data_to_geo_json = require("./utils/parse-region-data-to-geo-json.js");
 var import_constants = require("../../constants.js");
 var import_use_layer_coloring_strategy = require("../../hooks/use-layer-coloring-strategy.js");
@@ -35,6 +35,7 @@ var import_use_resolve_color = require("../../hooks/use-resolve-color.js");
 var import_use_tooltip_template = require("../../hooks/use-tooltip-template.js");
 var import_ChoroplethLayerTooltip2 = require("../../slots/ChoroplethLayerTooltip.js");
 var import_tooltip_type_guards = require("../../utils/tooltip-type-guards.js");
+var import_TooltipWrapper = require("../TooltipWrapper.js");
 const ChoroplethLayer = (props) => {
   const { layerId, data, regionAccessor, children } = props;
   const mapSource = (0, import_use_map_base_layer_features.useMapBaseLayerFeatures)();
@@ -52,86 +53,39 @@ const ChoroplethLayer = (props) => {
     children,
     import_ChoroplethLayerTooltip2.ChoroplethLayerTooltip
   );
-  return dataGeoJSON && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_maplibre.Source, { id: sourceId, type: "geojson", data: dataGeoJSON, generateId: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_maplibre.Layer,
-        {
-          id: layerId,
-          source: sourceId,
-          type: "fill",
-          paint: {
-            "fill-color": ["get", "__color"],
-            "fill-opacity": [
-              "case",
-              ["==", ["feature-state", "legendHover"], false],
-              import_constants.SHAPE_OPACITY_DIMMED,
-              ["==", ["feature-state", "active"], true],
-              import_constants.SHAPE_OPACITY_DEFAULT,
-              ["==", ["feature-state", "hover"], true],
-              import_constants.SHAPE_OPACITY_DEFAULT,
-              ["==", ["feature-state", "legendHover"], true],
-              import_constants.SHAPE_OPACITY_DEFAULT,
-              ["==", ["feature-state", "isAnyActive"], true],
-              import_constants.SHAPE_OPACITY_DIMMED,
-              import_constants.SHAPE_OPACITY_DEFAULT
-            ]
-          }
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_maplibre.Layer,
-        {
-          source: sourceId,
-          type: "line",
-          paint: {
-            "line-color": [
-              "case",
-              ["==", ["feature-state", "active"], true],
-              (0, import_charts._getCanvasColor)(import_constants.DEFAULT_BOUNDARIES_BORDER_COLOR),
-              ["==", ["feature-state", "hover"], true],
-              (0, import_charts._getCanvasColor)(import_constants.DEFAULT_BOUNDARIES_BORDER_COLOR),
-              (0, import_charts._getCanvasColor)(import_constants.DEFAULT_BOUNDARIES_BORDER_COLOR)
-            ],
-            "line-width": [
-              "case",
-              ["==", ["feature-state", "active"], true],
-              import_constants.ACTIVE_BORDER_WIDTH_OUTER,
-              ["==", ["feature-state", "hover"], true],
-              import_constants.ACTIVE_BORDER_WIDTH_OUTER,
-              ["==", ["get", "region_type"], "REGION"],
-              import_constants.REGION_BORDER_WIDTH,
-              import_constants.COUNTRY_BORDER_WIDTH
-            ]
-          }
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_maplibre.Layer,
-        {
-          source: sourceId,
-          type: "line",
-          paint: {
-            "line-color": [
-              "case",
-              ["==", ["feature-state", "active"], true],
-              (0, import_charts._getCanvasColor)(import_constants.ACTIVE_COLOR),
-              ["==", ["feature-state", "hover"], true],
-              (0, import_charts._getCanvasColor)(import_constants.ACTIVE_COLOR),
-              (0, import_charts._getCanvasColor)(import_constants.TRANSPARENT_BORDER_COLOR)
-            ],
-            "line-width": import_constants.ACTIVE_BORDER_WIDTH_INNER
-          }
-        }
-      )
-    ] }),
+  return dataGeoJSON && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_maplibre.Source, { id: sourceId, type: "geojson", data: dataGeoJSON, generateId: true, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_maplibre.Layer,
+      {
+        id: layerId,
+        source: sourceId,
+        type: "fill",
+        paint: {
+          "fill-color": ["get", "__color"],
+          "fill-opacity": [
+            "case",
+            ["==", ["feature-state", "legendHover"], false],
+            import_constants.SHAPE_OPACITY_DIMMED,
+            ["==", ["feature-state", "active"], true],
+            import_constants.SHAPE_OPACITY_DEFAULT,
+            ["==", ["feature-state", "hover"], true],
+            import_constants.SHAPE_OPACITY_DEFAULT,
+            ["==", ["feature-state", "legendHover"], true],
+            import_constants.SHAPE_OPACITY_DEFAULT,
+            ["==", ["feature-state", "isAnyActive"], true],
+            import_constants.SHAPE_OPACITY_DIMMED,
+            import_constants.SHAPE_OPACITY_DEFAULT
+          ]
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChoroplethOutlineLayer.ChoroplethOutlineLayer, { sourceId }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TooltipWrapper.TooltipWrapper, { layerId, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_ChoroplethLayerTooltip.ChoroplethLayerTooltip,
       {
-        layerId,
         tooltipTemplate: (0, import_tooltip_type_guards.isChoroplethTooltipTemplate)(tooltipTemplate) ? tooltipTemplate : void 0
       }
-    )
+    ) })
   ] });
 };
 ChoroplethLayer["displayName"] = "ChoroplethLayer";

package/map/components/ChoroplethLayer/ChoroplethLayerTooltip.d.ts

@@ -1,6 +1,5 @@
 import type { ChoroplethLayerTooltipHandler } from '../../types/tooltip.js';
 export interface ChoroplethLayerTooltipProps {
-    layerId: string;
     tooltipTemplate?: ChoroplethLayerTooltipHandler;
 }
 export declare const ChoroplethLayerTooltip: {