@dynatrace/strato-geo 3.5.2 → 3.7.0

package/map/components/ConnectionLayer/ConnectionLayerTooltip.js

@@ -23,28 +23,26 @@ __export(ConnectionLayerTooltip_exports, {
 module.exports = __toCommonJS(ConnectionLayerTooltip_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_charts = require("@dynatrace/strato-components/charts");
-var import_restore_null_props = require("./utils/restore-null-props.js");
 var import_use_geo_layer_tooltip = require("../../hooks/use-geo-layer-tooltip.js");
 var import_tooltip_type_guards = require("../../utils/tooltip-type-guards.js");
 const ConnectionLayerTooltip = (props) => {
-  const { tooltipTemplate } = props;
-  const {
-    data: rawData,
-    inBounds,
-    position
-  } = (0, import_use_geo_layer_tooltip.useGeoLayerTooltip)("geoConnection");
-  const data = (0, import_restore_null_props.restoreNullProps)(rawData);
-  if (!tooltipTemplate || !inBounds || !position) {
+  const { tooltipTemplate, hidden, symbolAlignment } = props;
+  const { data, inBounds, position } = (0, import_use_geo_layer_tooltip.useGeoLayerTooltip)("geoConnection");
+  if (hidden || !tooltipTemplate || !inBounds || !position) {
     return null;
   }
   if (!data || !data[0]) {
     return null;
   }
-  const { __lineColor: color, __lineWidth: thickness, ...rest } = data[0];
+  const {
+    __lineColor: color,
+    __lineWidth: thickness,
+    data: customData
+  } = data[0];
   const connectionData = {
     color,
     thickness,
-    data: rest
+    data: customData
   };
   const template = tooltipTemplate(connectionData);
   if (!template) {
@@ -53,6 +51,12 @@ const ConnectionLayerTooltip = (props) => {
   if ((0, import_tooltip_type_guards.isDefaultTooltipHandler)(tooltipTemplate)) {
     return template;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_charts._OverlayTooltip, { legacyTemplate: template });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_charts._OverlayTooltip,
+    {
+      legacyTemplate: template,
+      symbolAlignment
+    }
+  );
 };
 ConnectionLayerTooltip["displayName"] = "ConnectionLayerTooltip";

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

@@ -1,3 +1,5 @@
 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: GeoJSON.FeatureCollection;
+};

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

@@ -36,14 +36,11 @@ const getLineThickness = (thickness) => {
   }
   return thickness;
 };
-const getKeysWithNullValues = (obj) => Object.keys(obj).filter((key) => obj[key] === null);
-const getFeatureProperties = (thickness, curve) => (properties, id) => {
+const getRenderingProperties = (thickness, id, curve) => {
   const lineThickness = getLineThickness(thickness);
   return {
-    ...properties,
     id,
     __lineWidth: lineThickness,
-    __nullValues: getKeysWithNullValues(properties),
     curve
   };
 };
@@ -54,33 +51,38 @@ const getLineFeature = (path, featureProperties) => {
   }
   return (0, import_get_straight_line_feature.getStraightLineFeature)(path, featureProperties);
 };
+const getConnectionColor = (connection, color) => {
+  const parsedColor = (0, import_define_color.defineColor)(color, connection);
+  const canvasColor = (0, import_charts._getCanvasColor)(parsedColor);
+  const hoveredColor = (0, import_calculate_hovered_color.calculateHoveredColor)(canvasColor);
+  return {
+    __lineColor: canvasColor,
+    __lineHoveredColor: hoveredColor
+  };
+};
 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 renderingProps = getRenderingProperties(
+        thickness,
+        `connection-${index}`,
+        curve
+      );
       const featureProperties = {
-        ...getProperties({ path, ...properties }, `connection-${index}`),
+        ...renderingProps,
+        __dataIndex: index,
         ...getConnectionColor(feature, color)
       };
-      features.push(getLineFeature(path, featureProperties));
+      features.push(getLineFeature(feature.path, featureProperties));
     }
   });
   return features;
 };
-const getConnectionColor = (connection, color) => {
-  const parsedColor = (0, import_define_color.defineColor)(color, connection);
-  const canvasColor = (0, import_charts._getCanvasColor)(parsedColor);
-  const hoveredColor = (0, import_calculate_hovered_color.calculateHoveredColor)(canvasColor);
-  return {
-    __lineColor: canvasColor,
-    __lineHoveredColor: hoveredColor
-  };
-};
 const parseConnectionDataToGeoJSON = (data, thickness, color, curve) => {
-  return {
+  const geoJson = {
     type: "FeatureCollection",
     features: getFeatures(data, thickness, color, curve)
   };
+  return { geoJson };
 };

package/map/components/DotLayer/DotLayer.js

@@ -29,6 +29,7 @@ var import_BackgroundSymbolLayer = require("./BackgroundSymbolLayer.js");
 var import_DotLayerTooltip = require("./DotLayerTooltip.js");
 var import_parse_dot_data_to_geo_json = require("./utils/parse-dot-data-to-geo-json.js");
 var import_constants = require("../../constants.js");
+var import_use_layer_before_id = require("../../hooks/use-layer-before-id.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");
@@ -68,11 +69,16 @@ const DotLayer = (props) => {
     props,
     colorParser
   );
-  const tooltipTemplate = (0, import_use_tooltip_template.useTooltipTemplate)(children, import_DotLayerTooltip2.DotLayerTooltip);
+  const {
+    handler: tooltipTemplate,
+    hidden: tooltipHidden,
+    symbolAlignment
+  } = (0, import_use_tooltip_template.useTooltipTemplate)(children, import_DotLayerTooltip2.DotLayerTooltip, { extractProps: true });
   const sourceId = `source-${layerId}`;
   (0, import_use_legend_interaction_highlighting.useLegendInteractionHighlighting)(props, sourceId);
   (0, import_use_legend_interaction_visibility.useLegendInteractionVisibility)(props, layerId);
-  const dataGeoJson = (0, import_parse_dot_data_to_geo_json.parseDotDataToGeoJSON)(
+  const beforeId = (0, import_use_layer_before_id.useLayerBeforeId)(layerId);
+  const { geoJson: dataGeoJson } = (0, import_parse_dot_data_to_geo_json.parseDotDataToGeoJSON)(
     data,
     shapeColor,
     bearing,
@@ -85,6 +91,7 @@ const DotLayer = (props) => {
       {
         type: "symbol",
         id: layerId,
+        beforeId,
         layout: {
           "icon-image": symbolName,
           "icon-size": import_constants.DEFAULT_ICON_SIZE_RATIO,
@@ -130,7 +137,9 @@ const DotLayer = (props) => {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TooltipWrapper.TooltipWrapper, { layerId, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_DotLayerTooltip.DotLayerTooltip,
       {
-        tooltipTemplate: (0, import_tooltip_type_guards.isDotTooltipTemplate)(tooltipTemplate) ? tooltipTemplate : void 0
+        tooltipTemplate: (0, import_tooltip_type_guards.isDotTooltipTemplate)(tooltipTemplate) ? tooltipTemplate : void 0,
+        hidden: tooltipHidden,
+        symbolAlignment
       }
     ) })
   ] });

package/map/components/DotLayer/DotLayerTooltip.d.ts

@@ -1,6 +1,8 @@
 import type { DotLayerTooltipHandler } from '../../types/tooltip.js';
 export interface DotLayerTooltipProps {
     tooltipTemplate?: DotLayerTooltipHandler;
+    hidden?: boolean;
+    symbolAlignment?: 'left' | 'right';
 }
 export declare const DotLayerTooltip: {
     (props: DotLayerTooltipProps): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;

package/map/components/DotLayer/DotLayerTooltip.js

@@ -26,9 +26,9 @@ var import_charts = require("@dynatrace/strato-components/charts");
 var import_use_geo_layer_tooltip = require("../../hooks/use-geo-layer-tooltip.js");
 var import_tooltip_type_guards = require("../../utils/tooltip-type-guards.js");
 const DotLayerTooltip = (props) => {
-  const { tooltipTemplate } = props;
+  const { tooltipTemplate, hidden, symbolAlignment } = props;
   const { data, inBounds, position } = (0, import_use_geo_layer_tooltip.useGeoLayerTooltip)("geoDot");
-  if (!tooltipTemplate || !inBounds || !position) {
+  if (hidden || !tooltipTemplate || !inBounds || !position) {
     return null;
   }
   if (!data || !data[0]) {
@@ -47,6 +47,12 @@ const DotLayerTooltip = (props) => {
   if ((0, import_tooltip_type_guards.isDefaultTooltipHandler)(tooltipTemplate)) {
     return template;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_charts._OverlayTooltip, { legacyTemplate: template });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_charts._OverlayTooltip,
+    {
+      legacyTemplate: template,
+      symbolAlignment
+    }
+  );
 };
 DotLayerTooltip["displayName"] = "DotLayerTooltip";

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

@@ -1,3 +1,5 @@
 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)) => GeoJSON.FeatureCollection;
+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: GeoJSON.FeatureCollection;
+};

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

@@ -27,18 +27,17 @@ var import_resolve_icon_background = require("./resolve-icon-background.js");
 var import_calculate_hovered_color = require("../../../utils/calculate-hovered-color.js");
 var import_define_color = require("../../../utils/define-color.js");
 const parseDotDataToGeoJSON = (data, color, bearing, backgroundColor) => {
-  return {
+  const geoJson = {
     type: "FeatureCollection",
-    features: data.map((feature) => {
-      const { longitude, latitude, ...properties } = feature;
+    features: data.map((feature, index) => {
+      const { longitude, latitude } = feature;
       const canvasColor = (0, import_charts._getCanvasColor)((0, import_define_color.defineColor)(color, feature));
       const hoveredColor = (0, import_calculate_hovered_color.calculateHoveredColor)(canvasColor);
       const { parsedBackgroundColor, parsedHoveredBackgroundColor } = (0, import_resolve_icon_background.resolveIconBackground)(feature, backgroundColor);
       return {
         type: "Feature",
         properties: {
-          data: feature,
-          ...properties,
+          __dataIndex: index,
           __color: canvasColor,
           __hoveredColor: hoveredColor,
           __backgroundColor: parsedBackgroundColor,
@@ -49,4 +48,5 @@ const parseDotDataToGeoJSON = (data, color, bearing, backgroundColor) => {
       };
     })
   };
+  return { geoJson };
 };

package/map/components/MapContent.js

@@ -38,9 +38,9 @@ var import_use_map_base_layer_features = require("../hooks/use-map-base-layer-fe
 var import_use_map_config = require("../hooks/use-map-config.js");
 var import_use_map_loading = require("../hooks/use-map-loading.js");
 var import_use_map_performance = require("../hooks/use-map-performance.js");
+var import_use_map_runtime_error = require("../hooks/use-map-runtime-error.js");
 var import_use_overlay_events = require("../hooks/use-overlay-events.js");
 var import_use_tooltip_event_listeners = require("../hooks/use-tooltip-event-listeners.js");
-var import_use_webgl_context_error = require("../hooks/use-webgl-context-error.js");
 var import_default_style = require("../map-styles/default-style.js");
 var import_imperative_handler_provider = require("../providers/imperative-handler.provider.js");
 var import_get_color_from_token = require("../utils/get-color-from-token.js");
@@ -93,21 +93,23 @@ const MapSource = () => {
 };
 const MapInteractions = ({
   children,
-  onContextLostError
+  onContextLostError,
+  interactiveLayerIds
 }) => {
-  const [contextLostError, setContextLostError] = (0, import_react.useState)(null);
-  (0, import_use_hover_interaction.useHoverInteraction)();
-  (0, import_use_active_interaction.useActiveInteraction)();
-  (0, import_use_webgl_context_error.useWebGLContextError)(() => {
+  const [runtimeError, setRuntimeError] = (0, import_react.useState)(null);
+  const onRuntimeError = (0, import_react.useCallback)(() => {
     onContextLostError?.();
-    setContextLostError(
+    setRuntimeError(
       new Error(
-        "Too many active maps. This is a browser limitation. Try reducing the number of map instances."
+        "The map encountered repeated rendering errors and could not recover. Please reload the page."
       )
     );
-  });
-  if (contextLostError) {
-    throw contextLostError;
+  }, [onContextLostError]);
+  (0, import_use_hover_interaction.useHoverInteraction)(interactiveLayerIds);
+  (0, import_use_active_interaction.useActiveInteraction)(interactiveLayerIds);
+  (0, import_use_map_runtime_error.useMapRuntimeError)({ onError: onRuntimeError });
+  if (runtimeError) {
+    throw runtimeError;
   }
   return children;
 };
@@ -234,7 +236,14 @@ const MapContent = (0, import_react.forwardRef)((props, forwardedRef) => {
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MapSource, {}),
                 loading ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MapInteractions, { onContextLostError, children }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    MapInteractions,
+                    {
+                      onContextLostError,
+                      interactiveLayerIds: layerIds,
+                      children
+                    }
+                  ),
                   shouldRenderToolbar ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MapToolbar.MapToolbar, {}) : null
                 ] })
               ]

package/map/contexts/geo-data-lookup.context.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @internal
+ */
+export type GeoDataLookup = Map<number, unknown>;
+/**
+ * @internal
+ */
+export type GeoDataLookupRegistry = Map<string, GeoDataLookup>;
+export declare const GeoDataLookupContext: import("react").Context<GeoDataLookupRegistry>;

package/map/contexts/geo-data-lookup.context.js

@@ -0,0 +1,27 @@
+"use strict";
+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 geo_data_lookup_context_exports = {};
+__export(geo_data_lookup_context_exports, {
+  GeoDataLookupContext: () => GeoDataLookupContext
+});
+module.exports = __toCommonJS(geo_data_lookup_context_exports);
+var import_react = require("react");
+const GeoDataLookupContext = (0, import_react.createContext)(
+  /* @__PURE__ */ new Map()
+);

package/map/contexts/map-view-provider.context.d.ts

@@ -0,0 +1,2 @@
+import type { MapViewProviderProps } from '../types/map-view-provider.js';
+export declare const MapViewProviderContext: import("react").Context<MapViewProviderProps>;

package/map/{components/ConnectionLayer/utils/restore-null-props.js → contexts/map-view-provider.context.js}

@@ -16,13 +16,13 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var restore_null_props_exports = {};
-__export(restore_null_props_exports, {
-  restoreNullProps: () => restoreNullProps
+var map_view_provider_context_exports = {};
+__export(map_view_provider_context_exports, {
+  MapViewProviderContext: () => MapViewProviderContext
 });
-module.exports = __toCommonJS(restore_null_props_exports);
-var import_lodash_es = require("lodash");
-const restoreNullProps = (data) => data?.map(({ __nullValues, ...rest }) => {
-  const nullProps = __nullValues?.map((prop) => ({ [prop]: null })) || [];
-  return (0, import_lodash_es.merge)(rest, ...nullProps);
+module.exports = __toCommonJS(map_view_provider_context_exports);
+var import_react = require("react");
+const MapViewProviderContext = (0, import_react.createContext)({
+  countryCode: void 0,
+  displayWorldMap: void 0
 });

package/map/hooks/use-active-interaction.d.ts

@@ -1 +1,8 @@
-export declare const useActiveInteraction: () => void;
+/**
+ * Handles click-to-activate interactions on map features.
+ *
+ * Scopes `queryRenderedFeatures` to `interactiveLayerIds` to prevent accidental
+ * activation of base/background layers. Both query calls are try-caught to
+ * contain maplibre-gl runtime errors without crashing the component tree.
+ */
+export declare const useActiveInteraction: (interactiveLayerIds: string[]) => void;

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

@@ -24,32 +24,45 @@ 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_constants = require("../constants.js");
 var import_get_min_value_feature = require("../utils/get-min-value-feature.js");
-const useActiveInteraction = () => {
+const useActiveInteraction = (interactiveLayerIds) => {
   const map = (0, import_react_maplibre.useMap)().current;
-  let featureId;
-  let sourceId;
+  const featureIdRef = (0, import_react.useRef)(void 0);
+  const sourceIdRef = (0, import_react.useRef)(void 0);
+  const interactiveLayerIdsRef = (0, import_react.useRef)(interactiveLayerIds);
+  interactiveLayerIdsRef.current = interactiveLayerIds;
   const handleClick = (0, import_react.useCallback)(
     ({ point }) => {
-      const features = map.queryRenderedFeatures(point);
-      const allFeatures = map.queryRenderedFeatures();
+      let features = [];
+      try {
+        features = map.queryRenderedFeatures(point, {
+          layers: interactiveLayerIdsRef.current
+        });
+      } catch {
+        return;
+      }
+      let allFeatures = [];
+      try {
+        allFeatures = map.queryRenderedFeatures(void 0, {
+          layers: interactiveLayerIdsRef.current
+        });
+      } catch {
+      }
       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);
-      if (hasHoveredFeatures && !isBaseLayer) {
-        if (!(0, import_lodash_es.isUndefined)(featureId) && !(0, import_lodash_es.isUndefined)(sourceId)) {
+      if (hasHoveredFeatures) {
+        if (!(0, import_lodash_es.isUndefined)(featureIdRef.current) && !(0, import_lodash_es.isUndefined)(sourceIdRef.current)) {
           map.setFeatureState(
-            { source: sourceId, id: featureId },
+            { source: sourceIdRef.current, id: featureIdRef.current },
             { active: false }
           );
         }
         const minFeature = (0, import_get_min_value_feature.getMinValueFeature)(features);
-        featureId = minFeature.id;
-        sourceId = minFeature.layer.source;
+        featureIdRef.current = minFeature.id;
+        sourceIdRef.current = minFeature.layer.source;
         const activeState = features[0].state.active;
         map.setFeatureState(
-          { source: sourceId, id: featureId },
+          { source: sourceIdRef.current, id: featureIdRef.current },
           { active: !activeState }
         );
         allFeatures.forEach((feature) => {
@@ -60,46 +73,49 @@ const useActiveInteraction = () => {
             );
           }
         });
-      } else {
-        if (!(0, import_lodash_es.isUndefined)(featureId) && !(0, import_lodash_es.isUndefined)(sourceId)) {
-          map.setFeatureState(
-            { source: sourceId, id: featureId },
-            { active: 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 }
-              );
-            }
-          });
-        }
+      } else if (!(0, import_lodash_es.isUndefined)(featureIdRef.current) && !(0, import_lodash_es.isUndefined)(sourceIdRef.current)) {
+        map.setFeatureState(
+          { source: sourceIdRef.current, id: featureIdRef.current },
+          { active: 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 }
+            );
+          }
+        });
       }
     },
-    [featureId, sourceId, map]
+    [map]
   );
   const onEscapeKeyPressedHandler = (0, import_react.useCallback)(
     (event) => {
       if (event.key === "Escape") {
-        if (!(0, import_lodash_es.isUndefined)(featureId) && !(0, import_lodash_es.isUndefined)(sourceId)) {
+        if (!(0, import_lodash_es.isUndefined)(featureIdRef.current) && !(0, import_lodash_es.isUndefined)(sourceIdRef.current)) {
           map.setFeatureState(
-            { source: sourceId, id: featureId },
+            { source: sourceIdRef.current, id: featureIdRef.current },
             { active: false }
           );
-          const allFeatures = map.queryRenderedFeatures();
-          allFeatures.forEach((feature) => {
-            if (feature.id !== void 0 && feature.layer.source !== void 0) {
-              map.setFeatureState(
-                { source: feature.layer.source, id: feature.id },
-                { isAnyActive: false }
-              );
-            }
-          });
+          try {
+            const allFeatures = map.queryRenderedFeatures(void 0, {
+              layers: interactiveLayerIdsRef.current
+            });
+            allFeatures.forEach((feature) => {
+              if (feature.id !== void 0 && feature.layer.source !== void 0) {
+                map.setFeatureState(
+                  { source: feature.layer.source, id: feature.id },
+                  { isAnyActive: false }
+                );
+              }
+            });
+          } catch {
+          }
         }
       }
     },
-    [featureId, sourceId, map]
+    [map]
   );
   (0, import_react.useEffect)(() => {
     map.on("click", handleClick);
@@ -108,5 +124,5 @@ const useActiveInteraction = () => {
       map.off("click", handleClick);
       window.removeEventListener("keyup", onEscapeKeyPressedHandler);
     };
-  }, []);
+  }, [map, handleClick, onEscapeKeyPressedHandler]);
 };

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

@@ -31,6 +31,7 @@ var import_attach_image_to_map = require("../utils/attach-image-to-map.js");
 var import_create_bitmap_config_options = require("../utils/create-bitmap-config-options.js");
 var import_get_data_uri = require("../utils/get-data-uri.js");
 var import_get_scaled_symbol_size = require("../utils/get-scaled-symbol-size.js");
+var import_is_browser_firefox = require("../utils/is-browser-firefox.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)();
@@ -48,14 +49,15 @@ const useAttachImageFromIcon = (icon, suffix, outputSize) => {
   fakeDomContainer.remove();
   const stringUrl = (0, import_get_data_uri.getDataUri)(elementAsString);
   img.addEventListener("load", () => {
-    createImageBitmap(
+    const bitmapPromise = (0, import_is_browser_firefox.isFirefox)() ? createImageBitmap(img, (0, import_create_bitmap_config_options.createBitmapConfigOptions)(outputSize)) : createImageBitmap(
       img,
       0,
       0,
       import_constants.DEFAULT_INPUT_ICON_SIZE,
       import_constants.DEFAULT_INPUT_ICON_SIZE,
       (0, import_create_bitmap_config_options.createBitmapConfigOptions)(outputSize)
-    ).then((bitmap) => {
+    );
+    bitmapPromise.then((bitmap) => {
       if (!map) {
         return;
       }

package/map/hooks/use-hover-interaction.d.ts

@@ -1,4 +1,8 @@
 /**
- * Sets and removes hovered state to the features depending on mouse position
+ * Sets and removes hovered state to the features depending on mouse position.
+ *
+ * @param interactiveLayerIds - maplibre-gl layer IDs to scope the feature query.
+ *   Scoping to data layers prevents touching base-map vector tiles whose internal
+ *   feature index may be in a transitional state (root cause of APPDEV-17854).
  */
-export declare const useHoverInteraction: () => void;
+export declare const useHoverInteraction: (interactiveLayerIds: string[]) => void;