@dynatrace/strato-geo 3.6.0 → 3.7.0

package/map/components/ChoroplethLayer/ChoroplethLayer.js

@@ -28,6 +28,7 @@ var import_ChoroplethLayerTooltip = require("./ChoroplethLayerTooltip.js");
 var import_ChoroplethOutlineLayer = require("./ChoroplethOutlineLayer.js");
 var import_parse_region_data_to_geo_json = require("./utils/parse-region-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");
@@ -50,7 +51,8 @@ const ChoroplethLayer = (props) => {
   const sourceId = layerId.replace("layer", "source");
   (0, import_use_legend_interaction_highlighting.useLegendInteractionHighlighting)(props, sourceId);
   (0, import_use_legend_interaction_visibility.useLegendInteractionVisibility)(props, layerId);
-  const dataGeoJSON = mapSource && (0, import_parse_region_data_to_geo_json.parseRegionDataToGeoJSON)(mapSource, data, regionAccessor, choroplethColor);
+  const beforeId = (0, import_use_layer_before_id.useLayerBeforeId)(layerId);
+  const dataGeoJSON = mapSource ? (0, import_parse_region_data_to_geo_json.parseRegionDataToGeoJSON)(mapSource, data, regionAccessor, choroplethColor).geoJson : void 0;
   const {
     handler: tooltipTemplate,
     hidden: tooltipHidden,
@@ -65,6 +67,7 @@ const ChoroplethLayer = (props) => {
         id: layerId,
         source: sourceId,
         type: "fill",
+        beforeId,
         paint: {
           "fill-color": ["get", "__color"],
           "fill-opacity": [
@@ -85,7 +88,7 @@ const ChoroplethLayer = (props) => {
         ...behavioralTrackingProps
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChoroplethOutlineLayer.ChoroplethOutlineLayer, { sourceId }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChoroplethOutlineLayer.ChoroplethOutlineLayer, { sourceId, beforeId }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TooltipWrapper.TooltipWrapper, { layerId, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_ChoroplethLayerTooltip.ChoroplethLayerTooltip,
       {

package/map/components/ChoroplethLayer/ChoroplethOutlineLayer.d.ts

@@ -1,3 +1,4 @@
 export declare const ChoroplethOutlineLayer: (props: {
     sourceId: string;
+    beforeId?: string;
 }) => import("react/jsx-runtime").JSX.Element;

package/map/components/ChoroplethLayer/ChoroplethOutlineLayer.js

@@ -26,7 +26,7 @@ var import_react_maplibre = require("@vis.gl/react-maplibre");
 var import_charts = require("@dynatrace/strato-components/charts");
 var import_constants = require("../../constants.js");
 const ChoroplethOutlineLayer = (props) => {
-  const { sourceId } = props;
+  const { sourceId, beforeId } = props;
   const activeColor = (0, import_charts._getCanvasColor)(import_constants.ACTIVE_COLOR);
   const defaultBoundariesBorderColor = (0, import_charts._getCanvasColor)(
     import_constants.DEFAULT_BOUNDARIES_BORDER_COLOR
@@ -38,6 +38,7 @@ const ChoroplethOutlineLayer = (props) => {
       {
         source: sourceId,
         type: "line",
+        beforeId,
         paint: {
           "line-color": [
             "case",
@@ -65,6 +66,7 @@ const ChoroplethOutlineLayer = (props) => {
       {
         source: sourceId,
         type: "line",
+        beforeId,
         paint: {
           "line-color": [
             "case",

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

@@ -1,2 +1,4 @@
 import type GeoJSON from 'geojson';
-export declare const parseRegionDataToGeoJSON: <T extends Record<string, unknown>>(mapSource: GeoJSON.FeatureCollection, data: T[], regionAccessor: string | ((i: T) => string), color: string | ((i: T) => string)) => GeoJSON.FeatureCollection;
+export declare const parseRegionDataToGeoJSON: <T extends Record<string, unknown>>(mapSource: GeoJSON.FeatureCollection, data: T[], regionAccessor: string | ((i: T) => string), color: string | ((i: T) => string)) => {
+    geoJson: GeoJSON.FeatureCollection;
+};

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

@@ -26,7 +26,7 @@ var import_core = require("@dynatrace/strato-components/core");
 var import_calculate_hovered_color = require("../../../utils/calculate-hovered-color.js");
 var import_define_color = require("../../../utils/define-color.js");
 const parseRegionDataToGeoJSON = (mapSource, data, regionAccessor, color) => {
-  const features = data.reduce((features2, item) => {
+  const features = data.reduce((features2, item, index) => {
     let id = "";
     if (typeof regionAccessor === "function") {
       id = regionAccessor(item);
@@ -44,8 +44,7 @@ const parseRegionDataToGeoJSON = (mapSource, data, regionAccessor, color) => {
         properties: {
           name,
           region_type,
-          data: item,
-          ...item,
+          __dataIndex: index,
           __color: canvasColor,
           __hoveredColor: hoveredColor
         }
@@ -55,7 +54,9 @@ const parseRegionDataToGeoJSON = (mapSource, data, regionAccessor, color) => {
     return features2;
   }, []);
   return {
-    type: "FeatureCollection",
-    features
+    geoJson: {
+      type: "FeatureCollection",
+      features
+    }
   };
 };

package/map/components/ConnectionLayer/ConnectionLayer.js

@@ -56,7 +56,7 @@ const ConnectionLayer = (props) => {
   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)(
+  const { geoJson: geoJsonData } = (0, import_parse_connection_data_to_geo_json.parseConnectionDataToGeoJSON)(
     data,
     thickness,
     connectionColor,

package/map/components/ConnectionLayer/ConnectionLayerLine.js

@@ -25,15 +25,18 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react_maplibre = require("@vis.gl/react-maplibre");
 var import_core = require("@dynatrace/strato-components/core");
 var import_constants = require("../../constants.js");
+var import_use_layer_before_id = require("../../hooks/use-layer-before-id.js");
 const ConnectionLayerLine = (props) => {
   const { geoJsonData, layerId, sourceId, line, children, ...restProps } = props;
   const [behavioralTrackingProps] = (0, import_core._useBehavioralTrackingProps)(restProps);
+  const beforeId = (0, import_use_layer_before_id.useLayerBeforeId)(layerId);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_maplibre.Source, { id: sourceId, type: "geojson", data: geoJsonData, promoteId: "id", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_react_maplibre.Layer,
       {
         type: "line",
         id: layerId,
+        beforeId,
         layout: {
           "line-cap": import_constants.DEFAULT_LINE_CAP,
           "line-join": import_constants.DEFAULT_LINE_JOIN

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, hidden, symbolAlignment } = props;
-  const {
-    data: rawData,
-    inBounds,
-    position
-  } = (0, import_use_geo_layer_tooltip.useGeoLayerTooltip)("geoConnection");
-  const data = (0, import_restore_null_props.restoreNullProps)(rawData);
+  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) {

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");
@@ -76,7 +77,8 @@ const DotLayer = (props) => {
   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,
@@ -89,6 +91,7 @@ const DotLayer = (props) => {
       {
         type: "symbol",
         id: layerId,
+        beforeId,
         layout: {
           "icon-image": symbolName,
           "icon-size": import_constants.DEFAULT_ICON_SIZE_RATIO,

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/{components/ConnectionLayer/utils/restore-null-props.js → contexts/geo-data-lookup.context.js}

@@ -16,13 +16,12 @@ 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
-});
-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);
+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/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;