@dynatrace/strato-geo 1.3.4 → 1.4.2

package/index.js

@@ -15,8 +15,8 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   BaseLayer: () => import_BaseLayer.BaseLayer,
   BubbleLayer: () => import_BubbleLayer.BubbleLayer,
   CategoricalLegend: () => import_CategoricalLegend.CategoricalLegend,
@@ -30,7 +30,7 @@ __export(src_exports, {
   Tooltip: () => import_Tooltip.Tooltip,
   TooltipAtoms: () => import_Tooltip.TooltipAtoms
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 var import_ChartInteractions = require("./map/slots/ChartInteractions.js");
 var import_MapView = require("./map/MapView.js");
 var import_ConnectionLayer = require("./map/slots/ConnectionLayer.js");

package/map/MapView.js

@@ -109,34 +109,41 @@ const _MapView = (0, import_react.forwardRef)(
           {
             value: truncationMode ?? import_constants.DEFAULT_TRUNCATION_MODE
           },
-          /* @__PURE__ */ import_react.default.createElement(import_formatter_context.FormatterContext.Provider, { value: formatter }, /* @__PURE__ */ import_react.default.createElement(import_map_raw_data_context.MapRawDataContext.Provider, { value: layersData }, /* @__PURE__ */ import_react.default.createElement(import_map_store_provider.MapStoreProvider, null, /* @__PURE__ */ import_react.default.createElement(import_color_scale_provider.ColorScaleProvider, { categories }, /* @__PURE__ */ import_react.default.createElement(import_layer_color_strategy_provider.LayerColorStrategyProvider, null, /* @__PURE__ */ import_react.default.createElement(
-            import_charts._ChartLayout,
+          /* @__PURE__ */ import_react.default.createElement(import_formatter_context.FormatterContext.Provider, { value: formatter }, /* @__PURE__ */ import_react.default.createElement(import_map_raw_data_context.MapRawDataContext.Provider, { value: layersData }, /* @__PURE__ */ import_react.default.createElement(import_map_store_provider.MapStoreProvider, null, /* @__PURE__ */ import_react.default.createElement(
+            import_color_scale_provider.ColorScaleProvider,
             {
-              ref: chartLayoutRef,
-              chartHeight,
-              errorState,
-              showLoader: loading || isLoading
+              categories,
+              dataMax: legendDomain[1]
             },
-            /* @__PURE__ */ import_react.default.createElement(import_charts._ChartLayout.Graph, null, baseFeatureCollection && /* @__PURE__ */ import_react.default.createElement(
-              import_MapContent.MapContent,
+            /* @__PURE__ */ import_react.default.createElement(import_layer_color_strategy_provider.LayerColorStrategyProvider, null, /* @__PURE__ */ import_react.default.createElement(
+              import_charts._ChartLayout,
               {
-                ref: forwardedRef,
-                onMapLoad: () => setIsMapLoaded(true),
-                ...remaining
+                ref: chartLayoutRef,
+                chartHeight,
+                errorState,
+                showLoader: loading || isLoading
               },
-              parsedChildren
-            )),
-            !isLegendHidden && /* @__PURE__ */ import_react.default.createElement(
-              import_charts._ChartLayout.Legend,
-              {
-                position: legendPosition,
-                ratio: legendRatio,
-                ratioBoundaries: import_constants.DEFAULT_LEGEND_SIZES,
-                onResize: legendOnRatioChange
-              },
-              /* @__PURE__ */ import_react.default.createElement(import_MapLegendRenderer.MapLegendRenderer, null)
-            )
-          ))))))
+              /* @__PURE__ */ import_react.default.createElement(import_charts._ChartLayout.Graph, null, baseFeatureCollection && /* @__PURE__ */ import_react.default.createElement(
+                import_MapContent.MapContent,
+                {
+                  ref: forwardedRef,
+                  onMapLoad: () => setIsMapLoaded(true),
+                  ...remaining
+                },
+                parsedChildren
+              )),
+              !isLegendHidden && /* @__PURE__ */ import_react.default.createElement(
+                import_charts._ChartLayout.Legend,
+                {
+                  position: legendPosition,
+                  ratio: legendRatio,
+                  ratioBoundaries: import_constants.DEFAULT_LEGEND_SIZES,
+                  onResize: legendOnRatioChange
+                },
+                /* @__PURE__ */ import_react.default.createElement(import_MapLegendRenderer.MapLegendRenderer, null)
+              )
+            ))
+          ))))
         )))
       ))
     );

package/map/components/MapContent.js

@@ -36,6 +36,7 @@ var import_react = __toESM(require("react"));
 var import_charts = require("@dynatrace/strato-components-preview/charts");
 var import_core = require("@dynatrace/strato-components-preview/core");
 var import_constants = require("../constants.js");
+var import_store = require("../store/store.js");
 var import_MapToolbar = require("./toolbar/MapToolbar.js");
 var import_layer_ids_context = require("../contexts/layer-ids.context.js");
 var import_map_data_bounding_box_context = require("../contexts/map-data-bounding-box.context.js");
@@ -53,6 +54,7 @@ var import_get_color_from_token = require("../utils/get-color-from-token.js");
 var import_get_data_layers_bounding_box = require("../utils/get-data-layers-bounding-box.js");
 var import_to_mapbox_initial_view_state = require("../utils/to-mapbox-initial-view-state.js");
 var import_use_set_map_initial_configuration = require("../utils/use-set-map-initial-configuration.js");
+var import_zoom_state_utils = require("./toolbar/utils/zoom-state-utils.js");
 const lineLayer = {
   id: import_constants.BASE_LAYER_LINE_ID,
   type: "line"
@@ -109,6 +111,8 @@ const MapContent = (0, import_react.forwardRef)((props, forwardedRef) => {
     ...remaining
   } = props;
   const loading = (0, import_use_map_loading.useMapLoading)();
+  const setZoomState = (0, import_store.useSetStateZoom)();
+  const [savedInitialViewState, setSavedInitialViewState] = (0, import_react.useState)();
   const mapContainerRef = (0, import_react.useRef)(null);
   const mergedRefs = (0, import_core.useMergeRefs)([
     mapContainerRef,
@@ -134,6 +138,28 @@ const MapContent = (0, import_react.forwardRef)((props, forwardedRef) => {
   } = (0, import_use_overlay_events.useOverlayEvents)();
   const initialViewState = initialViewStateProp ?? dataLayersBBox;
   const { onLoadHandler, onRenderHandler } = (0, import_use_map_performance.useMapPerformance)(mapContainerRef);
+  const calculatedInitialViewState = (0, import_to_mapbox_initial_view_state.toMapBoxInitialViewState)(initialViewState);
+  const { zoomToFitInProgress } = (0, import_store.useMapZoomState)();
+  const handleZoomEnd = (event) => {
+    if (savedInitialViewState) {
+      const zoomState = (0, import_zoom_state_utils.generateNewZoomState)(
+        event,
+        savedInitialViewState,
+        zoomToFitInProgress
+      );
+      setZoomState(zoomState);
+    }
+  };
+  const handleDragEnd = (event) => {
+    if (savedInitialViewState) {
+      const zoomState = (0, import_zoom_state_utils.generateNewZoomState)(
+        event,
+        savedInitialViewState,
+        zoomToFitInProgress
+      );
+      setZoomState(zoomState);
+    }
+  };
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
@@ -148,7 +174,7 @@ const MapContent = (0, import_react.forwardRef)((props, forwardedRef) => {
         onMove: (evt) => {
           onViewStateChange?.(evt.viewState);
         },
-        initialViewState: (0, import_to_mapbox_initial_view_state.toMapBoxInitialViewState)(initialViewState),
+        initialViewState: calculatedInitialViewState,
         style: {
           width: graphWidth,
           height: `${graphHeight}px`,
@@ -166,12 +192,20 @@ const MapContent = (0, import_react.forwardRef)((props, forwardedRef) => {
         onMouseMove: (e) => handleMouseMove(e),
         onClick: (e) => handleMouseClick(e),
         onZoom: handleZoom,
+        onZoomEnd: handleZoomEnd,
         onDrag: handleDrag,
+        onDragEnd: handleDragEnd,
         attributionControl: false,
         onRender: () => onRenderHandler && onRenderHandler(),
-        onLoad: () => {
+        onLoad: (e) => {
           onMapLoad();
           onLoadHandler && onLoadHandler();
+          const initialCenter = e.target.getCenter();
+          setSavedInitialViewState({
+            latitude: initialCenter.lat,
+            longitude: initialCenter.lng,
+            zoom: e.target.getZoom()
+          });
         },
         ref: (0, import_use_set_map_initial_configuration.useSetMapInitialConfiguration)(),
         interactive: true,

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

@@ -36,16 +36,20 @@ var import_react_intl = require("react-intl");
 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_store = require("../../../store/store.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_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 { resetEnabled } = (0, import_store.useMapZoomState)();
+  const setZoomState = (0, import_store.useSetStateZoom)();
   const resetButtonRef = (0, import_react.useRef)();
   const tabIndex = (0, import_use_a11y_toolbar_tab_index.useA11yToolbarTabIndex)("reset");
   const handleReset = () => {
     map?.flyTo({ center: [longitude, latitude], zoom });
+    setZoomState({ zoomToFitEnabled: true, resetEnabled: false });
   };
   const handleKeyDown = (event) => {
     if (event.code === "Enter") {
@@ -61,7 +65,8 @@ const MapResetButton = () => {
       testId: "map-toolbar-reset",
       onKeyDown: handleKeyDown,
       onClick: handleReset,
-      tabIndex
+      tabIndex,
+      disabled: !resetEnabled
     }
   );
 };

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

@@ -35,12 +35,12 @@ var import_react = __toESM(require("react"));
 var import_react_intl = require("react-intl");
 var import_charts = require("@dynatrace/strato-components-preview/charts");
 var import_strato_icons = require("@dynatrace/strato-icons");
+var import_selectors = require("../../../store/selectors.js");
 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_react_maplibre.useMap)();
-  const isMaxZoom = map && map?.getMaxZoom() === map?.getZoom();
-  const isMinZoom = map && map?.getMinZoom() === map?.getZoom();
+  const { zoomInEnabled, zoomOutEnabled } = (0, import_selectors.useMapZoomState)();
   const zoomInButtonRef = (0, import_react.useRef)();
   const zoomButtonOutRef = (0, import_react.useRef)();
   const intl = (0, import_react_intl.useIntl)();
@@ -69,7 +69,7 @@ const MapZoomInOutButtons = () => {
       onKeyDown: (event) => handleZoomKeyboardMode(event, "zoom-in"),
       onClick: () => handleZoomStepToolbarMode("zoom-in"),
       tabIndex: tabIndexIn,
-      disabled: isMaxZoom
+      disabled: !zoomInEnabled
     }
   ), /* @__PURE__ */ import_react.default.createElement(
     import_charts._ChartToolbarRenderer.Control,
@@ -81,7 +81,7 @@ const MapZoomInOutButtons = () => {
       onKeyDown: (event) => handleZoomKeyboardMode(event, "zoom-out"),
       onClick: () => handleZoomStepToolbarMode("zoom-out"),
       tabIndex: tabIndexOut,
-      disabled: isMinZoom
+      disabled: !zoomOutEnabled
     }
   ));
 };

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

@@ -37,6 +37,7 @@ 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_data_bounding_box = require("../../../hooks/use-data-bounding-box.js");
+var import_store = require("../../../store/store.js");
 var import_constants2 = require("../constants.js");
 var import_use_a11y_toolbar_tab_index = require("../hooks/use-a11y-toolbar-tab-index.js");
 const MapZoomToFitButton = () => {
@@ -45,8 +46,11 @@ const MapZoomToFitButton = () => {
   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)();
+  const { zoomToFitEnabled } = (0, import_store.useMapZoomState)();
+  const setZoomState = (0, import_store.useSetStateZoom)();
   const handleZoomToFit = () => {
     map?.fitBounds(boundingBox, import_constants.FIT_BOUNDS_OPTIONS);
+    setZoomState({ zoomToFitEnabled: false, zoomToFitInProgress: true });
   };
   const handleKeyDown = (event) => {
     if (event.code === "Enter") {
@@ -62,7 +66,8 @@ const MapZoomToFitButton = () => {
       testId: "map-toolbar-zoom-to-fit",
       onKeyDown: handleKeyDown,
       onClick: handleZoomToFit,
-      tabIndex
+      tabIndex,
+      disabled: !zoomToFitEnabled
     }
   );
 };

package/map/components/toolbar/utils/zoom-state-utils.d.ts

@@ -0,0 +1,4 @@
+import { type ViewStateChangeEvent } from '@vis.gl/react-maplibre';
+import type { ViewStateRequired } from '../../../types/map-view.js';
+import type { ZoomState } from '../../../types/state.js';
+export declare function generateNewZoomState(event: ViewStateChangeEvent, initialViewState: ViewStateRequired, zoomToFitInProgress?: boolean): Partial<ZoomState>;

package/map/components/toolbar/utils/zoom-state-utils.js

@@ -0,0 +1,47 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var zoom_state_utils_exports = {};
+__export(zoom_state_utils_exports, {
+  generateNewZoomState: () => generateNewZoomState
+});
+module.exports = __toCommonJS(zoom_state_utils_exports);
+var import_constants = require("../../../constants.js");
+function compareViewStates(currentViewState, initialViewState) {
+  return currentViewState.zoom.toFixed(import_constants.VIEW_STATE_PRECISION) === initialViewState.zoom.toFixed(import_constants.VIEW_STATE_PRECISION) && currentViewState.latitude.toFixed(import_constants.VIEW_STATE_PRECISION) === initialViewState.latitude.toFixed(import_constants.VIEW_STATE_PRECISION) && currentViewState.longitude.toFixed(import_constants.VIEW_STATE_PRECISION) === initialViewState.longitude.toFixed(import_constants.VIEW_STATE_PRECISION);
+}
+function isMinZoomReached(currentBounds) {
+  return currentBounds._ne.lat.toFixed(import_constants.MAX_BOUNDS_PRECISION) === import_constants.MAX_LATITUDE.toFixed(import_constants.MAX_BOUNDS_PRECISION) && currentBounds._sw.lat.toFixed(import_constants.MAX_BOUNDS_PRECISION) === import_constants.MIN_LATITUDE.toFixed(import_constants.MAX_BOUNDS_PRECISION) || currentBounds._ne.lng.toFixed(import_constants.MAX_BOUNDS_PRECISION) === import_constants.MAX_LONGITUDE.toFixed(import_constants.MAX_BOUNDS_PRECISION) && currentBounds._sw.lng.toFixed(import_constants.MAX_BOUNDS_PRECISION) === import_constants.MIN_LONGITUDE.toFixed(import_constants.MAX_BOUNDS_PRECISION);
+}
+function generateNewZoomState(event, initialViewState, zoomToFitInProgress) {
+  const map = event.target;
+  const viewState = event.viewState;
+  const currentBBox = map?.getBounds();
+  const zoomState = {};
+  if (event.type === "zoomend") {
+    zoomState.zoomInEnabled = map?.getMaxZoom() !== map?.getZoom();
+    zoomState.zoomOutEnabled = !isMinZoomReached(currentBBox);
+  }
+  if (zoomToFitInProgress) {
+    zoomState.zoomToFitEnabled = false;
+    zoomState.zoomToFitInProgress = false;
+  } else {
+    zoomState.zoomToFitEnabled = true;
+  }
+  zoomState.resetEnabled = !compareViewStates(viewState, initialViewState);
+  return zoomState;
+}

package/map/constants.d.ts

@@ -1,6 +1,7 @@
 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';
+import type { BoundingBoxCoords } from './types/map-view.js';
 export declare const DEFAULT_COUNTRIES_FILL_COLOR: string;
 export declare const DEFAULT_BOUNDARIES_BORDER_COLOR: string;
 export declare const COUNTRY_BORDER_WIDTH = 1;
@@ -10,7 +11,7 @@ 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 WORLD_VIEW_MAX_BOUNDARIES: BoundingBoxCoords;
 export declare const DEFAULT_COUNTRY_CODE = "default";
 export declare const FIT_BOUNDS_OPTIONS: {
     padding: number;
@@ -76,3 +77,6 @@ export declare const COPY_TO_CLIPBOARD_MESSAGES: {
     };
 };
 export declare const DEFAULT_BASE_LAYER_RULES: BaseLayerRules;
+export declare const BOUNDING_BOX_PRECISION = 6;
+export declare const VIEW_STATE_PRECISION = 4;
+export declare const MAX_BOUNDS_PRECISION = 2;

package/map/constants.js

@@ -33,6 +33,7 @@ __export(constants_exports, {
   BASE_LAYER_FILL_ID: () => BASE_LAYER_FILL_ID,
   BASE_LAYER_IDS: () => BASE_LAYER_IDS,
   BASE_LAYER_LINE_ID: () => BASE_LAYER_LINE_ID,
+  BOUNDING_BOX_PRECISION: () => BOUNDING_BOX_PRECISION,
   BUBBLE_DEFAULT_OPACITY: () => BUBBLE_DEFAULT_OPACITY,
   BUBBLE_OUTLINE_STROKE: () => BUBBLE_OUTLINE_STROKE,
   BUBBLE_STROKE: () => BUBBLE_STROKE,
@@ -74,6 +75,7 @@ __export(constants_exports, {
   ICON_BACKGROUND_OPACITY: () => ICON_BACKGROUND_OPACITY,
   ICON_BACKGROUND_RADIUS: () => ICON_BACKGROUND_RADIUS,
   INCLUDE_ALL_WILDCARD_RULE: () => INCLUDE_ALL_WILDCARD_RULE,
+  MAX_BOUNDS_PRECISION: () => MAX_BOUNDS_PRECISION,
   MAX_LATITUDE: () => MAX_LATITUDE,
   MAX_LINE_THICKNESS: () => MAX_LINE_THICKNESS,
   MAX_LONGITUDE: () => MAX_LONGITUDE,
@@ -84,6 +86,7 @@ __export(constants_exports, {
   SHAPE_OPACITY_DEFAULT: () => SHAPE_OPACITY_DEFAULT,
   SHAPE_OPACITY_DIMMED: () => SHAPE_OPACITY_DIMMED,
   TRANSPARENT_BORDER_COLOR: () => TRANSPARENT_BORDER_COLOR,
+  VIEW_STATE_PRECISION: () => VIEW_STATE_PRECISION,
   WORLD_VIEW_MAX_BOUNDARIES: () => WORLD_VIEW_MAX_BOUNDARIES
 });
 module.exports = __toCommonJS(constants_exports);
@@ -175,3 +178,6 @@ const DEFAULT_BASE_LAYER_RULES = {
   include: [INCLUDE_ALL_WILDCARD_RULE],
   exclude: []
 };
+const BOUNDING_BOX_PRECISION = 6;
+const VIEW_STATE_PRECISION = 4;
+const MAX_BOUNDS_PRECISION = 2;

package/map/contexts/map-data-bounding-box.context.d.ts

@@ -1,2 +1,3 @@
 import React from 'react';
-export declare const MapDataBoundingBoxContext: React.Context<[number, number, number, number]>;
+import type { BoundingBoxCoords } from '../types/map-view.js';
+export declare const MapDataBoundingBoxContext: React.Context<BoundingBoxCoords>;

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

@@ -32,4 +32,6 @@ __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.WORLD_VIEW_MAX_BOUNDARIES);
+const MapDataBoundingBoxContext = import_react.default.createContext(
+  import_constants.WORLD_VIEW_MAX_BOUNDARIES
+);

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

@@ -49,24 +49,28 @@ const useActiveInteraction = () => {
           { source: sourceId, id: featureId },
           { active: !activeState }
         );
-        allFeatures.map(
-          (feature) => map.setFeatureState(
-            { source: feature.layer.source, id: feature.id },
-            { isAnyActive: !activeState }
-          )
-        );
+        allFeatures.forEach((feature) => {
+          if (feature.id !== void 0 && feature.layer.source !== void 0) {
+            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 }
-            )
-          );
+          allFeatures.forEach((feature) => {
+            if (feature.id !== void 0 && feature.layer.source !== void 0) {
+              map.setFeatureState(
+                { source: feature.layer.source, id: feature.id },
+                { isAnyActive: false }
+              );
+            }
+          });
         }
       }
     },

package/map/hooks/use-data-bounding-box.d.ts

@@ -1 +1 @@
-export declare const useDataBoundingBox: () => [number, number, number, number];
+export declare const useDataBoundingBox: () => import("../types/map-view.js").BoundingBoxCoords;

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

@@ -36,7 +36,7 @@ const useResolveColor = (defaultColor, props, colorParser) => {
   if (!(0, import_coloring.isLegendColoring)(props)) {
     return props.color ?? defaultColor;
   }
-  const fallbackColor = !(0, import_lodash_es.isUndefined)(legend) && (0, import_build_scale_from_legend_config.isSequentialLegend)(legend) ? import_constants.DEFAULT_RANGE_COLOR : defaultColor;
+  const fallbackColor = !(0, import_lodash_es.isUndefined)(legend) && ((0, import_build_scale_from_legend_config.isSequentialLegend)(legend) || (0, import_build_scale_from_legend_config.isThresholdLegend)(legend)) ? import_constants.DEFAULT_RANGE_COLOR : defaultColor;
   let colorLegend = fallbackColor;
   if (!(0, import_lodash_es.isUndefined)(legendColoring) && !(0, import_lodash_es.isUndefined)(colorParser)) {
     colorLegend = (item) => {

package/map/providers/color-scale.provider.d.ts

@@ -11,8 +11,10 @@ import React, { type PropsWithChildren } from 'react';
  * @see {@link LayerColorStrategyProvider}
  * @example to build a legend the raw scale could be needed
  * @param categories - Available categories to be shown in the legend
+ * @param dataMax - Maximum value present in the data
  * @param children -
  */
-export declare const ColorScaleProvider: ({ categories, children, }: PropsWithChildren<{
+export declare const ColorScaleProvider: ({ categories, dataMax, children, }: PropsWithChildren<{
     categories: string[];
+    dataMax: number;
 }>) => React.JSX.Element;

package/map/providers/color-scale.provider.js

@@ -37,6 +37,7 @@ var import_use_map_config = require("../hooks/use-map-config.js");
 var import_build_scale_from_legend_config = require("../utils/build-scale-from-legend-config.js");
 const ColorScaleProvider = ({
   categories,
+  dataMax,
   children
 }) => {
   const { legend } = (0, import_use_map_config.useMapConfig)();
@@ -44,6 +45,6 @@ const ColorScaleProvider = ({
     return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, children);
   }
   const categoriesArray = "categories" in legend && legend.categories ? legend.categories : categories;
-  const scale = (0, import_build_scale_from_legend_config.buildScaleFromLegendConfig)(legend, categoriesArray);
+  const scale = (0, import_build_scale_from_legend_config.buildScaleFromLegendConfig)(legend, categoriesArray, dataMax);
   return /* @__PURE__ */ import_react.default.createElement(import_color_scale_context.ColorScaleContext.Provider, { value: scale }, children);
 };

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

@@ -26,6 +26,7 @@ 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");
 var import_use_map_raw_data = require("../hooks/use-map-raw-data.js");
+var import_store = require("../store/store.js");
 var import_build_and_download_csv = require("../utils/build-and-download-csv.js");
 const MapViewImperativeHandler = ({
   forwardedRef,
@@ -36,8 +37,13 @@ const MapViewImperativeHandler = ({
   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 setZoomState = (0, import_store.useSetStateZoom)();
   const zoomOutEnabled = map && map?.getMinZoom() !== map?.getZoom();
   const zoomInEnabled = map && map?.getMaxZoom() !== map?.getZoom();
+  const handleZoomToFit = () => {
+    map?.fitBounds(boundingBox, import_constants.FIT_BOUNDS_OPTIONS);
+    setZoomState({ zoomToFitEnabled: false, zoomToFitInProgress: true });
+  };
   (0, import_react.useImperativeHandle)(forwardedRef, () => ({
     element: containerRef.current,
     downloadData: () => {
@@ -45,7 +51,7 @@ const MapViewImperativeHandler = ({
     },
     zoomIn: () => zoomInEnabled && map?.zoomIn(),
     zoomOut: () => zoomOutEnabled && map?.zoomOut(),
-    zoomToFit: () => map?.fitBounds(boundingBox, import_constants.FIT_BOUNDS_OPTIONS),
+    zoomToFit: () => handleZoomToFit(),
     reset: () => map?.flyTo({ center: [longitude, latitude], zoom })
   }));
   return children;

package/map/store/map-store.context.d.ts

@@ -17,5 +17,11 @@ export declare const initialState: {
         highlightedSeries: undefined;
         visible: undefined;
     };
+    zoom: {
+        zoomInEnabled: boolean;
+        zoomOutEnabled: boolean;
+        zoomToFitEnabled: boolean;
+        resetEnabled: boolean;
+    };
 };
 export declare const MapStore: React.Context<Store<MapState<unknown>>>;

package/map/store/map-store.context.js

@@ -46,7 +46,13 @@ const initialState = {
   overlay: {
     mouseInBounds: false
   },
-  selection: initialSelection
+  selection: initialSelection,
+  zoom: {
+    zoomInEnabled: true,
+    zoomOutEnabled: true,
+    zoomToFitEnabled: true,
+    resetEnabled: false
+  }
 };
 const MapStore = import_react.default.createContext(
   (0, import_core.createStore)(initialState)

package/map/store/selectors.d.ts

@@ -13,3 +13,4 @@ export declare const useMapTooltipState: <T>() => {
 };
 export declare const useMapTooltipPinnedState: <T>() => boolean;
 export declare const useMapOverlayState: <T>() => import("../types/state.js").MapOverlayState;
+export declare const useMapZoomState: <T>() => import("../types/state.js").ZoomState;

package/map/store/selectors.js

@@ -21,6 +21,7 @@ __export(selectors_exports, {
   useMapSelectionState: () => useMapSelectionState,
   useMapTooltipPinnedState: () => useMapTooltipPinnedState,
   useMapTooltipState: () => useMapTooltipState,
+  useMapZoomState: () => useMapZoomState,
   useSelector: () => useSelector
 });
 module.exports = __toCommonJS(selectors_exports);
@@ -38,3 +39,4 @@ const useMapTooltipPinnedState = () => useSelector(({ tooltip }) => {
   return pinned;
 });
 const useMapOverlayState = () => useSelector(({ overlay }) => overlay);
+const useMapZoomState = () => useSelector(({ zoom }) => zoom);

package/map/store/store.d.ts

@@ -1,7 +1,8 @@
-import type { MapOverlayState, MapSelectionState, MapTooltipState } from '../types/state.js';
+import type { MapOverlayState, MapSelectionState, MapTooltipState, ZoomState } from '../types/state.js';
 export declare const useSetState: () => (action: import("../types/state.js").MapState<unknown> | ((prev: import("../types/state.js").MapState<unknown>) => import("../types/state.js").MapState<unknown>)) => void;
 export * from './selectors.js';
 export declare const useSetStateSelection: () => (newSelectionState: Partial<MapSelectionState>) => void;
 export declare const useSetStateTooltip: <T>() => (newTooltipState: Partial<MapTooltipState<T>>) => void;
 export declare const useSetStateOverlay: () => (newOverlayState: Partial<MapOverlayState>) => void;
 export declare const useToggleStatePinnedTooltip: () => () => void;
+export declare const useSetStateZoom: () => (newZoomState: Partial<ZoomState>) => void;

package/map/store/store.js

@@ -22,6 +22,7 @@ __export(store_exports, {
   useSetStateOverlay: () => useSetStateOverlay,
   useSetStateSelection: () => useSetStateSelection,
   useSetStateTooltip: () => useSetStateTooltip,
+  useSetStateZoom: () => useSetStateZoom,
   useToggleStatePinnedTooltip: () => useToggleStatePinnedTooltip
 });
 module.exports = __toCommonJS(store_exports);
@@ -85,3 +86,15 @@ const useToggleStatePinnedTooltip = () => {
     });
   };
 };
+const useSetStateZoom = () => {
+  const setState = useSetState();
+  return (newZoomState) => {
+    setState((prev) => ({
+      ...prev,
+      zoom: {
+        ...prev.zoom,
+        ...newZoomState
+      }
+    }));
+  };
+};

package/map/types/map-view.d.ts

@@ -22,6 +22,8 @@ export interface ViewState {
     /** Map zoom level */
     zoom?: number;
 }
+export type ViewStateRequired = Required<ViewState>;
+export type BoundingBoxCoords = [number, number, number, number];
 /**
  * Type to use in a controlled Map.
  * It disallows the initial state and gives the user complete control over the interactions

package/map/types/state.d.ts

@@ -17,8 +17,16 @@ export interface MapTooltipState<T> {
 export interface MapOverlayState {
     mouseInBounds: boolean;
 }
+export interface ZoomState {
+    zoomInEnabled: boolean;
+    zoomOutEnabled: boolean;
+    zoomToFitEnabled: boolean;
+    resetEnabled: boolean;
+    zoomToFitInProgress?: boolean;
+}
 export interface MapState<T = unknown> {
     selection: MapSelectionState;
     tooltip: MapTooltipState<T>;
     overlay: MapOverlayState;
+    zoom: ZoomState;
 }

package/map/utils/build-scale-from-legend-config.d.ts

@@ -5,4 +5,4 @@ export declare const isCategoricalLegend: (legendConfig: MapLegendConfig) => leg
 /**
  * Builds a scale for the corresponding map legend configuration
  */
-export declare const buildScaleFromLegendConfig: (mapLegendConfig: MapLegendConfig, categories?: string[]) => import("d3-scale").ScaleOrdinal<string, string, never> | import("d3-scale").ScaleThreshold<number, string, never> | undefined;
+export declare const buildScaleFromLegendConfig: (mapLegendConfig: MapLegendConfig, categories?: string[], dataMax?: number) => import("d3-scale").ScaleOrdinal<string, string, never> | import("d3-scale").ScaleThreshold<number, string, never> | undefined;