@dynatrace/strato-geo 1.1.4 → 1.3.4

package/esm/map/MapView.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useState } from "react";
 import {
   _ChartLayout as ChartLayout,
   _coerceSizeValue as coerceSizeValue,
@@ -51,12 +51,14 @@ const _MapView = forwardRef(
     const legendPosition = config.legend?.position;
     const legendRatio = config.legend?.ratio;
     const legendOnRatioChange = config.legend?.onRatioChange;
-    const { isMapEnabled, isLoading, baseFeatureCollection, error } = useLoadMapBaseLayer(config.baseLayer);
+    const { isMapEnabled, isFetchingFeatures, baseFeatureCollection, error } = useLoadMapBaseLayer(config.baseLayer);
+    const [isMapLoaded, setIsMapLoaded] = useState(false);
     const { errorState } = getMapStatesTemplates(children);
     const chartHeight = coerceSizeValue(props.height) || DEFAULT_MAP_HEIGHT;
     const containerStyles = { width: "100%", ...costumerStyle };
     const chartLayoutRef = useAutoLegendRefresh(layersData);
-    const mapUnavailable = !isLoading && !isMapEnabled || error;
+    const mapUnavailable = !isFetchingFeatures && !isMapEnabled || error;
+    const isLoading = isFetchingFeatures || !isMapLoaded;
     return /* @__PURE__ */ React.createElement(
       "div",
       {
@@ -68,7 +70,7 @@ const _MapView = forwardRef(
       mapUnavailable ? /* @__PURE__ */ React.createElement(
         MapUnavailable,
         {
-          isLoading,
+          isFetchingFeatures,
           isDisabled: !isMapEnabled,
           chartHeight,
           error
@@ -95,6 +97,7 @@ const _MapView = forwardRef(
               MapContent,
               {
                 ref: forwardedRef,
+                onMapLoad: () => setIsMapLoaded(true),
                 ...remaining
               },
               parsedChildren

package/esm/map/MapView.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/map/MapView.tsx"],
-  "sourcesContent": ["import React, { forwardRef, type PropsWithChildren } from 'react';\n\nimport {\n  _ChartLayout as ChartLayout,\n  _coerceSizeValue as coerceSizeValue,\n  _useAutoLegendRefresh as useAutoLegendRefresh,\n} from '@dynatrace/strato-components-preview/charts';\n\nimport { MapLegendRenderer } from './components/legend/MapLegendRenderer.js';\nimport { MapContent } from './components/MapContent.js';\nimport { MapUnavailable } from './components/MapUnavailable.js';\nimport {\n  DEFAULT_LEGEND_SIZES,\n  DEFAULT_MAP_HEIGHT,\n  DEFAULT_TRUNCATION_MODE,\n} from './constants.js';\nimport { FormatterContext } from './contexts/formatter.context.js';\nimport { LayerIdsContext } from './contexts/layer-ids.context.js';\nimport { MapBaseLayerFeaturesContext } from './contexts/map-base-layer.context.js';\nimport { MapConfigurationContext } from './contexts/map-configuration.context.js';\nimport { MapLoadingContext } from './contexts/map-loading.context.js';\nimport { MapRawDataContext } from './contexts/map-raw-data.context.js';\nimport { MapTruncationModeContext } from './contexts/map-truncation-mode.context.js';\nimport { useLoadMapBaseLayer } from './hooks/use-load-map-base-layer.js';\nimport { ColorScaleProvider } from './providers/color-scale.provider.js';\nimport { LayerColorStrategyProvider } from './providers/layer-color-strategy.provider.js';\nimport { ErrorStateSlot } from './slots/states/ErrorStateSlot.js';\nimport { MapStoreProvider } from './store/map-store.provider.js';\nimport type { MapViewProps, MapViewRef } from './types/map-view.js';\nimport { extractLayersData } from './utils/extract-layers-data.js';\nimport { getMapStatesTemplates } from './utils/get-map-states-template.js';\nimport { iterateConfigSlots } from './utils/iterate-config-slots.js';\nimport { setLayersId } from './utils/set-layers-id.js';\n\n// eslint-disable-next-line no-restricted-imports\nimport './styles/react-mapgl-styles.css';\n\n/**\n * MapView Component\n */\nconst _MapView = forwardRef<MapViewRef, PropsWithChildren<MapViewProps>>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      loading = false,\n      style: costumerStyle,\n      className: customerClassNames,\n      formatter,\n      truncationMode,\n      ...remaining\n    } = props;\n    const { layerIds, parsedChildren, valueAccessors } = setLayersId(children);\n\n    const {\n      flattenData: layersData,\n      categories,\n      legendDomain,\n    } = extractLayersData(parsedChildren, valueAccessors);\n\n    const config = iterateConfigSlots(children, legendDomain);\n\n    const isLegendHidden = !config.legend || !!config.legend.hidden;\n    const legendPosition = config.legend?.position;\n    const legendRatio = config.legend?.ratio;\n    const legendOnRatioChange = config.legend?.onRatioChange;\n\n    const { isMapEnabled, isLoading, baseFeatureCollection, error } =\n      useLoadMapBaseLayer(config.baseLayer);\n\n    const { errorState } = getMapStatesTemplates(children);\n\n    const chartHeight = coerceSizeValue(props.height) || DEFAULT_MAP_HEIGHT;\n\n    const containerStyles = { width: '100%', ...costumerStyle };\n\n    const chartLayoutRef = useAutoLegendRefresh(layersData);\n    const mapUnavailable = (!isLoading && !isMapEnabled) || error;\n\n    return (\n      <div\n        style={containerStyles}\n        className={customerClassNames}\n        data-testid=\"mapview-container\"\n      >\n        {\n          // TODO: Error boundaries global fix needed - this error state only purpose is to make map not rendering when there error in response\n          mapUnavailable ? (\n            <MapUnavailable\n              isLoading={isLoading}\n              isDisabled={!isMapEnabled}\n              chartHeight={chartHeight}\n              error={error}\n            />\n          ) : (\n            <MapLoadingContext.Provider value={loading}>\n              <MapBaseLayerFeaturesContext.Provider\n                value={baseFeatureCollection}\n              >\n                <MapConfigurationContext.Provider value={config}>\n                  <LayerIdsContext.Provider value={layerIds}>\n                    <MapTruncationModeContext.Provider\n                      value={truncationMode ?? DEFAULT_TRUNCATION_MODE}\n                    >\n                      <FormatterContext.Provider value={formatter}>\n                        <MapRawDataContext.Provider value={layersData}>\n                          <MapStoreProvider>\n                            <ColorScaleProvider categories={categories}>\n                              <LayerColorStrategyProvider>\n                                <ChartLayout\n                                  ref={chartLayoutRef}\n                                  chartHeight={chartHeight}\n                                  errorState={errorState}\n                                  showLoader={loading || isLoading}\n                                >\n                                  <ChartLayout.Graph>\n                                    {baseFeatureCollection && (\n                                      <MapContent\n                                        ref={forwardedRef}\n                                        {...remaining}\n                                      >\n                                        {parsedChildren}\n                                      </MapContent>\n                                    )}\n                                  </ChartLayout.Graph>\n                                  {!isLegendHidden && (\n                                    <ChartLayout.Legend\n                                      position={legendPosition}\n                                      ratio={legendRatio}\n                                      ratioBoundaries={DEFAULT_LEGEND_SIZES}\n                                      onResize={legendOnRatioChange}\n                                    >\n                                      <MapLegendRenderer />\n                                    </ChartLayout.Legend>\n                                  )}\n                                </ChartLayout>\n                              </LayerColorStrategyProvider>\n                            </ColorScaleProvider>\n                          </MapStoreProvider>\n                        </MapRawDataContext.Provider>\n                      </FormatterContext.Provider>\n                    </MapTruncationModeContext.Provider>\n                  </LayerIdsContext.Provider>\n                </MapConfigurationContext.Provider>\n              </MapBaseLayerFeaturesContext.Provider>\n            </MapLoadingContext.Provider>\n          )\n        }\n      </div>\n    );\n  },\n);\n\n(_MapView as typeof _MapView & { displayName: string })['displayName'] =\n  'MapView';\n\n/**\n * The `MapView` is a component that renders a map with various geospatial data layers.\n * @beta\n */\nexport const MapView = Object.assign(_MapView, {\n  ErrorState: ErrorStateSlot,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { forwardRef, type PropsWithChildren, useState } from 'react';\n\nimport {\n  _ChartLayout as ChartLayout,\n  _coerceSizeValue as coerceSizeValue,\n  _useAutoLegendRefresh as useAutoLegendRefresh,\n} from '@dynatrace/strato-components-preview/charts';\n\nimport { MapLegendRenderer } from './components/legend/MapLegendRenderer.js';\nimport { MapContent } from './components/MapContent.js';\nimport { MapUnavailable } from './components/MapUnavailable.js';\nimport {\n  DEFAULT_LEGEND_SIZES,\n  DEFAULT_MAP_HEIGHT,\n  DEFAULT_TRUNCATION_MODE,\n} from './constants.js';\nimport { FormatterContext } from './contexts/formatter.context.js';\nimport { LayerIdsContext } from './contexts/layer-ids.context.js';\nimport { MapBaseLayerFeaturesContext } from './contexts/map-base-layer.context.js';\nimport { MapConfigurationContext } from './contexts/map-configuration.context.js';\nimport { MapLoadingContext } from './contexts/map-loading.context.js';\nimport { MapRawDataContext } from './contexts/map-raw-data.context.js';\nimport { MapTruncationModeContext } from './contexts/map-truncation-mode.context.js';\nimport { useLoadMapBaseLayer } from './hooks/use-load-map-base-layer.js';\nimport { ColorScaleProvider } from './providers/color-scale.provider.js';\nimport { LayerColorStrategyProvider } from './providers/layer-color-strategy.provider.js';\nimport { ErrorStateSlot } from './slots/states/ErrorStateSlot.js';\nimport { MapStoreProvider } from './store/map-store.provider.js';\nimport type { MapViewProps, MapViewRef } from './types/map-view.js';\nimport { extractLayersData } from './utils/extract-layers-data.js';\nimport { getMapStatesTemplates } from './utils/get-map-states-template.js';\nimport { iterateConfigSlots } from './utils/iterate-config-slots.js';\nimport { setLayersId } from './utils/set-layers-id.js';\n\n// eslint-disable-next-line no-restricted-imports\nimport './styles/react-mapgl-styles.css';\n\n/**\n * MapView Component\n */\nconst _MapView = forwardRef<MapViewRef, PropsWithChildren<MapViewProps>>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      loading = false,\n      style: costumerStyle,\n      className: customerClassNames,\n      formatter,\n      truncationMode,\n      ...remaining\n    } = props;\n    const { layerIds, parsedChildren, valueAccessors } = setLayersId(children);\n\n    const {\n      flattenData: layersData,\n      categories,\n      legendDomain,\n    } = extractLayersData(parsedChildren, valueAccessors);\n\n    const config = iterateConfigSlots(children, legendDomain);\n\n    const isLegendHidden = !config.legend || !!config.legend.hidden;\n    const legendPosition = config.legend?.position;\n    const legendRatio = config.legend?.ratio;\n    const legendOnRatioChange = config.legend?.onRatioChange;\n\n    const { isMapEnabled, isFetchingFeatures, baseFeatureCollection, error } =\n      useLoadMapBaseLayer(config.baseLayer);\n\n    const [isMapLoaded, setIsMapLoaded] = useState<boolean>(false);\n    const { errorState } = getMapStatesTemplates(children);\n\n    const chartHeight = coerceSizeValue(props.height) || DEFAULT_MAP_HEIGHT;\n\n    const containerStyles = { width: '100%', ...costumerStyle };\n\n    const chartLayoutRef = useAutoLegendRefresh(layersData);\n    const mapUnavailable = (!isFetchingFeatures && !isMapEnabled) || error;\n\n    const isLoading = isFetchingFeatures || !isMapLoaded;\n\n    return (\n      <div\n        style={containerStyles}\n        className={customerClassNames}\n        data-testid=\"mapview-container\"\n      >\n        {\n          // TODO: Error boundaries global fix needed - this error state only purpose is to make map not rendering when there error in response\n          mapUnavailable ? (\n            <MapUnavailable\n              isFetchingFeatures={isFetchingFeatures}\n              isDisabled={!isMapEnabled}\n              chartHeight={chartHeight}\n              error={error}\n            />\n          ) : (\n            <MapLoadingContext.Provider value={loading}>\n              <MapBaseLayerFeaturesContext.Provider\n                value={baseFeatureCollection}\n              >\n                <MapConfigurationContext.Provider value={config}>\n                  <LayerIdsContext.Provider value={layerIds}>\n                    <MapTruncationModeContext.Provider\n                      value={truncationMode ?? DEFAULT_TRUNCATION_MODE}\n                    >\n                      <FormatterContext.Provider value={formatter}>\n                        <MapRawDataContext.Provider value={layersData}>\n                          <MapStoreProvider>\n                            <ColorScaleProvider categories={categories}>\n                              <LayerColorStrategyProvider>\n                                <ChartLayout\n                                  ref={chartLayoutRef}\n                                  chartHeight={chartHeight}\n                                  errorState={errorState}\n                                  showLoader={loading || isLoading}\n                                >\n                                  <ChartLayout.Graph>\n                                    {baseFeatureCollection && (\n                                      <MapContent\n                                        ref={forwardedRef}\n                                        onMapLoad={() => setIsMapLoaded(true)}\n                                        {...remaining}\n                                      >\n                                        {parsedChildren}\n                                      </MapContent>\n                                    )}\n                                  </ChartLayout.Graph>\n                                  {!isLegendHidden && (\n                                    <ChartLayout.Legend\n                                      position={legendPosition}\n                                      ratio={legendRatio}\n                                      ratioBoundaries={DEFAULT_LEGEND_SIZES}\n                                      onResize={legendOnRatioChange}\n                                    >\n                                      <MapLegendRenderer />\n                                    </ChartLayout.Legend>\n                                  )}\n                                </ChartLayout>\n                              </LayerColorStrategyProvider>\n                            </ColorScaleProvider>\n                          </MapStoreProvider>\n                        </MapRawDataContext.Provider>\n                      </FormatterContext.Provider>\n                    </MapTruncationModeContext.Provider>\n                  </LayerIdsContext.Provider>\n                </MapConfigurationContext.Provider>\n              </MapBaseLayerFeaturesContext.Provider>\n            </MapLoadingContext.Provider>\n          )\n        }\n      </div>\n    );\n  },\n);\n\n(_MapView as typeof _MapView & { displayName: string })['displayName'] =\n  'MapView';\n\n/**\n * The `MapView` is a component that renders a map with various geospatial data layers.\n * @public\n */\nexport const MapView = Object.assign(_MapView, {\n  ErrorState: ErrorStateSlot,\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/map/components/BubbleLayer/BubbleCircleLayer.js

@@ -1,5 +1,5 @@
+import { Layer } from "@vis.gl/react-maplibre";
 import React from "react";
-import { Layer } from "react-map-gl/maplibre";
 import { useSizeInterpolation } from "./hooks/use-size-interpolation.js";
 import { buildCircleStickToDistanceExpression } from "./utils/build-stick-to-distance-expressions.js";
 import {

package/esm/map/components/BubbleLayer/BubbleCircleLayer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/BubbleLayer/BubbleCircleLayer.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport { Layer } from 'react-map-gl/maplibre';\n\nimport { useSizeInterpolation } from './hooks/use-size-interpolation.js';\nimport { buildCircleStickToDistanceExpression } from './utils/build-stick-to-distance-expressions.js';\nimport {\n  BUBBLE_DEFAULT_OPACITY,\n  BUBBLE_STROKE,\n  DEFAULT_RADIUS_EXPRESSION,\n  SHAPE_OPACITY_DIMMED,\n  SHAPE_OPACITY_DEFAULT,\n} from '../../constants.js';\n\nexport const BubbleCircleLayer = ({\n  id,\n  source,\n}: {\n  id: string;\n  source: string;\n}) => {\n  const sizeInterpolation = useSizeInterpolation();\n\n  const radiusExpression =\n    sizeInterpolation === 'fixed'\n      ? DEFAULT_RADIUS_EXPRESSION\n      : buildCircleStickToDistanceExpression();\n\n  return (\n    <Layer\n      type=\"circle\"\n      id={id}\n      source={source}\n      paint={{\n        'circle-color': [\n          'case',\n          ['boolean', ['feature-state', 'hover'], false],\n          ['get', '__hoveredColor'],\n          ['get', '__color'],\n        ],\n        'circle-radius': radiusExpression,\n        'circle-opacity': [\n          'case',\n          ['boolean', ['feature-state', 'legendHover'], true],\n          BUBBLE_DEFAULT_OPACITY,\n          SHAPE_OPACITY_DIMMED,\n        ],\n        'circle-stroke-width': BUBBLE_STROKE,\n        'circle-stroke-color': [\n          'case',\n          ['boolean', ['feature-state', 'hover'], false],\n          ['get', '__hoveredColor'],\n          ['get', '__color'],\n        ],\n        'circle-stroke-opacity': [\n          'case',\n          ['boolean', ['feature-state', 'legendHover'], true],\n          SHAPE_OPACITY_DEFAULT,\n          SHAPE_OPACITY_DIMMED,\n        ],\n      }}\n    />\n  );\n};\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,aAAa;AAEtB,SAAS,4BAA4B;AACrC,SAAS,4CAA4C;AACrD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AACF,MAGM;AACJ,QAAM,oBAAoB,qBAAqB;AAE/C,QAAM,mBACJ,sBAAsB,UAClB,4BACA,qCAAqC;AAE3C,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,gBAAgB;AAAA,UACxB,CAAC,OAAO,SAAS;AAAA,QACnB;AAAA,QACA,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,UAChB;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,UAClD;AAAA,UACA;AAAA,QACF;AAAA,QACA,uBAAuB;AAAA,QACvB,uBAAuB;AAAA,UACrB;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,UAC7C,CAAC,OAAO,gBAAgB;AAAA,UACxB,CAAC,OAAO,SAAS;AAAA,QACnB;AAAA,QACA,yBAAyB;AAAA,UACvB;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,UAClD;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { Layer } from '@vis.gl/react-maplibre';\nimport React from 'react';\n\nimport { useSizeInterpolation } from './hooks/use-size-interpolation.js';\nimport { buildCircleStickToDistanceExpression } from './utils/build-stick-to-distance-expressions.js';\nimport {\n  BUBBLE_DEFAULT_OPACITY,\n  BUBBLE_STROKE,\n  DEFAULT_RADIUS_EXPRESSION,\n  SHAPE_OPACITY_DIMMED,\n  SHAPE_OPACITY_DEFAULT,\n} from '../../constants.js';\n\nexport const BubbleCircleLayer = ({\n  id,\n  source,\n}: {\n  id: string;\n  source: string;\n}) => {\n  const sizeInterpolation = useSizeInterpolation();\n\n  const radiusExpression =\n    sizeInterpolation === 'fixed'\n      ? DEFAULT_RADIUS_EXPRESSION\n      : buildCircleStickToDistanceExpression();\n\n  return (\n    <Layer\n      type=\"circle\"\n      id={id}\n      source={source}\n      paint={{\n        'circle-color': [\n          'case',\n          ['boolean', ['feature-state', 'hover'], false],\n          ['get', '__hoveredColor'],\n          ['get', '__color'],\n        ],\n        'circle-radius': radiusExpression,\n        'circle-opacity': [\n          'case',\n          ['boolean', ['feature-state', 'legendHover'], true],\n          BUBBLE_DEFAULT_OPACITY,\n          SHAPE_OPACITY_DIMMED,\n        ],\n        'circle-stroke-width': BUBBLE_STROKE,\n        'circle-stroke-color': [\n          'case',\n          ['boolean', ['feature-state', 'hover'], false],\n          ['get', '__hoveredColor'],\n          ['get', '__color'],\n        ],\n        'circle-stroke-opacity': [\n          'case',\n          ['boolean', ['feature-state', 'legendHover'], true],\n          SHAPE_OPACITY_DEFAULT,\n          SHAPE_OPACITY_DIMMED,\n        ],\n      }}\n    />\n  );\n};\n"],
+  "mappings": "AAAA,SAAS,aAAa;AACtB,OAAO,WAAW;AAElB,SAAS,4BAA4B;AACrC,SAAS,4CAA4C;AACrD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AACF,MAGM;AACJ,QAAM,oBAAoB,qBAAqB;AAE/C,QAAM,mBACJ,sBAAsB,UAClB,4BACA,qCAAqC;AAE3C,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,gBAAgB;AAAA,UACxB,CAAC,OAAO,SAAS;AAAA,QACnB;AAAA,QACA,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,UAChB;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,UAClD;AAAA,UACA;AAAA,QACF;AAAA,QACA,uBAAuB;AAAA,QACvB,uBAAuB;AAAA,UACrB;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,UAC7C,CAAC,OAAO,gBAAgB;AAAA,UACxB,CAAC,OAAO,SAAS;AAAA,QACnB;AAAA,QACA,yBAAyB;AAAA,UACvB;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,UAClD;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/esm/map/components/BubbleLayer/BubbleLayer.js

@@ -1,5 +1,5 @@
+import { Source } from "@vis.gl/react-maplibre";
 import React from "react";
-import { Source } from "react-map-gl/maplibre";
 import { BubbleCircleLayer } from "./BubbleCircleLayer.js";
 import { BubbleLayerTooltip } from "./BubbleLayerTooltip.js";
 import { BubbleOutlineLayer } from "./BubbleOutlineLayer.js";

package/esm/map/components/BubbleLayer/BubbleLayer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/BubbleLayer/BubbleLayer.tsx"],
-  "sourcesContent": ["import React, { type PropsWithChildren } from 'react';\nimport { Source } from 'react-map-gl/maplibre';\n\nimport { BubbleCircleLayer } from './BubbleCircleLayer.js';\nimport { BubbleLayerTooltip } from './BubbleLayerTooltip.js';\nimport { BubbleOutlineLayer } from './BubbleOutlineLayer.js';\nimport { SizeInterpolationContext } from './contexts/size-interpolation.context.js';\nimport { buildRadiusScale } from './utils/build-radius-scale.js';\nimport { parseBubbleDataToGeoJSON } from './utils/parse-bubble-data-to-geo-json.js';\nimport { DEFAULT_BUBBLE_COLOR, DEFAULT_RADIUS } 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 { useResolveLocationColor } from '../../hooks/use-resolve-color.js';\nimport { useTooltipTemplate } from '../../hooks/use-tooltip-template.js';\nimport { BubbleLayerTooltip as BubbleLayerTooltipSlot } from '../../slots/BubbleLayerTooltip.js';\nimport {\n  type InternalBubbleLayerProps,\n  isScaleRadius,\n} from '../../types/bubble-layer.js';\nimport type { Location } from '../../types/location.js';\nimport { isBubbleTooltipTemplate } from '../../utils/tooltip-type-guards.js';\n\nexport const BubbleLayer = <T extends Location>(\n  props: PropsWithChildren<InternalBubbleLayerProps<T>>,\n) => {\n  const {\n    data,\n    layerId,\n    radius = DEFAULT_RADIUS,\n    children,\n    sizeInterpolation = 'fixed',\n  } = props;\n\n  const colorParser = useLayerColoringStrategy();\n  const bubbleColor = useResolveLocationColor(\n    DEFAULT_BUBBLE_COLOR,\n    props,\n    colorParser,\n  );\n\n  const sourceId = `source-${layerId}`;\n  useLegendInteractionHighlighting(props, sourceId);\n  useLegendInteractionVisibility(props, layerId);\n\n  let radiusScale = (value: number) => value;\n\n  if (isScaleRadius(props)) {\n    const { radiusRange = [10, 100], radius, scale = 'linear' } = props;\n\n    radiusScale = buildRadiusScale(data, radius, scale, radiusRange);\n  }\n\n  const dataGeoJson = parseBubbleDataToGeoJSON(\n    data,\n    bubbleColor,\n    radius,\n    radiusScale,\n  );\n\n  const tooltipTemplate = useTooltipTemplate(children, BubbleLayerTooltipSlot);\n\n  return (\n    <>\n      <SizeInterpolationContext.Provider value={sizeInterpolation}>\n        <Source id={sourceId} type=\"geojson\" data={dataGeoJson} generateId>\n          <BubbleCircleLayer id={layerId} source={sourceId} />\n          <BubbleOutlineLayer beforeId={layerId} source={sourceId} />\n        </Source>\n      </SizeInterpolationContext.Provider>\n\n      <BubbleLayerTooltip\n        layerId={layerId}\n        tooltipTemplate={\n          isBubbleTooltipTemplate(tooltipTemplate) ? tooltipTemplate : undefined\n        }\n      />\n    </>\n  );\n};\n\nBubbleLayer['displayName'] = 'BubbleLayer';\n"],
-  "mappings": "AAAA,OAAO,WAAuC;AAC9C,SAAS,cAAc;AAEvB,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AACnC,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AACzC,SAAS,sBAAsB,sBAAsB;AACrD,SAAS,gCAAgC;AACzC,SAAS,wCAAwC;AACjD,SAAS,sCAAsC;AAC/C,SAAS,+BAA+B;AACxC,SAAS,0BAA0B;AACnC,SAAS,sBAAsB,8BAA8B;AAC7D;AAAA,EAEE;AAAA,OACK;AAEP,SAAS,+BAA+B;AAEjC,MAAM,cAAc,CACzB,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,oBAAoB;AAAA,EACtB,IAAI;AAEJ,QAAM,cAAc,yBAAyB;AAC7C,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,WAAW,UAAU,OAAO;AAClC,mCAAiC,OAAO,QAAQ;AAChD,iCAA+B,OAAO,OAAO;AAE7C,MAAI,cAAc,CAAC,UAAkB;AAErC,MAAI,cAAc,KAAK,GAAG;AACxB,UAAM,EAAE,cAAc,CAAC,IAAI,GAAG,GAAG,QAAAA,SAAQ,QAAQ,SAAS,IAAI;AAE9D,kBAAc,iBAAiB,MAAMA,SAAQ,OAAO,WAAW;AAAA,EACjE;AAEA,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,kBAAkB,mBAAmB,UAAU,sBAAsB;AAE3E,SACE,0DACE,oCAAC,yBAAyB,UAAzB,EAAkC,OAAO,qBACxC,oCAAC,UAAO,IAAI,UAAU,MAAK,WAAU,MAAM,aAAa,YAAU,QAChE,oCAAC,qBAAkB,IAAI,SAAS,QAAQ,UAAU,GAClD,oCAAC,sBAAmB,UAAU,SAAS,QAAQ,UAAU,CAC3D,CACF,GAEA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,iBACE,wBAAwB,eAAe,IAAI,kBAAkB;AAAA;AAAA,EAEjE,CACF;AAEJ;AAEA,YAAY,aAAa,IAAI;",
+  "sourcesContent": ["import { Source } from '@vis.gl/react-maplibre';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { BubbleCircleLayer } from './BubbleCircleLayer.js';\nimport { BubbleLayerTooltip } from './BubbleLayerTooltip.js';\nimport { BubbleOutlineLayer } from './BubbleOutlineLayer.js';\nimport { SizeInterpolationContext } from './contexts/size-interpolation.context.js';\nimport { buildRadiusScale } from './utils/build-radius-scale.js';\nimport { parseBubbleDataToGeoJSON } from './utils/parse-bubble-data-to-geo-json.js';\nimport { DEFAULT_BUBBLE_COLOR, DEFAULT_RADIUS } 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 { useResolveLocationColor } from '../../hooks/use-resolve-color.js';\nimport { useTooltipTemplate } from '../../hooks/use-tooltip-template.js';\nimport { BubbleLayerTooltip as BubbleLayerTooltipSlot } from '../../slots/BubbleLayerTooltip.js';\nimport {\n  type InternalBubbleLayerProps,\n  isScaleRadius,\n} from '../../types/bubble-layer.js';\nimport type { Location } from '../../types/location.js';\nimport { isBubbleTooltipTemplate } from '../../utils/tooltip-type-guards.js';\n\nexport const BubbleLayer = <T extends Location>(\n  props: PropsWithChildren<InternalBubbleLayerProps<T>>,\n) => {\n  const {\n    data,\n    layerId,\n    radius = DEFAULT_RADIUS,\n    children,\n    sizeInterpolation = 'fixed',\n  } = props;\n\n  const colorParser = useLayerColoringStrategy();\n  const bubbleColor = useResolveLocationColor(\n    DEFAULT_BUBBLE_COLOR,\n    props,\n    colorParser,\n  );\n\n  const sourceId = `source-${layerId}`;\n  useLegendInteractionHighlighting(props, sourceId);\n  useLegendInteractionVisibility(props, layerId);\n\n  let radiusScale = (value: number) => value;\n\n  if (isScaleRadius(props)) {\n    const { radiusRange = [10, 100], radius, scale = 'linear' } = props;\n\n    radiusScale = buildRadiusScale(data, radius, scale, radiusRange);\n  }\n\n  const dataGeoJson = parseBubbleDataToGeoJSON(\n    data,\n    bubbleColor,\n    radius,\n    radiusScale,\n  );\n\n  const tooltipTemplate = useTooltipTemplate(children, BubbleLayerTooltipSlot);\n\n  return (\n    <>\n      <SizeInterpolationContext.Provider value={sizeInterpolation}>\n        <Source id={sourceId} type=\"geojson\" data={dataGeoJson} generateId>\n          <BubbleCircleLayer id={layerId} source={sourceId} />\n          <BubbleOutlineLayer beforeId={layerId} source={sourceId} />\n        </Source>\n      </SizeInterpolationContext.Provider>\n\n      <BubbleLayerTooltip\n        layerId={layerId}\n        tooltipTemplate={\n          isBubbleTooltipTemplate(tooltipTemplate) ? tooltipTemplate : undefined\n        }\n      />\n    </>\n  );\n};\n\nBubbleLayer['displayName'] = 'BubbleLayer';\n"],
+  "mappings": "AAAA,SAAS,cAAc;AACvB,OAAO,WAAuC;AAE9C,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AACnC,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AACzC,SAAS,sBAAsB,sBAAsB;AACrD,SAAS,gCAAgC;AACzC,SAAS,wCAAwC;AACjD,SAAS,sCAAsC;AAC/C,SAAS,+BAA+B;AACxC,SAAS,0BAA0B;AACnC,SAAS,sBAAsB,8BAA8B;AAC7D;AAAA,EAEE;AAAA,OACK;AAEP,SAAS,+BAA+B;AAEjC,MAAM,cAAc,CACzB,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,oBAAoB;AAAA,EACtB,IAAI;AAEJ,QAAM,cAAc,yBAAyB;AAC7C,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,WAAW,UAAU,OAAO;AAClC,mCAAiC,OAAO,QAAQ;AAChD,iCAA+B,OAAO,OAAO;AAE7C,MAAI,cAAc,CAAC,UAAkB;AAErC,MAAI,cAAc,KAAK,GAAG;AACxB,UAAM,EAAE,cAAc,CAAC,IAAI,GAAG,GAAG,QAAAA,SAAQ,QAAQ,SAAS,IAAI;AAE9D,kBAAc,iBAAiB,MAAMA,SAAQ,OAAO,WAAW;AAAA,EACjE;AAEA,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,kBAAkB,mBAAmB,UAAU,sBAAsB;AAE3E,SACE,0DACE,oCAAC,yBAAyB,UAAzB,EAAkC,OAAO,qBACxC,oCAAC,UAAO,IAAI,UAAU,MAAK,WAAU,MAAM,aAAa,YAAU,QAChE,oCAAC,qBAAkB,IAAI,SAAS,QAAQ,UAAU,GAClD,oCAAC,sBAAmB,UAAU,SAAS,QAAQ,UAAU,CAC3D,CACF,GAEA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,iBACE,wBAAwB,eAAe,IAAI,kBAAkB;AAAA;AAAA,EAEjE,CACF;AAEJ;AAEA,YAAY,aAAa,IAAI;",
   "names": ["radius"]
 }

package/esm/map/components/BubbleLayer/BubbleOutlineLayer.js

@@ -1,5 +1,5 @@
+import { Layer } from "@vis.gl/react-maplibre";
 import React from "react";
-import { Layer } from "react-map-gl/maplibre";
 import { _getCanvasColor as getCanvasColor } from "@dynatrace/strato-components-preview/charts";
 import { useSizeInterpolation } from "./hooks/use-size-interpolation.js";
 import { addOutlineSize } from "./utils/add-outline-size.js";

package/esm/map/components/BubbleLayer/BubbleOutlineLayer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/BubbleLayer/BubbleOutlineLayer.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport { Layer } from 'react-map-gl/maplibre';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components-preview/charts';\n\nimport { useSizeInterpolation } from './hooks/use-size-interpolation.js';\nimport { addOutlineSize } from './utils/add-outline-size.js';\nimport { buildOutlineStickToDistanceExpression } from './utils/build-stick-to-distance-expressions.js';\nimport {\n  ACTIVE_COLOR,\n  BUBBLE_OUTLINE_STROKE,\n  DEFAULT_RADIUS_EXPRESSION,\n} from '../../constants.js';\n\nconst DEFAULT_OUTLINE_RADIUS_EXPRESSION = addOutlineSize(\n  DEFAULT_RADIUS_EXPRESSION,\n);\n\nexport const BubbleOutlineLayer = ({\n  beforeId,\n  source,\n}: {\n  beforeId: string;\n  source: string;\n}) => {\n  const sizeInterpolation = useSizeInterpolation();\n\n  const outlineRadiusExpression =\n    sizeInterpolation === 'fixed'\n      ? DEFAULT_OUTLINE_RADIUS_EXPRESSION\n      : buildOutlineStickToDistanceExpression();\n\n  return (\n    <Layer\n      type=\"circle\"\n      beforeId={beforeId}\n      source={source}\n      paint={{\n        'circle-radius': outlineRadiusExpression,\n        'circle-opacity': 0,\n        'circle-stroke-width': BUBBLE_OUTLINE_STROKE,\n        'circle-stroke-color': getCanvasColor(ACTIVE_COLOR),\n        'circle-stroke-opacity': [\n          'case',\n          ['boolean', ['feature-state', 'active'], false],\n          1,\n          0,\n        ],\n      }}\n    />\n  );\n};\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,aAAa;AAEtB,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAC/B,SAAS,6CAA6C;AACtD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,oCAAoC;AAAA,EACxC;AACF;AAEO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AACF,MAGM;AACJ,QAAM,oBAAoB,qBAAqB;AAE/C,QAAM,0BACJ,sBAAsB,UAClB,oCACA,sCAAsC;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,OAAO;AAAA,QACL,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,QAClB,uBAAuB;AAAA,QACvB,uBAAuB,eAAe,YAAY;AAAA,QAClD,yBAAyB;AAAA,UACvB;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,QAAQ,GAAG,KAAK;AAAA,UAC9C;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { Layer } from '@vis.gl/react-maplibre';\nimport React from 'react';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components-preview/charts';\n\nimport { useSizeInterpolation } from './hooks/use-size-interpolation.js';\nimport { addOutlineSize } from './utils/add-outline-size.js';\nimport { buildOutlineStickToDistanceExpression } from './utils/build-stick-to-distance-expressions.js';\nimport {\n  ACTIVE_COLOR,\n  BUBBLE_OUTLINE_STROKE,\n  DEFAULT_RADIUS_EXPRESSION,\n} from '../../constants.js';\n\nconst DEFAULT_OUTLINE_RADIUS_EXPRESSION = addOutlineSize(\n  DEFAULT_RADIUS_EXPRESSION,\n);\n\nexport const BubbleOutlineLayer = ({\n  beforeId,\n  source,\n}: {\n  beforeId: string;\n  source: string;\n}) => {\n  const sizeInterpolation = useSizeInterpolation();\n\n  const outlineRadiusExpression =\n    sizeInterpolation === 'fixed'\n      ? DEFAULT_OUTLINE_RADIUS_EXPRESSION\n      : buildOutlineStickToDistanceExpression();\n\n  return (\n    <Layer\n      type=\"circle\"\n      beforeId={beforeId}\n      source={source}\n      paint={{\n        'circle-radius': outlineRadiusExpression,\n        'circle-opacity': 0,\n        'circle-stroke-width': BUBBLE_OUTLINE_STROKE,\n        'circle-stroke-color': getCanvasColor(ACTIVE_COLOR),\n        'circle-stroke-opacity': [\n          'case',\n          ['boolean', ['feature-state', 'active'], false],\n          1,\n          0,\n        ],\n      }}\n    />\n  );\n};\n"],
+  "mappings": "AAAA,SAAS,aAAa;AACtB,OAAO,WAAW;AAElB,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAC/B,SAAS,6CAA6C;AACtD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,oCAAoC;AAAA,EACxC;AACF;AAEO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AACF,MAGM;AACJ,QAAM,oBAAoB,qBAAqB;AAE/C,QAAM,0BACJ,sBAAsB,UAClB,oCACA,sCAAsC;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,OAAO;AAAA,QACL,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,QAClB,uBAAuB;AAAA,QACvB,uBAAuB,eAAe,YAAY;AAAA,QAClD,yBAAyB;AAAA,UACvB;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,QAAQ,GAAG,KAAK;AAAA,UAC9C;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/esm/map/components/BubbleLayer/utils/parse-bubble-data-to-geo-json.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/map/components/BubbleLayer/utils/parse-bubble-data-to-geo-json.ts"],
-  "sourcesContent": ["import type { ScaleLinear, ScaleLogarithmic } from 'd3-scale';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components-preview/charts';\n\nimport { defineRadius } from './define-radius.js';\nimport type { Location } from '../../../types/location.js';\nimport { calculateHoveredColor } from '../../../utils/calculate-hovered-color.js';\nimport { defineColor } from '../../../utils/define-color.js';\n\ntype RadiusScale =\n  | ScaleLinear<number, number>\n  | ScaleLogarithmic<number, number>\n  | ((value: number) => number);\n\nexport const parseBubbleDataToGeoJSON = <T extends Location>(\n  data: T[],\n  color: string | ((item: T) => string),\n  radius: number | ((item: T) => number),\n  scale: RadiusScale,\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      const scaledRadius = scale(defineRadius(radius, feature));\n\n      return {\n        type: 'Feature',\n        properties: {\n          data: feature,\n          ...properties,\n          __color: canvasColor,\n          __hoveredColor: hoveredColor,\n          __radius: scaledRadius,\n          __lat: latitude,\n        },\n        geometry: { type: 'Point', coordinates: [longitude, latitude] },\n      };\n    }),\n  };\n};\n"],
-  "mappings": "AAEA,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,oBAAoB;AAE7B,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAOrB,MAAM,2BAA2B,CACtC,MACA,OACA,QACA,UACG;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;AACtD,YAAM,eAAe,MAAM,aAAa,QAAQ,OAAO,CAAC;AAExD,aAAO;AAAA,QACL,MAAM;AAAA,QACN,YAAY;AAAA,UACV,MAAM;AAAA,UACN,GAAG;AAAA,UACH,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,UAAU;AAAA,UACV,OAAO;AAAA,QACT;AAAA,QACA,UAAU,EAAE,MAAM,SAAS,aAAa,CAAC,WAAW,QAAQ,EAAE;AAAA,MAChE;AAAA,IACF,CAAC;AAAA,EACH;AACF;",
+  "sourcesContent": ["import type { ScaleLinear, ScaleLogarithmic } from 'd3-scale';\nimport type GeoJSON from 'geojson';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components-preview/charts';\n\nimport { defineRadius } from './define-radius.js';\nimport type { Location } from '../../../types/location.js';\nimport { calculateHoveredColor } from '../../../utils/calculate-hovered-color.js';\nimport { defineColor } from '../../../utils/define-color.js';\n\ntype RadiusScale =\n  | ScaleLinear<number, number>\n  | ScaleLogarithmic<number, number>\n  | ((value: number) => number);\n\nexport const parseBubbleDataToGeoJSON = <T extends Location>(\n  data: T[],\n  color: string | ((item: T) => string),\n  radius: number | ((item: T) => number),\n  scale: RadiusScale,\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      const scaledRadius = scale(defineRadius(radius, feature));\n\n      return {\n        type: 'Feature',\n        properties: {\n          data: feature,\n          ...properties,\n          __color: canvasColor,\n          __hoveredColor: hoveredColor,\n          __radius: scaledRadius,\n          __lat: latitude,\n        },\n        geometry: { type: 'Point', coordinates: [longitude, latitude] },\n      };\n    }),\n  };\n};\n"],
+  "mappings": "AAGA,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,oBAAoB;AAE7B,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAOrB,MAAM,2BAA2B,CACtC,MACA,OACA,QACA,UAC8B;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;AACtD,YAAM,eAAe,MAAM,aAAa,QAAQ,OAAO,CAAC;AAExD,aAAO;AAAA,QACL,MAAM;AAAA,QACN,YAAY;AAAA,UACV,MAAM;AAAA,UACN,GAAG;AAAA,UACH,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,UAAU;AAAA,UACV,OAAO;AAAA,QACT;AAAA,QACA,UAAU,EAAE,MAAM,SAAS,aAAa,CAAC,WAAW,QAAQ,EAAE;AAAA,MAChE;AAAA,IACF,CAAC;AAAA,EACH;AACF;",
   "names": []
 }

package/esm/map/components/ChoroplethLayer/ChoroplethLayer.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 { _getCanvasColor as getCanvasColor } from "@dynatrace/strato-components-preview/charts";
 import { ChoroplethLayerTooltip } from "./ChoroplethLayerTooltip.js";
 import { parseRegionDataToGeoJSON } from "./utils/parse-region-data-to-geo-json.js";
@@ -40,7 +40,7 @@ const ChoroplethLayer = (props) => {
     children,
     ChoroplethLayerTooltipSlot
   );
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Source, { id: sourceId, type: "geojson", data: dataGeoJSON, generateId: true }, /* @__PURE__ */ React.createElement(
+  return dataGeoJSON && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Source, { id: sourceId, type: "geojson", data: dataGeoJSON, generateId: true }, /* @__PURE__ */ React.createElement(
     Layer,
     {
       id: layerId,

package/esm/map/components/ChoroplethLayer/ChoroplethLayer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/ChoroplethLayer/ChoroplethLayer.tsx"],
-  "sourcesContent": ["import React, { type PropsWithChildren } from 'react';\nimport { Layer, Source } from 'react-map-gl/maplibre';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components-preview/charts';\n\nimport { ChoroplethLayerTooltip } from './ChoroplethLayerTooltip.js';\nimport { parseRegionDataToGeoJSON } from './utils/parse-region-data-to-geo-json.js';\nimport {\n  ACTIVE_COLOR,\n  ACTIVE_BORDER_WIDTH_OUTER,\n  COUNTRY_BORDER_WIDTH,\n  REGION_BORDER_WIDTH,\n  DEFAULT_CHOROPLETH_COLOR,\n  DEFAULT_BOUNDARIES_BORDER_COLOR,\n  SHAPE_OPACITY_DIMMED,\n  SHAPE_OPACITY_DEFAULT,\n  TRANSPARENT_BORDER_COLOR,\n  ACTIVE_BORDER_WIDTH_INNER,\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 { useMapBaseLayerFeatures } from '../../hooks/use-map-base-layer-features.js';\nimport { useResolveChoroplethColor } from '../../hooks/use-resolve-color.js';\nimport { useTooltipTemplate } from '../../hooks/use-tooltip-template.js';\nimport { ChoroplethLayerTooltip as ChoroplethLayerTooltipSlot } from '../../slots/ChoroplethLayerTooltip.js';\nimport type { InternalChoroplethLayerProps } from '../../types/choropleth-layer.js';\nimport { isChoroplethTooltipTemplate } from '../../utils/tooltip-type-guards.js';\n\nexport const ChoroplethLayer = <T extends Record<string, unknown>>(\n  props: PropsWithChildren<InternalChoroplethLayerProps<T>>,\n) => {\n  const { layerId, data, regionAccessor, children } = props;\n\n  const mapSource = useMapBaseLayerFeatures();\n\n  const colorParser = useLayerColoringStrategy();\n  const choroplethColor = useResolveChoroplethColor(\n    DEFAULT_CHOROPLETH_COLOR,\n    props,\n    colorParser,\n  );\n  const sourceId = layerId.replace('layer', 'source');\n  useLegendInteractionHighlighting(props, sourceId);\n  useLegendInteractionVisibility(props, layerId);\n\n  const dataGeoJSON =\n    mapSource &&\n    parseRegionDataToGeoJSON(mapSource, data, regionAccessor, choroplethColor);\n\n  const tooltipTemplate = useTooltipTemplate(\n    children,\n    ChoroplethLayerTooltipSlot,\n  );\n\n  return (\n    <>\n      <Source id={sourceId} type=\"geojson\" data={dataGeoJSON} generateId>\n        <Layer\n          id={layerId}\n          source={sourceId}\n          type=\"fill\"\n          paint={{\n            'fill-color': ['get', '__color'],\n            'fill-opacity': [\n              'case',\n              ['==', ['feature-state', 'legendHover'], false],\n              SHAPE_OPACITY_DIMMED,\n              ['==', ['feature-state', 'active'], true],\n              SHAPE_OPACITY_DEFAULT,\n              ['==', ['feature-state', 'hover'], true],\n              SHAPE_OPACITY_DEFAULT,\n              ['==', ['feature-state', 'legendHover'], true],\n              SHAPE_OPACITY_DEFAULT,\n              ['==', ['feature-state', 'isAnyActive'], true],\n              SHAPE_OPACITY_DIMMED,\n              SHAPE_OPACITY_DEFAULT,\n            ],\n          }}\n        />\n\n        <Layer\n          source={sourceId}\n          type=\"line\"\n          paint={{\n            'line-color': [\n              'case',\n              ['==', ['feature-state', 'active'], true],\n              getCanvasColor(DEFAULT_BOUNDARIES_BORDER_COLOR),\n              ['==', ['feature-state', 'hover'], true],\n              getCanvasColor(DEFAULT_BOUNDARIES_BORDER_COLOR),\n              getCanvasColor(DEFAULT_BOUNDARIES_BORDER_COLOR),\n            ],\n            'line-width': [\n              'case',\n              ['==', ['feature-state', 'active'], true],\n              ACTIVE_BORDER_WIDTH_OUTER,\n              ['==', ['feature-state', 'hover'], true],\n              ACTIVE_BORDER_WIDTH_OUTER,\n              ['==', ['get', 'region_type'], 'REGION'],\n              REGION_BORDER_WIDTH,\n              COUNTRY_BORDER_WIDTH,\n            ],\n          }}\n        />\n\n        <Layer\n          source={sourceId}\n          type=\"line\"\n          paint={{\n            'line-color': [\n              'case',\n              ['==', ['feature-state', 'active'], true],\n              getCanvasColor(ACTIVE_COLOR),\n              ['==', ['feature-state', 'hover'], true],\n              getCanvasColor(ACTIVE_COLOR),\n              getCanvasColor(TRANSPARENT_BORDER_COLOR),\n            ],\n            'line-width': ACTIVE_BORDER_WIDTH_INNER,\n          }}\n        />\n      </Source>\n\n      <ChoroplethLayerTooltip\n        layerId={layerId}\n        tooltipTemplate={\n          isChoroplethTooltipTemplate(tooltipTemplate)\n            ? tooltipTemplate\n            : undefined\n        }\n      />\n    </>\n  );\n};\n\nChoroplethLayer['displayName'] = 'ChoroplethLayer';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Layer, Source } from '@vis.gl/react-maplibre';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components-preview/charts';\n\nimport { ChoroplethLayerTooltip } from './ChoroplethLayerTooltip.js';\nimport { parseRegionDataToGeoJSON } from './utils/parse-region-data-to-geo-json.js';\nimport {\n  ACTIVE_COLOR,\n  ACTIVE_BORDER_WIDTH_OUTER,\n  COUNTRY_BORDER_WIDTH,\n  REGION_BORDER_WIDTH,\n  DEFAULT_CHOROPLETH_COLOR,\n  DEFAULT_BOUNDARIES_BORDER_COLOR,\n  SHAPE_OPACITY_DIMMED,\n  SHAPE_OPACITY_DEFAULT,\n  TRANSPARENT_BORDER_COLOR,\n  ACTIVE_BORDER_WIDTH_INNER,\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 { useMapBaseLayerFeatures } from '../../hooks/use-map-base-layer-features.js';\nimport { useResolveChoroplethColor } from '../../hooks/use-resolve-color.js';\nimport { useTooltipTemplate } from '../../hooks/use-tooltip-template.js';\nimport { ChoroplethLayerTooltip as ChoroplethLayerTooltipSlot } from '../../slots/ChoroplethLayerTooltip.js';\nimport type { InternalChoroplethLayerProps } from '../../types/choropleth-layer.js';\nimport { isChoroplethTooltipTemplate } from '../../utils/tooltip-type-guards.js';\n\nexport const ChoroplethLayer = <T extends Record<string, unknown>>(\n  props: PropsWithChildren<InternalChoroplethLayerProps<T>>,\n) => {\n  const { layerId, data, regionAccessor, children } = props;\n\n  const mapSource = useMapBaseLayerFeatures();\n\n  const colorParser = useLayerColoringStrategy();\n  const choroplethColor = useResolveChoroplethColor(\n    DEFAULT_CHOROPLETH_COLOR,\n    props,\n    colorParser,\n  );\n  const sourceId = layerId.replace('layer', 'source');\n  useLegendInteractionHighlighting(props, sourceId);\n  useLegendInteractionVisibility(props, layerId);\n\n  const dataGeoJSON =\n    mapSource &&\n    parseRegionDataToGeoJSON(mapSource, data, regionAccessor, choroplethColor);\n\n  const tooltipTemplate = useTooltipTemplate(\n    children,\n    ChoroplethLayerTooltipSlot,\n  );\n\n  return (\n    dataGeoJSON && (\n      <>\n        <Source id={sourceId} type=\"geojson\" data={dataGeoJSON} generateId>\n          <Layer\n            id={layerId}\n            source={sourceId}\n            type=\"fill\"\n            paint={{\n              'fill-color': ['get', '__color'],\n              'fill-opacity': [\n                'case',\n                ['==', ['feature-state', 'legendHover'], false],\n                SHAPE_OPACITY_DIMMED,\n                ['==', ['feature-state', 'active'], true],\n                SHAPE_OPACITY_DEFAULT,\n                ['==', ['feature-state', 'hover'], true],\n                SHAPE_OPACITY_DEFAULT,\n                ['==', ['feature-state', 'legendHover'], true],\n                SHAPE_OPACITY_DEFAULT,\n                ['==', ['feature-state', 'isAnyActive'], true],\n                SHAPE_OPACITY_DIMMED,\n                SHAPE_OPACITY_DEFAULT,\n              ],\n            }}\n          />\n\n          <Layer\n            source={sourceId}\n            type=\"line\"\n            paint={{\n              'line-color': [\n                'case',\n                ['==', ['feature-state', 'active'], true],\n                getCanvasColor(DEFAULT_BOUNDARIES_BORDER_COLOR),\n                ['==', ['feature-state', 'hover'], true],\n                getCanvasColor(DEFAULT_BOUNDARIES_BORDER_COLOR),\n                getCanvasColor(DEFAULT_BOUNDARIES_BORDER_COLOR),\n              ],\n              'line-width': [\n                'case',\n                ['==', ['feature-state', 'active'], true],\n                ACTIVE_BORDER_WIDTH_OUTER,\n                ['==', ['feature-state', 'hover'], true],\n                ACTIVE_BORDER_WIDTH_OUTER,\n                ['==', ['get', 'region_type'], 'REGION'],\n                REGION_BORDER_WIDTH,\n                COUNTRY_BORDER_WIDTH,\n              ],\n            }}\n          />\n\n          <Layer\n            source={sourceId}\n            type=\"line\"\n            paint={{\n              'line-color': [\n                'case',\n                ['==', ['feature-state', 'active'], true],\n                getCanvasColor(ACTIVE_COLOR),\n                ['==', ['feature-state', 'hover'], true],\n                getCanvasColor(ACTIVE_COLOR),\n                getCanvasColor(TRANSPARENT_BORDER_COLOR),\n              ],\n              'line-width': ACTIVE_BORDER_WIDTH_INNER,\n            }}\n          />\n        </Source>\n\n        <ChoroplethLayerTooltip\n          layerId={layerId}\n          tooltipTemplate={\n            isChoroplethTooltipTemplate(tooltipTemplate)\n              ? tooltipTemplate\n              : undefined\n          }\n        />\n      </>\n    )\n  );\n};\n\nChoroplethLayer['displayName'] = 'ChoroplethLayer';\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,5 +1,5 @@
+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 {

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  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,OAAO,WAAW;AAClB,SAAS,OAAO,cAAc;AAE9B,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;",
+  "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

@@ -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 {
   DEFAULT_LINE_CAP,
   DEFAULT_LINE_DASH_ARRAY,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/ConnectionLayer/ConnectionLayerLine.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport { Layer, Source } from 'react-map-gl/maplibre';\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,OAAO,WAAW;AAClB,SAAS,OAAO,cAAc;AAE9B;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;",
+  "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/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";

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  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,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,10 +1,10 @@
+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 {
@@ -13,7 +13,11 @@ import {
   DEFAULT_BOUNDARIES_BORDER_COLOR,
   DEFAULT_COUNTRIES_FILL_COLOR,
   REGION_BORDER_WIDTH,
-  COUNTRY_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";
@@ -42,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,
@@ -84,6 +88,7 @@ const MapContent = forwardRef((props, forwardedRef) => {
     style,
     mapStyle = defaultStyle,
     onViewStateChange,
+    onMapLoad,
     ...remaining
   } = props;
   const loading = useMapLoading();
@@ -135,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_BOUNDARIES_BORDER_COLOR,\n  DEFAULT_COUNTRIES_FILL_COLOR,\n  REGION_BORDER_WIDTH,\n  COUNTRY_BORDER_WIDTH,\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      />\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\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": "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",
+  "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": []
 }

package/esm/map/components/MapUnavailable.js

@@ -5,12 +5,12 @@ const MapUnavailable = ({
   chartHeight,
   error,
   isDisabled,
-  isLoading
+  isFetchingFeatures
 }) => {
   if (error) {
     return /* @__PURE__ */ React.createElement(BaseLayerDataError, { height: chartHeight });
   }
-  if (!isLoading && isDisabled) {
+  if (!isFetchingFeatures && isDisabled) {
     return /* @__PURE__ */ React.createElement(DisabledState, { height: chartHeight });
   }
 };