@dynatrace/strato-geo 1.0.3 → 1.2.1

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/ConnectionLayer/ConnectionLayer.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport { Layer, Source } from 'react-map-gl/maplibre';\n\nimport { ConnectionLayerDirection } from './ConnectionLayerDirection.js';\nimport { ConnectionLayerTooltip } from './ConnectionLayerTooltip.js';\nimport { useConnectionLayerMouseMove } from './hooks/use-connection-layer-mouse-move.js';\nimport { parseConnectionDataToGeoJSON } from './utils/parse-connection-data-to-geo-json.js';\nimport {\n  DEFAULT_LINE_CAP,\n  DEFAULT_LINE_COLOR,\n  DEFAULT_LINE_DASH_ARRAY,\n  DEFAULT_LINE_JOIN,\n  DEFAULT_LINE_THICKNESS,\n} from '../../constants.js';\nimport { useTooltipTemplate } from '../../hooks/use-tooltip-template.js';\nimport { ConnectionLayerTooltip as ConnectionLayerTooltipSlot } from '../../slots/ConnectionLayerTooltip.js';\nimport type {\n  InternalConnectionLayerProps,\n  Connection,\n} from '../../types/connection-layer.js';\nimport { isConnectionTooltipTemplate } from '../../utils/tooltip-type-guards.js';\n\nexport const ConnectionLayer = <T extends Connection>(\n  props: React.PropsWithChildren<InternalConnectionLayerProps<T>>,\n) => {\n  const {\n    data,\n    layerId,\n    children,\n    color = DEFAULT_LINE_COLOR,\n    curve,\n    directionIndicator,\n    line,\n    thickness = DEFAULT_LINE_THICKNESS,\n  } = props;\n\n  const sourceId = `source-${layerId}`;\n\n  const geoJsonData = parseConnectionDataToGeoJSON(\n    data,\n    thickness,\n    color,\n    curve,\n  );\n\n  const tooltipTemplate = useTooltipTemplate(\n    children,\n    ConnectionLayerTooltipSlot,\n  );\n\n  const { layerIds } = useConnectionLayerMouseMove(geoJsonData.length, layerId);\n\n  return geoJsonData.map((featureCollection, index) => (\n    <React.Fragment key={index}>\n      <Source\n        id={`${sourceId}-${index}`}\n        type=\"geojson\"\n        data={featureCollection}\n        promoteId={'id'}\n      >\n        <Layer\n          type=\"line\"\n          id={layerIds[index]}\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-width': ['get', '__lineWidth'],\n            ...(line && line === 'dashed'\n              ? { 'line-dasharray': DEFAULT_LINE_DASH_ARRAY }\n              : null),\n          }}\n        />\n      </Source>\n\n      <ConnectionLayerTooltip\n        layerId={layerIds[index]}\n        tooltipTemplate={\n          isConnectionTooltipTemplate(tooltipTemplate)\n            ? tooltipTemplate\n            : undefined\n        }\n      />\n\n      {directionIndicator && (\n        <ConnectionLayerDirection\n          geoJsonData={featureCollection}\n          layerId={layerIds[index]}\n          directionIndicator={directionIndicator}\n        />\n      )}\n    </React.Fragment>\n  ));\n};\n\nConnectionLayer['displayName'] = 'ConnectionLayer';\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,OAAO,cAAc;AAE9B,SAAS,gCAAgC;AACzC,SAAS,8BAA8B;AACvC,SAAS,mCAAmC;AAC5C,SAAS,oCAAoC;AAC7C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAA0B;AACnC,SAAS,0BAA0B,kCAAkC;AAKrE,SAAS,mCAAmC;AAErC,MAAM,kBAAkB,CAC7B,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd,IAAI;AAEJ,QAAM,WAAW,UAAU,OAAO;AAElC,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,kBAAkB;AAAA,IACtB;AAAA,IACA;AAAA,EACF;AAEA,QAAM,EAAE,SAAS,IAAI,4BAA4B,YAAY,QAAQ,OAAO;AAE5E,SAAO,YAAY,IAAI,CAAC,mBAAmB,UACzC,oCAAC,MAAM,UAAN,EAAe,KAAK,SACnB;AAAA,IAAC;AAAA;AAAA,MACC,IAAI,GAAG,QAAQ,IAAI,KAAK;AAAA,MACxB,MAAK;AAAA,MACL,MAAM;AAAA,MACN,WAAW;AAAA;AAAA,IAEX;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,IAAI,SAAS,KAAK;AAAA,QAClB,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,cAAc,CAAC,OAAO,aAAa;AAAA,UACnC,GAAI,QAAQ,SAAS,WACjB,EAAE,kBAAkB,wBAAwB,IAC5C;AAAA,QACN;AAAA;AAAA,IACF;AAAA,EACF,GAEA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,SAAS,KAAK;AAAA,MACvB,iBACE,4BAA4B,eAAe,IACvC,kBACA;AAAA;AAAA,EAER,GAEC,sBACC;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,SAAS,SAAS,KAAK;AAAA,MACvB;AAAA;AAAA,EACF,CAEJ,CACD;AACH;AAEA,gBAAgB,aAAa,IAAI;",
+  "sourcesContent": ["import React from 'react';\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';\n\nexport const ConnectionLayer = <T extends Connection>(\n  props: React.PropsWithChildren<InternalConnectionLayerProps<T>>,\n) => {\n  const {\n    data,\n    layerId,\n    children,\n    curve,\n    directionIndicator,\n    line,\n    thickness = DEFAULT_LINE_THICKNESS,\n  } = props;\n\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      />\n\n      {directionIndicator && (\n        <ConnectionLayerDirection\n          geoJsonData={geoJsonData}\n          layerId={layerId}\n          directionIndicator={directionIndicator}\n        />\n      )}\n\n      <ConnectionLayerTooltip\n        layerId={layerId}\n        tooltipTemplate={\n          isConnectionTooltipTemplate(tooltipTemplate)\n            ? tooltipTemplate\n            : undefined\n        }\n      />\n    </>\n  );\n};\n\nConnectionLayer['displayName'] = 'ConnectionLayer';\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAElB,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;AAErC,MAAM,kBAAkB,CAC7B,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd,IAAI;AAEJ,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,0DACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,GAEC,sBACC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,GAGF;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,iBACE,4BAA4B,eAAe,IACvC,kBACA;AAAA;AAAA,EAER,CACF;AAEJ;AAEA,gBAAgB,aAAa,IAAI;",
   "names": []
 }

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

@@ -1,10 +1,12 @@
+import { Layer, Source } from "@vis.gl/react-maplibre";
 import React from "react";
-import { Layer, Source } from "react-map-gl";
 import { SorterIcon } from "@dynatrace/strato-icons";
 import { parseDirectionDataToGeoJSON } from "./utils/parse-direction-data-to-geo-json.js";
 import {
   DIRECTION_ICON_OUTPUT_SIZE,
-  DIRECTION_ICON_SHRINK_RATIO
+  DIRECTION_ICON_SHRINK_RATIO,
+  SHAPE_OPACITY_DEFAULT,
+  SHAPE_OPACITY_DIMMED
 } from "../../constants.js";
 import { useLoadSymbolIntoMap } from "../../hooks/use-load-symbol-into-map.js";
 const ConnectionLayerDirection = (props) => {
@@ -55,7 +57,12 @@ const ConnectionLayerDirection = (props) => {
             ["get", "__lineHoveredColor"],
             ["get", "__lineColor"]
           ],
-          "icon-opacity": ["get", "__lineOpacity"]
+          "icon-opacity": [
+            "case",
+            ["boolean", ["feature-state", "legendHover"], true],
+            SHAPE_OPACITY_DEFAULT,
+            SHAPE_OPACITY_DIMMED
+          ]
         }
       }
     )

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/ConnectionLayer/ConnectionLayerDirection.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport { Layer, Source } from 'react-map-gl';\n\nimport { SorterIcon } from '@dynatrace/strato-icons';\n\nimport { parseDirectionDataToGeoJSON } from './utils/parse-direction-data-to-geo-json.js';\nimport {\n  DIRECTION_ICON_OUTPUT_SIZE,\n  DIRECTION_ICON_SHRINK_RATIO,\n} from '../../constants.js';\nimport { useLoadSymbolIntoMap } from '../../hooks/use-load-symbol-into-map.js';\nimport type {\n  InternalConnectionLayerProps,\n  Connection,\n} from '../../types/connection-layer.js';\n\ninterface ConnectionLayerDirectionProps<T extends Connection>\n  extends Required<\n    Pick<InternalConnectionLayerProps<T>, 'layerId' | 'directionIndicator'>\n  > {\n  geoJsonData: GeoJSON.FeatureCollection;\n}\n\nexport const ConnectionLayerDirection = <T extends Connection>(\n  props: ConnectionLayerDirectionProps<T>,\n) => {\n  const { geoJsonData, layerId: connectionLayerId, directionIndicator } = props;\n\n  const layerId = `${connectionLayerId}-direction`;\n  const sourceId = `source-${layerId}`;\n\n  // To get an image with enough quality instead of creating a tiny pic\n  // and enlarge it, we create a huge image to shrink it\n  const { symbolName } = useLoadSymbolIntoMap(\n    <SorterIcon />,\n    layerId,\n    DIRECTION_ICON_OUTPUT_SIZE,\n  );\n\n  const parsedGeoJsonData = parseDirectionDataToGeoJSON({\n    geoJsonData,\n    directionIndicator,\n  });\n\n  /**\n   * This value is necessary due to the icon\n   * that comes from the '\\@dynatrace/strato-icons'\n   * SorterIcon points downwards, but it should point upwards\n   * for the sake of the angle calculation.\n   */\n  const iconRotationDegrees = 180;\n\n  return (\n    <Source\n      id={sourceId}\n      type=\"geojson\"\n      data={parsedGeoJsonData}\n      promoteId={'id'}\n    >\n      <Layer\n        id={layerId}\n        beforeId={connectionLayerId}\n        type=\"symbol\"\n        layout={{\n          'symbol-placement': 'point',\n          'icon-image': symbolName,\n          'icon-rotate': ['+', ['get', '__angle'], iconRotationDegrees],\n          'icon-rotation-alignment': 'map',\n          'icon-allow-overlap': true,\n          'icon-ignore-placement': true,\n          'icon-size': [\n            '*',\n            ['get', '__lineWidth'],\n            DIRECTION_ICON_SHRINK_RATIO,\n          ],\n        }}\n        paint={{\n          'icon-color': [\n            'case',\n            ['boolean', ['feature-state', 'hover'], false],\n            ['get', '__lineHoveredColor'],\n            ['get', '__lineColor'],\n          ],\n          'icon-opacity': ['get', '__lineOpacity'],\n        }}\n      />\n    </Source>\n  );\n};\n\nConnectionLayerDirection['displayName'] = 'ConnectionLayerDirection';\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,OAAO,cAAc;AAE9B,SAAS,kBAAkB;AAE3B,SAAS,mCAAmC;AAC5C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AAa9B,MAAM,2BAA2B,CACtC,UACG;AACH,QAAM,EAAE,aAAa,SAAS,mBAAmB,mBAAmB,IAAI;AAExE,QAAM,UAAU,GAAG,iBAAiB;AACpC,QAAM,WAAW,UAAU,OAAO;AAIlC,QAAM,EAAE,WAAW,IAAI;AAAA,IACrB,oCAAC,gBAAW;AAAA,IACZ;AAAA,IACA;AAAA,EACF;AAEA,QAAM,oBAAoB,4BAA4B;AAAA,IACpD;AAAA,IACA;AAAA,EACF,CAAC;AAQD,QAAM,sBAAsB;AAE5B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,MAAM;AAAA,MACN,WAAW;AAAA;AAAA,IAEX;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,MAAK;AAAA,QACL,QAAQ;AAAA,UACN,oBAAoB;AAAA,UACpB,cAAc;AAAA,UACd,eAAe,CAAC,KAAK,CAAC,OAAO,SAAS,GAAG,mBAAmB;AAAA,UAC5D,2BAA2B;AAAA,UAC3B,sBAAsB;AAAA,UACtB,yBAAyB;AAAA,UACzB,aAAa;AAAA,YACX;AAAA,YACA,CAAC,OAAO,aAAa;AAAA,YACrB;AAAA,UACF;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,CAAC,OAAO,eAAe;AAAA,QACzC;AAAA;AAAA,IACF;AAAA,EACF;AAEJ;AAEA,yBAAyB,aAAa,IAAI;",
+  "sourcesContent": ["import { Layer, Source } from '@vis.gl/react-maplibre';\nimport React from 'react';\n\nimport { SorterIcon } from '@dynatrace/strato-icons';\n\nimport { parseDirectionDataToGeoJSON } from './utils/parse-direction-data-to-geo-json.js';\nimport {\n  DIRECTION_ICON_OUTPUT_SIZE,\n  DIRECTION_ICON_SHRINK_RATIO,\n  SHAPE_OPACITY_DEFAULT,\n  SHAPE_OPACITY_DIMMED,\n} from '../../constants.js';\nimport { useLoadSymbolIntoMap } from '../../hooks/use-load-symbol-into-map.js';\nimport type {\n  Connection,\n  InternalConnectionLayerProps,\n} from '../../types/connection-layer.js';\n\ninterface ConnectionLayerDirectionProps<T extends Connection>\n  extends Required<\n    Pick<InternalConnectionLayerProps<T>, 'layerId' | 'directionIndicator'>\n  > {\n  geoJsonData: GeoJSON.FeatureCollection;\n}\n\nexport const ConnectionLayerDirection = <T extends Connection>(\n  props: ConnectionLayerDirectionProps<T>,\n) => {\n  const { geoJsonData, layerId: connectionLayerId, directionIndicator } = props;\n\n  const layerId = `${connectionLayerId}-direction`;\n  const sourceId = `source-${layerId}`;\n\n  // To get an image with enough quality instead of creating a tiny pic\n  // and enlarge it, we create a huge image to shrink it\n  const { symbolName } = useLoadSymbolIntoMap(\n    <SorterIcon />,\n    layerId,\n    DIRECTION_ICON_OUTPUT_SIZE,\n  );\n\n  const parsedGeoJsonData = parseDirectionDataToGeoJSON({\n    geoJsonData,\n    directionIndicator,\n  });\n\n  /**\n   * This value is necessary due to the icon\n   * that comes from the '\\@dynatrace/strato-icons'\n   * SorterIcon points downwards, but it should point upwards\n   * for the sake of the angle calculation.\n   */\n  const iconRotationDegrees = 180;\n\n  return (\n    <Source\n      id={sourceId}\n      type=\"geojson\"\n      data={parsedGeoJsonData}\n      promoteId={'id'}\n    >\n      <Layer\n        id={layerId}\n        beforeId={connectionLayerId}\n        type=\"symbol\"\n        layout={{\n          'symbol-placement': 'point',\n          'icon-image': symbolName,\n          'icon-rotate': ['+', ['get', '__angle'], iconRotationDegrees],\n          'icon-rotation-alignment': 'map',\n          'icon-allow-overlap': true,\n          'icon-ignore-placement': true,\n          'icon-size': [\n            '*',\n            ['get', '__lineWidth'],\n            DIRECTION_ICON_SHRINK_RATIO,\n          ],\n        }}\n        paint={{\n          'icon-color': [\n            'case',\n            ['boolean', ['feature-state', 'hover'], false],\n            ['get', '__lineHoveredColor'],\n            ['get', '__lineColor'],\n          ],\n          'icon-opacity': [\n            'case',\n            ['boolean', ['feature-state', 'legendHover'], true],\n            SHAPE_OPACITY_DEFAULT,\n            SHAPE_OPACITY_DIMMED,\n          ],\n        }}\n      />\n    </Source>\n  );\n};\n\nConnectionLayerDirection['displayName'] = 'ConnectionLayerDirection';\n"],
+  "mappings": "AAAA,SAAS,OAAO,cAAc;AAC9B,OAAO,WAAW;AAElB,SAAS,kBAAkB;AAE3B,SAAS,mCAAmC;AAC5C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AAa9B,MAAM,2BAA2B,CACtC,UACG;AACH,QAAM,EAAE,aAAa,SAAS,mBAAmB,mBAAmB,IAAI;AAExE,QAAM,UAAU,GAAG,iBAAiB;AACpC,QAAM,WAAW,UAAU,OAAO;AAIlC,QAAM,EAAE,WAAW,IAAI;AAAA,IACrB,oCAAC,gBAAW;AAAA,IACZ;AAAA,IACA;AAAA,EACF;AAEA,QAAM,oBAAoB,4BAA4B;AAAA,IACpD;AAAA,IACA;AAAA,EACF,CAAC;AAQD,QAAM,sBAAsB;AAE5B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,MAAM;AAAA,MACN,WAAW;AAAA;AAAA,IAEX;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,MAAK;AAAA,QACL,QAAQ;AAAA,UACN,oBAAoB;AAAA,UACpB,cAAc;AAAA,UACd,eAAe,CAAC,KAAK,CAAC,OAAO,SAAS,GAAG,mBAAmB;AAAA,UAC5D,2BAA2B;AAAA,UAC3B,sBAAsB;AAAA,UACtB,yBAAyB;AAAA,UACzB,aAAa;AAAA,YACX;AAAA,YACA,CAAC,OAAO,aAAa;AAAA,YACrB;AAAA,UACF;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,QACF;AAAA;AAAA,IACF;AAAA,EACF;AAEJ;AAEA,yBAAyB,aAAa,IAAI;",
   "names": []
 }

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

@@ -0,0 +1,44 @@
+import { Layer, Source } from "@vis.gl/react-maplibre";
+import React from "react";
+import {
+  DEFAULT_LINE_CAP,
+  DEFAULT_LINE_DASH_ARRAY,
+  DEFAULT_LINE_JOIN,
+  SHAPE_OPACITY_DEFAULT,
+  SHAPE_OPACITY_DIMMED
+} from "../../constants.js";
+const ConnectionLayerLine = (props) => {
+  const { geoJsonData, layerId, sourceId, line } = props;
+  return /* @__PURE__ */ React.createElement(Source, { id: sourceId, type: "geojson", data: geoJsonData, promoteId: "id" }, /* @__PURE__ */ React.createElement(
+    Layer,
+    {
+      type: "line",
+      id: layerId,
+      layout: {
+        "line-cap": DEFAULT_LINE_CAP,
+        "line-join": DEFAULT_LINE_JOIN
+      },
+      paint: {
+        "line-color": [
+          "case",
+          ["boolean", ["feature-state", "hover"], false],
+          ["get", "__lineHoveredColor"],
+          ["get", "__lineColor"]
+        ],
+        "line-opacity": [
+          "case",
+          ["boolean", ["feature-state", "legendHover"], true],
+          SHAPE_OPACITY_DEFAULT,
+          SHAPE_OPACITY_DIMMED
+        ],
+        "line-width": ["get", "__lineWidth"],
+        ...line && line === "dashed" ? { "line-dasharray": DEFAULT_LINE_DASH_ARRAY } : null
+      }
+    }
+  ));
+};
+ConnectionLayerLine["displayName"] = "ConnectionLayerLine";
+export {
+  ConnectionLayerLine
+};
+//# sourceMappingURL=ConnectionLayerLine.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/map/components/ConnectionLayer/ConnectionLayerLine.tsx"],
+  "sourcesContent": ["import { Layer, Source } from '@vis.gl/react-maplibre';\nimport React from 'react';\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: ConnectionLayerLineProps<T>,\n) => {\n  const { geoJsonData, layerId, sourceId, line } = props;\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      />\n    </Source>\n  );\n};\n\nConnectionLayerLine['displayName'] = 'ConnectionLayerLine';\n"],
+  "mappings": "AAAA,SAAS,OAAO,cAAc;AAC9B,OAAO,WAAW;AAElB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAaA,MAAM,sBAAsB,CACjC,UACG;AACH,QAAM,EAAE,aAAa,SAAS,UAAU,KAAK,IAAI;AAEjD,SACE,oCAAC,UAAO,IAAI,UAAU,MAAK,WAAU,MAAM,aAAa,WAAW,QACjE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,IAAI;AAAA,MACJ,QAAQ;AAAA,QACN,YAAY;AAAA,QACZ,aAAa;AAAA,MACf;AAAA,MACA,OAAO;AAAA,QACL,cAAc;AAAA,UACZ;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,UAC7C,CAAC,OAAO,oBAAoB;AAAA,UAC5B,CAAC,OAAO,aAAa;AAAA,QACvB;AAAA,QACA,gBAAgB;AAAA,UACd;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,UAClD;AAAA,UACA;AAAA,QACF;AAAA,QACA,cAAc,CAAC,OAAO,aAAa;AAAA,QACnC,GAAI,QAAQ,SAAS,WACjB,EAAE,kBAAkB,wBAAwB,IAC5C;AAAA,MACN;AAAA;AAAA,EACF,CACF;AAEJ;AAEA,oBAAoB,aAAa,IAAI;",
+  "names": []
+}

package/esm/map/components/ConnectionLayer/utils/{get-arc-line-features.js → get-arc-line-feature.js}

@@ -30,10 +30,7 @@ const getArcFeatureItem = (coordinates) => {
   );
   return turfToMercator(lineArc);
 };
-const getArcLineFeatures = (path, featureProperties) => {
-  if (path.length < 2) {
-    return [];
-  }
+const getArcLineFeature = (path, featureProperties) => {
   const finalCoordinates = [];
   for (let i = 0; i < path.length - 1; i++) {
     const start = path[i];
@@ -45,12 +42,11 @@ const getArcLineFeatures = (path, featureProperties) => {
     const feature = getArcFeatureItem(coordinates);
     finalCoordinates.push(...feature.geometry.coordinates.reverse());
   }
-  const finalFeature = turfLineString(finalCoordinates, {
+  return turfLineString(finalCoordinates, {
     ...featureProperties
   });
-  return [finalFeature];
 };
 export {
-  getArcLineFeatures
+  getArcLineFeature
 };
-//# sourceMappingURL=get-arc-line-features.js.map
+//# sourceMappingURL=get-arc-line-feature.js.map

package/esm/map/components/ConnectionLayer/utils/{get-arc-line-features.js.map → get-arc-line-feature.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../../src/map/components/ConnectionLayer/utils/get-arc-line-features.ts"],
-  "sourcesContent": ["import turfBearing from '@turf/bearing';\nimport turfDestination from '@turf/destination';\nimport turfDistance from '@turf/distance';\nimport { lineString as turfLineString } from '@turf/helpers';\nimport turfLineDistance from '@turf/length';\nimport turfLineArc from '@turf/line-arc';\nimport turfMidpoint from '@turf/midpoint';\nimport {\n  toMercator as turfToMercator,\n  toWgs84 as turfToWgs84,\n} from '@turf/projection';\nimport type GeoJSON from 'geojson';\n\nimport type { FeatureProperties } from '../../../types/connection-layer.js';\nimport type { Location } from '../../../types/location.js';\n\nconst getArcFeatureItem = (\n  coordinates: GeoJSON.Position[],\n): GeoJSON.Feature<GeoJSON.LineString> => {\n  const feature = turfLineString(coordinates);\n\n  const parsedLineString = turfToWgs84(feature);\n\n  const {\n    geometry: {\n      coordinates: [start, end],\n    },\n  } = parsedLineString;\n\n  const lineDistance = turfLineDistance(parsedLineString);\n  const midPoint = turfMidpoint(start, end);\n  const bearing = turfBearing(start, end) - 90;\n  const center = turfDestination(midPoint, lineDistance, bearing);\n\n  const lineArc = turfLineArc(\n    center,\n    turfDistance(center, start),\n    turfBearing(center, end),\n    turfBearing(center, start),\n    { steps: 256 },\n  );\n\n  return turfToMercator(lineArc);\n};\n\nexport const getArcLineFeatures = (\n  path: Location[],\n  featureProperties: FeatureProperties,\n): GeoJSON.Feature<GeoJSON.LineString>[] => {\n  if (path.length < 2) {\n    return [];\n  }\n\n  const finalCoordinates: GeoJSON.Position[] = [];\n\n  for (let i = 0; i < path.length - 1; i++) {\n    const start = path[i];\n    const end = path[i + 1];\n\n    const coordinates: GeoJSON.Position[] = [\n      [start.longitude, start.latitude],\n      [end.longitude, end.latitude],\n    ];\n\n    const feature = getArcFeatureItem(coordinates);\n\n    finalCoordinates.push(...feature.geometry.coordinates.reverse());\n  }\n\n  const finalFeature = turfLineString(finalCoordinates, {\n    ...featureProperties,\n  });\n\n  return [finalFeature];\n};\n"],
-  "mappings": "AAAA,OAAO,iBAAiB;AACxB,OAAO,qBAAqB;AAC5B,OAAO,kBAAkB;AACzB,SAAS,cAAc,sBAAsB;AAC7C,OAAO,sBAAsB;AAC7B,OAAO,iBAAiB;AACxB,OAAO,kBAAkB;AACzB;AAAA,EACE,cAAc;AAAA,EACd,WAAW;AAAA,OACN;AAMP,MAAM,oBAAoB,CACxB,gBACwC;AACxC,QAAM,UAAU,eAAe,WAAW;AAE1C,QAAM,mBAAmB,YAAY,OAAO;AAE5C,QAAM;AAAA,IACJ,UAAU;AAAA,MACR,aAAa,CAAC,OAAO,GAAG;AAAA,IAC1B;AAAA,EACF,IAAI;AAEJ,QAAM,eAAe,iBAAiB,gBAAgB;AACtD,QAAM,WAAW,aAAa,OAAO,GAAG;AACxC,QAAM,UAAU,YAAY,OAAO,GAAG,IAAI;AAC1C,QAAM,SAAS,gBAAgB,UAAU,cAAc,OAAO;AAE9D,QAAM,UAAU;AAAA,IACd;AAAA,IACA,aAAa,QAAQ,KAAK;AAAA,IAC1B,YAAY,QAAQ,GAAG;AAAA,IACvB,YAAY,QAAQ,KAAK;AAAA,IACzB,EAAE,OAAO,IAAI;AAAA,EACf;AAEA,SAAO,eAAe,OAAO;AAC/B;AAEO,MAAM,qBAAqB,CAChC,MACA,sBAC0C;AAC1C,MAAI,KAAK,SAAS,GAAG;AACnB,WAAO,CAAC;AAAA,EACV;AAEA,QAAM,mBAAuC,CAAC;AAE9C,WAAS,IAAI,GAAG,IAAI,KAAK,SAAS,GAAG,KAAK;AACxC,UAAM,QAAQ,KAAK,CAAC;AACpB,UAAM,MAAM,KAAK,IAAI,CAAC;AAEtB,UAAM,cAAkC;AAAA,MACtC,CAAC,MAAM,WAAW,MAAM,QAAQ;AAAA,MAChC,CAAC,IAAI,WAAW,IAAI,QAAQ;AAAA,IAC9B;AAEA,UAAM,UAAU,kBAAkB,WAAW;AAE7C,qBAAiB,KAAK,GAAG,QAAQ,SAAS,YAAY,QAAQ,CAAC;AAAA,EACjE;AAEA,QAAM,eAAe,eAAe,kBAAkB;AAAA,IACpD,GAAG;AAAA,EACL,CAAC;AAED,SAAO,CAAC,YAAY;AACtB;",
+  "sources": ["../../../../../../src/map/components/ConnectionLayer/utils/get-arc-line-feature.ts"],
+  "sourcesContent": ["import turfBearing from '@turf/bearing';\nimport turfDestination from '@turf/destination';\nimport turfDistance from '@turf/distance';\nimport { lineString as turfLineString } from '@turf/helpers';\nimport turfLineDistance from '@turf/length';\nimport turfLineArc from '@turf/line-arc';\nimport turfMidpoint from '@turf/midpoint';\nimport {\n  toMercator as turfToMercator,\n  toWgs84 as turfToWgs84,\n} from '@turf/projection';\nimport type GeoJSON from 'geojson';\n\nimport type { FeatureProperties } from '../../../types/connection-layer.js';\nimport type { Location } from '../../../types/location.js';\n\nconst getArcFeatureItem = (\n  coordinates: GeoJSON.Position[],\n): GeoJSON.Feature<GeoJSON.LineString> => {\n  const feature = turfLineString(coordinates);\n\n  const parsedLineString = turfToWgs84(feature);\n\n  const {\n    geometry: {\n      coordinates: [start, end],\n    },\n  } = parsedLineString;\n\n  const lineDistance = turfLineDistance(parsedLineString);\n  const midPoint = turfMidpoint(start, end);\n  const bearing = turfBearing(start, end) - 90;\n  const center = turfDestination(midPoint, lineDistance, bearing);\n\n  const lineArc = turfLineArc(\n    center,\n    turfDistance(center, start),\n    turfBearing(center, end),\n    turfBearing(center, start),\n    { steps: 256 },\n  );\n\n  return turfToMercator(lineArc);\n};\n\nexport const getArcLineFeature = (\n  path: Location[],\n  featureProperties: FeatureProperties,\n): GeoJSON.Feature<GeoJSON.LineString> => {\n  const finalCoordinates: GeoJSON.Position[] = [];\n\n  for (let i = 0; i < path.length - 1; i++) {\n    const start = path[i];\n    const end = path[i + 1];\n\n    const coordinates: GeoJSON.Position[] = [\n      [start.longitude, start.latitude],\n      [end.longitude, end.latitude],\n    ];\n\n    const feature = getArcFeatureItem(coordinates);\n\n    finalCoordinates.push(...feature.geometry.coordinates.reverse());\n  }\n\n  return turfLineString(finalCoordinates, {\n    ...featureProperties,\n  });\n};\n"],
+  "mappings": "AAAA,OAAO,iBAAiB;AACxB,OAAO,qBAAqB;AAC5B,OAAO,kBAAkB;AACzB,SAAS,cAAc,sBAAsB;AAC7C,OAAO,sBAAsB;AAC7B,OAAO,iBAAiB;AACxB,OAAO,kBAAkB;AACzB;AAAA,EACE,cAAc;AAAA,EACd,WAAW;AAAA,OACN;AAMP,MAAM,oBAAoB,CACxB,gBACwC;AACxC,QAAM,UAAU,eAAe,WAAW;AAE1C,QAAM,mBAAmB,YAAY,OAAO;AAE5C,QAAM;AAAA,IACJ,UAAU;AAAA,MACR,aAAa,CAAC,OAAO,GAAG;AAAA,IAC1B;AAAA,EACF,IAAI;AAEJ,QAAM,eAAe,iBAAiB,gBAAgB;AACtD,QAAM,WAAW,aAAa,OAAO,GAAG;AACxC,QAAM,UAAU,YAAY,OAAO,GAAG,IAAI;AAC1C,QAAM,SAAS,gBAAgB,UAAU,cAAc,OAAO;AAE9D,QAAM,UAAU;AAAA,IACd;AAAA,IACA,aAAa,QAAQ,KAAK;AAAA,IAC1B,YAAY,QAAQ,GAAG;AAAA,IACvB,YAAY,QAAQ,KAAK;AAAA,IACzB,EAAE,OAAO,IAAI;AAAA,EACf;AAEA,SAAO,eAAe,OAAO;AAC/B;AAEO,MAAM,oBAAoB,CAC/B,MACA,sBACwC;AACxC,QAAM,mBAAuC,CAAC;AAE9C,WAAS,IAAI,GAAG,IAAI,KAAK,SAAS,GAAG,KAAK;AACxC,UAAM,QAAQ,KAAK,CAAC;AACpB,UAAM,MAAM,KAAK,IAAI,CAAC;AAEtB,UAAM,cAAkC;AAAA,MACtC,CAAC,MAAM,WAAW,MAAM,QAAQ;AAAA,MAChC,CAAC,IAAI,WAAW,IAAI,QAAQ;AAAA,IAC9B;AAEA,UAAM,UAAU,kBAAkB,WAAW;AAE7C,qBAAiB,KAAK,GAAG,QAAQ,SAAS,YAAY,QAAQ,CAAC;AAAA,EACjE;AAEA,SAAO,eAAe,kBAAkB;AAAA,IACtC,GAAG;AAAA,EACL,CAAC;AACH;",
   "names": []
 }

package/esm/map/components/ConnectionLayer/utils/get-straight-line-feature.js

@@ -0,0 +1,11 @@
+import { lineString as turfLineString } from "@turf/helpers";
+const getStraightLineFeature = (path, featureProperties) => {
+  const coordinates = path.map((coord) => [coord.longitude, coord.latitude]);
+  return turfLineString(coordinates, {
+    ...featureProperties
+  });
+};
+export {
+  getStraightLineFeature
+};
+//# sourceMappingURL=get-straight-line-feature.js.map

package/esm/map/components/ConnectionLayer/utils/get-straight-line-feature.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/map/components/ConnectionLayer/utils/get-straight-line-feature.ts"],
+  "sourcesContent": ["import { lineString as turfLineString } from '@turf/helpers';\nimport type GeoJSON from 'geojson';\n\nimport type { FeatureProperties } from '../../../types/connection-layer.js';\nimport type { Location } from '../../../types/location.js';\n\nexport const getStraightLineFeature = (\n  path: Location[],\n  featureProperties: FeatureProperties,\n): GeoJSON.Feature => {\n  const coordinates = path.map((coord) => [coord.longitude, coord.latitude]);\n  return turfLineString(coordinates, {\n    ...featureProperties,\n  });\n};\n"],
+  "mappings": "AAAA,SAAS,cAAc,sBAAsB;AAMtC,MAAM,yBAAyB,CACpC,MACA,sBACoB;AACpB,QAAM,cAAc,KAAK,IAAI,CAAC,UAAU,CAAC,MAAM,WAAW,MAAM,QAAQ,CAAC;AACzE,SAAO,eAAe,aAAa;AAAA,IACjC,GAAG;AAAA,EACL,CAAC;AACH;",
+  "names": []
+}

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

@@ -1,7 +1,6 @@
-import { featureCollection as turfFeatureCollection } from "@turf/helpers";
 import { _getCanvasColor as getCanvasColor } from "@dynatrace/strato-components-preview/charts";
-import { getArcLineFeatures } from "./get-arc-line-features.js";
-import { getStraightLineFeatures } from "./get-straight-line-features.js";
+import { getArcLineFeature } from "./get-arc-line-feature.js";
+import { getStraightLineFeature } from "./get-straight-line-feature.js";
 import { MAX_LINE_THICKNESS, MIN_LINE_THICKNESS } from "../../../constants.js";
 import { calculateHoveredColor } from "../../../utils/calculate-hovered-color.js";
 import { defineColor } from "../../../utils/define-color.js";
@@ -23,12 +22,27 @@ const getFeatureProperties = (thickness, curve) => (properties, id) => {
     curve
   };
 };
-const getFeatures = (path, featureProperties) => {
+const getLineFeature = (path, featureProperties) => {
   const isCurve = featureProperties.curve === "smooth";
   if (isCurve) {
-    return getArcLineFeatures(path, featureProperties);
+    return getArcLineFeature(path, featureProperties);
   }
-  return getStraightLineFeatures(path, featureProperties);
+  return getStraightLineFeature(path, featureProperties);
+};
+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 featureProperties = {
+        ...getProperties({ path, ...properties }, `connection-${index}`),
+        ...getConnectionColor(feature, color)
+      };
+      features.push(getLineFeature(path, featureProperties));
+    }
+  });
+  return features;
 };
 const getConnectionColor = (connection, color) => {
   const parsedColor = defineColor(color, connection);
@@ -40,19 +54,10 @@ const getConnectionColor = (connection, color) => {
   };
 };
 const parseConnectionDataToGeoJSON = (data, thickness, color, curve) => {
-  const featuresCollections = [];
-  const getProperties = getFeatureProperties(thickness, curve);
-  data.forEach((connection, index) => {
-    const { path, ...properties } = connection;
-    const featureProperties = {
-      ...getProperties({ path, ...properties }, `connection-${index}`),
-      ...getConnectionColor(connection, color)
-    };
-    const features = getFeatures(path, featureProperties);
-    const featuresCollection = turfFeatureCollection(features);
-    featuresCollections.push(featuresCollection);
-  });
-  return featuresCollections;
+  return {
+    type: "FeatureCollection",
+    features: getFeatures(data, thickness, color, curve)
+  };
 };
 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 { featureCollection as turfFeatureCollection } from '@turf/helpers';\nimport type GeoJSON from 'geojson';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components-preview/charts';\n\nimport { getArcLineFeatures } from './get-arc-line-features.js';\nimport { getStraightLineFeatures } from './get-straight-line-features.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 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      curve,\n    };\n  };\n\nconst getFeatures = (\n  path: Location[],\n  featureProperties: FeatureProperties,\n): GeoJSON.Feature[] => {\n  const isCurve = featureProperties.curve === 'smooth';\n\n  if (isCurve) {\n    return getArcLineFeatures(path, featureProperties);\n  }\n\n  return getStraightLineFeatures(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\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  const featuresCollections: GeoJSON.FeatureCollection[] = [];\n\n  const getProperties = getFeatureProperties(thickness, curve);\n\n  data.forEach((connection, index) => {\n    const { path, ...properties } = connection;\n\n    const featureProperties = {\n      ...getProperties({ path, ...properties }, `connection-${index}`),\n      ...getConnectionColor(connection, color),\n    };\n\n    const features = getFeatures(path, featureProperties);\n\n    const featuresCollection: GeoJSON.FeatureCollection =\n      turfFeatureCollection(features);\n\n    featuresCollections.push(featuresCollection);\n  });\n\n  return featuresCollections;\n};\n"],
-  "mappings": "AAAA,SAAS,qBAAqB,6BAA6B;AAG3D,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,0BAA0B;AACnC,SAAS,+BAA+B;AACxC,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,uBACJ,CAAC,WAAmB,UACpB,CACE,YACA,OACkE;AAClE,QAAM,gBAAgB,iBAAiB,SAAS;AAEhD,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,IACA,aAAa;AAAA,IACb;AAAA,EACF;AACF;AAEF,MAAM,cAAc,CAClB,MACA,sBACsB;AACtB,QAAM,UAAU,kBAAkB,UAAU;AAE5C,MAAI,SAAS;AACX,WAAO,mBAAmB,MAAM,iBAAiB;AAAA,EACnD;AAEA,SAAO,wBAAwB,MAAM,iBAAiB;AACxD;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,UACgC;AAChC,QAAM,sBAAmD,CAAC;AAE1D,QAAM,gBAAgB,qBAAqB,WAAW,KAAK;AAE3D,OAAK,QAAQ,CAAC,YAAY,UAAU;AAClC,UAAM,EAAE,MAAM,GAAG,WAAW,IAAI;AAEhC,UAAM,oBAAoB;AAAA,MACxB,GAAG,cAAc,EAAE,MAAM,GAAG,WAAW,GAAG,cAAc,KAAK,EAAE;AAAA,MAC/D,GAAG,mBAAmB,YAAY,KAAK;AAAA,IACzC;AAEA,UAAM,WAAW,YAAY,MAAM,iBAAiB;AAEpD,UAAM,qBACJ,sBAAsB,QAAQ;AAEhC,wBAAoB,KAAK,kBAAkB;AAAA,EAC7C,CAAC;AAED,SAAO;AACT;",
+  "sourcesContent": ["import type GeoJSON from 'geojson';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components-preview/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 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      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,uBACJ,CAAC,WAAmB,UACpB,CACE,YACA,OACkE;AAClE,QAAM,gBAAgB,iBAAiB,SAAS;AAEhD,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,IACA,aAAa;AAAA,IACb;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;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/map/components/ConnectionLayer/utils/parse-direction-data-to-geo-json.ts"],
-  "sourcesContent": ["import { point as turfPoint } from '@turf/helpers';\n\nimport { getArrowsAngles } from './get-arrows-angles.js';\nimport type {\n  GeoJSONFeature,\n  InternalConnectionLayerProps,\n  Connection,\n} from '../../../types/connection-layer.js';\n\ninterface ParseGeoJsonDataProps<T extends Connection>\n  extends Required<\n    Pick<InternalConnectionLayerProps<T>, 'directionIndicator'>\n  > {\n  geoJsonData: GeoJSON.FeatureCollection;\n}\n\nconst getConnectionGeoJSONFeature = (\n  feature: GeoJSONFeature<GeoJSON.LineString>,\n  angle: number,\n  coordinates: number[],\n): GeoJSONFeature<GeoJSON.Point> =>\n  turfPoint(coordinates, { ...feature.properties, __angle: angle });\n\nexport const parseDirectionDataToGeoJSON = <T extends Connection>(\n  props: ParseGeoJsonDataProps<T>,\n): GeoJSON.FeatureCollection => {\n  const { geoJsonData, directionIndicator } = props;\n\n  const features: GeoJSONFeature<GeoJSON.Point>[] = [];\n\n  for (let i = 0; i < geoJsonData.features.length; i++) {\n    const feature = geoJsonData.features[\n      i\n    ] as GeoJSONFeature<GeoJSON.LineString>;\n\n    const { coordinates } = feature.geometry;\n\n    const { endMarkerAngle, startMarkerAngle } = getArrowsAngles(coordinates);\n\n    const showStartArrow = directionIndicator !== 'end';\n    const showEndArrow = directionIndicator !== 'start';\n\n    const startCoordinate = coordinates[0];\n    const endCoordinate = coordinates[coordinates.length - 1];\n\n    if (showStartArrow) {\n      const startPoint = getConnectionGeoJSONFeature(\n        feature,\n        startMarkerAngle,\n        startCoordinate,\n      );\n\n      features.push({\n        ...startPoint,\n        properties: {\n          ...startPoint.properties,\n          id: `${feature.properties.id}-direction-start`,\n        },\n      });\n    }\n\n    if (showEndArrow) {\n      const endPoint = getConnectionGeoJSONFeature(\n        feature,\n        endMarkerAngle,\n        endCoordinate,\n      );\n\n      features.push({\n        ...endPoint,\n        properties: {\n          ...endPoint.properties,\n          id: `${feature.properties.id}-direction-end`,\n        },\n      });\n    }\n  }\n\n  return {\n    ...geoJsonData,\n    features,\n  };\n};\n"],
+  "sourcesContent": ["import { point as turfPoint } from '@turf/helpers';\n\nimport { getArrowsAngles } from './get-arrows-angles.js';\nimport type {\n  Connection,\n  GeoJSONFeature,\n  InternalConnectionLayerProps,\n} from '../../../types/connection-layer.js';\n\ninterface ParseGeoJsonDataProps<T extends Connection>\n  extends Required<\n    Pick<InternalConnectionLayerProps<T>, 'directionIndicator'>\n  > {\n  geoJsonData: GeoJSON.FeatureCollection;\n}\n\nconst getConnectionGeoJSONFeature = (\n  feature: GeoJSONFeature<GeoJSON.LineString>,\n  angle: number,\n  coordinates: number[],\n): GeoJSONFeature<GeoJSON.Point> =>\n  turfPoint(coordinates, { ...feature.properties, __angle: angle });\n\nexport const parseDirectionDataToGeoJSON = <T extends Connection>(\n  props: ParseGeoJsonDataProps<T>,\n): GeoJSON.FeatureCollection => {\n  const { geoJsonData, directionIndicator } = props;\n\n  const features: GeoJSONFeature<GeoJSON.Point>[] = [];\n\n  for (let i = 0; i < geoJsonData.features.length; i++) {\n    const feature = geoJsonData.features[\n      i\n    ] as GeoJSONFeature<GeoJSON.LineString>;\n\n    const { coordinates } = feature.geometry;\n\n    const { endMarkerAngle, startMarkerAngle } = getArrowsAngles(coordinates);\n\n    const showStartArrow = directionIndicator !== 'end';\n    const showEndArrow = directionIndicator !== 'start';\n\n    const startCoordinate = coordinates[0];\n    const endCoordinate = coordinates[coordinates.length - 1];\n\n    if (showStartArrow) {\n      const startPoint = getConnectionGeoJSONFeature(\n        feature,\n        startMarkerAngle,\n        startCoordinate,\n      );\n\n      features.push({\n        ...startPoint,\n        properties: {\n          ...startPoint.properties,\n          id: `${feature.properties.id}-direction-start`,\n        },\n      });\n    }\n\n    if (showEndArrow) {\n      const endPoint = getConnectionGeoJSONFeature(\n        feature,\n        endMarkerAngle,\n        endCoordinate,\n      );\n\n      features.push({\n        ...endPoint,\n        properties: {\n          ...endPoint.properties,\n          id: `${feature.properties.id}-direction-end`,\n        },\n      });\n    }\n  }\n\n  return {\n    ...geoJsonData,\n    features,\n  };\n};\n"],
   "mappings": "AAAA,SAAS,SAAS,iBAAiB;AAEnC,SAAS,uBAAuB;AAchC,MAAM,8BAA8B,CAClC,SACA,OACA,gBAEA,UAAU,aAAa,EAAE,GAAG,QAAQ,YAAY,SAAS,MAAM,CAAC;AAE3D,MAAM,8BAA8B,CACzC,UAC8B;AAC9B,QAAM,EAAE,aAAa,mBAAmB,IAAI;AAE5C,QAAM,WAA4C,CAAC;AAEnD,WAAS,IAAI,GAAG,IAAI,YAAY,SAAS,QAAQ,KAAK;AACpD,UAAM,UAAU,YAAY,SAC1B,CACF;AAEA,UAAM,EAAE,YAAY,IAAI,QAAQ;AAEhC,UAAM,EAAE,gBAAgB,iBAAiB,IAAI,gBAAgB,WAAW;AAExE,UAAM,iBAAiB,uBAAuB;AAC9C,UAAM,eAAe,uBAAuB;AAE5C,UAAM,kBAAkB,YAAY,CAAC;AACrC,UAAM,gBAAgB,YAAY,YAAY,SAAS,CAAC;AAExD,QAAI,gBAAgB;AAClB,YAAM,aAAa;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAEA,eAAS,KAAK;AAAA,QACZ,GAAG;AAAA,QACH,YAAY;AAAA,UACV,GAAG,WAAW;AAAA,UACd,IAAI,GAAG,QAAQ,WAAW,EAAE;AAAA,QAC9B;AAAA,MACF,CAAC;AAAA,IACH;AAEA,QAAI,cAAc;AAChB,YAAM,WAAW;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAEA,eAAS,KAAK;AAAA,QACZ,GAAG;AAAA,QACH,YAAY;AAAA,UACV,GAAG,SAAS;AAAA,UACZ,IAAI,GAAG,QAAQ,WAAW,EAAE;AAAA,QAC9B;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAEA,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -1,5 +1,5 @@
+import { Layer } from "@vis.gl/react-maplibre";
 import React from "react";
-import { Layer } from "react-map-gl";
 import { calculateCircleTranslate } from "./utils/calculate-circle-translate.js";
 import {
   BUBBLE_OUTLINE_STROKE,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/DotLayer/BackgroundLayer.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport { Layer } from 'react-map-gl';\n\nimport { calculateCircleTranslate } from './utils/calculate-circle-translate.js';\nimport {\n  BUBBLE_OUTLINE_STROKE,\n  ICON_BACKGROUND_OPACITY,\n} from '../../constants.js';\n\ninterface BackgroundLayerProps {\n  background: boolean;\n  beforeId: string;\n  source: string;\n  radius: number;\n  iconAnchor: 'bottom' | 'center';\n}\n\nexport const BackgroundLayer = (props: BackgroundLayerProps) => {\n  const { background, beforeId, source, radius, iconAnchor } = props;\n  const circleTranslate = calculateCircleTranslate(iconAnchor, radius);\n\n  return (\n    <Layer\n      type=\"circle\"\n      beforeId={beforeId}\n      source={source}\n      paint={{\n        'circle-color': [\n          'case',\n          ['boolean', ['feature-state', 'hover'], false],\n          ['get', '__hoveredBackgroundColor'],\n          ['get', '__backgroundColor'],\n        ],\n        'circle-radius': radius,\n        'circle-opacity': [\n          'case',\n          ['boolean', background, false],\n          ICON_BACKGROUND_OPACITY,\n          ['boolean', ['feature-state', 'hover'], false],\n          ICON_BACKGROUND_OPACITY,\n          0,\n        ],\n        'circle-stroke-width': [\n          'case',\n          ['boolean', ['feature-state', 'active'], false],\n          BUBBLE_OUTLINE_STROKE,\n          0,\n        ],\n        'circle-translate': circleTranslate,\n      }}\n    />\n  );\n};\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,aAAa;AAEtB,SAAS,gCAAgC;AACzC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAUA,MAAM,kBAAkB,CAAC,UAAgC;AAC9D,QAAM,EAAE,YAAY,UAAU,QAAQ,QAAQ,WAAW,IAAI;AAC7D,QAAM,kBAAkB,yBAAyB,YAAY,MAAM;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,OAAO;AAAA,QACL,gBAAgB;AAAA,UACd;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,UAC7C,CAAC,OAAO,0BAA0B;AAAA,UAClC,CAAC,OAAO,mBAAmB;AAAA,QAC7B;AAAA,QACA,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,UAChB;AAAA,UACA,CAAC,WAAW,YAAY,KAAK;AAAA,UAC7B;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,UAC7C;AAAA,UACA;AAAA,QACF;AAAA,QACA,uBAAuB;AAAA,UACrB;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,QAAQ,GAAG,KAAK;AAAA,UAC9C;AAAA,UACA;AAAA,QACF;AAAA,QACA,oBAAoB;AAAA,MACtB;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { Layer } from '@vis.gl/react-maplibre';\nimport React from 'react';\n\nimport { calculateCircleTranslate } from './utils/calculate-circle-translate.js';\nimport {\n  BUBBLE_OUTLINE_STROKE,\n  ICON_BACKGROUND_OPACITY,\n} from '../../constants.js';\n\ninterface BackgroundLayerProps {\n  background: boolean;\n  beforeId: string;\n  source: string;\n  radius: number;\n  iconAnchor: 'bottom' | 'center';\n}\n\nexport const BackgroundLayer = (props: BackgroundLayerProps) => {\n  const { background, beforeId, source, radius, iconAnchor } = props;\n  const circleTranslate = calculateCircleTranslate(iconAnchor, radius);\n\n  return (\n    <Layer\n      type=\"circle\"\n      beforeId={beforeId}\n      source={source}\n      paint={{\n        'circle-color': [\n          'case',\n          ['boolean', ['feature-state', 'hover'], false],\n          ['get', '__hoveredBackgroundColor'],\n          ['get', '__backgroundColor'],\n        ],\n        'circle-radius': radius,\n        'circle-opacity': [\n          'case',\n          ['boolean', background, false],\n          ICON_BACKGROUND_OPACITY,\n          ['boolean', ['feature-state', 'hover'], false],\n          ICON_BACKGROUND_OPACITY,\n          0,\n        ],\n        'circle-stroke-width': [\n          'case',\n          ['boolean', ['feature-state', 'active'], false],\n          BUBBLE_OUTLINE_STROKE,\n          0,\n        ],\n        'circle-translate': circleTranslate,\n      }}\n    />\n  );\n};\n"],
+  "mappings": "AAAA,SAAS,aAAa;AACtB,OAAO,WAAW;AAElB,SAAS,gCAAgC;AACzC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAUA,MAAM,kBAAkB,CAAC,UAAgC;AAC9D,QAAM,EAAE,YAAY,UAAU,QAAQ,QAAQ,WAAW,IAAI;AAC7D,QAAM,kBAAkB,yBAAyB,YAAY,MAAM;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,OAAO;AAAA,QACL,gBAAgB;AAAA,UACd;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,UAC7C,CAAC,OAAO,0BAA0B;AAAA,UAClC,CAAC,OAAO,mBAAmB;AAAA,QAC7B;AAAA,QACA,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,UAChB;AAAA,UACA,CAAC,WAAW,YAAY,KAAK;AAAA,UAC7B;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,UAC7C;AAAA,UACA;AAAA,QACF;AAAA,QACA,uBAAuB;AAAA,UACrB;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,QAAQ,GAAG,KAAK;AAAA,UAC9C;AAAA,UACA;AAAA,QACF;AAAA,QACA,oBAAoB;AAAA,MACtB;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

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

@@ -1,5 +1,5 @@
+import { Layer, Source } from "@vis.gl/react-maplibre";
 import React from "react";
-import { Layer, Source } from "react-map-gl/maplibre";
 import { BackgroundLayer } from "./BackgroundLayer.js";
 import { DotLayerTooltip } from "./DotLayerTooltip.js";
 import { parseDotDataToGeoJSON } from "./utils/parse-dot-data-to-geo-json.js";
@@ -9,8 +9,8 @@ import {
   DEFAULT_SHAPE_COLOR,
   DEFAULT_SYMBOL_SIZE,
   FALLBACK_SYMBOL_SIZE,
-  LEGEND_DIM_OPACITY,
-  SHAPE_OPACITY
+  SHAPE_OPACITY_DIMMED,
+  SHAPE_OPACITY_DEFAULT
 } from "../../constants.js";
 import { useLayerColoringStrategy } from "../../hooks/use-layer-coloring-strategy.js";
 import { useLegendInteractionHighlighting } from "../../hooks/use-legend-interaction-highlighting.js";
@@ -72,8 +72,8 @@ const DotLayer = (props) => {
         "icon-opacity": [
           "case",
           ["boolean", ["feature-state", "legendHover"], true],
-          SHAPE_OPACITY,
-          LEGEND_DIM_OPACITY
+          SHAPE_OPACITY_DEFAULT,
+          SHAPE_OPACITY_DIMMED
         ]
       }
     }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/DotLayer/DotLayer.tsx"],
-  "sourcesContent": ["import React, { type PropsWithChildren } from 'react';\nimport { Layer, Source } from 'react-map-gl/maplibre';\n\nimport { BackgroundLayer } from './BackgroundLayer.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  LEGEND_DIM_OPACITY,\n  SHAPE_OPACITY,\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';\n\n/**\n * DotLayer Component\n */\nexport const DotLayer = <T extends Location>(\n  props: PropsWithChildren<InternalDotLayerProps<T>>,\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 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    <>\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,\n              LEGEND_DIM_OPACITY,\n            ],\n          }}\n        />\n        <BackgroundLayer\n          background={Boolean(background)}\n          beforeId={layerId}\n          source={sourceId}\n          radius={calculatedShapeSize / 2}\n          iconAnchor={iconAnchor}\n        />\n      </Source>\n\n      <DotLayerTooltip\n        layerId={layerId}\n        tooltipTemplate={\n          isDotTooltipTemplate(tooltipTemplate) ? tooltipTemplate : undefined\n        }\n      />\n    </>\n  );\n};\n\nDotLayer['displayName'] = 'DotLayer';\n"],
-  "mappings": "AAAA,OAAO,WAAuC;AAC9C,SAAS,OAAO,cAAc;AAE9B,SAAS,uBAAuB;AAChC,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;AAK9B,MAAM,WAAW,CACtB,UACG;AACH,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,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,0DACE,oCAAC,UAAO,IAAI,UAAU,MAAK,WAAU,MAAM,aAAa,YAAU,QAChE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,IAAI;AAAA,MACJ,QAAQ;AAAA,QACN,cAAc;AAAA,QACd,aAAa;AAAA,QACb,eAAe,CAAC,OAAO,WAAW;AAAA;AAAA,QAElC,yBAAyB;AAAA,QACzB,eAAe;AAAA,MACjB;AAAA,MACA,OAAO;AAAA,QACL,cAAc,CAAC,OAAO,SAAS;AAAA,QAC/B,gBAAgB;AAAA,UACd;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,UAClD;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA;AAAA,EACF,GACA;AAAA,IAAC;AAAA;AAAA,MACC,YAAY,QAAQ,UAAU;AAAA,MAC9B,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,QAAQ,sBAAsB;AAAA,MAC9B;AAAA;AAAA,EACF,CACF,GAEA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,iBACE,qBAAqB,eAAe,IAAI,kBAAkB;AAAA;AAAA,EAE9D,CACF;AAEJ;AAEA,SAAS,aAAa,IAAI;",
+  "sourcesContent": ["import { Layer, Source } from '@vis.gl/react-maplibre';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { BackgroundLayer } from './BackgroundLayer.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';\n\n/**\n * DotLayer Component\n */\nexport const DotLayer = <T extends Location>(\n  props: PropsWithChildren<InternalDotLayerProps<T>>,\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 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    <>\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        />\n        <BackgroundLayer\n          background={Boolean(background)}\n          beforeId={layerId}\n          source={sourceId}\n          radius={calculatedShapeSize / 2}\n          iconAnchor={iconAnchor}\n        />\n      </Source>\n\n      <DotLayerTooltip\n        layerId={layerId}\n        tooltipTemplate={\n          isDotTooltipTemplate(tooltipTemplate) ? tooltipTemplate : undefined\n        }\n      />\n    </>\n  );\n};\n\nDotLayer['displayName'] = 'DotLayer';\n"],
+  "mappings": "AAAA,SAAS,OAAO,cAAc;AAC9B,OAAO,WAAuC;AAE9C,SAAS,uBAAuB;AAChC,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;AAK9B,MAAM,WAAW,CACtB,UACG;AACH,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,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,0DACE,oCAAC,UAAO,IAAI,UAAU,MAAK,WAAU,MAAM,aAAa,YAAU,QAChE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,IAAI;AAAA,MACJ,QAAQ;AAAA,QACN,cAAc;AAAA,QACd,aAAa;AAAA,QACb,eAAe,CAAC,OAAO,WAAW;AAAA;AAAA,QAElC,yBAAyB;AAAA,QACzB,eAAe;AAAA,MACjB;AAAA,MACA,OAAO;AAAA,QACL,cAAc,CAAC,OAAO,SAAS;AAAA,QAC/B,gBAAgB;AAAA,UACd;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,UAClD;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA;AAAA,EACF,GACA;AAAA,IAAC;AAAA;AAAA,MACC,YAAY,QAAQ,UAAU;AAAA,MAC9B,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,QAAQ,sBAAsB;AAAA,MAC9B;AAAA;AAAA,EACF,CACF,GAEA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,iBACE,qBAAqB,eAAe,IAAI,kBAAkB;AAAA;AAAA,EAE9D,CACF;AAEJ;AAEA,SAAS,aAAa,IAAI;",
   "names": []
 }

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 { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components-preview/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) => {\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": "AAAA,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AAEtC,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAErB,MAAM,wBAAwB,CACnC,MACA,OACA,SACA,oBACG;AACH,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-preview/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;",
   "names": []
 }

package/esm/map/components/MapContent.js

@@ -1,17 +1,23 @@
+import { Layer, Map, Source } from "@vis.gl/react-maplibre";
 import { isUndefined } from "lodash-es";
 import React, {
   forwardRef,
   useContext,
   useRef
 } from "react";
-import { Layer, Map, Source } from "react-map-gl/maplibre";
 import { _useGraphSize as useGraphSize } from "@dynatrace/strato-components-preview/charts";
 import { useMergeRefs } from "@dynatrace/strato-components-preview/core";
 import {
   BASE_LAYER_FILL_ID,
   BASE_LAYER_LINE_ID,
-  DEFAULT_COUNTRIES_BORDER_COLOR,
-  DEFAULT_COUNTRIES_FILL_COLOR
+  DEFAULT_BOUNDARIES_BORDER_COLOR,
+  DEFAULT_COUNTRIES_FILL_COLOR,
+  REGION_BORDER_WIDTH,
+  COUNTRY_BORDER_WIDTH,
+  MIN_LONGITUDE,
+  MIN_LATITUDE,
+  MAX_LONGITUDE,
+  MAX_LATITUDE
 } from "../constants.js";
 import { MapToolbar } from "./toolbar/MapToolbar.js";
 import { LayerIdsContext } from "../contexts/layer-ids.context.js";
@@ -40,7 +46,7 @@ const fillLayer = {
 };
 const MapSource = () => {
   const baseLayerFeatures = useMapBaseLayerFeatures();
-  return /* @__PURE__ */ React.createElement(Source, { id: "data", type: "geojson", data: baseLayerFeatures }, /* @__PURE__ */ React.createElement(
+  return baseLayerFeatures && /* @__PURE__ */ React.createElement(Source, { id: "data", type: "geojson", data: baseLayerFeatures }, /* @__PURE__ */ React.createElement(
     Layer,
     {
       ...fillLayer,
@@ -52,8 +58,20 @@ const MapSource = () => {
     Layer,
     {
       ...lineLayer,
+      type: "line",
+      filter: [
+        "any",
+        ["==", "region_type", "COUNTRY"],
+        ["==", "region_type", "REGION"]
+      ],
       paint: {
-        "line-color": getColorFromToken(DEFAULT_COUNTRIES_BORDER_COLOR)
+        "line-color": getColorFromToken(DEFAULT_BOUNDARIES_BORDER_COLOR),
+        "line-width": [
+          "case",
+          ["==", ["get", "region_type"], "REGION"],
+          REGION_BORDER_WIDTH,
+          COUNTRY_BORDER_WIDTH
+        ]
       }
     }
   ));
@@ -70,6 +88,7 @@ const MapContent = forwardRef((props, forwardedRef) => {
     style,
     mapStyle = defaultStyle,
     onViewStateChange,
+    onMapLoad,
     ...remaining
   } = props;
   const loading = useMapLoading();
@@ -121,15 +140,22 @@ const MapContent = forwardRef((props, forwardedRef) => {
         mapStyle,
         dragRotate: false,
         fadeDuration: 0,
-        RTLTextPlugin: false,
         renderWorldCopies: false,
         interactiveLayerIds: layerIds,
+        maxBounds: [
+          [MIN_LONGITUDE, MIN_LATITUDE],
+          [MAX_LONGITUDE, MAX_LATITUDE]
+        ],
         onMouseMove: (e) => handleMouseMove(e),
         onClick: (e) => handleMouseClick(e),
         onZoom: handleZoom,
         onDrag: handleDrag,
+        attributionControl: false,
         onRender: () => onRenderHandler && onRenderHandler(),
-        onLoad: () => onLoadHandler && onLoadHandler(),
+        onLoad: () => {
+          onMapLoad();
+          onLoadHandler && onLoadHandler();
+        },
         ref: useSetMapInitialConfiguration(),
         interactive: true,
         ...remaining

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/components/MapContent.tsx"],
-  "sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport type { MapLayerMouseEvent } from 'maplibre-gl';\nimport React, {\n  forwardRef,\n  type PropsWithChildren,\n  useContext,\n  useRef,\n} from 'react';\nimport { Layer, type LayerProps, Map, Source } from 'react-map-gl/maplibre';\n\nimport { _useGraphSize as useGraphSize } from '@dynatrace/strato-components-preview/charts';\nimport { useMergeRefs } from '@dynatrace/strato-components-preview/core';\n\nimport {\n  BASE_LAYER_FILL_ID,\n  BASE_LAYER_LINE_ID,\n  DEFAULT_COUNTRIES_BORDER_COLOR,\n  DEFAULT_COUNTRIES_FILL_COLOR,\n} from '../constants.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 { defaultStyle } from '../map-styles/default-style.js';\nimport { MapViewImperativeHandler } from '../providers/imperative-handler.provider.js';\nimport type { MapViewProps, MapViewRef } 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';\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    <Source id=\"data\" type=\"geojson\" data={baseLayerFeatures}>\n      <Layer\n        {...fillLayer}\n        paint={{\n          'fill-color': getColorFromToken(DEFAULT_COUNTRIES_FILL_COLOR),\n        }}\n      ></Layer>\n      <Layer\n        {...lineLayer}\n        paint={{\n          'line-color': getColorFromToken(DEFAULT_COUNTRIES_BORDER_COLOR),\n        }}\n      ></Layer>\n    </Source>\n  );\n};\n\nconst MapInteractions = ({ children }: PropsWithChildren) => {\n  useHoverInteraction();\n  useActiveInteraction();\n\n  return children;\n};\n\nexport const MapContent = forwardRef<\n  MapViewRef,\n  PropsWithChildren<MapViewProps>\n>((props, forwardedRef) => {\n  const {\n    initialViewState: initialViewStateProp,\n    children,\n    style,\n    mapStyle = defaultStyle,\n    onViewStateChange,\n    ...remaining\n  } = props;\n\n  const loading = useMapLoading();\n\n  const mapContainerRef = useRef<HTMLDivElement>(null);\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  const shouldRenderToolbar =\n    !isUndefined(toolbarConfig) || !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\n  return (\n    <div\n      data-testid=\"map-container\"\n      ref={mergedRefs}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      <Map\n        onMove={(evt) => {\n          onViewStateChange?.(evt.viewState);\n        }}\n        initialViewState={toMapBoxInitialViewState(initialViewState)}\n        style={{\n          width: graphWidth,\n          height: `${graphHeight}px`,\n          ...style,\n        }}\n        mapStyle={mapStyle}\n        dragRotate={false}\n        fadeDuration={0}\n        RTLTextPlugin={false}\n        renderWorldCopies={false}\n        interactiveLayerIds={layerIds}\n        onMouseMove={(e) => handleMouseMove(e as MapLayerMouseEvent)}\n        onClick={(e) => handleMouseClick(e as MapLayerMouseEvent)}\n        onZoom={handleZoom}\n        onDrag={handleDrag}\n        onRender={() => onRenderHandler && onRenderHandler()}\n        onLoad={() => onLoadHandler && onLoadHandler()}\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>{children}</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": "AAAA,SAAS,mBAAmB;AAE5B,OAAO;AAAA,EACL;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AACP,SAAS,OAAwB,KAAK,cAAc;AAEpD,SAAS,iBAAiB,oBAAoB;AAC9C,SAAS,oBAAoB;AAE7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,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,wBAAwB;AACjC,SAAS,gCAAgC;AACzC,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AAEzC,SAAS,yBAAyB;AAClC,SAAS,gCAAgC;AACzC,SAAS,gCAAgC;AACzC,SAAS,qCAAqC;AAE9C,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,oCAAC,UAAO,IAAG,QAAO,MAAK,WAAU,MAAM,qBACrC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,QACL,cAAc,kBAAkB,4BAA4B;AAAA,MAC9D;AAAA;AAAA,EACD,GACD;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,QACL,cAAc,kBAAkB,8BAA8B;AAAA,MAChE;AAAA;AAAA,EACD,CACH;AAEJ;AAEA,MAAM,kBAAkB,CAAC,EAAE,SAAS,MAAyB;AAC3D,sBAAoB;AACpB,uBAAqB;AAErB,SAAO;AACT;AAEO,MAAM,aAAa,WAGxB,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,UAAU,cAAc;AAE9B,QAAM,kBAAkB,OAAuB,IAAI;AACnD,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;AAC3C,QAAM,sBACJ,CAAC,YAAY,aAAa,KAAK,CAAC,YAAY,kBAAkB;AAEhE,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;AAE5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,KAAK;AAAA,MACL,cAAc;AAAA,MACd,cAAc;AAAA;AAAA,IAEd;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,CAAC,QAAQ;AACf,8BAAoB,IAAI,SAAS;AAAA,QACnC;AAAA,QACA,kBAAkB,yBAAyB,gBAAgB;AAAA,QAC3D,OAAO;AAAA,UACL,OAAO;AAAA,UACP,QAAQ,GAAG,WAAW;AAAA,UACtB,GAAG;AAAA,QACL;AAAA,QACA;AAAA,QACA,YAAY;AAAA,QACZ,cAAc;AAAA,QACd,eAAe;AAAA,QACf,mBAAmB;AAAA,QACnB,qBAAqB;AAAA,QACrB,aAAa,CAAC,MAAM,gBAAgB,CAAuB;AAAA,QAC3D,SAAS,CAAC,MAAM,iBAAiB,CAAuB;AAAA,QACxD,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,UAAU,MAAM,mBAAmB,gBAAgB;AAAA,QACnD,QAAQ,MAAM,iBAAiB,cAAc;AAAA,QAC7C,KAAK,8BAA8B;AAAA,QACnC,aAAW;AAAA,QACV,GAAG;AAAA;AAAA,MAEJ,oCAAC,0BAA0B,UAA1B,EAAmC,OAAO,kBACzC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,cAAc;AAAA;AAAA,QAEd,oCAAC,eAAU;AAAA,QACV,UAAU,OACT,0DACE,oCAAC,uBAAiB,QAAS,GAC1B,sBAAsB,oCAAC,gBAAW,IAAK,IAC1C;AAAA,MAEJ,CACF;AAAA,IACF;AAAA,EACF;AAEJ,CAAC;AAEA,WAA2D,cAC1D;",
+  "sourcesContent": ["import { Layer, type LayerProps, Map, Source } from '@vis.gl/react-maplibre';\nimport { isUndefined } from 'lodash-es';\nimport type { MapLayerMouseEvent } from 'maplibre-gl';\nimport React, {\n  forwardRef,\n  type PropsWithChildren,\n  useContext,\n  useRef,\n} from 'react';\n\nimport { _useGraphSize as useGraphSize } from '@dynatrace/strato-components-preview/charts';\nimport { useMergeRefs } from '@dynatrace/strato-components-preview/core';\n\nimport {\n  BASE_LAYER_FILL_ID,\n  BASE_LAYER_LINE_ID,\n  DEFAULT_BOUNDARIES_BORDER_COLOR,\n  DEFAULT_COUNTRIES_FILL_COLOR,\n  REGION_BORDER_WIDTH,\n  COUNTRY_BORDER_WIDTH,\n  MIN_LONGITUDE,\n  MIN_LATITUDE,\n  MAX_LONGITUDE,\n  MAX_LATITUDE,\n} from '../constants.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 { defaultStyle } from '../map-styles/default-style.js';\nimport { MapViewImperativeHandler } from '../providers/imperative-handler.provider.js';\nimport type { MapViewProps, MapViewRef } 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';\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 = ({ children }: PropsWithChildren) => {\n  useHoverInteraction();\n  useActiveInteraction();\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    ...remaining\n  } = props;\n\n  const loading = useMapLoading();\n\n  const mapContainerRef = useRef<HTMLDivElement>(null);\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  const shouldRenderToolbar =\n    !isUndefined(toolbarConfig) || !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\n  return (\n    <div\n      data-testid=\"map-container\"\n      ref={mergedRefs}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      <Map\n        onMove={(evt) => {\n          onViewStateChange?.(evt.viewState);\n        }}\n        initialViewState={toMapBoxInitialViewState(initialViewState)}\n        style={{\n          width: graphWidth,\n          height: `${graphHeight}px`,\n          ...style,\n        }}\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        onDrag={handleDrag}\n        attributionControl={false}\n        onRender={() => onRenderHandler && onRenderHandler()}\n        onLoad={() => {\n          onMapLoad();\n          onLoadHandler && onLoadHandler();\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>{children}</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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",
   "names": []
 }