@dynatrace/strato-geo 1.0.3 → 1.2.1

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

@@ -37,11 +37,12 @@ const parseRegionDataToGeoJSON = (mapSource, data, regionAccessor, color) => {
       const regionColor = (0, import_define_color.defineColor)(color, item);
       const canvasColor = (0, import_charts._getCanvasColor)(regionColor);
       const hoveredColor = (0, import_calculate_hovered_color.calculateHoveredColor)(canvasColor);
-      const { name } = feature.properties;
+      const { name, region_type } = feature.properties;
       const feat = {
         ...feature,
         properties: {
           name,
+          region_type,
           data: item,
           ...item,
           __color: canvasColor,

package/map/components/ConnectionLayer/ConnectionLayer.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { InternalConnectionLayerProps, Connection } from '../../types/connection-layer.js';
+import type { Connection, InternalConnectionLayerProps } from '../../types/connection-layer.js';
 export declare const ConnectionLayer: {
-    <T extends Connection>(props: React.PropsWithChildren<InternalConnectionLayerProps<T>>): React.JSX.Element[];
+    <T extends Connection>(props: React.PropsWithChildren<InternalConnectionLayerProps<T>>): React.JSX.Element;
     displayName: string;
 };

package/map/components/ConnectionLayer/ConnectionLayer.js

@@ -31,12 +31,15 @@ __export(ConnectionLayer_exports, {
 });
 module.exports = __toCommonJS(ConnectionLayer_exports);
 var import_react = __toESM(require("react"));
-var import_maplibre = require("react-map-gl/maplibre");
 var import_ConnectionLayerDirection = require("./ConnectionLayerDirection.js");
+var import_ConnectionLayerLine = require("./ConnectionLayerLine.js");
 var import_ConnectionLayerTooltip = require("./ConnectionLayerTooltip.js");
-var import_use_connection_layer_mouse_move = require("./hooks/use-connection-layer-mouse-move.js");
 var import_parse_connection_data_to_geo_json = require("./utils/parse-connection-data-to-geo-json.js");
 var import_constants = require("../../constants.js");
+var import_use_layer_coloring_strategy = require("../../hooks/use-layer-coloring-strategy.js");
+var import_use_legend_interaction_highlighting = require("../../hooks/use-legend-interaction-highlighting.js");
+var import_use_legend_interaction_visibility = require("../../hooks/use-legend-interaction-visibility.js");
+var import_use_resolve_color = require("../../hooks/use-resolve-color.js");
 var import_use_tooltip_template = require("../../hooks/use-tooltip-template.js");
 var import_ConnectionLayerTooltip2 = require("../../slots/ConnectionLayerTooltip.js");
 var import_tooltip_type_guards = require("../../utils/tooltip-type-guards.js");
@@ -45,66 +48,51 @@ const ConnectionLayer = (props) => {
     data,
     layerId,
     children,
-    color = import_constants.DEFAULT_LINE_COLOR,
     curve,
     directionIndicator,
     line,
     thickness = import_constants.DEFAULT_LINE_THICKNESS
   } = props;
+  const colorParser = (0, import_use_layer_coloring_strategy.useLayerColoringStrategy)();
+  const connectionColor = (0, import_use_resolve_color.useResolveConnectionColor)(
+    import_constants.DEFAULT_LINE_COLOR,
+    props,
+    colorParser
+  );
   const sourceId = `source-${layerId}`;
+  (0, import_use_legend_interaction_highlighting.useLegendInteractionHighlighting)(props, sourceId);
+  (0, import_use_legend_interaction_visibility.useLegendInteractionVisibility)(props, layerId);
   const geoJsonData = (0, import_parse_connection_data_to_geo_json.parseConnectionDataToGeoJSON)(
     data,
     thickness,
-    color,
+    connectionColor,
     curve
   );
   const tooltipTemplate = (0, import_use_tooltip_template.useTooltipTemplate)(
     children,
     import_ConnectionLayerTooltip2.ConnectionLayerTooltip
   );
-  const { layerIds } = (0, import_use_connection_layer_mouse_move.useConnectionLayerMouseMove)(geoJsonData.length, layerId);
-  return geoJsonData.map((featureCollection, index) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: index }, /* @__PURE__ */ import_react.default.createElement(
-    import_maplibre.Source,
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    import_ConnectionLayerLine.ConnectionLayerLine,
     {
-      id: `${sourceId}-${index}`,
-      type: "geojson",
-      data: featureCollection,
-      promoteId: "id"
-    },
-    /* @__PURE__ */ import_react.default.createElement(
-      import_maplibre.Layer,
-      {
-        type: "line",
-        id: layerIds[index],
-        layout: {
-          "line-cap": import_constants.DEFAULT_LINE_CAP,
-          "line-join": import_constants.DEFAULT_LINE_JOIN
-        },
-        paint: {
-          "line-color": [
-            "case",
-            ["boolean", ["feature-state", "hover"], false],
-            ["get", "__lineHoveredColor"],
-            ["get", "__lineColor"]
-          ],
-          "line-width": ["get", "__lineWidth"],
-          ...line && line === "dashed" ? { "line-dasharray": import_constants.DEFAULT_LINE_DASH_ARRAY } : null
-        }
-      }
-    )
-  ), /* @__PURE__ */ import_react.default.createElement(
-    import_ConnectionLayerTooltip.ConnectionLayerTooltip,
-    {
-      layerId: layerIds[index],
-      tooltipTemplate: (0, import_tooltip_type_guards.isConnectionTooltipTemplate)(tooltipTemplate) ? tooltipTemplate : void 0
+      geoJsonData,
+      layerId,
+      sourceId,
+      line
     }
   ), directionIndicator && /* @__PURE__ */ import_react.default.createElement(
     import_ConnectionLayerDirection.ConnectionLayerDirection,
     {
-      geoJsonData: featureCollection,
-      layerId: layerIds[index],
+      geoJsonData,
+      layerId,
       directionIndicator
     }
-  )));
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_ConnectionLayerTooltip.ConnectionLayerTooltip,
+    {
+      layerId,
+      tooltipTemplate: (0, import_tooltip_type_guards.isConnectionTooltipTemplate)(tooltipTemplate) ? tooltipTemplate : void 0
+    }
+  ));
 };
 ConnectionLayer["displayName"] = "ConnectionLayer";

package/map/components/ConnectionLayer/ConnectionLayerDirection.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { InternalConnectionLayerProps, Connection } from '../../types/connection-layer.js';
+import type { Connection, InternalConnectionLayerProps } from '../../types/connection-layer.js';
 interface ConnectionLayerDirectionProps<T extends Connection> extends Required<Pick<InternalConnectionLayerProps<T>, 'layerId' | 'directionIndicator'>> {
     geoJsonData: GeoJSON.FeatureCollection;
 }

package/map/components/ConnectionLayer/ConnectionLayerDirection.js

@@ -30,8 +30,8 @@ __export(ConnectionLayerDirection_exports, {
   ConnectionLayerDirection: () => ConnectionLayerDirection
 });
 module.exports = __toCommonJS(ConnectionLayerDirection_exports);
+var import_react_maplibre = require("@vis.gl/react-maplibre");
 var import_react = __toESM(require("react"));
-var import_react_map_gl = require("react-map-gl");
 var import_strato_icons = require("@dynatrace/strato-icons");
 var import_parse_direction_data_to_geo_json = require("./utils/parse-direction-data-to-geo-json.js");
 var import_constants = require("../../constants.js");
@@ -51,7 +51,7 @@ const ConnectionLayerDirection = (props) => {
   });
   const iconRotationDegrees = 180;
   return /* @__PURE__ */ import_react.default.createElement(
-    import_react_map_gl.Source,
+    import_react_maplibre.Source,
     {
       id: sourceId,
       type: "geojson",
@@ -59,7 +59,7 @@ const ConnectionLayerDirection = (props) => {
       promoteId: "id"
     },
     /* @__PURE__ */ import_react.default.createElement(
-      import_react_map_gl.Layer,
+      import_react_maplibre.Layer,
       {
         id: layerId,
         beforeId: connectionLayerId,
@@ -84,7 +84,12 @@ const ConnectionLayerDirection = (props) => {
             ["get", "__lineHoveredColor"],
             ["get", "__lineColor"]
           ],
-          "icon-opacity": ["get", "__lineOpacity"]
+          "icon-opacity": [
+            "case",
+            ["boolean", ["feature-state", "legendHover"], true],
+            import_constants.SHAPE_OPACITY_DEFAULT,
+            import_constants.SHAPE_OPACITY_DIMMED
+          ]
         }
       }
     )

package/map/components/ConnectionLayer/ConnectionLayerLine.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { Connection, InternalConnectionLayerProps } from '../../types/connection-layer.js';
+interface ConnectionLayerLineProps<T extends Connection> extends Required<Pick<InternalConnectionLayerProps<T>, 'layerId'>> {
+    geoJsonData: GeoJSON.FeatureCollection;
+    sourceId: string;
+    line: 'dashed' | 'solid' | undefined;
+}
+export declare const ConnectionLayerLine: {
+    <T extends Connection>(props: ConnectionLayerLineProps<T>): React.JSX.Element;
+    displayName: string;
+};
+export {};

package/map/components/ConnectionLayer/ConnectionLayerLine.js

@@ -0,0 +1,66 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ConnectionLayerLine_exports = {};
+__export(ConnectionLayerLine_exports, {
+  ConnectionLayerLine: () => ConnectionLayerLine
+});
+module.exports = __toCommonJS(ConnectionLayerLine_exports);
+var import_react_maplibre = require("@vis.gl/react-maplibre");
+var import_react = __toESM(require("react"));
+var import_constants = require("../../constants.js");
+const ConnectionLayerLine = (props) => {
+  const { geoJsonData, layerId, sourceId, line } = props;
+  return /* @__PURE__ */ import_react.default.createElement(import_react_maplibre.Source, { id: sourceId, type: "geojson", data: geoJsonData, promoteId: "id" }, /* @__PURE__ */ import_react.default.createElement(
+    import_react_maplibre.Layer,
+    {
+      type: "line",
+      id: layerId,
+      layout: {
+        "line-cap": import_constants.DEFAULT_LINE_CAP,
+        "line-join": import_constants.DEFAULT_LINE_JOIN
+      },
+      paint: {
+        "line-color": [
+          "case",
+          ["boolean", ["feature-state", "hover"], false],
+          ["get", "__lineHoveredColor"],
+          ["get", "__lineColor"]
+        ],
+        "line-opacity": [
+          "case",
+          ["boolean", ["feature-state", "legendHover"], true],
+          import_constants.SHAPE_OPACITY_DEFAULT,
+          import_constants.SHAPE_OPACITY_DIMMED
+        ],
+        "line-width": ["get", "__lineWidth"],
+        ...line && line === "dashed" ? { "line-dasharray": import_constants.DEFAULT_LINE_DASH_ARRAY } : null
+      }
+    }
+  ));
+};
+ConnectionLayerLine["displayName"] = "ConnectionLayerLine";

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

@@ -1,4 +1,4 @@
 import type GeoJSON from 'geojson';
 import type { FeatureProperties } from '../../../types/connection-layer.js';
 import type { Location } from '../../../types/location.js';
-export declare const getArcLineFeatures: (path: Location[], featureProperties: FeatureProperties) => GeoJSON.Feature<GeoJSON.LineString>[];
+export declare const getArcLineFeature: (path: Location[], featureProperties: FeatureProperties) => GeoJSON.Feature<GeoJSON.LineString>;

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

@@ -25,11 +25,11 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var get_arc_line_features_exports = {};
-__export(get_arc_line_features_exports, {
-  getArcLineFeatures: () => getArcLineFeatures
+var get_arc_line_feature_exports = {};
+__export(get_arc_line_feature_exports, {
+  getArcLineFeature: () => getArcLineFeature
 });
-module.exports = __toCommonJS(get_arc_line_features_exports);
+module.exports = __toCommonJS(get_arc_line_feature_exports);
 var import_bearing = __toESM(require("@turf/bearing"));
 var import_destination = __toESM(require("@turf/destination"));
 var import_distance = __toESM(require("@turf/distance"));
@@ -59,10 +59,7 @@ const getArcFeatureItem = (coordinates) => {
   );
   return (0, import_projection.toMercator)(lineArc);
 };
-const getArcLineFeatures = (path, featureProperties) => {
-  if (path.length < 2) {
-    return [];
-  }
+const getArcLineFeature = (path, featureProperties) => {
   const finalCoordinates = [];
   for (let i = 0; i < path.length - 1; i++) {
     const start = path[i];
@@ -74,8 +71,7 @@ const getArcLineFeatures = (path, featureProperties) => {
     const feature = getArcFeatureItem(coordinates);
     finalCoordinates.push(...feature.geometry.coordinates.reverse());
   }
-  const finalFeature = (0, import_helpers.lineString)(finalCoordinates, {
+  return (0, import_helpers.lineString)(finalCoordinates, {
     ...featureProperties
   });
-  return [finalFeature];
 };

package/map/components/ConnectionLayer/utils/{get-straight-line-features.d.ts → get-straight-line-feature.d.ts}

@@ -1,4 +1,4 @@
 import type GeoJSON from 'geojson';
 import type { FeatureProperties } from '../../../types/connection-layer.js';
 import type { Location } from '../../../types/location.js';
-export declare const getStraightLineFeatures: (path: Location[], featureProperties: FeatureProperties) => GeoJSON.Feature[];
+export declare const getStraightLineFeature: (path: Location[], featureProperties: FeatureProperties) => GeoJSON.Feature;

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

@@ -15,16 +15,15 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var get_straight_line_features_exports = {};
-__export(get_straight_line_features_exports, {
-  getStraightLineFeatures: () => getStraightLineFeatures
+var get_straight_line_feature_exports = {};
+__export(get_straight_line_feature_exports, {
+  getStraightLineFeature: () => getStraightLineFeature
 });
-module.exports = __toCommonJS(get_straight_line_features_exports);
+module.exports = __toCommonJS(get_straight_line_feature_exports);
 var import_helpers = require("@turf/helpers");
-const getStraightLineFeatures = (path, featureProperties) => {
+const getStraightLineFeature = (path, featureProperties) => {
   const coordinates = path.map((coord) => [coord.longitude, coord.latitude]);
-  const feature = (0, import_helpers.lineString)(coordinates, {
+  return (0, import_helpers.lineString)(coordinates, {
     ...featureProperties
   });
-  return [feature];
 };

package/map/components/ConnectionLayer/utils/parse-connection-data-to-geo-json.d.ts

@@ -1,3 +1,3 @@
 import type GeoJSON from 'geojson';
 import type { Connection, CurvedLine } from '../../../types/connection-layer.js';
-export declare const parseConnectionDataToGeoJSON: <T extends Connection>(data: T[], thickness: number, color: string | ((connection: T) => string), curve?: CurvedLine) => GeoJSON.FeatureCollection[];
+export declare const parseConnectionDataToGeoJSON: <T extends Connection>(data: T[], thickness: number, color: string | ((connection: T) => string), curve?: CurvedLine) => GeoJSON.FeatureCollection;

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

@@ -20,10 +20,9 @@ __export(parse_connection_data_to_geo_json_exports, {
   parseConnectionDataToGeoJSON: () => parseConnectionDataToGeoJSON
 });
 module.exports = __toCommonJS(parse_connection_data_to_geo_json_exports);
-var import_helpers = require("@turf/helpers");
 var import_charts = require("@dynatrace/strato-components-preview/charts");
-var import_get_arc_line_features = require("./get-arc-line-features.js");
-var import_get_straight_line_features = require("./get-straight-line-features.js");
+var import_get_arc_line_feature = require("./get-arc-line-feature.js");
+var import_get_straight_line_feature = require("./get-straight-line-feature.js");
 var import_constants = require("../../../constants.js");
 var import_calculate_hovered_color = require("../../../utils/calculate-hovered-color.js");
 var import_define_color = require("../../../utils/define-color.js");
@@ -45,12 +44,27 @@ const getFeatureProperties = (thickness, curve) => (properties, id) => {
     curve
   };
 };
-const getFeatures = (path, featureProperties) => {
+const getLineFeature = (path, featureProperties) => {
   const isCurve = featureProperties.curve === "smooth";
   if (isCurve) {
-    return (0, import_get_arc_line_features.getArcLineFeatures)(path, featureProperties);
+    return (0, import_get_arc_line_feature.getArcLineFeature)(path, featureProperties);
   }
-  return (0, import_get_straight_line_features.getStraightLineFeatures)(path, featureProperties);
+  return (0, import_get_straight_line_feature.getStraightLineFeature)(path, featureProperties);
+};
+const getFeatures = (data, thickness, color, curve) => {
+  const getProperties = getFeatureProperties(thickness, curve);
+  const features = [];
+  data.forEach((feature, index) => {
+    if (feature.path.length >= 2) {
+      const { path, ...properties } = feature;
+      const featureProperties = {
+        ...getProperties({ path, ...properties }, `connection-${index}`),
+        ...getConnectionColor(feature, color)
+      };
+      features.push(getLineFeature(path, featureProperties));
+    }
+  });
+  return features;
 };
 const getConnectionColor = (connection, color) => {
   const parsedColor = (0, import_define_color.defineColor)(color, connection);
@@ -62,17 +76,8 @@ const getConnectionColor = (connection, color) => {
   };
 };
 const parseConnectionDataToGeoJSON = (data, thickness, color, curve) => {
-  const featuresCollections = [];
-  const getProperties = getFeatureProperties(thickness, curve);
-  data.forEach((connection, index) => {
-    const { path, ...properties } = connection;
-    const featureProperties = {
-      ...getProperties({ path, ...properties }, `connection-${index}`),
-      ...getConnectionColor(connection, color)
-    };
-    const features = getFeatures(path, featureProperties);
-    const featuresCollection = (0, import_helpers.featureCollection)(features);
-    featuresCollections.push(featuresCollection);
-  });
-  return featuresCollections;
+  return {
+    type: "FeatureCollection",
+    features: getFeatures(data, thickness, color, curve)
+  };
 };

package/map/components/ConnectionLayer/utils/parse-direction-data-to-geo-json.d.ts

@@ -1,4 +1,4 @@
-import type { InternalConnectionLayerProps, Connection } from '../../../types/connection-layer.js';
+import type { Connection, InternalConnectionLayerProps } from '../../../types/connection-layer.js';
 interface ParseGeoJsonDataProps<T extends Connection> extends Required<Pick<InternalConnectionLayerProps<T>, 'directionIndicator'>> {
     geoJsonData: GeoJSON.FeatureCollection;
 }

package/map/components/DotLayer/BackgroundLayer.js

@@ -30,15 +30,15 @@ __export(BackgroundLayer_exports, {
   BackgroundLayer: () => BackgroundLayer
 });
 module.exports = __toCommonJS(BackgroundLayer_exports);
+var import_react_maplibre = require("@vis.gl/react-maplibre");
 var import_react = __toESM(require("react"));
-var import_react_map_gl = require("react-map-gl");
 var import_calculate_circle_translate = require("./utils/calculate-circle-translate.js");
 var import_constants = require("../../constants.js");
 const BackgroundLayer = (props) => {
   const { background, beforeId, source, radius, iconAnchor } = props;
   const circleTranslate = (0, import_calculate_circle_translate.calculateCircleTranslate)(iconAnchor, radius);
   return /* @__PURE__ */ import_react.default.createElement(
-    import_react_map_gl.Layer,
+    import_react_maplibre.Layer,
     {
       type: "circle",
       beforeId,

package/map/components/DotLayer/DotLayer.js

@@ -30,8 +30,8 @@ __export(DotLayer_exports, {
   DotLayer: () => DotLayer
 });
 module.exports = __toCommonJS(DotLayer_exports);
+var import_react_maplibre = require("@vis.gl/react-maplibre");
 var import_react = __toESM(require("react"));
-var import_maplibre = require("react-map-gl/maplibre");
 var import_BackgroundLayer = require("./BackgroundLayer.js");
 var import_DotLayerTooltip = require("./DotLayerTooltip.js");
 var import_parse_dot_data_to_geo_json = require("./utils/parse-dot-data-to-geo-json.js");
@@ -78,8 +78,8 @@ const DotLayer = (props) => {
     background
   );
   const iconAnchor = shape === "pin" ? "bottom" : "center";
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_maplibre.Source, { id: sourceId, type: "geojson", data: dataGeoJson, generateId: true }, /* @__PURE__ */ import_react.default.createElement(
-    import_maplibre.Layer,
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_react_maplibre.Source, { id: sourceId, type: "geojson", data: dataGeoJson, generateId: true }, /* @__PURE__ */ import_react.default.createElement(
+    import_react_maplibre.Layer,
     {
       type: "symbol",
       id: layerId,
@@ -96,8 +96,8 @@ const DotLayer = (props) => {
         "icon-opacity": [
           "case",
           ["boolean", ["feature-state", "legendHover"], true],
-          import_constants.SHAPE_OPACITY,
-          import_constants.LEGEND_DIM_OPACITY
+          import_constants.SHAPE_OPACITY_DEFAULT,
+          import_constants.SHAPE_OPACITY_DIMMED
         ]
       }
     }

package/map/components/DotLayer/utils/parse-dot-data-to-geo-json.d.ts

@@ -1,20 +1,3 @@
+import type GeoJSON from 'geojson';
 import type { Location } from '../../../types/location.js';
-export declare const parseDotDataToGeoJSON: <T extends Location>(data: T[], color: string | ((item: T) => string), bearing: number | ((item: T) => number), backgroundColor: boolean | string | ((item: T) => string)) => {
-    type: string;
-    features: {
-        type: string;
-        properties: {
-            data: T;
-        } & Omit<T, "latitude" | "longitude"> & {
-            __color: string;
-            __hoveredColor: string;
-            __backgroundColor: string;
-            __hoveredBackgroundColor: string;
-            __bearing: number;
-        };
-        geometry: {
-            type: string;
-            coordinates: number[];
-        };
-    }[];
-};
+export declare const parseDotDataToGeoJSON: <T extends Location>(data: T[], color: string | ((item: T) => string), bearing: number | ((item: T) => number), backgroundColor: boolean | string | ((item: T) => string)) => GeoJSON.FeatureCollection;

package/map/components/MapContent.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
 import type { MapViewProps, MapViewRef } from '../types/map-view.js';
-export declare const MapContent: (props: React.PropsWithChildren<MapViewProps> & React.RefAttributes<MapViewRef>) => React.ReactElement | null;
+type MapContentProps = MapViewProps & {
+    onMapLoad: () => void;
+};
+export declare const MapContent: (props: React.PropsWithChildren<MapContentProps> & React.RefAttributes<MapViewRef>) => React.ReactElement | null;
+export {};

package/map/components/MapContent.js

@@ -30,9 +30,9 @@ __export(MapContent_exports, {
   MapContent: () => MapContent
 });
 module.exports = __toCommonJS(MapContent_exports);
+var import_react_maplibre = require("@vis.gl/react-maplibre");
 var import_lodash_es = require("lodash");
 var import_react = __toESM(require("react"));
-var import_maplibre = require("react-map-gl/maplibre");
 var import_charts = require("@dynatrace/strato-components-preview/charts");
 var import_core = require("@dynatrace/strato-components-preview/core");
 var import_constants = require("../constants.js");
@@ -63,8 +63,8 @@ const fillLayer = {
 };
 const MapSource = () => {
   const baseLayerFeatures = (0, import_use_map_base_layer_features.useMapBaseLayerFeatures)();
-  return /* @__PURE__ */ import_react.default.createElement(import_maplibre.Source, { id: "data", type: "geojson", data: baseLayerFeatures }, /* @__PURE__ */ import_react.default.createElement(
-    import_maplibre.Layer,
+  return baseLayerFeatures && /* @__PURE__ */ import_react.default.createElement(import_react_maplibre.Source, { id: "data", type: "geojson", data: baseLayerFeatures }, /* @__PURE__ */ import_react.default.createElement(
+    import_react_maplibre.Layer,
     {
       ...fillLayer,
       paint: {
@@ -72,11 +72,23 @@ const MapSource = () => {
       }
     }
   ), /* @__PURE__ */ import_react.default.createElement(
-    import_maplibre.Layer,
+    import_react_maplibre.Layer,
     {
       ...lineLayer,
+      type: "line",
+      filter: [
+        "any",
+        ["==", "region_type", "COUNTRY"],
+        ["==", "region_type", "REGION"]
+      ],
       paint: {
-        "line-color": (0, import_get_color_from_token.getColorFromToken)(import_constants.DEFAULT_COUNTRIES_BORDER_COLOR)
+        "line-color": (0, import_get_color_from_token.getColorFromToken)(import_constants.DEFAULT_BOUNDARIES_BORDER_COLOR),
+        "line-width": [
+          "case",
+          ["==", ["get", "region_type"], "REGION"],
+          import_constants.REGION_BORDER_WIDTH,
+          import_constants.COUNTRY_BORDER_WIDTH
+        ]
       }
     }
   ));
@@ -93,6 +105,7 @@ const MapContent = (0, import_react.forwardRef)((props, forwardedRef) => {
     style,
     mapStyle = import_default_style.defaultStyle,
     onViewStateChange,
+    onMapLoad,
     ...remaining
   } = props;
   const loading = (0, import_use_map_loading.useMapLoading)();
@@ -130,7 +143,7 @@ const MapContent = (0, import_react.forwardRef)((props, forwardedRef) => {
       onMouseLeave: handleMouseLeave
     },
     /* @__PURE__ */ import_react.default.createElement(
-      import_maplibre.Map,
+      import_react_maplibre.Map,
       {
         onMove: (evt) => {
           onViewStateChange?.(evt.viewState);
@@ -144,15 +157,22 @@ const MapContent = (0, import_react.forwardRef)((props, forwardedRef) => {
         mapStyle,
         dragRotate: false,
         fadeDuration: 0,
-        RTLTextPlugin: false,
         renderWorldCopies: false,
         interactiveLayerIds: layerIds,
+        maxBounds: [
+          [import_constants.MIN_LONGITUDE, import_constants.MIN_LATITUDE],
+          [import_constants.MAX_LONGITUDE, import_constants.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: (0, import_use_set_map_initial_configuration.useSetMapInitialConfiguration)(),
         interactive: true,
         ...remaining

package/map/components/MapUnavailable.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 interface MapUnavailableProps {
-    isLoading: boolean;
+    isFetchingFeatures: boolean;
     isDisabled: boolean;
     error: boolean;
     chartHeight: string | number;
 }
 export declare const MapUnavailable: {
-    ({ chartHeight, error, isDisabled, isLoading, }: MapUnavailableProps): React.JSX.Element | undefined;
+    ({ chartHeight, error, isDisabled, isFetchingFeatures, }: MapUnavailableProps): React.JSX.Element | undefined;
     displayName: string;
 };
 export {};

package/map/components/MapUnavailable.js

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

package/map/components/toolbar/buttons/MapResetButton.js

@@ -30,16 +30,16 @@ __export(MapResetButton_exports, {
   MapResetButton: () => MapResetButton
 });
 module.exports = __toCommonJS(MapResetButton_exports);
+var import_react_maplibre = require("@vis.gl/react-maplibre");
 var import_react = __toESM(require("react"));
 var import_react_intl = require("react-intl");
-var import_maplibre = require("react-map-gl/maplibre");
 var import_charts = require("@dynatrace/strato-components-preview/charts");
 var import_strato_icons = require("@dynatrace/strato-icons");
 var import_use_initial_view_context = require("../../../hooks/use-initial-view-context.js");
 var import_constants = require("../constants.js");
 var import_use_a11y_toolbar_tab_index = require("../hooks/use-a11y-toolbar-tab-index.js");
 const MapResetButton = () => {
-  const { current: map } = (0, import_maplibre.useMap)();
+  const { current: map } = (0, import_react_maplibre.useMap)();
   const { longitude = 0, latitude = 0, zoom = 0 } = (0, import_use_initial_view_context.useInitialViewContext)();
   const intl = (0, import_react_intl.useIntl)();
   const resetButtonRef = (0, import_react.useRef)();