@dynatrace/strato-geo 3.5.2 → 3.7.0

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

@@ -3,7 +3,7 @@ import { _accessValue as accessValue } from "@dynatrace/strato-components/core";
 import { calculateHoveredColor } from "../../../utils/calculate-hovered-color.js";
 import { defineColor } from "../../../utils/define-color.js";
 const parseRegionDataToGeoJSON = (mapSource, data, regionAccessor, color) => {
-  const features = data.reduce((features2, item) => {
+  const features = data.reduce((features2, item, index) => {
     let id = "";
     if (typeof regionAccessor === "function") {
       id = regionAccessor(item);
@@ -21,8 +21,7 @@ const parseRegionDataToGeoJSON = (mapSource, data, regionAccessor, color) => {
         properties: {
           name,
           region_type,
-          data: item,
-          ...item,
+          __dataIndex: index,
           __color: canvasColor,
           __hoveredColor: hoveredColor
         }
@@ -32,8 +31,10 @@ const parseRegionDataToGeoJSON = (mapSource, data, regionAccessor, color) => {
     return features2;
   }, []);
   return {
-    type: "FeatureCollection",
-    features
+    geoJson: {
+      type: "FeatureCollection",
+      features
+    }
   };
 };
 export {

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

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

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

@@ -33,16 +33,19 @@ const ConnectionLayer = (props) => {
   const sourceId = `source-${layerId}`;
   useLegendInteractionHighlighting(props, sourceId);
   useLegendInteractionVisibility(props, layerId);
-  const geoJsonData = parseConnectionDataToGeoJSON(
+  const { geoJson: geoJsonData } = parseConnectionDataToGeoJSON(
     data,
     thickness,
     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 { geoJson: 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,EAAE,SAAS,YAAY,IAAI;AAAA,IAC/B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR;AAAA,EACF,IAAI,mBAAmB,UAAU,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/ConnectionLayerLine.js

@@ -8,15 +8,18 @@ import {
   SHAPE_OPACITY_DEFAULT,
   SHAPE_OPACITY_DIMMED
 } from "../../constants.js";
+import { useLayerBeforeId } from "../../hooks/use-layer-before-id.js";
 const ConnectionLayerLine = (props) => {
   const { geoJsonData, layerId, sourceId, line, children, ...restProps } = props;
   const [behavioralTrackingProps] = useBehavioralTrackingProps(restProps);
+  const beforeId = useLayerBeforeId(layerId);
   return /* @__PURE__ */ jsxs(Source, { id: sourceId, type: "geojson", data: geoJsonData, promoteId: "id", children: [
     /* @__PURE__ */ jsx(
       Layer,
       {
         type: "line",
         id: layerId,
+        beforeId,
         layout: {
           "line-cap": DEFAULT_LINE_CAP,
           "line-join": DEFAULT_LINE_JOIN

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/ConnectionLayer/ConnectionLayerLine.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 {\n  DEFAULT_LINE_CAP,\n  DEFAULT_LINE_DASH_ARRAY,\n  DEFAULT_LINE_JOIN,\n  SHAPE_OPACITY_DEFAULT,\n  SHAPE_OPACITY_DIMMED,\n} from '../../constants.js';\nimport type {\n  Connection,\n  InternalConnectionLayerProps,\n} from '../../types/connection-layer.js';\n\ninterface ConnectionLayerLineProps<T extends Connection>\n  extends Required<Pick<InternalConnectionLayerProps<T>, 'layerId'>> {\n  geoJsonData: GeoJSON.FeatureCollection;\n  sourceId: string;\n  line: 'dashed' | 'solid' | undefined;\n}\n\nexport const ConnectionLayerLine = <T extends Connection>(\n  props: PropsWithChildren<ConnectionLayerLineProps<T>>,\n) => {\n  const { geoJsonData, layerId, sourceId, line, children, ...restProps } =\n    props;\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(restProps);\n\n  return (\n    <Source id={sourceId} type=\"geojson\" data={geoJsonData} promoteId=\"id\">\n      <Layer\n        type=\"line\"\n        id={layerId}\n        layout={{\n          'line-cap': DEFAULT_LINE_CAP,\n          'line-join': DEFAULT_LINE_JOIN,\n        }}\n        paint={{\n          'line-color': [\n            'case',\n            ['boolean', ['feature-state', 'hover'], false],\n            ['get', '__lineHoveredColor'],\n            ['get', '__lineColor'],\n          ],\n          'line-opacity': [\n            'case',\n            ['boolean', ['feature-state', 'legendHover'], true],\n            SHAPE_OPACITY_DEFAULT,\n            SHAPE_OPACITY_DIMMED,\n          ],\n          'line-width': ['get', '__lineWidth'],\n          ...(line && line === 'dashed'\n            ? { 'line-dasharray': DEFAULT_LINE_DASH_ARRAY }\n            : null),\n        }}\n        {...behavioralTrackingProps}\n      />\n      {children}\n    </Source>\n  );\n};\n\nConnectionLayerLine['displayName'] = 'ConnectionLayerLine';\n"],
-  "mappings": "AAgCI,SACE,KADF;AAhCJ,SAAS,OAAO,cAAc;AAG9B,SAAS,+BAA+B,kCAAkC;AAE1E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAaA,MAAM,sBAAsB,CACjC,UACG;AACH,QAAM,EAAE,aAAa,SAAS,UAAU,MAAM,UAAU,GAAG,UAAU,IACnE;AACF,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,SAAS;AAEtE,SACE,qBAAC,UAAO,IAAI,UAAU,MAAK,WAAU,MAAM,aAAa,WAAU,MAChE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,IAAI;AAAA,QACJ,QAAQ;AAAA,UACN,YAAY;AAAA,UACZ,aAAa;AAAA,QACf;AAAA,QACA,OAAO;AAAA,UACL,cAAc;AAAA,YACZ;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,YAC7C,CAAC,OAAO,oBAAoB;AAAA,YAC5B,CAAC,OAAO,aAAa;AAAA,UACvB;AAAA,UACA,gBAAgB;AAAA,YACd;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,YAClD;AAAA,YACA;AAAA,UACF;AAAA,UACA,cAAc,CAAC,OAAO,aAAa;AAAA,UACnC,GAAI,QAAQ,SAAS,WACjB,EAAE,kBAAkB,wBAAwB,IAC5C;AAAA,QACN;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,IACC;AAAA,KACH;AAEJ;AAEA,oBAAoB,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 {\n  DEFAULT_LINE_CAP,\n  DEFAULT_LINE_DASH_ARRAY,\n  DEFAULT_LINE_JOIN,\n  SHAPE_OPACITY_DEFAULT,\n  SHAPE_OPACITY_DIMMED,\n} from '../../constants.js';\nimport { useLayerBeforeId } from '../../hooks/use-layer-before-id.js';\nimport type {\n  Connection,\n  InternalConnectionLayerProps,\n} from '../../types/connection-layer.js';\n\ninterface ConnectionLayerLineProps<T extends Connection>\n  extends Required<Pick<InternalConnectionLayerProps<T>, 'layerId'>> {\n  geoJsonData: GeoJSON.FeatureCollection;\n  sourceId: string;\n  line: 'dashed' | 'solid' | undefined;\n}\n\nexport const ConnectionLayerLine = <T extends Connection>(\n  props: PropsWithChildren<ConnectionLayerLineProps<T>>,\n) => {\n  const { geoJsonData, layerId, sourceId, line, children, ...restProps } =\n    props;\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(restProps);\n\n  // Keep stack order aligned with JSX order even when this layer mounts after\n  // siblings (e.g. async-gated `{apiData && <ChoroplethLayer>}`).\n  const beforeId = useLayerBeforeId(layerId);\n\n  return (\n    <Source id={sourceId} type=\"geojson\" data={geoJsonData} promoteId=\"id\">\n      <Layer\n        type=\"line\"\n        id={layerId}\n        beforeId={beforeId}\n        layout={{\n          'line-cap': DEFAULT_LINE_CAP,\n          'line-join': DEFAULT_LINE_JOIN,\n        }}\n        paint={{\n          'line-color': [\n            'case',\n            ['boolean', ['feature-state', 'hover'], false],\n            ['get', '__lineHoveredColor'],\n            ['get', '__lineColor'],\n          ],\n          'line-opacity': [\n            'case',\n            ['boolean', ['feature-state', 'legendHover'], true],\n            SHAPE_OPACITY_DEFAULT,\n            SHAPE_OPACITY_DIMMED,\n          ],\n          'line-width': ['get', '__lineWidth'],\n          ...(line && line === 'dashed'\n            ? { 'line-dasharray': DEFAULT_LINE_DASH_ARRAY }\n            : null),\n        }}\n        {...behavioralTrackingProps}\n      />\n      {children}\n    </Source>\n  );\n};\n\nConnectionLayerLine['displayName'] = 'ConnectionLayerLine';\n"],
+  "mappings": "AAqCI,SACE,KADF;AArCJ,SAAS,OAAO,cAAc;AAG9B,SAAS,+BAA+B,kCAAkC;AAE1E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,wBAAwB;AAa1B,MAAM,sBAAsB,CACjC,UACG;AACH,QAAM,EAAE,aAAa,SAAS,UAAU,MAAM,UAAU,GAAG,UAAU,IACnE;AACF,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,SAAS;AAItE,QAAM,WAAW,iBAAiB,OAAO;AAEzC,SACE,qBAAC,UAAO,IAAI,UAAU,MAAK,WAAU,MAAM,aAAa,WAAU,MAChE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,IAAI;AAAA,QACJ;AAAA,QACA,QAAQ;AAAA,UACN,YAAY;AAAA,UACZ,aAAa;AAAA,QACf;AAAA,QACA,OAAO;AAAA,UACL,cAAc;AAAA,YACZ;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,YAC7C,CAAC,OAAO,oBAAoB;AAAA,YAC5B,CAAC,OAAO,aAAa;AAAA,UACvB;AAAA,UACA,gBAAgB;AAAA,YACd;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,YAClD;AAAA,YACA;AAAA,UACF;AAAA,UACA,cAAc,CAAC,OAAO,aAAa;AAAA,UACnC,GAAI,QAAQ,SAAS,WACjB,EAAE,kBAAkB,wBAAwB,IAC5C;AAAA,QACN;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,IACC;AAAA,KACH;AAEJ;AAEA,oBAAoB,aAAa,IAAI;",
   "names": []
 }

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

@@ -1,27 +1,25 @@
 import { jsx } from "react/jsx-runtime";
 import { _OverlayTooltip as OverlayTooltip } from "@dynatrace/strato-components/charts";
-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 {
-    data: rawData,
-    inBounds,
-    position
-  } = useGeoLayerTooltip("geoConnection");
-  const data = restoreNullProps(rawData);
-  if (!tooltipTemplate || !inBounds || !position) {
+  const { tooltipTemplate, hidden, symbolAlignment } = props;
+  const { data, inBounds, position } = useGeoLayerTooltip("geoConnection");
+  if (hidden || !tooltipTemplate || !inBounds || !position) {
     return null;
   }
   if (!data || !data[0]) {
     return null;
   }
-  const { __lineColor: color, __lineWidth: thickness, ...rest } = data[0];
+  const {
+    __lineColor: color,
+    __lineWidth: thickness,
+    data: customData
+  } = data[0];
   const connectionData = {
     color,
     thickness,
-    data: rest
+    data: customData
   };
   const template = tooltipTemplate(connectionData);
   if (!template) {
@@ -30,7 +28,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 { useGeoLayerTooltip } from '../../hooks/use-geo-layer-tooltip.js';\nimport type { Connection } 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\ninterface ConnectionTooltipPayload {\n  id: string;\n  __lineColor: string;\n  __lineHoveredColor: string;\n  __lineWidth: number;\n  curve?: string;\n  data: Connection;\n}\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 { data, inBounds, position } =\n    useGeoLayerTooltip<ConnectionTooltipPayload>('geoConnection');\n\n  if (hidden || !tooltipTemplate || !inBounds || !position) {\n    return null;\n  }\n\n  if (!data || !data[0]) {\n    return null;\n  }\n\n  const {\n    __lineColor: color,\n    __lineWidth: thickness,\n    data: customData,\n  } = data[0];\n  const connectionData: ConnectionLayerTooltipData<Connection> = {\n    color,\n    thickness,\n    data: customData,\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": "AA6DI;AA7DJ,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,0BAA0B;AAMnC,SAAS,+BAA+B;AAiBjC,MAAM,yBAAyB,CAAC,UAAuC;AAC5E,QAAM,EAAE,iBAAiB,QAAQ,gBAAgB,IAAI;AAErD,QAAM,EAAE,MAAM,UAAU,SAAS,IAC/B,mBAA6C,eAAe;AAE9D,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;AAAA,IACJ,aAAa;AAAA,IACb,aAAa;AAAA,IACb,MAAM;AAAA,EACR,IAAI,KAAK,CAAC;AACV,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/ConnectionLayer/utils/parse-connection-data-to-geo-json.js

@@ -13,14 +13,11 @@ const getLineThickness = (thickness) => {
   }
   return thickness;
 };
-const getKeysWithNullValues = (obj) => Object.keys(obj).filter((key) => obj[key] === null);
-const getFeatureProperties = (thickness, curve) => (properties, id) => {
+const getRenderingProperties = (thickness, id, curve) => {
   const lineThickness = getLineThickness(thickness);
   return {
-    ...properties,
     id,
     __lineWidth: lineThickness,
-    __nullValues: getKeysWithNullValues(properties),
     curve
   };
 };
@@ -31,35 +28,40 @@ const getLineFeature = (path, featureProperties) => {
   }
   return getStraightLineFeature(path, featureProperties);
 };
+const getConnectionColor = (connection, color) => {
+  const parsedColor = defineColor(color, connection);
+  const canvasColor = getCanvasColor(parsedColor);
+  const hoveredColor = calculateHoveredColor(canvasColor);
+  return {
+    __lineColor: canvasColor,
+    __lineHoveredColor: hoveredColor
+  };
+};
 const getFeatures = (data, thickness, color, curve) => {
-  const getProperties = getFeatureProperties(thickness, curve);
   const features = [];
   data.forEach((feature, index) => {
     if (feature.path.length >= 2) {
-      const { path, ...properties } = feature;
+      const renderingProps = getRenderingProperties(
+        thickness,
+        `connection-${index}`,
+        curve
+      );
       const featureProperties = {
-        ...getProperties({ path, ...properties }, `connection-${index}`),
+        ...renderingProps,
+        __dataIndex: index,
         ...getConnectionColor(feature, color)
       };
-      features.push(getLineFeature(path, featureProperties));
+      features.push(getLineFeature(feature.path, featureProperties));
     }
   });
   return features;
 };
-const getConnectionColor = (connection, color) => {
-  const parsedColor = defineColor(color, connection);
-  const canvasColor = getCanvasColor(parsedColor);
-  const hoveredColor = calculateHoveredColor(canvasColor);
-  return {
-    __lineColor: canvasColor,
-    __lineHoveredColor: hoveredColor
-  };
-};
 const parseConnectionDataToGeoJSON = (data, thickness, color, curve) => {
-  return {
+  const geoJson = {
     type: "FeatureCollection",
     features: getFeatures(data, thickness, color, curve)
   };
+  return { geoJson };
 };
 export {
   parseConnectionDataToGeoJSON

package/esm/map/components/ConnectionLayer/utils/parse-connection-data-to-geo-json.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/map/components/ConnectionLayer/utils/parse-connection-data-to-geo-json.ts"],
-  "sourcesContent": ["import type GeoJSON from 'geojson';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components/charts';\n\nimport { getArcLineFeature } from './get-arc-line-feature.js';\nimport { getStraightLineFeature } from './get-straight-line-feature.js';\nimport { MAX_LINE_THICKNESS, MIN_LINE_THICKNESS } from '../../../constants.js';\nimport type {\n  Connection,\n  CurvedLine,\n  FeatureProperties,\n} from '../../../types/connection-layer.js';\nimport type { Location } from '../../../types/location.js';\nimport { calculateHoveredColor } from '../../../utils/calculate-hovered-color.js';\nimport { defineColor } from '../../../utils/define-color.js';\n\nconst getLineThickness = (thickness: number): number => {\n  if (thickness < MIN_LINE_THICKNESS) {\n    return MIN_LINE_THICKNESS;\n  }\n\n  if (thickness > MAX_LINE_THICKNESS) {\n    return MAX_LINE_THICKNESS;\n  }\n\n  return thickness;\n};\n\nconst getKeysWithNullValues = (obj: Record<string, unknown>): string[] =>\n  Object.keys(obj).filter((key) => obj[key] === null);\n\nconst getFeatureProperties =\n  (thickness: number, curve?: CurvedLine) =>\n  <T extends Connection>(\n    properties: T,\n    id: string,\n  ): Omit<FeatureProperties, '__lineColor' | '__lineHoveredColor'> => {\n    const lineThickness = getLineThickness(thickness);\n\n    return {\n      ...properties,\n      id,\n      __lineWidth: lineThickness,\n      __nullValues: getKeysWithNullValues(properties),\n      curve,\n    };\n  };\n\nconst getLineFeature = (\n  path: Location[],\n  featureProperties: FeatureProperties,\n): GeoJSON.Feature => {\n  const isCurve = featureProperties.curve === 'smooth';\n\n  if (isCurve) {\n    return getArcLineFeature(path, featureProperties);\n  }\n\n  return getStraightLineFeature(path, featureProperties);\n};\n\nconst getFeatures = <T extends Connection>(\n  data: T[],\n  thickness: number,\n  color: string | ((connection: T) => string),\n  curve?: CurvedLine,\n): GeoJSON.Feature[] => {\n  const getProperties = getFeatureProperties(thickness, curve);\n  const features: GeoJSON.Feature[] = [];\n  data.forEach((feature, index) => {\n    if (feature.path.length >= 2) {\n      const { path, ...properties } = feature;\n\n      const featureProperties = {\n        ...getProperties({ path, ...properties }, `connection-${index}`),\n        ...getConnectionColor(feature, color),\n      };\n\n      features.push(getLineFeature(path, featureProperties));\n    }\n  });\n  return features;\n};\n\nconst getConnectionColor = <T extends Connection>(\n  connection: T,\n  color: string | ((connection: T) => string),\n): Pick<FeatureProperties, '__lineColor' | '__lineHoveredColor'> => {\n  const parsedColor = defineColor(color, connection);\n\n  const canvasColor = getCanvasColor(parsedColor);\n  const hoveredColor = calculateHoveredColor(canvasColor);\n\n  return {\n    __lineColor: canvasColor,\n    __lineHoveredColor: hoveredColor,\n  };\n};\n\nexport const parseConnectionDataToGeoJSON = <T extends Connection>(\n  data: T[],\n  thickness: number,\n  color: string | ((connection: T) => string),\n  curve?: CurvedLine,\n): GeoJSON.FeatureCollection => {\n  return {\n    type: 'FeatureCollection',\n\n    features: getFeatures(data, thickness, color, curve),\n  };\n};\n"],
-  "mappings": "AAEA,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,yBAAyB;AAClC,SAAS,8BAA8B;AACvC,SAAS,oBAAoB,0BAA0B;AAOvD,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAE5B,MAAM,mBAAmB,CAAC,cAA8B;AACtD,MAAI,YAAY,oBAAoB;AAClC,WAAO;AAAA,EACT;AAEA,MAAI,YAAY,oBAAoB;AAClC,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAEA,MAAM,wBAAwB,CAAC,QAC7B,OAAO,KAAK,GAAG,EAAE,OAAO,CAAC,QAAQ,IAAI,GAAG,MAAM,IAAI;AAEpD,MAAM,uBACJ,CAAC,WAAmB,UACpB,CACE,YACA,OACkE;AAClE,QAAM,gBAAgB,iBAAiB,SAAS;AAEhD,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,IACA,aAAa;AAAA,IACb,cAAc,sBAAsB,UAAU;AAAA,IAC9C;AAAA,EACF;AACF;AAEF,MAAM,iBAAiB,CACrB,MACA,sBACoB;AACpB,QAAM,UAAU,kBAAkB,UAAU;AAE5C,MAAI,SAAS;AACX,WAAO,kBAAkB,MAAM,iBAAiB;AAAA,EAClD;AAEA,SAAO,uBAAuB,MAAM,iBAAiB;AACvD;AAEA,MAAM,cAAc,CAClB,MACA,WACA,OACA,UACsB;AACtB,QAAM,gBAAgB,qBAAqB,WAAW,KAAK;AAC3D,QAAM,WAA8B,CAAC;AACrC,OAAK,QAAQ,CAAC,SAAS,UAAU;AAC/B,QAAI,QAAQ,KAAK,UAAU,GAAG;AAC5B,YAAM,EAAE,MAAM,GAAG,WAAW,IAAI;AAEhC,YAAM,oBAAoB;AAAA,QACxB,GAAG,cAAc,EAAE,MAAM,GAAG,WAAW,GAAG,cAAc,KAAK,EAAE;AAAA,QAC/D,GAAG,mBAAmB,SAAS,KAAK;AAAA,MACtC;AAEA,eAAS,KAAK,eAAe,MAAM,iBAAiB,CAAC;AAAA,IACvD;AAAA,EACF,CAAC;AACD,SAAO;AACT;AAEA,MAAM,qBAAqB,CACzB,YACA,UACkE;AAClE,QAAM,cAAc,YAAY,OAAO,UAAU;AAEjD,QAAM,cAAc,eAAe,WAAW;AAC9C,QAAM,eAAe,sBAAsB,WAAW;AAEtD,SAAO;AAAA,IACL,aAAa;AAAA,IACb,oBAAoB;AAAA,EACtB;AACF;AAEO,MAAM,+BAA+B,CAC1C,MACA,WACA,OACA,UAC8B;AAC9B,SAAO;AAAA,IACL,MAAM;AAAA,IAEN,UAAU,YAAY,MAAM,WAAW,OAAO,KAAK;AAAA,EACrD;AACF;",
+  "sourcesContent": ["import type GeoJSON from 'geojson';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components/charts';\n\nimport { getArcLineFeature } from './get-arc-line-feature.js';\nimport { getStraightLineFeature } from './get-straight-line-feature.js';\nimport { MAX_LINE_THICKNESS, MIN_LINE_THICKNESS } from '../../../constants.js';\nimport type {\n  Connection,\n  CurvedLine,\n  FeatureProperties,\n} from '../../../types/connection-layer.js';\nimport type { Location } from '../../../types/location.js';\nimport { calculateHoveredColor } from '../../../utils/calculate-hovered-color.js';\nimport { defineColor } from '../../../utils/define-color.js';\n\nconst getLineThickness = (thickness: number): number => {\n  if (thickness < MIN_LINE_THICKNESS) {\n    return MIN_LINE_THICKNESS;\n  }\n\n  if (thickness > MAX_LINE_THICKNESS) {\n    return MAX_LINE_THICKNESS;\n  }\n\n  return thickness;\n};\n\nconst getRenderingProperties = (\n  thickness: number,\n  id: string,\n  curve?: CurvedLine,\n): Omit<FeatureProperties, '__lineColor' | '__lineHoveredColor'> => {\n  const lineThickness = getLineThickness(thickness);\n\n  return {\n    id,\n    __lineWidth: lineThickness,\n    curve,\n  };\n};\n\nconst getLineFeature = (\n  path: Location[],\n  featureProperties: FeatureProperties,\n): GeoJSON.Feature => {\n  const isCurve = featureProperties.curve === 'smooth';\n\n  if (isCurve) {\n    return getArcLineFeature(path, featureProperties);\n  }\n\n  return getStraightLineFeature(path, featureProperties);\n};\n\nconst getConnectionColor = <T extends Connection>(\n  connection: T,\n  color: string | ((connection: T) => string),\n): Pick<FeatureProperties, '__lineColor' | '__lineHoveredColor'> => {\n  const parsedColor = defineColor(color, connection);\n\n  const canvasColor = getCanvasColor(parsedColor);\n  const hoveredColor = calculateHoveredColor(canvasColor);\n\n  return {\n    __lineColor: canvasColor,\n    __lineHoveredColor: hoveredColor,\n  };\n};\n\nconst getFeatures = <T extends Connection>(\n  data: T[],\n  thickness: number,\n  color: string | ((connection: T) => string),\n  curve?: CurvedLine,\n): GeoJSON.Feature[] => {\n  const features: GeoJSON.Feature[] = [];\n  data.forEach((feature, index) => {\n    if (feature.path.length >= 2) {\n      const renderingProps = getRenderingProperties(\n        thickness,\n        `connection-${index}`,\n        curve,\n      );\n\n      const featureProperties: FeatureProperties = {\n        ...renderingProps,\n        __dataIndex: index,\n        ...getConnectionColor(feature, color),\n      };\n\n      features.push(getLineFeature(feature.path, featureProperties));\n    }\n  });\n  return features;\n};\n\nexport const parseConnectionDataToGeoJSON = <T extends Connection>(\n  data: T[],\n  thickness: number,\n  color: string | ((connection: T) => string),\n  curve?: CurvedLine,\n): { geoJson: GeoJSON.FeatureCollection } => {\n  const geoJson: GeoJSON.FeatureCollection = {\n    type: 'FeatureCollection',\n    features: getFeatures(data, thickness, color, curve),\n  };\n\n  return { geoJson };\n};\n"],
+  "mappings": "AAEA,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,yBAAyB;AAClC,SAAS,8BAA8B;AACvC,SAAS,oBAAoB,0BAA0B;AAOvD,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAE5B,MAAM,mBAAmB,CAAC,cAA8B;AACtD,MAAI,YAAY,oBAAoB;AAClC,WAAO;AAAA,EACT;AAEA,MAAI,YAAY,oBAAoB;AAClC,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAEA,MAAM,yBAAyB,CAC7B,WACA,IACA,UACkE;AAClE,QAAM,gBAAgB,iBAAiB,SAAS;AAEhD,SAAO;AAAA,IACL;AAAA,IACA,aAAa;AAAA,IACb;AAAA,EACF;AACF;AAEA,MAAM,iBAAiB,CACrB,MACA,sBACoB;AACpB,QAAM,UAAU,kBAAkB,UAAU;AAE5C,MAAI,SAAS;AACX,WAAO,kBAAkB,MAAM,iBAAiB;AAAA,EAClD;AAEA,SAAO,uBAAuB,MAAM,iBAAiB;AACvD;AAEA,MAAM,qBAAqB,CACzB,YACA,UACkE;AAClE,QAAM,cAAc,YAAY,OAAO,UAAU;AAEjD,QAAM,cAAc,eAAe,WAAW;AAC9C,QAAM,eAAe,sBAAsB,WAAW;AAEtD,SAAO;AAAA,IACL,aAAa;AAAA,IACb,oBAAoB;AAAA,EACtB;AACF;AAEA,MAAM,cAAc,CAClB,MACA,WACA,OACA,UACsB;AACtB,QAAM,WAA8B,CAAC;AACrC,OAAK,QAAQ,CAAC,SAAS,UAAU;AAC/B,QAAI,QAAQ,KAAK,UAAU,GAAG;AAC5B,YAAM,iBAAiB;AAAA,QACrB;AAAA,QACA,cAAc,KAAK;AAAA,QACnB;AAAA,MACF;AAEA,YAAM,oBAAuC;AAAA,QAC3C,GAAG;AAAA,QACH,aAAa;AAAA,QACb,GAAG,mBAAmB,SAAS,KAAK;AAAA,MACtC;AAEA,eAAS,KAAK,eAAe,QAAQ,MAAM,iBAAiB,CAAC;AAAA,IAC/D;AAAA,EACF,CAAC;AACD,SAAO;AACT;AAEO,MAAM,+BAA+B,CAC1C,MACA,WACA,OACA,UAC2C;AAC3C,QAAM,UAAqC;AAAA,IACzC,MAAM;AAAA,IACN,UAAU,YAAY,MAAM,WAAW,OAAO,KAAK;AAAA,EACrD;AAEA,SAAO,EAAE,QAAQ;AACnB;",
   "names": []
 }

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

@@ -14,6 +14,7 @@ import {
   SHAPE_OPACITY_DIMMED,
   SHAPE_OPACITY_DEFAULT
 } from "../../constants.js";
+import { useLayerBeforeId } from "../../hooks/use-layer-before-id.js";
 import { useLayerColoringStrategy } from "../../hooks/use-layer-coloring-strategy.js";
 import { useLegendInteractionHighlighting } from "../../hooks/use-legend-interaction-highlighting.js";
 import { useLegendInteractionVisibility } from "../../hooks/use-legend-interaction-visibility.js";
@@ -53,11 +54,16 @@ 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);
-  const dataGeoJson = parseDotDataToGeoJSON(
+  const beforeId = useLayerBeforeId(layerId);
+  const { geoJson: dataGeoJson } = parseDotDataToGeoJSON(
     data,
     shapeColor,
     bearing,
@@ -70,6 +76,7 @@ const DotLayer = (props) => {
       {
         type: "symbol",
         id: layerId,
+        beforeId,
         layout: {
           "icon-image": symbolName,
           "icon-size": DEFAULT_ICON_SIZE_RATIO,
@@ -115,7 +122,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 { useLayerBeforeId } from '../../hooks/use-layer-before-id.js';\nimport { useLayerColoringStrategy } from '../../hooks/use-layer-coloring-strategy.js';\nimport { useLegendInteractionHighlighting } from '../../hooks/use-legend-interaction-highlighting.js';\nimport { useLegendInteractionVisibility } from '../../hooks/use-legend-interaction-visibility.js';\nimport { 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  const beforeId = useLayerBeforeId(layerId);\n\n  const { geoJson: 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        beforeId={beforeId}\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": "AAgGI,SACE,KADF;AAhGJ,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,wBAAwB;AACjC,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;AAC7C,QAAM,WAAW,iBAAiB,OAAO;AAEzC,QAAM,EAAE,SAAS,YAAY,IAAI;AAAA,IAC/B;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;AAAA,QACA,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  __backgroundColor: string;\n  __hoveredBackgroundColor: string;\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": "AAyDI;AAzDJ,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,0BAA0B;AAMnC,SAAS,+BAA+B;AAiBjC,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/components/DotLayer/utils/parse-dot-data-to-geo-json.js

@@ -4,18 +4,17 @@ import { resolveIconBackground } from "./resolve-icon-background.js";
 import { calculateHoveredColor } from "../../../utils/calculate-hovered-color.js";
 import { defineColor } from "../../../utils/define-color.js";
 const parseDotDataToGeoJSON = (data, color, bearing, backgroundColor) => {
-  return {
+  const geoJson = {
     type: "FeatureCollection",
-    features: data.map((feature) => {
-      const { longitude, latitude, ...properties } = feature;
+    features: data.map((feature, index) => {
+      const { longitude, latitude } = feature;
       const canvasColor = getCanvasColor(defineColor(color, feature));
       const hoveredColor = calculateHoveredColor(canvasColor);
       const { parsedBackgroundColor, parsedHoveredBackgroundColor } = resolveIconBackground(feature, backgroundColor);
       return {
         type: "Feature",
         properties: {
-          data: feature,
-          ...properties,
+          __dataIndex: index,
           __color: canvasColor,
           __hoveredColor: hoveredColor,
           __backgroundColor: parsedBackgroundColor,
@@ -26,6 +25,7 @@ const parseDotDataToGeoJSON = (data, color, bearing, backgroundColor) => {
       };
     })
   };
+  return { geoJson };
 };
 export {
   parseDotDataToGeoJSON

package/esm/map/components/DotLayer/utils/parse-dot-data-to-geo-json.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/map/components/DotLayer/utils/parse-dot-data-to-geo-json.ts"],
-  "sourcesContent": ["import type GeoJSON from 'geojson';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components/charts';\n\nimport { defineBearing } from './define-bearing.js';\nimport { resolveIconBackground } from './resolve-icon-background.js';\nimport type { Location } from '../../../types/location.js';\nimport { calculateHoveredColor } from '../../../utils/calculate-hovered-color.js';\nimport { defineColor } from '../../../utils/define-color.js';\n\nexport const parseDotDataToGeoJSON = <T extends Location>(\n  data: T[],\n  color: string | ((item: T) => string),\n  bearing: number | ((item: T) => number),\n  backgroundColor: boolean | string | ((item: T) => string),\n): GeoJSON.FeatureCollection => {\n  return {\n    type: 'FeatureCollection',\n    features: data.map((feature) => {\n      const { longitude, latitude, ...properties } = feature;\n      const canvasColor = getCanvasColor(defineColor(color, feature));\n      const hoveredColor = calculateHoveredColor(canvasColor);\n\n      const { parsedBackgroundColor, parsedHoveredBackgroundColor } =\n        resolveIconBackground(feature, backgroundColor);\n\n      return {\n        type: 'Feature',\n        properties: {\n          data: feature,\n          ...properties,\n          __color: canvasColor,\n          __hoveredColor: hoveredColor,\n          __backgroundColor: parsedBackgroundColor,\n          __hoveredBackgroundColor: parsedHoveredBackgroundColor,\n          __bearing: defineBearing(bearing, feature),\n        },\n        geometry: { type: 'Point', coordinates: [longitude, latitude] },\n      };\n    }),\n  };\n};\n"],
-  "mappings": "AAEA,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AAEtC,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAErB,MAAM,wBAAwB,CACnC,MACA,OACA,SACA,oBAC8B;AAC9B,SAAO;AAAA,IACL,MAAM;AAAA,IACN,UAAU,KAAK,IAAI,CAAC,YAAY;AAC9B,YAAM,EAAE,WAAW,UAAU,GAAG,WAAW,IAAI;AAC/C,YAAM,cAAc,eAAe,YAAY,OAAO,OAAO,CAAC;AAC9D,YAAM,eAAe,sBAAsB,WAAW;AAEtD,YAAM,EAAE,uBAAuB,6BAA6B,IAC1D,sBAAsB,SAAS,eAAe;AAEhD,aAAO;AAAA,QACL,MAAM;AAAA,QACN,YAAY;AAAA,UACV,MAAM;AAAA,UACN,GAAG;AAAA,UACH,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,mBAAmB;AAAA,UACnB,0BAA0B;AAAA,UAC1B,WAAW,cAAc,SAAS,OAAO;AAAA,QAC3C;AAAA,QACA,UAAU,EAAE,MAAM,SAAS,aAAa,CAAC,WAAW,QAAQ,EAAE;AAAA,MAChE;AAAA,IACF,CAAC;AAAA,EACH;AACF;",
+  "sourcesContent": ["import type GeoJSON from 'geojson';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components/charts';\n\nimport { defineBearing } from './define-bearing.js';\nimport { resolveIconBackground } from './resolve-icon-background.js';\nimport type { Location } from '../../../types/location.js';\nimport { calculateHoveredColor } from '../../../utils/calculate-hovered-color.js';\nimport { defineColor } from '../../../utils/define-color.js';\n\nexport const parseDotDataToGeoJSON = <T extends Location>(\n  data: T[],\n  color: string | ((item: T) => string),\n  bearing: number | ((item: T) => number),\n  backgroundColor: boolean | string | ((item: T) => string),\n): { geoJson: GeoJSON.FeatureCollection } => {\n  const geoJson: GeoJSON.FeatureCollection = {\n    type: 'FeatureCollection',\n    features: data.map((feature, index) => {\n      const { longitude, latitude } = feature;\n      const canvasColor = getCanvasColor(defineColor(color, feature));\n      const hoveredColor = calculateHoveredColor(canvasColor);\n\n      const { parsedBackgroundColor, parsedHoveredBackgroundColor } =\n        resolveIconBackground(feature, backgroundColor);\n\n      return {\n        type: 'Feature',\n        properties: {\n          __dataIndex: index,\n          __color: canvasColor,\n          __hoveredColor: hoveredColor,\n          __backgroundColor: parsedBackgroundColor,\n          __hoveredBackgroundColor: parsedHoveredBackgroundColor,\n          __bearing: defineBearing(bearing, feature),\n        },\n        geometry: { type: 'Point', coordinates: [longitude, latitude] },\n      };\n    }),\n  };\n\n  return { geoJson };\n};\n"],
+  "mappings": "AAEA,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AAEtC,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAErB,MAAM,wBAAwB,CACnC,MACA,OACA,SACA,oBAC2C;AAC3C,QAAM,UAAqC;AAAA,IACzC,MAAM;AAAA,IACN,UAAU,KAAK,IAAI,CAAC,SAAS,UAAU;AACrC,YAAM,EAAE,WAAW,SAAS,IAAI;AAChC,YAAM,cAAc,eAAe,YAAY,OAAO,OAAO,CAAC;AAC9D,YAAM,eAAe,sBAAsB,WAAW;AAEtD,YAAM,EAAE,uBAAuB,6BAA6B,IAC1D,sBAAsB,SAAS,eAAe;AAEhD,aAAO;AAAA,QACL,MAAM;AAAA,QACN,YAAY;AAAA,UACV,aAAa;AAAA,UACb,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,mBAAmB;AAAA,UACnB,0BAA0B;AAAA,UAC1B,WAAW,cAAc,SAAS,OAAO;AAAA,QAC3C;AAAA,QACA,UAAU,EAAE,MAAM,SAAS,aAAa,CAAC,WAAW,QAAQ,EAAE;AAAA,MAChE;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO,EAAE,QAAQ;AACnB;",
   "names": []
 }

package/esm/map/components/MapContent.js

@@ -7,6 +7,7 @@ import {
 import { isUndefined } from "lodash-es";
 import {
   forwardRef,
+  useCallback,
   useContext,
   useRef,
   useState
@@ -35,9 +36,9 @@ import { useMapBaseLayerFeatures } from "../hooks/use-map-base-layer-features.js
 import { useMapConfig } from "../hooks/use-map-config.js";
 import { useMapLoading } from "../hooks/use-map-loading.js";
 import { useMapPerformance } from "../hooks/use-map-performance.js";
+import { useMapRuntimeError } from "../hooks/use-map-runtime-error.js";
 import { useOverlayEvents } from "../hooks/use-overlay-events.js";
 import { useTooltipEventListeners } from "../hooks/use-tooltip-event-listeners.js";
-import { useWebGLContextError } from "../hooks/use-webgl-context-error.js";
 import { defaultStyle } from "../map-styles/default-style.js";
 import { MapViewImperativeHandler } from "../providers/imperative-handler.provider.js";
 import { getColorFromToken } from "../utils/get-color-from-token.js";
@@ -90,21 +91,23 @@ const MapSource = () => {
 };
 const MapInteractions = ({
   children,
-  onContextLostError
+  onContextLostError,
+  interactiveLayerIds
 }) => {
-  const [contextLostError, setContextLostError] = useState(null);
-  useHoverInteraction();
-  useActiveInteraction();
-  useWebGLContextError(() => {
+  const [runtimeError, setRuntimeError] = useState(null);
+  const onRuntimeError = useCallback(() => {
     onContextLostError?.();
-    setContextLostError(
+    setRuntimeError(
       new Error(
-        "Too many active maps. This is a browser limitation. Try reducing the number of map instances."
+        "The map encountered repeated rendering errors and could not recover. Please reload the page."
       )
     );
-  });
-  if (contextLostError) {
-    throw contextLostError;
+  }, [onContextLostError]);
+  useHoverInteraction(interactiveLayerIds);
+  useActiveInteraction(interactiveLayerIds);
+  useMapRuntimeError({ onError: onRuntimeError });
+  if (runtimeError) {
+    throw runtimeError;
   }
   return children;
 };
@@ -231,7 +234,14 @@ const MapContent = forwardRef((props, forwardedRef) => {
               children: [
                 /* @__PURE__ */ jsx(MapSource, {}),
                 loading ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(MapInteractions, { onContextLostError, children }),
+                  /* @__PURE__ */ jsx(
+                    MapInteractions,
+                    {
+                      onContextLostError,
+                      interactiveLayerIds: layerIds,
+                      children
+                    }
+                  ),
                   shouldRenderToolbar ? /* @__PURE__ */ jsx(MapToolbar, {}) : null
                 ] })
               ]