@dynatrace/strato-geo 2.9.4 → 2.11.2

package/map/components/toolbar/MapToolbar.js

@@ -29,17 +29,20 @@ var import_MapZoomInOutButtons = require("./buttons/MapZoomInOutButtons.js");
 var import_MapZoomToFitButton = require("./buttons/MapZoomToFitButton.js");
 var import_constants = require("./constants.js");
 var import_use_map_config = require("../../hooks/use-map-config.js");
+var import_use_map_raw_data = require("../../hooks/use-map-raw-data.js");
 var import_map_initial_view_provider = require("../../providers/map-initial-view.provider.js");
 var import_selectors = require("../../store/selectors.js");
 var import_store = require("../../store/store.js");
+var import_build_and_download_csv = require("../../utils/build-and-download-csv.js");
 const defaultToolbarPlacement = "top-right";
 const MapToolbar = () => {
   const { toolbar: toolbarConfig, interactions: interactionsConfig } = (0, import_use_map_config.useMapConfig)();
+  const data = (0, import_use_map_raw_data.useMapRawData)();
   const { mouseInBounds } = (0, import_selectors.useMapOverlayState)();
   const setTooltipState = (0, import_store.useSetStateTooltip)();
-  const isZoomEnabled = interactionsConfig?.zoom?.enabled ?? false;
-  const isZoomToFitEnabled = interactionsConfig?.zoomToFit?.enabled ?? false;
-  const isDownloadDataEnabled = toolbarConfig?.downloadData ?? false;
+  const isZoomEnabled = toolbarConfig?.zoom?.enabled ?? interactionsConfig?.zoom?.enabled ?? false;
+  const isZoomToFitEnabled = toolbarConfig?.zoom?.enabled ?? interactionsConfig?.zoomToFit?.enabled ?? false;
+  const isDownloadDataEnabled = toolbarConfig?.downloadCSV?.enabled ?? false;
   const hasControls = isZoomEnabled || isZoomToFitEnabled || isDownloadDataEnabled;
   const handleMouseEnter = () => {
     setTooltipState({
@@ -51,6 +54,9 @@ const MapToolbar = () => {
       enabled: true
     });
   };
+  const handleDownloadDataToolbar = () => {
+    (0, import_build_and_download_csv.buildAndDownloadCsv)(data);
+  };
   return hasControls ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_map_initial_view_provider.MapInitialViewProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_charts._ChartToolbarRenderer,
     {
@@ -58,6 +64,8 @@ const MapToolbar = () => {
       collapsed: toolbarConfig?.collapsed,
       draggable: toolbarConfig?.draggable,
       placement: toolbarConfig?.placement ?? defaultToolbarPlacement,
+      handleDownloadDataToolbar,
+      isDownloadEnabled: isDownloadDataEnabled,
       initialA11yState: import_constants.initialA11yToolbarTabIndexContext,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,

package/map/contexts/tooltip.context.d.ts

@@ -0,0 +1,3 @@
+export declare const TooltipContext: import("react").Context<{
+    markerRef: React.RefObject<maplibregl.Marker | undefined>;
+}>;

package/map/contexts/tooltip.context.js

@@ -0,0 +1,27 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var tooltip_context_exports = {};
+__export(tooltip_context_exports, {
+  TooltipContext: () => TooltipContext
+});
+module.exports = __toCommonJS(tooltip_context_exports);
+var import_react = require("react");
+const TooltipContext = (0, import_react.createContext)({
+  markerRef: { current: void 0 }
+});

package/map/hooks/use-active-interaction.js

@@ -79,10 +79,34 @@ const useActiveInteraction = () => {
     },
     [featureId, sourceId, map]
   );
+  const onEscapeKeyPressedHandler = (0, import_react.useCallback)(
+    (event) => {
+      if (event.key === "Escape") {
+        if (!(0, import_lodash_es.isUndefined)(featureId) && !(0, import_lodash_es.isUndefined)(sourceId)) {
+          map.setFeatureState(
+            { source: sourceId, id: featureId },
+            { active: false }
+          );
+          const allFeatures = map.queryRenderedFeatures();
+          allFeatures.forEach((feature) => {
+            if (feature.id !== void 0 && feature.layer.source !== void 0) {
+              map.setFeatureState(
+                { source: feature.layer.source, id: feature.id },
+                { isAnyActive: false }
+              );
+            }
+          });
+        }
+      }
+    },
+    [featureId, sourceId, map]
+  );
   (0, import_react.useEffect)(() => {
     map.on("click", handleClick);
+    window.addEventListener("keyup", onEscapeKeyPressedHandler);
     return () => {
       map.off("click", handleClick);
+      window.removeEventListener("keyup", onEscapeKeyPressedHandler);
     };
   }, []);
 };

package/map/hooks/use-get-position.d.ts

@@ -0,0 +1,4 @@
+export declare const useGetPosition: (pinned: boolean, visible: boolean) => {
+    x: number;
+    y: number;
+} | null | undefined;

package/map/hooks/use-get-position.js

@@ -0,0 +1,75 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_get_position_exports = {};
+__export(use_get_position_exports, {
+  useGetPosition: () => useGetPosition
+});
+module.exports = __toCommonJS(use_get_position_exports);
+var import_react_maplibre = require("@vis.gl/react-maplibre");
+var import_lodash_es = require("lodash");
+var import_react = require("react");
+var import_tooltip_context = require("../contexts/tooltip.context.js");
+const useGetPosition = (pinned, visible) => {
+  const mapRef = (0, import_react_maplibre.useMap)();
+  const { markerRef } = (0, import_react.useContext)(import_tooltip_context.TooltipContext);
+  const getBounds = () => mapRef.current?.getContainer().getBoundingClientRect();
+  const [mapBounds, setMapBounds] = (0, import_react.useState)(visible ? getBounds : null);
+  const updateBounds = (0, import_react.useCallback)(
+    (0, import_lodash_es.throttle)(
+      () => {
+        setMapBounds(getBounds);
+      },
+      10,
+      { trailing: true, leading: true }
+    ),
+    []
+  );
+  (0, import_react.useEffect)(() => {
+    if (visible) {
+      updateBounds();
+      return;
+    }
+    setMapBounds(null);
+  }, [visible]);
+  (0, import_react.useEffect)(() => {
+    if (pinned) {
+      const observers = [
+        mapRef.current?.on("drag", updateBounds),
+        mapRef.current?.on("zoom", updateBounds),
+        mapRef.current?.on("resize", updateBounds)
+      ];
+      document.body.addEventListener("scroll", updateBounds, true);
+      return () => {
+        observers.forEach((o) => o && o.unsubscribe());
+        document.body.removeEventListener("scroll", updateBounds, true);
+      };
+    }
+  }, [pinned]);
+  if (!mapBounds || !markerRef.current?._pos) {
+    return;
+  }
+  const position = {
+    x: mapBounds.x + markerRef.current?._pos.x,
+    y: mapBounds.y + markerRef.current?._pos.y
+  };
+  if (!(0, import_lodash_es.inRange)(position.x, mapBounds.left, mapBounds.right) || !(0, import_lodash_es.inRange)(position.y, mapBounds.top, mapBounds.bottom)) {
+    return null;
+  }
+  return position;
+};

package/map/hooks/use-overlay-events.js

@@ -26,7 +26,7 @@ var import_parse_tooltip_data = require("../utils/parse-tooltip-data.js");
 const useOverlayEvents = () => {
   const setOverlayState = (0, import_store.useSetStateOverlay)();
   const setTooltipState = (0, import_store.useSetStateTooltip)();
-  const toggleTooltipPinnedState = (0, import_store.useToggleStatePinnedTooltip)();
+  const setTooltipPinnedState = (0, import_store.useTooltipPinnedState)();
   const hideTooltip = () => {
     setTooltipState({ visible: false });
   };
@@ -36,22 +36,13 @@ const useOverlayEvents = () => {
     });
   };
   const handleMouseMove = (event) => {
-    if (event.features && event.features.length) {
-      const { clientX, clientY } = event.originalEvent;
-      const position = {
-        x: clientX,
-        y: clientY
-      };
-      const hoveredLayerId = event.features[0].layer.id;
-      const hoveredFeatures = event.features.filter(
-        (feature) => feature.layer.id === hoveredLayerId
-      );
-      const data = (0, import_parse_tooltip_data.parseTooltipData)(hoveredFeatures);
+    if (event.features?.length) {
+      const { data, hoveredLayerId } = (0, import_parse_tooltip_data.extractDataFromEvent)(event);
       setTooltipState({
-        visible: true,
-        hoveredLayerId,
         data,
-        position
+        hoveredLayerId,
+        visible: true,
+        location: event.lngLat
       });
     } else {
       hideTooltip();
@@ -64,8 +55,7 @@ const useOverlayEvents = () => {
     hideTooltip();
   };
   const handleMouseClick = (event) => {
-    event.originalEvent.stopPropagation();
-    toggleTooltipPinnedState();
+    setTooltipPinnedState(event);
   };
   const handleDrag = () => {
     hideTooltip();

package/map/hooks/use-tooltip-event-listeners.js

@@ -24,33 +24,20 @@ module.exports = __toCommonJS(use_tooltip_event_listeners_exports);
 var import_react = require("react");
 var import_store = require("../store/store.js");
 const useTooltipEventListeners = () => {
-  const setTooltipState = (0, import_store.useSetStateTooltip)();
+  const setClearTooltip = (0, import_store.useClearTooltip)();
   const pinned = (0, import_store.useMapTooltipPinnedState)();
-  const unpinTooltip = (0, import_react.useCallback)(() => {
-    if (pinned) {
-      setTooltipState({ pinned: false });
-    }
-  }, [pinned]);
   const onEscapeKeyPressedHandler = (0, import_react.useCallback)(
     (event) => {
-      if (event.key === "Escape") {
-        unpinTooltip();
+      if (pinned && event.key === "Escape") {
+        setClearTooltip();
       }
     },
-    [unpinTooltip]
-  );
-  const onClick = (0, import_react.useCallback)(
-    (event) => {
-      unpinTooltip();
-    },
-    [unpinTooltip]
+    [pinned]
   );
   (0, import_react.useEffect)(() => {
-    window.addEventListener("click", onClick);
     window.addEventListener("keyup", onEscapeKeyPressedHandler);
     return () => {
-      window.removeEventListener("click", onClick);
       window.removeEventListener("keyup", onEscapeKeyPressedHandler);
     };
-  }, [onClick, onEscapeKeyPressedHandler]);
+  }, [onEscapeKeyPressedHandler]);
 };

package/map/index.d.ts

@@ -6,6 +6,7 @@ export { BubbleLayer } from './slots/BubbleLayer.js';
 export { BaseLayer } from './slots/BaseLayer.js';
 export { ChoroplethLayer } from './slots/ChoroplethLayer.js';
 export { Tooltip, TooltipAtoms } from './slots/Tooltip.js';
+export { DownloadCSV } from './slots/DownloadCSV.js';
 export type { MapViewProps, MapViewBaseProps, MapViewUncontrolledProps, MapViewControlledProps, DisallowAll, ViewState, MapViewRef, } from './types/map-view.js';
 export type { BaseLayerProps } from './types/base-layer.js';
 export type { Connection, ConnectionLayerBaseProps, ConnectionLayerProps, CurvedLine, } from './types/connection-layer.js';
@@ -14,7 +15,7 @@ export type { BubbleLayerBaseProps, BubbleLayerProps, ScaleNoneProps, ScaleRadiu
 export type { ChoroplethLayerBaseProps, ChoroplethLayerProps, } from './types/choropleth-layer.js';
 export type { Location } from './types/location.js';
 export type { MapShape } from './types/shapes.js';
-export type { ChartInteractionsProps } from './types/toolbar.js';
+export type { ChartInteractionsProps, MapToolbarSlotProps, } from './types/toolbar.js';
 export type { ErrorStateSlotProps } from './slots/states/ErrorStateSlot.js';
 export type { BaseLegendProps, CategoricalLegendProps, SequentialLegendProps, ThresholdLegendProps, } from './types/legend.js';
 export type { LocationColorProps, LegendColorLayerProps, ChoroplethCustomColorProps, ConnectionColorProps, } from './types/coloring.js';

package/map/index.js

@@ -25,6 +25,7 @@ __export(map_exports, {
   ChoroplethLayer: () => import_ChoroplethLayer.ChoroplethLayer,
   ConnectionLayer: () => import_ConnectionLayer.ConnectionLayer,
   DotLayer: () => import_DotLayer.DotLayer,
+  DownloadCSV: () => import_DownloadCSV.DownloadCSV,
   MapView: () => import_MapView.MapView,
   SequentialLegend: () => import_SequentialLegend.SequentialLegend,
   ThresholdLegend: () => import_ThresholdLegend.ThresholdLegend,
@@ -41,6 +42,7 @@ var import_BubbleLayer = require("./slots/BubbleLayer.js");
 var import_BaseLayer = require("./slots/BaseLayer.js");
 var import_ChoroplethLayer = require("./slots/ChoroplethLayer.js");
 var import_Tooltip = require("./slots/Tooltip.js");
+var import_DownloadCSV = require("./slots/DownloadCSV.js");
 var import_SequentialLegend = require("./slots/SequentialLegend.js");
 var import_ThresholdLegend = require("./slots/ThresholdLegend.js");
 var import_CategoricalLegend = require("./slots/CategoricalLegend.js");

package/map/slots/DownloadCSV.d.ts

@@ -0,0 +1,8 @@
+/**
+ * DownloadCSV Slot Component
+ * @public
+ */
+export declare const DownloadCSV: {
+    (): null;
+    displayName: string;
+};

package/map/slots/DownloadCSV.js

@@ -0,0 +1,25 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DownloadCSV_exports = {};
+__export(DownloadCSV_exports, {
+  DownloadCSV: () => DownloadCSV
+});
+module.exports = __toCommonJS(DownloadCSV_exports);
+const DownloadCSV = () => null;
+DownloadCSV["displayName"] = "MapView.DownloadCSV";

package/map/slots/Toolbar.d.ts

@@ -0,0 +1,9 @@
+import { MapToolbarSlotProps } from '../types/toolbar.js';
+/**
+ * Slot for configuring the toolbar within a MapView.
+ * @public
+ */
+export declare const Toolbar: {
+    (props: MapToolbarSlotProps): null;
+    displayName: string;
+};

package/map/slots/Toolbar.js

@@ -0,0 +1,25 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Toolbar_exports = {};
+__export(Toolbar_exports, {
+  Toolbar: () => Toolbar
+});
+module.exports = __toCommonJS(Toolbar_exports);
+const Toolbar = (props) => null;
+Toolbar.displayName = "MapToolbar";

package/map/store/map-store.context.d.ts

@@ -1,26 +1,4 @@
 import { type Store } from '@dynatrace/strato-components-preview/core';
 import type { MapState } from '../types/state.js';
-export declare const initialState: {
-    tooltip: {
-        pinned: boolean;
-        visible: boolean;
-        enabled: boolean;
-        hoveredLayerId: undefined;
-        data: undefined;
-        position: undefined;
-    };
-    overlay: {
-        mouseInBounds: boolean;
-    };
-    selection: {
-        highlightedSeries: undefined;
-        visible: undefined;
-    };
-    zoom: {
-        zoomInEnabled: boolean;
-        zoomOutEnabled: boolean;
-        zoomToFitEnabled: boolean;
-        resetEnabled: boolean;
-    };
-};
+export declare const initialState: MapState;
 export declare const MapStore: import("react").Context<Store<MapState<unknown>>>;

package/map/store/map-store.context.js

@@ -30,9 +30,10 @@ const initialState = {
     pinned: false,
     visible: false,
     enabled: true,
+    pinnedId: void 0,
+    location: void 0,
     hoveredLayerId: void 0,
-    data: void 0,
-    position: void 0
+    data: void 0
   },
   overlay: {
     mouseInBounds: false

package/map/store/map-store.provider.js

@@ -27,6 +27,6 @@ var import_core = require("@dynatrace/strato-components-preview/core");
 var import_map_store_context = require("./map-store.context.js");
 const MapStoreProvider = ({ children }) => {
   const storeRef = (0, import_react.useRef)(null);
-  storeRef.current = (0, import_core.createStore)(import_map_store_context.initialState);
+  storeRef.current ||= (0, import_core.createStore)(import_map_store_context.initialState);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_map_store_context.MapStore.Provider, { value: storeRef.current, children });
 };

package/map/store/selectors.d.ts

@@ -6,11 +6,11 @@ export declare const useMapTooltipState: <T>() => {
     enabled: boolean;
     hoveredLayerId: string | undefined;
     data: T[] | undefined;
-    position: {
-        x: number;
-        y: number;
-    } | undefined;
+    pinnedId: string | undefined;
+    location: import("maplibre-gl").LngLat | undefined;
 };
+export declare const useMapTooltipLocationState: <T>() => import("maplibre-gl").LngLat | undefined;
+export declare const useMapTooltipHoveredLayerIdState: <T>() => string | undefined;
 export declare const useMapTooltipPinnedState: <T>() => boolean;
 export declare const useMapOverlayState: <T>() => import("../types/state.js").MapOverlayState;
 export declare const useMapZoomState: <T>() => import("../types/state.js").ZoomState;

package/map/store/selectors.js

@@ -20,6 +20,8 @@ var selectors_exports = {};
 __export(selectors_exports, {
   useMapOverlayState: () => useMapOverlayState,
   useMapSelectionState: () => useMapSelectionState,
+  useMapTooltipHoveredLayerIdState: () => useMapTooltipHoveredLayerIdState,
+  useMapTooltipLocationState: () => useMapTooltipLocationState,
   useMapTooltipPinnedState: () => useMapTooltipPinnedState,
   useMapTooltipState: () => useMapTooltipState,
   useMapZoomState: () => useMapZoomState,
@@ -35,6 +37,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;

package/map/store/store.d.ts

@@ -1,8 +1,10 @@
-import type { MapOverlayState, MapSelectionState, MapTooltipState, ZoomState } from '../types/state.js';
-export declare const useSetState: () => (action: import("../types/state.js").MapState<unknown> | ((prev: import("../types/state.js").MapState<unknown>) => import("../types/state.js").MapState<unknown>)) => void;
+import type { MapLayerMouseEvent } from 'maplibre-gl';
+import type { MapOverlayState, MapSelectionState, MapState, MapTooltipState, ZoomState } from '../types/state.js';
+export declare const useSetState: () => (action: MapState<unknown> | ((prev: MapState<unknown>) => MapState<unknown>)) => void;
 export * from './selectors.js';
 export declare const useSetStateSelection: () => (newSelectionState: Partial<MapSelectionState>) => void;
 export declare const useSetStateTooltip: <T>() => (newTooltipState: Partial<MapTooltipState<T>>) => void;
+export declare const useClearTooltip: () => () => void;
+export declare const useTooltipPinnedState: () => (event: MapLayerMouseEvent) => void;
 export declare const useSetStateOverlay: () => (newOverlayState: Partial<MapOverlayState>) => void;
-export declare const useToggleStatePinnedTooltip: () => () => void;
 export declare const useSetStateZoom: () => (newZoomState: Partial<ZoomState>) => void;

package/map/store/store.js

@@ -19,16 +19,18 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var store_exports = {};
 __export(store_exports, {
+  useClearTooltip: () => useClearTooltip,
   useSetState: () => useSetState,
   useSetStateOverlay: () => useSetStateOverlay,
   useSetStateSelection: () => useSetStateSelection,
   useSetStateTooltip: () => useSetStateTooltip,
   useSetStateZoom: () => useSetStateZoom,
-  useToggleStatePinnedTooltip: () => useToggleStatePinnedTooltip
+  useTooltipPinnedState: () => useTooltipPinnedState
 });
 module.exports = __toCommonJS(store_exports);
 var import_react = require("react");
 var import_map_store_context = require("./map-store.context.js");
+var import_parse_tooltip_data = require("../utils/parse-tooltip-data.js");
 __reExport(store_exports, require("./selectors.js"), module.exports);
 const useSetState = () => {
   const { setState } = (0, import_react.useContext)(import_map_store_context.MapStore);
@@ -49,13 +51,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 } = (0, import_parse_tooltip_data.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 = () => {
@@ -70,23 +122,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) => {

package/map/types/state.d.ts

@@ -1,3 +1,4 @@
+import type { LngLat } from 'maplibre-gl';
 import type { _LegendItem as LegendItem } from '@dynatrace/strato-components-preview/charts';
 export interface MapSelectionState {
     highlightedSeries: LegendItem[] | undefined;
@@ -9,10 +10,8 @@ export interface MapTooltipState<T> {
     enabled: boolean;
     hoveredLayerId: string | undefined;
     data: T[] | undefined;
-    position: {
-        x: number;
-        y: number;
-    } | undefined;
+    pinnedId: string | undefined;
+    location: LngLat | undefined;
 }
 export interface MapOverlayState {
     mouseInBounds: boolean;

package/map/types/toolbar.d.ts

@@ -1,4 +1,4 @@
-import type { ToolbarPlacement, ZoomChangeHandler } from '@dynatrace/strato-components-preview/charts';
+import type { ChartToolbarConfig, DraggableToolbarProps, ZoomChangeHandler } from '@dynatrace/strato-components-preview/charts';
 export type ToolbarInteractionModes = 'zoom' | 'zoom-to-fit' | 'zoom-in' | 'zoom-out' | 'reset' | 'download-data';
 /**
  * Props for the ChartInteractions component
@@ -9,16 +9,15 @@ export interface ChartInteractionsProps {
     onZoomChange?: ZoomChangeHandler;
 }
 /** Internal toolbar configuration interface **/
-export interface MapToolbarConfig {
-    /** When enabled show the toolbar in collapsed state */
-    collapsed?: boolean;
-    /** When enabled the toolbar can be dragged inside the container */
-    draggable?: boolean;
-    /** When enabled it defines the initial placement of the Toolbar */
-    placement?: ToolbarPlacement;
-    /** When enabled the toolbar download button will be shown */
-    downloadData?: boolean;
-}
+export type MapToolbarConfig = Omit<ChartToolbarConfig, 'downloadData'> & DraggableToolbarProps & {
+    /** When enabled show the download CSV button in the toolbar */
+    downloadCSV?: {
+        enabled: boolean;
+    };
+    zoom?: {
+        enabled: boolean;
+    };
+};
 /** API config for the chart interactions */
 export interface ChartInteractionsConfig {
     /** Handler triggered when there is a change on the time domain caused by a zoom action */
@@ -33,3 +32,7 @@ export interface ChartInteractionsConfig {
     };
 }
 export type A11yToolbarTabIndex = Record<string, number>;
+/** Props for the ChartToolbar implementation in MapView
+ * @public
+ */
+export type MapToolbarSlotProps = DraggableToolbarProps;