@dynatrace/strato-geo 1.0.3 → 1.2.1

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

@@ -30,15 +30,15 @@ __export(MapZoomInOutButtons_exports, {
   MapZoomInOutButtons: () => MapZoomInOutButtons
 });
 module.exports = __toCommonJS(MapZoomInOutButtons_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_constants = require("../constants.js");
 var import_use_a11y_toolbar_tab_index = require("../hooks/use-a11y-toolbar-tab-index.js");
 const MapZoomInOutButtons = () => {
-  const { current: map } = (0, import_maplibre.useMap)();
+  const { current: map } = (0, import_react_maplibre.useMap)();
   const isMaxZoom = map && map?.getMaxZoom() === map?.getZoom();
   const isMinZoom = map && map?.getMinZoom() === map?.getZoom();
   const zoomInButtonRef = (0, import_react.useRef)();

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

@@ -30,9 +30,9 @@ __export(MapZoomToFitButton_exports, {
   MapZoomToFitButton: () => MapZoomToFitButton
 });
 module.exports = __toCommonJS(MapZoomToFitButton_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_constants = require("../../../constants.js");
@@ -41,7 +41,7 @@ var import_constants2 = require("../constants.js");
 var import_use_a11y_toolbar_tab_index = require("../hooks/use-a11y-toolbar-tab-index.js");
 const MapZoomToFitButton = () => {
   const resetButtonRef = (0, import_react.useRef)();
-  const { current: map } = (0, import_maplibre.useMap)();
+  const { current: map } = (0, import_react_maplibre.useMap)();
   const tabIndex = (0, import_use_a11y_toolbar_tab_index.useA11yToolbarTabIndex)("zoom-to-fit");
   const intl = (0, import_react_intl.useIntl)();
   const boundingBox = (0, import_use_data_bounding_box.useDataBoundingBox)();

package/map/constants.d.ts

@@ -2,13 +2,15 @@ import type { ExpressionSpecification } from '@maplibre/maplibre-gl-style-spec';
 import type { _TruncationMode as TruncationMode } from '@dynatrace/strato-components/typography';
 import type { BaseLayerRules } from './types/base-layer.js';
 export declare const DEFAULT_COUNTRIES_FILL_COLOR: string;
-export declare const DEFAULT_COUNTRIES_BORDER_COLOR: string;
+export declare const DEFAULT_BOUNDARIES_BORDER_COLOR: string;
+export declare const COUNTRY_BORDER_WIDTH = 1;
+export declare const REGION_BORDER_WIDTH = 0.4;
 export declare const TRANSPARENT_BORDER_COLOR = "#00000000";
-export declare const MAX_LATITUDE = 90;
-export declare const MIN_LATITUDE = -90;
-export declare const MAX_LONGITUDE = 180;
-export declare const MIN_LONGITUDE = -180;
-export declare const WHOLE_WORLD_VIEW_BOUNDARIES: [number, number, number, number];
+export declare const MAX_LATITUDE = 85;
+export declare const MIN_LATITUDE = -60;
+export declare const MAX_LONGITUDE = 179.99;
+export declare const MIN_LONGITUDE = -179.99;
+export declare const WORLD_VIEW_MAX_BOUNDARIES: [number, number, number, number];
 export declare const DEFAULT_COUNTRY_CODE = "default";
 export declare const FIT_BOUNDS_OPTIONS: {
     padding: number;
@@ -21,11 +23,12 @@ export declare const ACTIVE_COLOR: string;
 export declare const BASE_LAYER_FILL_ID = "geojson-fill";
 export declare const BASE_LAYER_LINE_ID = "geojson-line";
 export declare const BASE_LAYER_IDS: string[];
-export declare const SHAPE_OPACITY = 1;
+export declare const SHAPE_OPACITY_DEFAULT = 1;
+export declare const SHAPE_OPACITY_DIMMED = 0.2;
 export declare const DEFAULT_SYMBOL_SIZE = 32;
 export declare const FALLBACK_SYMBOL_SIZE = 1;
 export declare const DEFAULT_TRUNCATION_MODE: TruncationMode;
-export declare const CDN_BASE_PATH: "https://dt-cdn.net/scripts/data/worldmap/maps/v003/";
+export declare const CDN_BASE_PATH: "https://dt-cdn.net/scripts/data/worldmap/maps/v004/";
 export declare const INCLUDE_ALL_WILDCARD_RULE: "*";
 export declare const DEFAULT_BASIC_SHAPE_COLOR_TOKEN: {
     Default: string;
@@ -40,7 +43,6 @@ export declare const DEFAULT_FORMATTER: {
     maximumFractionDigits: number;
 };
 export declare const DEFAULT_RANGE_COLOR: string;
-export declare const LEGEND_DIM_OPACITY = 0.2;
 export declare const DEFAULT_SEQUENTIAL_LEGEND_COLOR_PALETTE = "blue";
 export declare const ICON_BACKGROUND_OPACITY = 0.7;
 export declare const ICON_BACKGROUND_RADIUS = 16;
@@ -63,7 +65,8 @@ export declare const MIN_LINE_THICKNESS = 1;
 export declare const MAX_LINE_THICKNESS = 64;
 export declare const DIRECTION_ICON_OUTPUT_SIZE = 128;
 export declare const DIRECTION_ICON_SHRINK_RATIO: number;
-export declare const ACTIVE_STATE_BORDERS_WIDTH = 1.8;
+export declare const ACTIVE_BORDER_WIDTH_OUTER = 3;
+export declare const ACTIVE_BORDER_WIDTH_INNER = 1;
 export declare const DEFAULT_CHOROPLETH_COLOR: string;
 export declare const COPY_TO_CLIPBOARD_MESSAGES: {
     copyActionCoords: {

package/map/constants.js

@@ -27,8 +27,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var constants_exports = {};
 __export(constants_exports, {
+  ACTIVE_BORDER_WIDTH_INNER: () => ACTIVE_BORDER_WIDTH_INNER,
+  ACTIVE_BORDER_WIDTH_OUTER: () => ACTIVE_BORDER_WIDTH_OUTER,
   ACTIVE_COLOR: () => ACTIVE_COLOR,
-  ACTIVE_STATE_BORDERS_WIDTH: () => ACTIVE_STATE_BORDERS_WIDTH,
   BASE_LAYER_FILL_ID: () => BASE_LAYER_FILL_ID,
   BASE_LAYER_IDS: () => BASE_LAYER_IDS,
   BASE_LAYER_LINE_ID: () => BASE_LAYER_LINE_ID,
@@ -37,11 +38,12 @@ __export(constants_exports, {
   BUBBLE_STROKE: () => BUBBLE_STROKE,
   CDN_BASE_PATH: () => CDN_BASE_PATH,
   COPY_TO_CLIPBOARD_MESSAGES: () => COPY_TO_CLIPBOARD_MESSAGES,
+  COUNTRY_BORDER_WIDTH: () => COUNTRY_BORDER_WIDTH,
   DEFAULT_BASE_LAYER_RULES: () => DEFAULT_BASE_LAYER_RULES,
   DEFAULT_BASIC_SHAPE_COLOR_TOKEN: () => DEFAULT_BASIC_SHAPE_COLOR_TOKEN,
+  DEFAULT_BOUNDARIES_BORDER_COLOR: () => DEFAULT_BOUNDARIES_BORDER_COLOR,
   DEFAULT_BUBBLE_COLOR: () => DEFAULT_BUBBLE_COLOR,
   DEFAULT_CHOROPLETH_COLOR: () => DEFAULT_CHOROPLETH_COLOR,
-  DEFAULT_COUNTRIES_BORDER_COLOR: () => DEFAULT_COUNTRIES_BORDER_COLOR,
   DEFAULT_COUNTRIES_FILL_COLOR: () => DEFAULT_COUNTRIES_FILL_COLOR,
   DEFAULT_COUNTRY_CODE: () => DEFAULT_COUNTRY_CODE,
   DEFAULT_FORMATTER: () => DEFAULT_FORMATTER,
@@ -72,28 +74,31 @@ __export(constants_exports, {
   ICON_BACKGROUND_OPACITY: () => ICON_BACKGROUND_OPACITY,
   ICON_BACKGROUND_RADIUS: () => ICON_BACKGROUND_RADIUS,
   INCLUDE_ALL_WILDCARD_RULE: () => INCLUDE_ALL_WILDCARD_RULE,
-  LEGEND_DIM_OPACITY: () => LEGEND_DIM_OPACITY,
   MAX_LATITUDE: () => MAX_LATITUDE,
   MAX_LINE_THICKNESS: () => MAX_LINE_THICKNESS,
   MAX_LONGITUDE: () => MAX_LONGITUDE,
   MIN_LATITUDE: () => MIN_LATITUDE,
   MIN_LINE_THICKNESS: () => MIN_LINE_THICKNESS,
   MIN_LONGITUDE: () => MIN_LONGITUDE,
-  SHAPE_OPACITY: () => SHAPE_OPACITY,
+  REGION_BORDER_WIDTH: () => REGION_BORDER_WIDTH,
+  SHAPE_OPACITY_DEFAULT: () => SHAPE_OPACITY_DEFAULT,
+  SHAPE_OPACITY_DIMMED: () => SHAPE_OPACITY_DIMMED,
   TRANSPARENT_BORDER_COLOR: () => TRANSPARENT_BORDER_COLOR,
-  WHOLE_WORLD_VIEW_BOUNDARIES: () => WHOLE_WORLD_VIEW_BOUNDARIES
+  WORLD_VIEW_MAX_BOUNDARIES: () => WORLD_VIEW_MAX_BOUNDARIES
 });
 module.exports = __toCommonJS(constants_exports);
 var import_react_intl = require("react-intl");
 var import_colors = __toESM(require("@dynatrace/strato-design-tokens/colors"));
-const DEFAULT_COUNTRIES_FILL_COLOR = import_colors.default.Theme.Neutral["50"];
-const DEFAULT_COUNTRIES_BORDER_COLOR = import_colors.default.Background.Surface.Default;
+const DEFAULT_COUNTRIES_FILL_COLOR = import_colors.default.Background.Container.Neutral.Default;
+const DEFAULT_BOUNDARIES_BORDER_COLOR = import_colors.default.Border.Neutral.Default;
+const COUNTRY_BORDER_WIDTH = 1;
+const REGION_BORDER_WIDTH = 0.4;
 const TRANSPARENT_BORDER_COLOR = "#00000000";
-const MAX_LATITUDE = 90;
-const MIN_LATITUDE = -90;
-const MAX_LONGITUDE = 180;
-const MIN_LONGITUDE = -180;
-const WHOLE_WORLD_VIEW_BOUNDARIES = [
+const MAX_LATITUDE = 85;
+const MIN_LATITUDE = -60;
+const MAX_LONGITUDE = 179.99;
+const MIN_LONGITUDE = -179.99;
+const WORLD_VIEW_MAX_BOUNDARIES = [
   MAX_LONGITUDE,
   MAX_LATITUDE,
   MIN_LONGITUDE,
@@ -105,15 +110,16 @@ const DEFAULT_MAP_HEIGHT = 400;
 const DEFAULT_MAP_LEGEND_RATIO = "auto";
 const DEFAULT_MAP_POSITION = "auto";
 const DEFAULT_INPUT_ICON_SIZE = 20;
-const ACTIVE_COLOR = import_colors.default.Border.Neutral.AccentActive;
+const ACTIVE_COLOR = import_colors.default.Border.Neutral.Accent;
 const BASE_LAYER_FILL_ID = "geojson-fill";
 const BASE_LAYER_LINE_ID = "geojson-line";
 const BASE_LAYER_IDS = [BASE_LAYER_LINE_ID, BASE_LAYER_FILL_ID];
-const SHAPE_OPACITY = 1;
+const SHAPE_OPACITY_DEFAULT = 1;
+const SHAPE_OPACITY_DIMMED = 0.2;
 const DEFAULT_SYMBOL_SIZE = 32;
 const FALLBACK_SYMBOL_SIZE = 1;
 const DEFAULT_TRUNCATION_MODE = "middle";
-const CDN_BASE_PATH = "https://dt-cdn.net/scripts/data/worldmap/maps/v003/";
+const CDN_BASE_PATH = "https://dt-cdn.net/scripts/data/worldmap/maps/v004/";
 const INCLUDE_ALL_WILDCARD_RULE = "*";
 const DEFAULT_BASIC_SHAPE_COLOR_TOKEN = import_colors.default.Charts.CategoricalThemed.PurpleRain.Color01;
 const DEFAULT_LEGEND_SIZES = {
@@ -130,7 +136,6 @@ const DEFAULT_FORMATTER = {
   maximumFractionDigits: 1
 };
 const DEFAULT_RANGE_COLOR = import_colors.default.Background.Container.Neutral.Accent;
-const LEGEND_DIM_OPACITY = 0.2;
 const DEFAULT_SEQUENTIAL_LEGEND_COLOR_PALETTE = "blue";
 const ICON_BACKGROUND_OPACITY = 0.7;
 const ICON_BACKGROUND_RADIUS = 16;
@@ -156,7 +161,8 @@ const MIN_LINE_THICKNESS = 1;
 const MAX_LINE_THICKNESS = 64;
 const DIRECTION_ICON_OUTPUT_SIZE = 128;
 const DIRECTION_ICON_SHRINK_RATIO = 1 / 15;
-const ACTIVE_STATE_BORDERS_WIDTH = 1.8;
+const ACTIVE_BORDER_WIDTH_OUTER = 3;
+const ACTIVE_BORDER_WIDTH_INNER = 1;
 const DEFAULT_CHOROPLETH_COLOR = import_colors.default.Charts.Sequential.Blue.Color05.Default;
 const COPY_TO_CLIPBOARD_MESSAGES = (0, import_react_intl.defineMessages)({
   copyActionCoords: {

package/map/contexts/map-data-bounding-box.context.js

@@ -32,4 +32,4 @@ __export(map_data_bounding_box_context_exports, {
 module.exports = __toCommonJS(map_data_bounding_box_context_exports);
 var import_react = __toESM(require("react"));
 var import_constants = require("../constants.js");
-const MapDataBoundingBoxContext = import_react.default.createContext(import_constants.WHOLE_WORLD_VIEW_BOUNDARIES);
+const MapDataBoundingBoxContext = import_react.default.createContext(import_constants.WORLD_VIEW_MAX_BOUNDARIES);

package/map/hooks/use-active-interaction.js

@@ -20,17 +20,18 @@ __export(use_active_interaction_exports, {
   useActiveInteraction: () => useActiveInteraction
 });
 module.exports = __toCommonJS(use_active_interaction_exports);
+var import_react_maplibre = require("@vis.gl/react-maplibre");
 var import_lodash_es = require("lodash");
 var import_react = require("react");
-var import_maplibre = require("react-map-gl/maplibre");
 var import_constants = require("../constants.js");
 const useActiveInteraction = () => {
-  const map = (0, import_maplibre.useMap)().current;
+  const map = (0, import_react_maplibre.useMap)().current;
   let featureId;
   let sourceId;
   const handleClick = (0, import_react.useCallback)(
     ({ point }) => {
       const features = map.queryRenderedFeatures(point);
+      const allFeatures = map.queryRenderedFeatures();
       const layerId = features?.[0]?.layer?.id;
       const hasHoveredFeatures = !(0, import_lodash_es.isNil)(features) && features.length > 0 && !(0, import_lodash_es.isUndefined)(layerId);
       const isBaseLayer = import_constants.BASE_LAYER_IDS.includes(layerId);
@@ -48,12 +49,24 @@ const useActiveInteraction = () => {
           { source: sourceId, id: featureId },
           { active: !activeState }
         );
+        allFeatures.map(
+          (feature) => map.setFeatureState(
+            { source: feature.layer.source, id: feature.id },
+            { isAnyActive: !activeState }
+          )
+        );
       } else {
         if (!(0, import_lodash_es.isUndefined)(featureId) && !(0, import_lodash_es.isUndefined)(sourceId)) {
           map.setFeatureState(
             { source: sourceId, id: featureId },
             { active: false }
           );
+          allFeatures.map(
+            (feature) => map.setFeatureState(
+              { source: feature.layer.source, id: feature.id },
+              { isAnyActive: false }
+            )
+          );
         }
       }
     },

package/map/hooks/use-attach-image-from-icon.js

@@ -20,10 +20,10 @@ __export(use_attach_image_from_icon_exports, {
   useAttachImageFromIcon: () => useAttachImageFromIcon
 });
 module.exports = __toCommonJS(use_attach_image_from_icon_exports);
+var import_react_maplibre = require("@vis.gl/react-maplibre");
 var import_lodash_es = require("lodash");
 var import_react = require("react");
 var import_client = require("react-dom/client");
-var import_maplibre = require("react-map-gl/maplibre");
 var import_use_safe_svg_parser = require("./use-safe-svg-parser.js");
 var import_constants = require("../constants.js");
 var import_attach_image_to_map = require("../utils/attach-image-to-map.js");
@@ -33,7 +33,7 @@ var import_get_scaled_symbol_size = require("../utils/get-scaled-symbol-size.js"
 const useAttachImageFromIcon = (icon, suffix, outputSize) => {
   const { elementAsString, ref } = (0, import_use_safe_svg_parser.useSafeSvgParser)();
   const defaultScaledIconSize = (0, import_get_scaled_symbol_size.getScaledSymbolSize)();
-  const { current: map } = (0, import_maplibre.useMap)();
+  const { current: map } = (0, import_react_maplibre.useMap)();
   const img = new Image(defaultScaledIconSize, defaultScaledIconSize);
   const fakeDomContainer = document.createElement("div");
   (0, import_react.useLayoutEffect)(() => {
@@ -55,6 +55,9 @@ const useAttachImageFromIcon = (icon, suffix, outputSize) => {
       import_constants.DEFAULT_INPUT_ICON_SIZE,
       (0, import_create_bitmap_config_options.createBitmapConfigOptions)(outputSize)
     ).then((bitmap) => {
+      if (!map) {
+        return;
+      }
       const iconName = `custom-icon-${suffix}`;
       (0, import_attach_image_to_map.attachImageToMap)(map, bitmap, iconName);
     });

package/map/hooks/use-attach-symbol-to-map.js

@@ -20,12 +20,12 @@ __export(use_attach_symbol_to_map_exports, {
   useAttachSymbolToMap: () => useAttachSymbolToMap
 });
 module.exports = __toCommonJS(use_attach_symbol_to_map_exports);
+var import_react_maplibre = require("@vis.gl/react-maplibre");
 var import_lodash_es = require("lodash");
-var import_maplibre = require("react-map-gl/maplibre");
 var import_use_attach_image_from_icon = require("./use-attach-image-from-icon.js");
 var import_attach_image_from_string = require("../utils/attach-image-from-string.js");
 const useAttachSymbolToMap = (icon, suffix = "", outputSize) => {
-  const { current: map } = (0, import_maplibre.useMap)();
+  const { current: map } = (0, import_react_maplibre.useMap)();
   const customIconAttached = (0, import_use_attach_image_from_icon.useAttachImageFromIcon)(icon, suffix, outputSize);
   if ((0, import_lodash_es.isNil)(map)) {
     return null;

package/map/hooks/use-hover-interaction.js

@@ -20,9 +20,9 @@ __export(use_hover_interaction_exports, {
   useHoverInteraction: () => useHoverInteraction
 });
 module.exports = __toCommonJS(use_hover_interaction_exports);
+var import_react_maplibre = require("@vis.gl/react-maplibre");
 var import_lodash_es = require("lodash");
 var import_react = require("react");
-var import_maplibre = require("react-map-gl/maplibre");
 var import_constants = require("../constants.js");
 var import_associated_features = require("../utils/associated-features.js");
 const featureExists = (map, source, id) => {
@@ -67,7 +67,7 @@ const hoverFeature = (map, source, id) => {
   }
 };
 const useHoverInteraction = () => {
-  const map = (0, import_maplibre.useMap)().current;
+  const map = (0, import_react_maplibre.useMap)().current;
   let featureId;
   let sourceId;
   const handleMouseOut = (0, import_react.useCallback)(

package/map/hooks/use-legend-interaction-highlighting.d.ts

@@ -1,5 +1,6 @@
 import type { BubbleLayerProps } from '../types/bubble-layer.js';
 import type { ChoroplethLayerProps } from '../types/choropleth-layer.js';
+import type { Connection, ConnectionLayerProps } from '../types/connection-layer.js';
 import type { DotLayerProps } from '../types/dot-layer.js';
 import type { Location } from '../types/location.js';
-export declare const useLegendInteractionHighlighting: <L extends Location, R extends Record<string, unknown>>(props: DotLayerProps<L> | BubbleLayerProps<L> | ChoroplethLayerProps<R>, sourceId: string) => void;
+export declare const useLegendInteractionHighlighting: <L extends Location, C extends Connection, R extends Record<string, unknown>>(props: DotLayerProps<L> | BubbleLayerProps<L> | ChoroplethLayerProps<R> | ConnectionLayerProps<C>, sourceId: string) => void;

package/map/hooks/use-legend-interaction-highlighting.js

@@ -20,13 +20,14 @@ __export(use_legend_interaction_highlighting_exports, {
   useLegendInteractionHighlighting: () => useLegendInteractionHighlighting
 });
 module.exports = __toCommonJS(use_legend_interaction_highlighting_exports);
+var import_react_maplibre = require("@vis.gl/react-maplibre");
 var import_lodash_es = require("lodash");
-var import_maplibre = require("react-map-gl/maplibre");
 var import_selectors = require("../store/selectors.js");
 var import_coloring = require("../types/coloring.js");
+var import_associated_features = require("../utils/associated-features.js");
 const useLegendInteractionHighlighting = (props, sourceId) => {
   const { highlightedSeries } = (0, import_selectors.useMapSelectionState)();
-  const { current: map } = (0, import_maplibre.useMap)();
+  const { current: map } = (0, import_react_maplibre.useMap)();
   if ((0, import_coloring.isLegendColoring)(props) && !(0, import_lodash_es.isUndefined)(map)) {
     const hoveredByLegend = map.querySourceFeatures(sourceId, {
       filter: ["all"]
@@ -37,6 +38,18 @@ const useLegendInteractionHighlighting = (props, sourceId) => {
         { legendHover: true }
       )
     );
+    if ((0, import_associated_features.hasAssociatedFeatures)(sourceId)) {
+      const associatedId = `${sourceId}-direction`;
+      const hoveredByLegend2 = map.querySourceFeatures(associatedId, {
+        filter: ["all"]
+      });
+      hoveredByLegend2?.map(
+        (ft) => map.setFeatureState(
+          { source: associatedId, id: ft.id },
+          { legendHover: true }
+        )
+      );
+    }
     if (highlightedSeries) {
       const highlightedSeriesNames = highlightedSeries.map((s) => s.name);
       const hoveredByLegend2 = map.querySourceFeatures(sourceId, {
@@ -48,6 +61,22 @@ const useLegendInteractionHighlighting = (props, sourceId) => {
           { legendHover: false }
         )
       );
+      if ((0, import_associated_features.hasAssociatedFeatures)(sourceId)) {
+        const associatedId = `${sourceId}-direction`;
+        const hoveredByLegend3 = map.querySourceFeatures(associatedId, {
+          filter: ["!in", props.valueAccessor, ...highlightedSeriesNames]
+        });
+        hoveredByLegend3?.map(
+          (ft) => map.setFeatureState(
+            { source: associatedId, id: ft.id },
+            { legendHover: false }
+          )
+        );
+      }
+    } else {
+      hoveredByLegend?.map(
+        (ft) => map.removeFeatureState({ source: sourceId, id: ft.id }, "legendHover")
+      );
     }
   }
 };

package/map/hooks/use-legend-interaction-visibility.d.ts

@@ -1,5 +1,6 @@
 import type { BubbleLayerProps } from '../types/bubble-layer.js';
 import type { ChoroplethLayerProps } from '../types/choropleth-layer.js';
+import { Connection, ConnectionLayerProps } from '../types/connection-layer.js';
 import type { DotLayerProps } from '../types/dot-layer.js';
 import type { Location } from '../types/location.js';
-export declare const useLegendInteractionVisibility: <L extends Location, R extends Record<string, unknown>>(props: DotLayerProps<L> | BubbleLayerProps<L> | ChoroplethLayerProps<R>, layerId: string) => void;
+export declare const useLegendInteractionVisibility: <L extends Location, C extends Connection, R extends Record<string, unknown>>(props: DotLayerProps<L> | BubbleLayerProps<L> | ChoroplethLayerProps<R> | ConnectionLayerProps<C>, layerId: string) => void;

package/map/hooks/use-legend-interaction-visibility.js

@@ -20,13 +20,14 @@ __export(use_legend_interaction_visibility_exports, {
   useLegendInteractionVisibility: () => useLegendInteractionVisibility
 });
 module.exports = __toCommonJS(use_legend_interaction_visibility_exports);
+var import_react_maplibre = require("@vis.gl/react-maplibre");
 var import_lodash_es = require("lodash");
-var import_maplibre = require("react-map-gl/maplibre");
 var import_selectors = require("../store/selectors.js");
 var import_coloring = require("../types/coloring.js");
+var import_associated_features = require("../utils/associated-features.js");
 const useLegendInteractionVisibility = (props, layerId) => {
   const { visible } = (0, import_selectors.useMapSelectionState)();
-  const { current: map } = (0, import_maplibre.useMap)();
+  const { current: map } = (0, import_react_maplibre.useMap)();
   if ((0, import_coloring.isLegendColoring)(props) && !(0, import_lodash_es.isUndefined)(map)) {
     if (!(0, import_lodash_es.isUndefined)(visible)) {
       const mapInstance = map.getMap();
@@ -36,6 +37,14 @@ const useLegendInteractionVisibility = (props, layerId) => {
         props.valueAccessor,
         ...visibleCategoriesNames
       ]);
+      if ((0, import_associated_features.hasAssociatedFeatures)(layerId)) {
+        const associatedId = `${layerId}-direction`;
+        mapInstance.setFilter(associatedId, [
+          "in",
+          props.valueAccessor,
+          ...visibleCategoriesNames
+        ]);
+      }
     } else {
       const layer = map.getLayer(layerId);
       if (!(0, import_lodash_es.isUndefined)(layer)) {

package/map/hooks/use-load-map-base-layer.d.ts

@@ -1,7 +1,7 @@
 import { FeatureCollection } from 'geojson';
 import type { BaseLayerRules } from '../types/base-layer.js';
 export declare const useLoadMapBaseLayer: (baseLayerConfig: BaseLayerRules) => {
-    isLoading: boolean;
+    isFetchingFeatures: boolean;
     baseFeatureCollection: FeatureCollection<import("geojson").Geometry, import("geojson").GeoJsonProperties> | undefined;
     isMapEnabled: boolean;
     error: boolean;

package/map/hooks/use-load-map-base-layer.js

@@ -29,12 +29,12 @@ var import_get_base_layer_shapes_request_config = require("../utils/get-base-lay
 var import_get_tenant_country_code = require("../utils/get-tenant-country-code.js");
 var import_merge_feature_collections = require("../utils/merge-feature-collections.js");
 const useLoadMapBaseLayer = (baseLayerConfig) => {
-  const [isLoading, setIsLoading] = (0, import_react.useState)(true);
+  const [isFetchingFeatures, setIsFetchingFeatures] = (0, import_react.useState)(true);
   const [isMapEnabled, setIsMapEnabled] = (0, import_react.useState)(false);
   const [baseFeatureCollection, setBaseFeatureCollection] = (0, import_react.useState)(void 0);
   const [error, setError] = (0, import_react.useState)(false);
   const getData = (0, import_react.useCallback)(async () => {
-    setIsLoading(true);
+    setIsFetchingFeatures(true);
     const isMapEnabledResponse = await (0, import_fetch_client_config_map_enabled.fetchClientConfigMapEnabled)();
     setIsMapEnabled(isMapEnabledResponse);
     try {
@@ -69,10 +69,10 @@ const useLoadMapBaseLayer = (baseLayerConfig) => {
     } catch {
       setError(true);
     }
-    setIsLoading(false);
+    setIsFetchingFeatures(false);
   }, [baseLayerConfig.include, baseLayerConfig.exclude]);
   (0, import_react.useEffect)(() => {
     getData();
   }, [getData]);
-  return { isLoading, baseFeatureCollection, isMapEnabled, error };
+  return { isFetchingFeatures, baseFeatureCollection, isMapEnabled, error };
 };

package/map/hooks/use-map-mouse-move.js

@@ -20,10 +20,10 @@ __export(use_map_mouse_move_exports, {
   useMapMouseMove: () => useMapMouseMove
 });
 module.exports = __toCommonJS(use_map_mouse_move_exports);
+var import_react_maplibre = require("@vis.gl/react-maplibre");
 var import_react = require("react");
-var import_maplibre = require("react-map-gl/maplibre");
 const useMapMouseMove = (layerIds, callback) => {
-  const { current: map } = (0, import_maplibre.useMap)();
+  const { current: map } = (0, import_react_maplibre.useMap)();
   (0, import_react.useEffect)(() => {
     layerIds.forEach((layerId) => {
       map?.on("mousemove", layerId, callback);

package/map/hooks/use-resolve-color.d.ts

@@ -1,5 +1,7 @@
-import { ChoroplethCustomColorProps, ColorParser, LegendColorLayerProps, LocationColorProps } from '../types/coloring.js';
+import { ChoroplethCustomColorProps, ColorParser, ConnectionColorProps, LegendColorLayerProps, LocationColorProps } from '../types/coloring.js';
+import { Connection } from '../types/connection-layer.js';
 import { Location } from '../types/location.js';
-export declare const useResolveColor: (defaultColor: string, props: LocationColorProps<never> | ChoroplethCustomColorProps<never> | LegendColorLayerProps, colorParser?: ColorParser) => string | ((item: never) => string);
+export declare const useResolveColor: (defaultColor: string, props: LocationColorProps<never> | ConnectionColorProps<never> | ChoroplethCustomColorProps<never> | LegendColorLayerProps, colorParser?: ColorParser) => string | ((item: never) => string);
 export declare const useResolveLocationColor: <T extends Location>(defaultColor: string, props: LocationColorProps<T> | LegendColorLayerProps, colorParser?: ColorParser) => string | ((item: T) => string);
+export declare const useResolveConnectionColor: <T extends Connection>(defaultColor: string, props: ConnectionColorProps<T> | LegendColorLayerProps, colorParser?: ColorParser) => string | ((item: T) => string);
 export declare const useResolveChoroplethColor: <T extends Record<string, unknown>>(defaultColor: string, props: ChoroplethCustomColorProps<T> | LegendColorLayerProps, colorParser?: ColorParser) => string | ((item: T) => string);

package/map/hooks/use-resolve-color.js

@@ -19,6 +19,7 @@ var use_resolve_color_exports = {};
 __export(use_resolve_color_exports, {
   useResolveChoroplethColor: () => useResolveChoroplethColor,
   useResolveColor: () => useResolveColor,
+  useResolveConnectionColor: () => useResolveConnectionColor,
   useResolveLocationColor: () => useResolveLocationColor
 });
 module.exports = __toCommonJS(use_resolve_color_exports);
@@ -51,6 +52,9 @@ const useResolveColor = (defaultColor, props, colorParser) => {
 const useResolveLocationColor = (defaultColor, props, colorParser) => {
   return useResolveColor(defaultColor, props, colorParser);
 };
+const useResolveConnectionColor = (defaultColor, props, colorParser) => {
+  return useResolveColor(defaultColor, props, colorParser);
+};
 const useResolveChoroplethColor = (defaultColor, props, colorParser) => {
   return useResolveColor(defaultColor, props, colorParser);
 };

package/map/providers/imperative-handler.provider.js

@@ -20,8 +20,8 @@ __export(imperative_handler_provider_exports, {
   MapViewImperativeHandler: () => MapViewImperativeHandler
 });
 module.exports = __toCommonJS(imperative_handler_provider_exports);
+var import_react_maplibre = require("@vis.gl/react-maplibre");
 var import_react = require("react");
-var import_maplibre = require("react-map-gl/maplibre");
 var import_constants = require("../constants.js");
 var import_use_data_bounding_box = require("../hooks/use-data-bounding-box.js");
 var import_use_initial_view_context = require("../hooks/use-initial-view-context.js");
@@ -33,7 +33,7 @@ const MapViewImperativeHandler = ({
   children
 }) => {
   const layersData = (0, import_use_map_raw_data.useMapRawData)();
-  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 boundingBox = (0, import_use_data_bounding_box.useDataBoundingBox)();
   const zoomOutEnabled = map && map?.getMinZoom() !== map?.getZoom();

package/map/providers/map-initial-view.provider.js

@@ -30,14 +30,14 @@ __export(map_initial_view_provider_exports, {
   MapInitialViewProvider: () => MapInitialViewProvider
 });
 module.exports = __toCommonJS(map_initial_view_provider_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_map_initial_view_context = require("../contexts/map-initial-view.context.js");
 const DEFAULT_CENTER = { lat: 0, lng: 0 };
 const MapInitialViewProvider = ({
   children
 }) => {
-  const { current: map } = (0, import_react_map_gl.useMap)();
+  const { current: map } = (0, import_react_maplibre.useMap)();
   const boundaries = (0, import_react.useRef)(map?.getCenter() ?? DEFAULT_CENTER);
   const zoom = (0, import_react.useRef)(map?.getZoom()).current;
   const { lng: longitude, lat: latitude } = boundaries.current;

package/map/slots/BaseLayer.d.ts

@@ -1,5 +1,8 @@
 import type { BaseLayerProps } from '../types/base-layer.js';
-/** The base layer component, used to configure the inclusion and exclusion of countries and regions*/
+/**
+ * The base layer component, used to configure the inclusion and exclusion of countries and regions
+ * @public
+ */
 export declare const BaseLayer: {
     (_props: BaseLayerProps): null;
     displayName: string;

package/map/slots/BubbleLayer.d.ts

@@ -5,6 +5,7 @@ import type { Location } from '../types/location.js';
  * The `BubbleLayer` component renders data points as bubbles on a map, accepting an array of data points
  * with required properties like latitude and longitude. It supports customization of bubble size
  * using the radius prop and optional tooltips for displaying additional information.
+ * @public
  */
 export declare const BubbleLayer: {
     <T extends Location>(_: PropsWithChildren<BubbleLayerProps<T>>): null;

package/map/slots/CategoricalLegend.d.ts

@@ -1,5 +1,8 @@
 import type { CategoricalLegendProps } from '../types/legend.js';
-/** The categorical legend slot component */
+/**
+ * The categorical legend slot component
+ * @public
+ */
 export declare const CategoricalLegend: {
     (props: CategoricalLegendProps): null;
     displayName: string;

package/map/slots/ChartInteractions.d.ts

@@ -1,6 +1,9 @@
 import type { PropsWithChildren } from 'react';
 import type { ChartInteractionsProps } from '../types/toolbar.js';
-/** ChartInteractions interactions slot component */
+/**
+ * ChartInteractions interactions slot component
+ * @public
+ */
 export declare const ChartInteractions: {
     (props: PropsWithChildren<ChartInteractionsProps>): null;
     displayName: string;

package/map/slots/ChartInteractions.js

@@ -22,9 +22,9 @@ __export(ChartInteractions_exports, {
 module.exports = __toCommonJS(ChartInteractions_exports);
 var import_Zoom = require("./Zoom.js");
 var import_ZoomToFit = require("./ZoomToFit.js");
-const _ChartInteractions = (props) => null;
-_ChartInteractions["displayName"] = "ChartInteractions";
-const ChartInteractions = Object.assign(_ChartInteractions, {
+const ChartInteractionsRoot = (props) => null;
+ChartInteractionsRoot["displayName"] = "ChartInteractions";
+const ChartInteractions = Object.assign(ChartInteractionsRoot, {
   Zoom: import_Zoom.Zoom,
   ZoomToFit: import_ZoomToFit.ZoomToFit
 });

package/map/slots/ChoroplethLayer.d.ts

@@ -5,6 +5,7 @@ import type { ChoroplethLayerProps } from '../types/choropleth-layer.js';
  * areas or regions that are coloured in relation to a given data. It provides an
  * easy way to visualize how a variable varies across a geographic area or show
  * the level of variability within a region.
+ * @public
  */
 export declare const ChoroplethLayer: {
     <T extends Record<string, unknown>>(_: PropsWithChildren<ChoroplethLayerProps<T>>): null;

package/map/slots/ConnectionLayer.d.ts

@@ -1,10 +1,11 @@
 import type { PropsWithChildren } from 'react';
-import type { ConnectionLayerProps, Connection } from '../types/connection-layer.js';
+import type { Connection, ConnectionLayerProps } from '../types/connection-layer.js';
 /**
  * The `ConnectionLayer` component renders connections between points on a map,
  * accepting an array of `Connection` data points with required properties like
  * latitude and longitude. It supports customization of color, thickness,
  * direction the connection indicators.
+ * @public
  */
 export declare const ConnectionLayer: {
     <T extends Connection>(_: PropsWithChildren<ConnectionLayerProps<T>>): null;