@dynatrace/strato-geo 3.6.0 → 3.7.0

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, hidden, symbolAlignment } = props;
-  const {
-    data: rawData,
-    inBounds,
-    position
-  } = useGeoLayerTooltip("geoConnection");
-  const data = restoreNullProps(rawData);
+  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) {

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  hidden?: boolean;\n  symbolAlignment?: 'left' | 'right';\n}\n\nexport const ConnectionLayerTooltip = (props: ConnectionLayerTooltipProps) => {\n  const { tooltipTemplate, hidden, symbolAlignment } = props;\n\n  const {\n    data: rawData,\n    inBounds,\n    position,\n  } = useGeoLayerTooltip<ConnectionTooltipStatePayload>('geoConnection');\n\n  const data = restoreNullProps(rawData);\n\n  if (hidden || !tooltipTemplate || !inBounds || !position) {\n    return null;\n  }\n\n  if (!data || !data[0]) {\n    return null;\n  }\n\n  const { __lineColor: color, __lineWidth: thickness, ...rest } = data[0];\n  const connectionData: ConnectionLayerTooltipData<Connection> = {\n    color,\n    thickness,\n    data: rest as Connection,\n  };\n\n  const template = tooltipTemplate(connectionData);\n\n  if (!template) {\n    return null;\n  }\n\n  if (isDefaultTooltipHandler(tooltipTemplate)) {\n    return template;\n  }\n\n  return (\n    <OverlayTooltip\n      legacyTemplate={template}\n      symbolAlignment={symbolAlignment}\n    />\n  );\n};\n\nConnectionLayerTooltip['displayName'] = 'ConnectionLayerTooltip';\n"],
-  "mappings": "AAyDI;AAzDJ,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AASnC,SAAS,+BAA+B;AAQjC,MAAM,yBAAyB,CAAC,UAAuC;AAC5E,QAAM,EAAE,iBAAiB,QAAQ,gBAAgB,IAAI;AAErD,QAAM;AAAA,IACJ,MAAM;AAAA,IACN;AAAA,IACA;AAAA,EACF,IAAI,mBAAkD,eAAe;AAErE,QAAM,OAAO,iBAAiB,OAAO;AAErC,MAAI,UAAU,CAAC,mBAAmB,CAAC,YAAY,CAAC,UAAU;AACxD,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG;AACrB,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,aAAa,OAAO,aAAa,WAAW,GAAG,KAAK,IAAI,KAAK,CAAC;AACtE,QAAM,iBAAyD;AAAA,IAC7D;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EACR;AAEA,QAAM,WAAW,gBAAgB,cAAc;AAE/C,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,MAAI,wBAAwB,eAAe,GAAG;AAC5C,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAgB;AAAA,MAChB;AAAA;AAAA,EACF;AAEJ;AAEA,uBAAuB,aAAa,IAAI;",
+  "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";
@@ -61,7 +62,8 @@ const DotLayer = (props) => {
   const sourceId = `source-${layerId}`;
   useLegendInteractionHighlighting(props, sourceId);
   useLegendInteractionVisibility(props, layerId);
-  const dataGeoJson = parseDotDataToGeoJSON(
+  const beforeId = useLayerBeforeId(layerId);
+  const { geoJson: dataGeoJson } = parseDotDataToGeoJSON(
     data,
     shapeColor,
     bearing,
@@ -74,6 +76,7 @@ const DotLayer = (props) => {
       {
         type: "symbol",
         id: layerId,
+        beforeId,
         layout: {
           "icon-image": symbolName,
           "icon-size": DEFAULT_ICON_SIZE_RATIO,

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 {\n    handler: tooltipTemplate,\n    hidden: tooltipHidden,\n    symbolAlignment,\n  } = useTooltipTemplate(children, DotLayerTooltipSlot, { extractProps: true });\n\n  const sourceId = `source-${layerId}`;\n  useLegendInteractionHighlighting(props, sourceId);\n  useLegendInteractionVisibility(props, layerId);\n\n  const dataGeoJson = parseDotDataToGeoJSON(\n    data,\n    shapeColor,\n    bearing,\n    background,\n  );\n\n  const iconAnchor = shape === 'pin' ? 'bottom' : 'center';\n\n  return (\n    <Source id={sourceId} type=\"geojson\" data={dataGeoJson} generateId>\n      <Layer\n        type=\"symbol\"\n        id={layerId}\n        layout={{\n          'icon-image': symbolName,\n          'icon-size': DEFAULT_ICON_SIZE_RATIO,\n          'icon-rotate': ['get', '__bearing'],\n          // https://maplibre.org/maplibre-style-spec/layers/#layout-symbol-icon-ignore-placement\n          'icon-ignore-placement': true,\n          'icon-anchor': iconAnchor,\n        }}\n        paint={{\n          'icon-color': ['get', '__color'],\n          'icon-opacity': [\n            'case',\n            ['boolean', ['feature-state', 'legendHover'], true],\n            SHAPE_OPACITY_DEFAULT,\n            SHAPE_OPACITY_DIMMED,\n          ],\n        }}\n        {...behavioralTrackingProps}\n      />\n      {shape !== 'pin' ? (\n        <BackgroundLayer\n          background={Boolean(background)}\n          beforeId={layerId}\n          source={sourceId}\n          radius={calculatedShapeSize / 2}\n          iconAnchor={iconAnchor}\n        />\n      ) : (\n        <BackgroundSymbolLayer\n          background={Boolean(background)}\n          beforeId={layerId}\n          source={sourceId}\n          radius={calculatedShapeSize / 2}\n          iconAnchor={iconAnchor}\n          symbolName={bgName}\n          layerId={bgLayerId}\n          shape={shape}\n        />\n      )}\n      <TooltipWrapper layerId={layerId}>\n        <DotLayerTooltip\n          tooltipTemplate={\n            isDotTooltipTemplate(tooltipTemplate) ? tooltipTemplate : undefined\n          }\n          hidden={tooltipHidden}\n          symbolAlignment={symbolAlignment}\n        />\n      </TooltipWrapper>\n    </Source>\n  );\n};\n\nDotLayer['displayName'] = 'DotLayer';\n"],
-  "mappings": "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",
+  "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.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  hidden?: boolean;\n  symbolAlignment?: 'left' | 'right';\n}\n\nexport const DotLayerTooltip = (props: DotLayerTooltipProps) => {\n  const { tooltipTemplate, hidden, symbolAlignment } = props;\n\n  const { data, inBounds, position } =\n    useGeoLayerTooltip<DotTooltipStatePayload>('geoDot');\n\n  if (hidden || !tooltipTemplate || !inBounds || !position) {\n    return null;\n  }\n\n  if (!data || !data[0]) {\n    return null;\n  }\n\n  const { __color: color, __bearing: bearing, data: customData } = data[0];\n  const dotData: DotLayerTooltipData = {\n    color,\n    bearing,\n    data: customData,\n  };\n\n  const template = tooltipTemplate(dotData);\n\n  if (!template) {\n    return null;\n  }\n\n  if (isDefaultTooltipHandler(tooltipTemplate)) {\n    return template;\n  }\n\n  return (\n    <OverlayTooltip\n      legacyTemplate={template}\n      symbolAlignment={symbolAlignment}\n    />\n  );\n};\n\nDotLayerTooltip['displayName'] = 'DotLayerTooltip';\n"],
-  "mappings": "AAuDI;AAvDJ,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,0BAA0B;AAMnC,SAAS,+BAA+B;AAejC,MAAM,kBAAkB,CAAC,UAAgC;AAC9D,QAAM,EAAE,iBAAiB,QAAQ,gBAAgB,IAAI;AAErD,QAAM,EAAE,MAAM,UAAU,SAAS,IAC/B,mBAA2C,QAAQ;AAErD,MAAI,UAAU,CAAC,mBAAmB,CAAC,YAAY,CAAC,UAAU;AACxD,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG;AACrB,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,SAAS,OAAO,WAAW,SAAS,MAAM,WAAW,IAAI,KAAK,CAAC;AACvE,QAAM,UAA+B;AAAA,IACnC;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EACR;AAEA,QAAM,WAAW,gBAAgB,OAAO;AAExC,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,MAAI,wBAAwB,eAAe,GAAG;AAC5C,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAgB;AAAA,MAChB;AAAA;AAAA,EACF;AAEJ;AAEA,gBAAgB,aAAa,IAAI;",
+  "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
                 ] })
               ]

package/esm/map/components/MapContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/components/MapContent.tsx"],
-  "sourcesContent": ["import {\n  Layer,\n  type LayerProps,\n  Map,\n  Source,\n  type ViewStateChangeEvent,\n} from '@vis.gl/react-maplibre';\nimport { isUndefined } from 'lodash-es';\nimport type { MapLayerMouseEvent } from 'maplibre-gl';\nimport {\n  forwardRef,\n  type PropsWithChildren,\n  useContext,\n  useRef,\n  useState,\n} from 'react';\n\nimport { _useGraphSize as useGraphSize } from '@dynatrace/strato-components/charts';\nimport { useMergeRefs } from '@dynatrace/strato-components/core';\n\nimport {\n  BASE_LAYER_FILL_ID,\n  BASE_LAYER_LINE_ID,\n  COUNTRY_BORDER_WIDTH,\n  DEFAULT_BOUNDARIES_BORDER_COLOR,\n  DEFAULT_COUNTRIES_FILL_COLOR,\n  MAX_LATITUDE,\n  MAX_LONGITUDE,\n  MIN_LATITUDE,\n  MIN_LONGITUDE,\n  REGION_BORDER_WIDTH,\n} from '../constants.js';\nimport { useMapZoomState, useSetStateZoom } from '../store/store.js';\nimport { MapToolbar } from './toolbar/MapToolbar.js';\nimport { LayerIdsContext } from '../contexts/layer-ids.context.js';\nimport { MapDataBoundingBoxContext } from '../contexts/map-data-bounding-box.context.js';\nimport { useActiveInteraction } from '../hooks/use-active-interaction.js';\nimport { useHoverInteraction } from '../hooks/use-hover-interaction.js';\nimport { useMapBaseLayerFeatures } from '../hooks/use-map-base-layer-features.js';\nimport { useMapConfig } from '../hooks/use-map-config.js';\nimport { useMapLoading } from '../hooks/use-map-loading.js';\nimport { useMapPerformance } from '../hooks/use-map-performance.js';\nimport { useOverlayEvents } from '../hooks/use-overlay-events.js';\nimport { useTooltipEventListeners } from '../hooks/use-tooltip-event-listeners.js';\nimport { useWebGLContextError } from '../hooks/use-webgl-context-error.js';\nimport { defaultStyle } from '../map-styles/default-style.js';\nimport { MapViewImperativeHandler } from '../providers/imperative-handler.provider.js';\nimport type {\n  MapViewProps,\n  MapViewRef,\n  ViewStateRequired,\n} from '../types/map-view.js';\nimport { getColorFromToken } from '../utils/get-color-from-token.js';\nimport { getDataLayersBoundingBox } from '../utils/get-data-layers-bounding-box.js';\nimport { toMapBoxInitialViewState } from '../utils/to-mapbox-initial-view-state.js';\nimport { useSetMapInitialConfiguration } from '../utils/use-set-map-initial-configuration.js';\nimport { generateNewZoomState } from './toolbar/utils/zoom-state-utils.js';\n\nconst lineLayer: LayerProps = {\n  id: BASE_LAYER_LINE_ID,\n  type: 'line',\n};\n\nconst fillLayer: LayerProps = {\n  id: BASE_LAYER_FILL_ID,\n  type: 'fill',\n};\n\nconst MapSource = () => {\n  const baseLayerFeatures = useMapBaseLayerFeatures();\n  return (\n    baseLayerFeatures && (\n      <Source id=\"data\" type=\"geojson\" data={baseLayerFeatures}>\n        <Layer\n          {...fillLayer}\n          paint={{\n            'fill-color': getColorFromToken(DEFAULT_COUNTRIES_FILL_COLOR),\n          }}\n        />\n        <Layer\n          {...lineLayer}\n          type=\"line\"\n          filter={[\n            'any',\n            ['==', 'region_type', 'COUNTRY'],\n            ['==', 'region_type', 'REGION'],\n          ]}\n          paint={{\n            'line-color': getColorFromToken(DEFAULT_BOUNDARIES_BORDER_COLOR),\n            'line-width': [\n              'case',\n              ['==', ['get', 'region_type'], 'REGION'],\n              REGION_BORDER_WIDTH,\n              COUNTRY_BORDER_WIDTH,\n            ],\n          }}\n        />\n      </Source>\n    )\n  );\n};\n\nconst MapInteractions = ({\n  children,\n  onContextLostError,\n}: PropsWithChildren<{\n  onContextLostError?: () => void;\n}>) => {\n  const [contextLostError, setContextLostError] = useState<Error | null>(null);\n\n  useHoverInteraction();\n  useActiveInteraction();\n  useWebGLContextError(() => {\n    onContextLostError?.();\n    setContextLostError(\n      new Error(\n        'Too many active maps. This is a browser limitation. Try reducing the number of map instances.',\n      ),\n    );\n  });\n\n  if (contextLostError) {\n    throw contextLostError;\n  }\n\n  return children;\n};\ntype MapContentProps = MapViewProps & {\n  onMapLoad: () => void;\n};\n\nexport const MapContent = forwardRef<\n  MapViewRef,\n  PropsWithChildren<MapContentProps>\n>((props, forwardedRef) => {\n  const {\n    initialViewState: initialViewStateProp,\n    children,\n    style,\n    mapStyle = defaultStyle,\n    onViewStateChange,\n    onMapLoad,\n    onContextLostError,\n    ...remaining\n  } = props;\n\n  const loading = useMapLoading();\n  const setZoomState = useSetStateZoom();\n  const [savedInitialViewState, setSavedInitialViewState] = useState<\n    ViewStateRequired | undefined\n  >();\n\n  const mapContainerRef = useRef<HTMLDivElement>(null);\n\n  const mergedRefs = useMergeRefs<MapViewRef | HTMLDivElement>([\n    mapContainerRef,\n    forwardedRef,\n  ]);\n\n  const baseFeatureCollection = useMapBaseLayerFeatures();\n\n  const dataLayersBBox = getDataLayersBoundingBox(\n    children,\n    baseFeatureCollection?.features,\n  );\n\n  useTooltipEventListeners();\n\n  const { toolbar: toolbarConfig, interactions: interactionsConfig } =\n    useMapConfig();\n  const layerIds = useContext(LayerIdsContext);\n\n  const shouldRenderToolbar =\n    (!isUndefined(toolbarConfig) && !toolbarConfig.hidden) ||\n    !isUndefined(interactionsConfig);\n\n  const { height: graphHeight, width: graphWidth } = useGraphSize();\n\n  const {\n    handleMouseEnter,\n    handleMouseMove,\n    handleMouseLeave,\n    handleMouseClick,\n    handleZoom,\n    handleDrag,\n  } = useOverlayEvents();\n\n  const initialViewState = initialViewStateProp ?? dataLayersBBox;\n\n  const { onLoadHandler, onRenderHandler } = useMapPerformance(mapContainerRef);\n  const calculatedInitialViewState = toMapBoxInitialViewState(initialViewState);\n\n  const { zoomToFitInProgress } = useMapZoomState();\n\n  const handleZoomEnd = (event: ViewStateChangeEvent) => {\n    if (savedInitialViewState) {\n      const zoomState = generateNewZoomState(\n        event,\n        savedInitialViewState,\n        zoomToFitInProgress,\n      );\n\n      setZoomState(zoomState);\n    }\n  };\n\n  const handleDragEnd = (event: ViewStateChangeEvent) => {\n    if (savedInitialViewState) {\n      const zoomState = generateNewZoomState(\n        event,\n        savedInitialViewState,\n        zoomToFitInProgress,\n      );\n\n      setZoomState(zoomState);\n    }\n  };\n\n  const isZoomEnabled = toolbarConfig?.zoom?.enabled !== false;\n\n  return (\n    <div\n      data-testid=\"map-container\"\n      ref={mergedRefs}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      <Map\n        style={{\n          width: graphWidth,\n          height: `${graphHeight}px`,\n          ...style,\n        }}\n        onMove={(evt) => {\n          onViewStateChange?.(evt.viewState);\n        }}\n        initialViewState={calculatedInitialViewState}\n        mapStyle={mapStyle}\n        dragRotate={false}\n        fadeDuration={0}\n        renderWorldCopies={false}\n        interactiveLayerIds={layerIds}\n        maxBounds={[\n          [MIN_LONGITUDE, MIN_LATITUDE],\n          [MAX_LONGITUDE, MAX_LATITUDE],\n        ]}\n        onMouseMove={(e) => handleMouseMove(e as MapLayerMouseEvent)}\n        onClick={(e) => handleMouseClick(e as MapLayerMouseEvent)}\n        onZoom={handleZoom}\n        onZoomEnd={handleZoomEnd}\n        onDrag={handleDrag}\n        onDragEnd={handleDragEnd}\n        boxZoom={isZoomEnabled}\n        keyboard={isZoomEnabled}\n        scrollZoom={isZoomEnabled}\n        doubleClickZoom={isZoomEnabled}\n        attributionControl={false}\n        onRender={() => onRenderHandler && onRenderHandler()}\n        onLoad={(e) => {\n          onMapLoad();\n          onLoadHandler && onLoadHandler();\n\n          const initialCenter = e.target.getCenter();\n\n          setSavedInitialViewState({\n            latitude: initialCenter.lat,\n            longitude: initialCenter.lng,\n            zoom: e.target.getZoom(),\n          });\n        }}\n        ref={useSetMapInitialConfiguration()}\n        interactive\n        {...remaining}\n      >\n        <MapDataBoundingBoxContext.Provider value={dataLayersBBox}>\n          <MapViewImperativeHandler\n            forwardedRef={forwardedRef}\n            containerRef={mapContainerRef}\n          >\n            <MapSource />\n            {loading ? null : (\n              <>\n                <MapInteractions onContextLostError={onContextLostError}>\n                  {children}\n                </MapInteractions>\n                {shouldRenderToolbar ? <MapToolbar /> : null}\n              </>\n            )}\n          </MapViewImperativeHandler>\n        </MapDataBoundingBoxContext.Provider>\n      </Map>\n    </div>\n  );\n});\n\n(MapContent as typeof MapContent & { displayName: string }).displayName =\n  'MapContent';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  Layer,\n  type LayerProps,\n  Map,\n  Source,\n  type ViewStateChangeEvent,\n} from '@vis.gl/react-maplibre';\nimport { isUndefined } from 'lodash-es';\nimport { type MapLayerMouseEvent } from 'maplibre-gl';\nimport {\n  forwardRef,\n  type PropsWithChildren,\n  useCallback,\n  useContext,\n  useRef,\n  useState,\n} from 'react';\n\nimport { _useGraphSize as useGraphSize } from '@dynatrace/strato-components/charts';\nimport { useMergeRefs } from '@dynatrace/strato-components/core';\n\nimport {\n  BASE_LAYER_FILL_ID,\n  BASE_LAYER_LINE_ID,\n  COUNTRY_BORDER_WIDTH,\n  DEFAULT_BOUNDARIES_BORDER_COLOR,\n  DEFAULT_COUNTRIES_FILL_COLOR,\n  MAX_LATITUDE,\n  MAX_LONGITUDE,\n  MIN_LATITUDE,\n  MIN_LONGITUDE,\n  REGION_BORDER_WIDTH,\n} from '../constants.js';\nimport { useMapZoomState, useSetStateZoom } from '../store/store.js';\nimport { MapToolbar } from './toolbar/MapToolbar.js';\nimport { LayerIdsContext } from '../contexts/layer-ids.context.js';\nimport { MapDataBoundingBoxContext } from '../contexts/map-data-bounding-box.context.js';\nimport { useActiveInteraction } from '../hooks/use-active-interaction.js';\nimport { useHoverInteraction } from '../hooks/use-hover-interaction.js';\nimport { useMapBaseLayerFeatures } from '../hooks/use-map-base-layer-features.js';\nimport { useMapConfig } from '../hooks/use-map-config.js';\nimport { useMapLoading } from '../hooks/use-map-loading.js';\nimport { useMapPerformance } from '../hooks/use-map-performance.js';\nimport { useMapRuntimeError } from '../hooks/use-map-runtime-error.js';\nimport { useOverlayEvents } from '../hooks/use-overlay-events.js';\nimport { useTooltipEventListeners } from '../hooks/use-tooltip-event-listeners.js';\nimport { defaultStyle } from '../map-styles/default-style.js';\nimport { MapViewImperativeHandler } from '../providers/imperative-handler.provider.js';\nimport type {\n  MapViewProps,\n  MapViewRef,\n  ViewStateRequired,\n} from '../types/map-view.js';\nimport { getColorFromToken } from '../utils/get-color-from-token.js';\nimport { getDataLayersBoundingBox } from '../utils/get-data-layers-bounding-box.js';\nimport { toMapBoxInitialViewState } from '../utils/to-mapbox-initial-view-state.js';\nimport { useSetMapInitialConfiguration } from '../utils/use-set-map-initial-configuration.js';\nimport { generateNewZoomState } from './toolbar/utils/zoom-state-utils.js';\n\nconst lineLayer: LayerProps = {\n  id: BASE_LAYER_LINE_ID,\n  type: 'line',\n};\n\nconst fillLayer: LayerProps = {\n  id: BASE_LAYER_FILL_ID,\n  type: 'fill',\n};\n\nconst MapSource = () => {\n  const baseLayerFeatures = useMapBaseLayerFeatures();\n  return (\n    baseLayerFeatures && (\n      <Source id=\"data\" type=\"geojson\" data={baseLayerFeatures}>\n        <Layer\n          {...fillLayer}\n          paint={{\n            'fill-color': getColorFromToken(DEFAULT_COUNTRIES_FILL_COLOR),\n          }}\n        />\n        <Layer\n          {...lineLayer}\n          type=\"line\"\n          filter={[\n            'any',\n            ['==', 'region_type', 'COUNTRY'],\n            ['==', 'region_type', 'REGION'],\n          ]}\n          paint={{\n            'line-color': getColorFromToken(DEFAULT_BOUNDARIES_BORDER_COLOR),\n            'line-width': [\n              'case',\n              ['==', ['get', 'region_type'], 'REGION'],\n              REGION_BORDER_WIDTH,\n              COUNTRY_BORDER_WIDTH,\n            ],\n          }}\n        />\n      </Source>\n    )\n  );\n};\n\nconst MapInteractions = ({\n  children,\n  onContextLostError,\n  interactiveLayerIds,\n}: PropsWithChildren<{\n  onContextLostError?: () => void;\n  interactiveLayerIds: string[];\n}>) => {\n  const [runtimeError, setRuntimeError] = useState<Error | null>(null);\n\n  const onRuntimeError = useCallback(() => {\n    onContextLostError?.();\n    setRuntimeError(\n      new Error(\n        'The map encountered repeated rendering errors and could not recover. Please reload the page.',\n      ),\n    );\n  }, [onContextLostError]);\n\n  useHoverInteraction(interactiveLayerIds);\n  useActiveInteraction(interactiveLayerIds);\n  useMapRuntimeError({ onError: onRuntimeError });\n\n  if (runtimeError) {\n    throw runtimeError;\n  }\n\n  return children;\n};\ntype MapContentProps = MapViewProps & {\n  onMapLoad: () => void;\n};\n\nexport const MapContent = forwardRef<\n  MapViewRef,\n  PropsWithChildren<MapContentProps>\n>((props, forwardedRef) => {\n  const {\n    initialViewState: initialViewStateProp,\n    children,\n    style,\n    mapStyle = defaultStyle,\n    onViewStateChange,\n    onMapLoad,\n    onContextLostError,\n    ...remaining\n  } = props;\n\n  const loading = useMapLoading();\n  const setZoomState = useSetStateZoom();\n  const [savedInitialViewState, setSavedInitialViewState] = useState<\n    ViewStateRequired | undefined\n  >();\n\n  const mapContainerRef = useRef<HTMLDivElement>(null);\n\n  const mergedRefs = useMergeRefs<MapViewRef | HTMLDivElement>([\n    mapContainerRef,\n    forwardedRef,\n  ]);\n\n  const baseFeatureCollection = useMapBaseLayerFeatures();\n\n  const dataLayersBBox = getDataLayersBoundingBox(\n    children,\n    baseFeatureCollection?.features,\n  );\n\n  useTooltipEventListeners();\n\n  const { toolbar: toolbarConfig, interactions: interactionsConfig } =\n    useMapConfig();\n  const layerIds = useContext(LayerIdsContext);\n\n  const shouldRenderToolbar =\n    (!isUndefined(toolbarConfig) && !toolbarConfig.hidden) ||\n    !isUndefined(interactionsConfig);\n\n  const { height: graphHeight, width: graphWidth } = useGraphSize();\n\n  const {\n    handleMouseEnter,\n    handleMouseMove,\n    handleMouseLeave,\n    handleMouseClick,\n    handleZoom,\n    handleDrag,\n  } = useOverlayEvents();\n\n  const initialViewState = initialViewStateProp ?? dataLayersBBox;\n\n  const { onLoadHandler, onRenderHandler } = useMapPerformance(mapContainerRef);\n  const calculatedInitialViewState = toMapBoxInitialViewState(initialViewState);\n\n  const { zoomToFitInProgress } = useMapZoomState();\n\n  const handleZoomEnd = (event: ViewStateChangeEvent) => {\n    if (savedInitialViewState) {\n      const zoomState = generateNewZoomState(\n        event,\n        savedInitialViewState,\n        zoomToFitInProgress,\n      );\n\n      setZoomState(zoomState);\n    }\n  };\n\n  const handleDragEnd = (event: ViewStateChangeEvent) => {\n    if (savedInitialViewState) {\n      const zoomState = generateNewZoomState(\n        event,\n        savedInitialViewState,\n        zoomToFitInProgress,\n      );\n\n      setZoomState(zoomState);\n    }\n  };\n\n  const isZoomEnabled = toolbarConfig?.zoom?.enabled !== false;\n\n  return (\n    <div\n      data-testid=\"map-container\"\n      ref={mergedRefs}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      <Map\n        style={{\n          width: graphWidth,\n          height: `${graphHeight}px`,\n          ...style,\n        }}\n        onMove={(evt) => {\n          onViewStateChange?.(evt.viewState);\n        }}\n        initialViewState={calculatedInitialViewState}\n        mapStyle={mapStyle}\n        dragRotate={false}\n        fadeDuration={0}\n        renderWorldCopies={false}\n        interactiveLayerIds={layerIds}\n        maxBounds={[\n          [MIN_LONGITUDE, MIN_LATITUDE],\n          [MAX_LONGITUDE, MAX_LATITUDE],\n        ]}\n        onMouseMove={(e) => handleMouseMove(e as MapLayerMouseEvent)}\n        onClick={(e) => handleMouseClick(e as MapLayerMouseEvent)}\n        onZoom={handleZoom}\n        onZoomEnd={handleZoomEnd}\n        onDrag={handleDrag}\n        onDragEnd={handleDragEnd}\n        boxZoom={isZoomEnabled}\n        keyboard={isZoomEnabled}\n        scrollZoom={isZoomEnabled}\n        doubleClickZoom={isZoomEnabled}\n        attributionControl={false}\n        onRender={() => onRenderHandler && onRenderHandler()}\n        onLoad={(e) => {\n          onMapLoad();\n          onLoadHandler && onLoadHandler();\n\n          const initialCenter = e.target.getCenter();\n\n          setSavedInitialViewState({\n            latitude: initialCenter.lat,\n            longitude: initialCenter.lng,\n            zoom: e.target.getZoom(),\n          });\n        }}\n        ref={useSetMapInitialConfiguration()}\n        interactive\n        {...remaining}\n      >\n        <MapDataBoundingBoxContext.Provider value={dataLayersBBox}>\n          <MapViewImperativeHandler\n            forwardedRef={forwardedRef}\n            containerRef={mapContainerRef}\n          >\n            <MapSource />\n            {loading ? null : (\n              <>\n                <MapInteractions\n                  onContextLostError={onContextLostError}\n                  interactiveLayerIds={layerIds}\n                >\n                  {children}\n                </MapInteractions>\n                {shouldRenderToolbar ? <MapToolbar /> : null}\n              </>\n            )}\n          </MapViewImperativeHandler>\n        </MapDataBoundingBoxContext.Provider>\n      </Map>\n    </div>\n  );\n});\n\n(MapContent as typeof MapContent & { displayName: string }).displayName =\n  'MapContent';\n"],
+  "mappings": "AAyEM,SAqNQ,UApNN,KADF;AAzEN;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,mBAAmB;AAE5B;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,iBAAiB,oBAAoB;AAC9C,SAAS,oBAAoB;AAE7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB,uBAAuB;AACjD,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,iCAAiC;AAC1C,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,+BAA+B;AACxC,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AACzC,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AAMzC,SAAS,yBAAyB;AAClC,SAAS,gCAAgC;AACzC,SAAS,gCAAgC;AACzC,SAAS,qCAAqC;AAC9C,SAAS,4BAA4B;AAErC,MAAM,YAAwB;AAAA,EAC5B,IAAI;AAAA,EACJ,MAAM;AACR;AAEA,MAAM,YAAwB;AAAA,EAC5B,IAAI;AAAA,EACJ,MAAM;AACR;AAEA,MAAM,YAAY,MAAM;AACtB,QAAM,oBAAoB,wBAAwB;AAClD,SACE,qBACE,qBAAC,UAAO,IAAG,QAAO,MAAK,WAAU,MAAM,mBACrC;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,OAAO;AAAA,UACL,cAAc,kBAAkB,4BAA4B;AAAA,QAC9D;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAK;AAAA,QACL,QAAQ;AAAA,UACN;AAAA,UACA,CAAC,MAAM,eAAe,SAAS;AAAA,UAC/B,CAAC,MAAM,eAAe,QAAQ;AAAA,QAChC;AAAA,QACA,OAAO;AAAA,UACL,cAAc,kBAAkB,+BAA+B;AAAA,UAC/D,cAAc;AAAA,YACZ;AAAA,YACA,CAAC,MAAM,CAAC,OAAO,aAAa,GAAG,QAAQ;AAAA,YACvC;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA;AAAA,IACF;AAAA,KACF;AAGN;AAEA,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,MAGO;AACL,QAAM,CAAC,cAAc,eAAe,IAAI,SAAuB,IAAI;AAEnE,QAAM,iBAAiB,YAAY,MAAM;AACvC,yBAAqB;AACrB;AAAA,MACE,IAAI;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,kBAAkB,CAAC;AAEvB,sBAAoB,mBAAmB;AACvC,uBAAqB,mBAAmB;AACxC,qBAAmB,EAAE,SAAS,eAAe,CAAC;AAE9C,MAAI,cAAc;AAChB,UAAM;AAAA,EACR;AAEA,SAAO;AACT;AAKO,MAAM,aAAa,WAGxB,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,UAAU,cAAc;AAC9B,QAAM,eAAe,gBAAgB;AACrC,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,SAExD;AAEF,QAAM,kBAAkB,OAAuB,IAAI;AAEnD,QAAM,aAAa,aAA0C;AAAA,IAC3D;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,wBAAwB,wBAAwB;AAEtD,QAAM,iBAAiB;AAAA,IACrB;AAAA,IACA,uBAAuB;AAAA,EACzB;AAEA,2BAAyB;AAEzB,QAAM,EAAE,SAAS,eAAe,cAAc,mBAAmB,IAC/D,aAAa;AACf,QAAM,WAAW,WAAW,eAAe;AAE3C,QAAM,sBACH,CAAC,YAAY,aAAa,KAAK,CAAC,cAAc,UAC/C,CAAC,YAAY,kBAAkB;AAEjC,QAAM,EAAE,QAAQ,aAAa,OAAO,WAAW,IAAI,aAAa;AAEhE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,iBAAiB;AAErB,QAAM,mBAAmB,wBAAwB;AAEjD,QAAM,EAAE,eAAe,gBAAgB,IAAI,kBAAkB,eAAe;AAC5E,QAAM,6BAA6B,yBAAyB,gBAAgB;AAE5E,QAAM,EAAE,oBAAoB,IAAI,gBAAgB;AAEhD,QAAM,gBAAgB,CAAC,UAAgC;AACrD,QAAI,uBAAuB;AACzB,YAAM,YAAY;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAEA,mBAAa,SAAS;AAAA,IACxB;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,UAAgC;AACrD,QAAI,uBAAuB;AACzB,YAAM,YAAY;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAEA,mBAAa,SAAS;AAAA,IACxB;AAAA,EACF;AAEA,QAAM,gBAAgB,eAAe,MAAM,YAAY;AAEvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,KAAK;AAAA,MACL,cAAc;AAAA,MACd,cAAc;AAAA,MAEd;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,OAAO;AAAA,YACP,QAAQ,GAAG,WAAW;AAAA,YACtB,GAAG;AAAA,UACL;AAAA,UACA,QAAQ,CAAC,QAAQ;AACf,gCAAoB,IAAI,SAAS;AAAA,UACnC;AAAA,UACA,kBAAkB;AAAA,UAClB;AAAA,UACA,YAAY;AAAA,UACZ,cAAc;AAAA,UACd,mBAAmB;AAAA,UACnB,qBAAqB;AAAA,UACrB,WAAW;AAAA,YACT,CAAC,eAAe,YAAY;AAAA,YAC5B,CAAC,eAAe,YAAY;AAAA,UAC9B;AAAA,UACA,aAAa,CAAC,MAAM,gBAAgB,CAAuB;AAAA,UAC3D,SAAS,CAAC,MAAM,iBAAiB,CAAuB;AAAA,UACxD,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,SAAS;AAAA,UACT,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,iBAAiB;AAAA,UACjB,oBAAoB;AAAA,UACpB,UAAU,MAAM,mBAAmB,gBAAgB;AAAA,UACnD,QAAQ,CAAC,MAAM;AACb,sBAAU;AACV,6BAAiB,cAAc;AAE/B,kBAAM,gBAAgB,EAAE,OAAO,UAAU;AAEzC,qCAAyB;AAAA,cACvB,UAAU,cAAc;AAAA,cACxB,WAAW,cAAc;AAAA,cACzB,MAAM,EAAE,OAAO,QAAQ;AAAA,YACzB,CAAC;AAAA,UACH;AAAA,UACA,KAAK,8BAA8B;AAAA,UACnC,aAAW;AAAA,UACV,GAAG;AAAA,UAEJ,8BAAC,0BAA0B,UAA1B,EAAmC,OAAO,gBACzC;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,cAAc;AAAA,cAEd;AAAA,oCAAC,aAAU;AAAA,gBACV,UAAU,OACT,iCACE;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC;AAAA,sBACA,qBAAqB;AAAA,sBAEpB;AAAA;AAAA,kBACH;AAAA,kBACC,sBAAsB,oBAAC,cAAW,IAAK;AAAA,mBAC1C;AAAA;AAAA;AAAA,UAEJ,GACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAEA,WAA2D,cAC1D;",
   "names": []
 }

package/esm/map/contexts/geo-data-lookup.context.js

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+const GeoDataLookupContext = createContext(
+  /* @__PURE__ */ new Map()
+);
+export {
+  GeoDataLookupContext
+};
+//# sourceMappingURL=geo-data-lookup.context.js.map

package/esm/map/contexts/geo-data-lookup.context.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/map/contexts/geo-data-lookup.context.ts"],
+  "sourcesContent": ["import { createContext } from 'react';\n\n/**\n * @internal\n */\nexport type GeoDataLookup = Map<number, unknown>;\n\n/**\n * @internal\n */\nexport type GeoDataLookupRegistry = Map<string, GeoDataLookup>;\n\nexport const GeoDataLookupContext = createContext<GeoDataLookupRegistry>(\n  new Map(),\n);\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAYvB,MAAM,uBAAuB;AAAA,EAClC,oBAAI,IAAI;AACV;",
+  "names": []
+}