@dynatrace/strato-geo 3.5.2 → 3.7.0

package/esm/map/components/MapContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/components/MapContent.tsx"],
-  "sourcesContent": ["import {\n  Layer,\n  type LayerProps,\n  Map,\n  Source,\n  type ViewStateChangeEvent,\n} from '@vis.gl/react-maplibre';\nimport { isUndefined } from 'lodash-es';\nimport type { MapLayerMouseEvent } from 'maplibre-gl';\nimport {\n  forwardRef,\n  type PropsWithChildren,\n  useContext,\n  useRef,\n  useState,\n} from 'react';\n\nimport { _useGraphSize as useGraphSize } from '@dynatrace/strato-components/charts';\nimport { useMergeRefs } from '@dynatrace/strato-components/core';\n\nimport {\n  BASE_LAYER_FILL_ID,\n  BASE_LAYER_LINE_ID,\n  COUNTRY_BORDER_WIDTH,\n  DEFAULT_BOUNDARIES_BORDER_COLOR,\n  DEFAULT_COUNTRIES_FILL_COLOR,\n  MAX_LATITUDE,\n  MAX_LONGITUDE,\n  MIN_LATITUDE,\n  MIN_LONGITUDE,\n  REGION_BORDER_WIDTH,\n} from '../constants.js';\nimport { useMapZoomState, useSetStateZoom } from '../store/store.js';\nimport { MapToolbar } from './toolbar/MapToolbar.js';\nimport { LayerIdsContext } from '../contexts/layer-ids.context.js';\nimport { MapDataBoundingBoxContext } from '../contexts/map-data-bounding-box.context.js';\nimport { useActiveInteraction } from '../hooks/use-active-interaction.js';\nimport { useHoverInteraction } from '../hooks/use-hover-interaction.js';\nimport { useMapBaseLayerFeatures } from '../hooks/use-map-base-layer-features.js';\nimport { useMapConfig } from '../hooks/use-map-config.js';\nimport { useMapLoading } from '../hooks/use-map-loading.js';\nimport { useMapPerformance } from '../hooks/use-map-performance.js';\nimport { useOverlayEvents } from '../hooks/use-overlay-events.js';\nimport { useTooltipEventListeners } from '../hooks/use-tooltip-event-listeners.js';\nimport { useWebGLContextError } from '../hooks/use-webgl-context-error.js';\nimport { defaultStyle } from '../map-styles/default-style.js';\nimport { MapViewImperativeHandler } from '../providers/imperative-handler.provider.js';\nimport type {\n  MapViewProps,\n  MapViewRef,\n  ViewStateRequired,\n} from '../types/map-view.js';\nimport { getColorFromToken } from '../utils/get-color-from-token.js';\nimport { getDataLayersBoundingBox } from '../utils/get-data-layers-bounding-box.js';\nimport { toMapBoxInitialViewState } from '../utils/to-mapbox-initial-view-state.js';\nimport { useSetMapInitialConfiguration } from '../utils/use-set-map-initial-configuration.js';\nimport { generateNewZoomState } from './toolbar/utils/zoom-state-utils.js';\n\nconst lineLayer: LayerProps = {\n  id: BASE_LAYER_LINE_ID,\n  type: 'line',\n};\n\nconst fillLayer: LayerProps = {\n  id: BASE_LAYER_FILL_ID,\n  type: 'fill',\n};\n\nconst MapSource = () => {\n  const baseLayerFeatures = useMapBaseLayerFeatures();\n  return (\n    baseLayerFeatures && (\n      <Source id=\"data\" type=\"geojson\" data={baseLayerFeatures}>\n        <Layer\n          {...fillLayer}\n          paint={{\n            'fill-color': getColorFromToken(DEFAULT_COUNTRIES_FILL_COLOR),\n          }}\n        />\n        <Layer\n          {...lineLayer}\n          type=\"line\"\n          filter={[\n            'any',\n            ['==', 'region_type', 'COUNTRY'],\n            ['==', 'region_type', 'REGION'],\n          ]}\n          paint={{\n            'line-color': getColorFromToken(DEFAULT_BOUNDARIES_BORDER_COLOR),\n            'line-width': [\n              'case',\n              ['==', ['get', 'region_type'], 'REGION'],\n              REGION_BORDER_WIDTH,\n              COUNTRY_BORDER_WIDTH,\n            ],\n          }}\n        />\n      </Source>\n    )\n  );\n};\n\nconst MapInteractions = ({\n  children,\n  onContextLostError,\n}: PropsWithChildren<{\n  onContextLostError?: () => void;\n}>) => {\n  const [contextLostError, setContextLostError] = useState<Error | null>(null);\n\n  useHoverInteraction();\n  useActiveInteraction();\n  useWebGLContextError(() => {\n    onContextLostError?.();\n    setContextLostError(\n      new Error(\n        'Too many active maps. This is a browser limitation. Try reducing the number of map instances.',\n      ),\n    );\n  });\n\n  if (contextLostError) {\n    throw contextLostError;\n  }\n\n  return children;\n};\ntype MapContentProps = MapViewProps & {\n  onMapLoad: () => void;\n};\n\nexport const MapContent = forwardRef<\n  MapViewRef,\n  PropsWithChildren<MapContentProps>\n>((props, forwardedRef) => {\n  const {\n    initialViewState: initialViewStateProp,\n    children,\n    style,\n    mapStyle = defaultStyle,\n    onViewStateChange,\n    onMapLoad,\n    onContextLostError,\n    ...remaining\n  } = props;\n\n  const loading = useMapLoading();\n  const setZoomState = useSetStateZoom();\n  const [savedInitialViewState, setSavedInitialViewState] = useState<\n    ViewStateRequired | undefined\n  >();\n\n  const mapContainerRef = useRef<HTMLDivElement>(null);\n\n  const mergedRefs = useMergeRefs<MapViewRef | HTMLDivElement>([\n    mapContainerRef,\n    forwardedRef,\n  ]);\n\n  const baseFeatureCollection = useMapBaseLayerFeatures();\n\n  const dataLayersBBox = getDataLayersBoundingBox(\n    children,\n    baseFeatureCollection?.features,\n  );\n\n  useTooltipEventListeners();\n\n  const { toolbar: toolbarConfig, interactions: interactionsConfig } =\n    useMapConfig();\n  const layerIds = useContext(LayerIdsContext);\n\n  const shouldRenderToolbar =\n    (!isUndefined(toolbarConfig) && !toolbarConfig.hidden) ||\n    !isUndefined(interactionsConfig);\n\n  const { height: graphHeight, width: graphWidth } = useGraphSize();\n\n  const {\n    handleMouseEnter,\n    handleMouseMove,\n    handleMouseLeave,\n    handleMouseClick,\n    handleZoom,\n    handleDrag,\n  } = useOverlayEvents();\n\n  const initialViewState = initialViewStateProp ?? dataLayersBBox;\n\n  const { onLoadHandler, onRenderHandler } = useMapPerformance(mapContainerRef);\n  const calculatedInitialViewState = toMapBoxInitialViewState(initialViewState);\n\n  const { zoomToFitInProgress } = useMapZoomState();\n\n  const handleZoomEnd = (event: ViewStateChangeEvent) => {\n    if (savedInitialViewState) {\n      const zoomState = generateNewZoomState(\n        event,\n        savedInitialViewState,\n        zoomToFitInProgress,\n      );\n\n      setZoomState(zoomState);\n    }\n  };\n\n  const handleDragEnd = (event: ViewStateChangeEvent) => {\n    if (savedInitialViewState) {\n      const zoomState = generateNewZoomState(\n        event,\n        savedInitialViewState,\n        zoomToFitInProgress,\n      );\n\n      setZoomState(zoomState);\n    }\n  };\n\n  const isZoomEnabled = toolbarConfig?.zoom?.enabled !== false;\n\n  return (\n    <div\n      data-testid=\"map-container\"\n      ref={mergedRefs}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      <Map\n        style={{\n          width: graphWidth,\n          height: `${graphHeight}px`,\n          ...style,\n        }}\n        onMove={(evt) => {\n          onViewStateChange?.(evt.viewState);\n        }}\n        initialViewState={calculatedInitialViewState}\n        mapStyle={mapStyle}\n        dragRotate={false}\n        fadeDuration={0}\n        renderWorldCopies={false}\n        interactiveLayerIds={layerIds}\n        maxBounds={[\n          [MIN_LONGITUDE, MIN_LATITUDE],\n          [MAX_LONGITUDE, MAX_LATITUDE],\n        ]}\n        onMouseMove={(e) => handleMouseMove(e as MapLayerMouseEvent)}\n        onClick={(e) => handleMouseClick(e as MapLayerMouseEvent)}\n        onZoom={handleZoom}\n        onZoomEnd={handleZoomEnd}\n        onDrag={handleDrag}\n        onDragEnd={handleDragEnd}\n        boxZoom={isZoomEnabled}\n        keyboard={isZoomEnabled}\n        scrollZoom={isZoomEnabled}\n        doubleClickZoom={isZoomEnabled}\n        attributionControl={false}\n        onRender={() => onRenderHandler && onRenderHandler()}\n        onLoad={(e) => {\n          onMapLoad();\n          onLoadHandler && onLoadHandler();\n\n          const initialCenter = e.target.getCenter();\n\n          setSavedInitialViewState({\n            latitude: initialCenter.lat,\n            longitude: initialCenter.lng,\n            zoom: e.target.getZoom(),\n          });\n        }}\n        ref={useSetMapInitialConfiguration()}\n        interactive\n        {...remaining}\n      >\n        <MapDataBoundingBoxContext.Provider value={dataLayersBBox}>\n          <MapViewImperativeHandler\n            forwardedRef={forwardedRef}\n            containerRef={mapContainerRef}\n          >\n            <MapSource />\n            {loading ? null : (\n              <>\n                <MapInteractions onContextLostError={onContextLostError}>\n                  {children}\n                </MapInteractions>\n                {shouldRenderToolbar ? <MapToolbar /> : null}\n              </>\n            )}\n          </MapViewImperativeHandler>\n        </MapDataBoundingBoxContext.Provider>\n      </Map>\n    </div>\n  );\n});\n\n(MapContent as typeof MapContent & { displayName: string }).displayName =\n  'MapContent';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  Layer,\n  type LayerProps,\n  Map,\n  Source,\n  type ViewStateChangeEvent,\n} from '@vis.gl/react-maplibre';\nimport { isUndefined } from 'lodash-es';\nimport { type MapLayerMouseEvent } from 'maplibre-gl';\nimport {\n  forwardRef,\n  type PropsWithChildren,\n  useCallback,\n  useContext,\n  useRef,\n  useState,\n} from 'react';\n\nimport { _useGraphSize as useGraphSize } from '@dynatrace/strato-components/charts';\nimport { useMergeRefs } from '@dynatrace/strato-components/core';\n\nimport {\n  BASE_LAYER_FILL_ID,\n  BASE_LAYER_LINE_ID,\n  COUNTRY_BORDER_WIDTH,\n  DEFAULT_BOUNDARIES_BORDER_COLOR,\n  DEFAULT_COUNTRIES_FILL_COLOR,\n  MAX_LATITUDE,\n  MAX_LONGITUDE,\n  MIN_LATITUDE,\n  MIN_LONGITUDE,\n  REGION_BORDER_WIDTH,\n} from '../constants.js';\nimport { useMapZoomState, useSetStateZoom } from '../store/store.js';\nimport { MapToolbar } from './toolbar/MapToolbar.js';\nimport { LayerIdsContext } from '../contexts/layer-ids.context.js';\nimport { MapDataBoundingBoxContext } from '../contexts/map-data-bounding-box.context.js';\nimport { useActiveInteraction } from '../hooks/use-active-interaction.js';\nimport { useHoverInteraction } from '../hooks/use-hover-interaction.js';\nimport { useMapBaseLayerFeatures } from '../hooks/use-map-base-layer-features.js';\nimport { useMapConfig } from '../hooks/use-map-config.js';\nimport { useMapLoading } from '../hooks/use-map-loading.js';\nimport { useMapPerformance } from '../hooks/use-map-performance.js';\nimport { useMapRuntimeError } from '../hooks/use-map-runtime-error.js';\nimport { useOverlayEvents } from '../hooks/use-overlay-events.js';\nimport { useTooltipEventListeners } from '../hooks/use-tooltip-event-listeners.js';\nimport { defaultStyle } from '../map-styles/default-style.js';\nimport { MapViewImperativeHandler } from '../providers/imperative-handler.provider.js';\nimport type {\n  MapViewProps,\n  MapViewRef,\n  ViewStateRequired,\n} from '../types/map-view.js';\nimport { getColorFromToken } from '../utils/get-color-from-token.js';\nimport { getDataLayersBoundingBox } from '../utils/get-data-layers-bounding-box.js';\nimport { toMapBoxInitialViewState } from '../utils/to-mapbox-initial-view-state.js';\nimport { useSetMapInitialConfiguration } from '../utils/use-set-map-initial-configuration.js';\nimport { generateNewZoomState } from './toolbar/utils/zoom-state-utils.js';\n\nconst lineLayer: LayerProps = {\n  id: BASE_LAYER_LINE_ID,\n  type: 'line',\n};\n\nconst fillLayer: LayerProps = {\n  id: BASE_LAYER_FILL_ID,\n  type: 'fill',\n};\n\nconst MapSource = () => {\n  const baseLayerFeatures = useMapBaseLayerFeatures();\n  return (\n    baseLayerFeatures && (\n      <Source id=\"data\" type=\"geojson\" data={baseLayerFeatures}>\n        <Layer\n          {...fillLayer}\n          paint={{\n            'fill-color': getColorFromToken(DEFAULT_COUNTRIES_FILL_COLOR),\n          }}\n        />\n        <Layer\n          {...lineLayer}\n          type=\"line\"\n          filter={[\n            'any',\n            ['==', 'region_type', 'COUNTRY'],\n            ['==', 'region_type', 'REGION'],\n          ]}\n          paint={{\n            'line-color': getColorFromToken(DEFAULT_BOUNDARIES_BORDER_COLOR),\n            'line-width': [\n              'case',\n              ['==', ['get', 'region_type'], 'REGION'],\n              REGION_BORDER_WIDTH,\n              COUNTRY_BORDER_WIDTH,\n            ],\n          }}\n        />\n      </Source>\n    )\n  );\n};\n\nconst MapInteractions = ({\n  children,\n  onContextLostError,\n  interactiveLayerIds,\n}: PropsWithChildren<{\n  onContextLostError?: () => void;\n  interactiveLayerIds: string[];\n}>) => {\n  const [runtimeError, setRuntimeError] = useState<Error | null>(null);\n\n  const onRuntimeError = useCallback(() => {\n    onContextLostError?.();\n    setRuntimeError(\n      new Error(\n        'The map encountered repeated rendering errors and could not recover. Please reload the page.',\n      ),\n    );\n  }, [onContextLostError]);\n\n  useHoverInteraction(interactiveLayerIds);\n  useActiveInteraction(interactiveLayerIds);\n  useMapRuntimeError({ onError: onRuntimeError });\n\n  if (runtimeError) {\n    throw runtimeError;\n  }\n\n  return children;\n};\ntype MapContentProps = MapViewProps & {\n  onMapLoad: () => void;\n};\n\nexport const MapContent = forwardRef<\n  MapViewRef,\n  PropsWithChildren<MapContentProps>\n>((props, forwardedRef) => {\n  const {\n    initialViewState: initialViewStateProp,\n    children,\n    style,\n    mapStyle = defaultStyle,\n    onViewStateChange,\n    onMapLoad,\n    onContextLostError,\n    ...remaining\n  } = props;\n\n  const loading = useMapLoading();\n  const setZoomState = useSetStateZoom();\n  const [savedInitialViewState, setSavedInitialViewState] = useState<\n    ViewStateRequired | undefined\n  >();\n\n  const mapContainerRef = useRef<HTMLDivElement>(null);\n\n  const mergedRefs = useMergeRefs<MapViewRef | HTMLDivElement>([\n    mapContainerRef,\n    forwardedRef,\n  ]);\n\n  const baseFeatureCollection = useMapBaseLayerFeatures();\n\n  const dataLayersBBox = getDataLayersBoundingBox(\n    children,\n    baseFeatureCollection?.features,\n  );\n\n  useTooltipEventListeners();\n\n  const { toolbar: toolbarConfig, interactions: interactionsConfig } =\n    useMapConfig();\n  const layerIds = useContext(LayerIdsContext);\n\n  const shouldRenderToolbar =\n    (!isUndefined(toolbarConfig) && !toolbarConfig.hidden) ||\n    !isUndefined(interactionsConfig);\n\n  const { height: graphHeight, width: graphWidth } = useGraphSize();\n\n  const {\n    handleMouseEnter,\n    handleMouseMove,\n    handleMouseLeave,\n    handleMouseClick,\n    handleZoom,\n    handleDrag,\n  } = useOverlayEvents();\n\n  const initialViewState = initialViewStateProp ?? dataLayersBBox;\n\n  const { onLoadHandler, onRenderHandler } = useMapPerformance(mapContainerRef);\n  const calculatedInitialViewState = toMapBoxInitialViewState(initialViewState);\n\n  const { zoomToFitInProgress } = useMapZoomState();\n\n  const handleZoomEnd = (event: ViewStateChangeEvent) => {\n    if (savedInitialViewState) {\n      const zoomState = generateNewZoomState(\n        event,\n        savedInitialViewState,\n        zoomToFitInProgress,\n      );\n\n      setZoomState(zoomState);\n    }\n  };\n\n  const handleDragEnd = (event: ViewStateChangeEvent) => {\n    if (savedInitialViewState) {\n      const zoomState = generateNewZoomState(\n        event,\n        savedInitialViewState,\n        zoomToFitInProgress,\n      );\n\n      setZoomState(zoomState);\n    }\n  };\n\n  const isZoomEnabled = toolbarConfig?.zoom?.enabled !== false;\n\n  return (\n    <div\n      data-testid=\"map-container\"\n      ref={mergedRefs}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      <Map\n        style={{\n          width: graphWidth,\n          height: `${graphHeight}px`,\n          ...style,\n        }}\n        onMove={(evt) => {\n          onViewStateChange?.(evt.viewState);\n        }}\n        initialViewState={calculatedInitialViewState}\n        mapStyle={mapStyle}\n        dragRotate={false}\n        fadeDuration={0}\n        renderWorldCopies={false}\n        interactiveLayerIds={layerIds}\n        maxBounds={[\n          [MIN_LONGITUDE, MIN_LATITUDE],\n          [MAX_LONGITUDE, MAX_LATITUDE],\n        ]}\n        onMouseMove={(e) => handleMouseMove(e as MapLayerMouseEvent)}\n        onClick={(e) => handleMouseClick(e as MapLayerMouseEvent)}\n        onZoom={handleZoom}\n        onZoomEnd={handleZoomEnd}\n        onDrag={handleDrag}\n        onDragEnd={handleDragEnd}\n        boxZoom={isZoomEnabled}\n        keyboard={isZoomEnabled}\n        scrollZoom={isZoomEnabled}\n        doubleClickZoom={isZoomEnabled}\n        attributionControl={false}\n        onRender={() => onRenderHandler && onRenderHandler()}\n        onLoad={(e) => {\n          onMapLoad();\n          onLoadHandler && onLoadHandler();\n\n          const initialCenter = e.target.getCenter();\n\n          setSavedInitialViewState({\n            latitude: initialCenter.lat,\n            longitude: initialCenter.lng,\n            zoom: e.target.getZoom(),\n          });\n        }}\n        ref={useSetMapInitialConfiguration()}\n        interactive\n        {...remaining}\n      >\n        <MapDataBoundingBoxContext.Provider value={dataLayersBBox}>\n          <MapViewImperativeHandler\n            forwardedRef={forwardedRef}\n            containerRef={mapContainerRef}\n          >\n            <MapSource />\n            {loading ? null : (\n              <>\n                <MapInteractions\n                  onContextLostError={onContextLostError}\n                  interactiveLayerIds={layerIds}\n                >\n                  {children}\n                </MapInteractions>\n                {shouldRenderToolbar ? <MapToolbar /> : null}\n              </>\n            )}\n          </MapViewImperativeHandler>\n        </MapDataBoundingBoxContext.Provider>\n      </Map>\n    </div>\n  );\n});\n\n(MapContent as typeof MapContent & { displayName: string }).displayName =\n  'MapContent';\n"],
+  "mappings": "AAyEM,SAqNQ,UApNN,KADF;AAzEN;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,mBAAmB;AAE5B;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,iBAAiB,oBAAoB;AAC9C,SAAS,oBAAoB;AAE7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB,uBAAuB;AACjD,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,iCAAiC;AAC1C,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,+BAA+B;AACxC,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AACzC,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AAMzC,SAAS,yBAAyB;AAClC,SAAS,gCAAgC;AACzC,SAAS,gCAAgC;AACzC,SAAS,qCAAqC;AAC9C,SAAS,4BAA4B;AAErC,MAAM,YAAwB;AAAA,EAC5B,IAAI;AAAA,EACJ,MAAM;AACR;AAEA,MAAM,YAAwB;AAAA,EAC5B,IAAI;AAAA,EACJ,MAAM;AACR;AAEA,MAAM,YAAY,MAAM;AACtB,QAAM,oBAAoB,wBAAwB;AAClD,SACE,qBACE,qBAAC,UAAO,IAAG,QAAO,MAAK,WAAU,MAAM,mBACrC;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,OAAO;AAAA,UACL,cAAc,kBAAkB,4BAA4B;AAAA,QAC9D;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAK;AAAA,QACL,QAAQ;AAAA,UACN;AAAA,UACA,CAAC,MAAM,eAAe,SAAS;AAAA,UAC/B,CAAC,MAAM,eAAe,QAAQ;AAAA,QAChC;AAAA,QACA,OAAO;AAAA,UACL,cAAc,kBAAkB,+BAA+B;AAAA,UAC/D,cAAc;AAAA,YACZ;AAAA,YACA,CAAC,MAAM,CAAC,OAAO,aAAa,GAAG,QAAQ;AAAA,YACvC;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA;AAAA,IACF;AAAA,KACF;AAGN;AAEA,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,MAGO;AACL,QAAM,CAAC,cAAc,eAAe,IAAI,SAAuB,IAAI;AAEnE,QAAM,iBAAiB,YAAY,MAAM;AACvC,yBAAqB;AACrB;AAAA,MACE,IAAI;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,kBAAkB,CAAC;AAEvB,sBAAoB,mBAAmB;AACvC,uBAAqB,mBAAmB;AACxC,qBAAmB,EAAE,SAAS,eAAe,CAAC;AAE9C,MAAI,cAAc;AAChB,UAAM;AAAA,EACR;AAEA,SAAO;AACT;AAKO,MAAM,aAAa,WAGxB,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,UAAU,cAAc;AAC9B,QAAM,eAAe,gBAAgB;AACrC,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,SAExD;AAEF,QAAM,kBAAkB,OAAuB,IAAI;AAEnD,QAAM,aAAa,aAA0C;AAAA,IAC3D;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,wBAAwB,wBAAwB;AAEtD,QAAM,iBAAiB;AAAA,IACrB;AAAA,IACA,uBAAuB;AAAA,EACzB;AAEA,2BAAyB;AAEzB,QAAM,EAAE,SAAS,eAAe,cAAc,mBAAmB,IAC/D,aAAa;AACf,QAAM,WAAW,WAAW,eAAe;AAE3C,QAAM,sBACH,CAAC,YAAY,aAAa,KAAK,CAAC,cAAc,UAC/C,CAAC,YAAY,kBAAkB;AAEjC,QAAM,EAAE,QAAQ,aAAa,OAAO,WAAW,IAAI,aAAa;AAEhE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,iBAAiB;AAErB,QAAM,mBAAmB,wBAAwB;AAEjD,QAAM,EAAE,eAAe,gBAAgB,IAAI,kBAAkB,eAAe;AAC5E,QAAM,6BAA6B,yBAAyB,gBAAgB;AAE5E,QAAM,EAAE,oBAAoB,IAAI,gBAAgB;AAEhD,QAAM,gBAAgB,CAAC,UAAgC;AACrD,QAAI,uBAAuB;AACzB,YAAM,YAAY;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAEA,mBAAa,SAAS;AAAA,IACxB;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,UAAgC;AACrD,QAAI,uBAAuB;AACzB,YAAM,YAAY;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAEA,mBAAa,SAAS;AAAA,IACxB;AAAA,EACF;AAEA,QAAM,gBAAgB,eAAe,MAAM,YAAY;AAEvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,KAAK;AAAA,MACL,cAAc;AAAA,MACd,cAAc;AAAA,MAEd;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,OAAO;AAAA,YACP,QAAQ,GAAG,WAAW;AAAA,YACtB,GAAG;AAAA,UACL;AAAA,UACA,QAAQ,CAAC,QAAQ;AACf,gCAAoB,IAAI,SAAS;AAAA,UACnC;AAAA,UACA,kBAAkB;AAAA,UAClB;AAAA,UACA,YAAY;AAAA,UACZ,cAAc;AAAA,UACd,mBAAmB;AAAA,UACnB,qBAAqB;AAAA,UACrB,WAAW;AAAA,YACT,CAAC,eAAe,YAAY;AAAA,YAC5B,CAAC,eAAe,YAAY;AAAA,UAC9B;AAAA,UACA,aAAa,CAAC,MAAM,gBAAgB,CAAuB;AAAA,UAC3D,SAAS,CAAC,MAAM,iBAAiB,CAAuB;AAAA,UACxD,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,SAAS;AAAA,UACT,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,iBAAiB;AAAA,UACjB,oBAAoB;AAAA,UACpB,UAAU,MAAM,mBAAmB,gBAAgB;AAAA,UACnD,QAAQ,CAAC,MAAM;AACb,sBAAU;AACV,6BAAiB,cAAc;AAE/B,kBAAM,gBAAgB,EAAE,OAAO,UAAU;AAEzC,qCAAyB;AAAA,cACvB,UAAU,cAAc;AAAA,cACxB,WAAW,cAAc;AAAA,cACzB,MAAM,EAAE,OAAO,QAAQ;AAAA,YACzB,CAAC;AAAA,UACH;AAAA,UACA,KAAK,8BAA8B;AAAA,UACnC,aAAW;AAAA,UACV,GAAG;AAAA,UAEJ,8BAAC,0BAA0B,UAA1B,EAAmC,OAAO,gBACzC;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,cAAc;AAAA,cAEd;AAAA,oCAAC,aAAU;AAAA,gBACV,UAAU,OACT,iCACE;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC;AAAA,sBACA,qBAAqB;AAAA,sBAEpB;AAAA;AAAA,kBACH;AAAA,kBACC,sBAAsB,oBAAC,cAAW,IAAK;AAAA,mBAC1C;AAAA;AAAA;AAAA,UAEJ,GACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAEA,WAA2D,cAC1D;",
   "names": []
 }

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

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+const GeoDataLookupContext = createContext(
+  /* @__PURE__ */ new Map()
+);
+export {
+  GeoDataLookupContext
+};
+//# sourceMappingURL=geo-data-lookup.context.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/map/contexts/geo-data-lookup.context.ts"],
+  "sourcesContent": ["import { createContext } from 'react';\n\n/**\n * @internal\n */\nexport type GeoDataLookup = Map<number, unknown>;\n\n/**\n * @internal\n */\nexport type GeoDataLookupRegistry = Map<string, GeoDataLookup>;\n\nexport const GeoDataLookupContext = createContext<GeoDataLookupRegistry>(\n  new Map(),\n);\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAYvB,MAAM,uBAAuB;AAAA,EAClC,oBAAI,IAAI;AACV;",
+  "names": []
+}

package/esm/map/contexts/map-view-provider.context.js

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+const MapViewProviderContext = createContext({
+  countryCode: void 0,
+  displayWorldMap: void 0
+});
+export {
+  MapViewProviderContext
+};
+//# sourceMappingURL=map-view-provider.context.js.map

package/esm/map/contexts/map-view-provider.context.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/map/contexts/map-view-provider.context.ts"],
+  "sourcesContent": ["import { createContext } from 'react';\n\nimport type { MapViewProviderProps } from '../types/map-view-provider.js';\n\nexport const MapViewProviderContext = createContext<MapViewProviderProps>({\n  countryCode: undefined,\n  displayWorldMap: undefined,\n});\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAIvB,MAAM,yBAAyB,cAAoC;AAAA,EACxE,aAAa;AAAA,EACb,iBAAiB;AACnB,CAAC;",
+  "names": []
+}

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

@@ -1,32 +1,45 @@
 import { useMap } from "@vis.gl/react-maplibre";
 import { isNil, isUndefined } from "lodash-es";
-import { useCallback, useEffect } from "react";
-import { BASE_LAYER_IDS } from "../constants.js";
+import { useCallback, useEffect, useRef } from "react";
 import { getMinValueFeature } from "../utils/get-min-value-feature.js";
-const useActiveInteraction = () => {
+const useActiveInteraction = (interactiveLayerIds) => {
   const map = useMap().current;
-  let featureId;
-  let sourceId;
+  const featureIdRef = useRef(void 0);
+  const sourceIdRef = useRef(void 0);
+  const interactiveLayerIdsRef = useRef(interactiveLayerIds);
+  interactiveLayerIdsRef.current = interactiveLayerIds;
   const handleClick = 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 = !isNil(features) && features.length > 0 && !isUndefined(layerId);
-      const isBaseLayer = BASE_LAYER_IDS.includes(layerId);
-      if (hasHoveredFeatures && !isBaseLayer) {
-        if (!isUndefined(featureId) && !isUndefined(sourceId)) {
+      if (hasHoveredFeatures) {
+        if (!isUndefined(featureIdRef.current) && !isUndefined(sourceIdRef.current)) {
           map.setFeatureState(
-            { source: sourceId, id: featureId },
+            { source: sourceIdRef.current, id: featureIdRef.current },
             { active: false }
           );
         }
         const minFeature = 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) => {
@@ -37,46 +50,49 @@ const useActiveInteraction = () => {
             );
           }
         });
-      } else {
-        if (!isUndefined(featureId) && !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 (!isUndefined(featureIdRef.current) && !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 = useCallback(
     (event) => {
       if (event.key === "Escape") {
-        if (!isUndefined(featureId) && !isUndefined(sourceId)) {
+        if (!isUndefined(featureIdRef.current) && !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]
   );
   useEffect(() => {
     map.on("click", handleClick);
@@ -85,7 +101,7 @@ const useActiveInteraction = () => {
       map.off("click", handleClick);
       window.removeEventListener("keyup", onEscapeKeyPressedHandler);
     };
-  }, []);
+  }, [map, handleClick, onEscapeKeyPressedHandler]);
 };
 export {
   useActiveInteraction

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/hooks/use-active-interaction.ts"],
-  "sourcesContent": ["import { useMap } from '@vis.gl/react-maplibre';\nimport { isNil, isUndefined } from 'lodash-es';\nimport type { MapLayerMouseEvent } from 'maplibre-gl';\nimport { useCallback, useEffect } from 'react';\n\nimport { BASE_LAYER_IDS } from '../constants.js';\nimport { getMinValueFeature } from '../utils/get-min-value-feature.js';\n\nexport const useActiveInteraction = () => {\n  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n  const map = useMap().current!;\n\n  let featureId: string | number | undefined;\n  let sourceId: string | undefined;\n\n  const handleClick = useCallback(\n    ({ point }: MapLayerMouseEvent) => {\n      const features = map.queryRenderedFeatures(point);\n      const allFeatures = map.queryRenderedFeatures();\n\n      const layerId = features?.[0]?.layer?.id;\n\n      const hasHoveredFeatures =\n        !isNil(features) && features.length > 0 && !isUndefined(layerId);\n      const isBaseLayer = BASE_LAYER_IDS.includes(layerId);\n\n      if (hasHoveredFeatures && !isBaseLayer) {\n        if (!isUndefined(featureId) && !isUndefined(sourceId)) {\n          // if there's already an active feature, remove the active state\n          map.setFeatureState(\n            { source: sourceId, id: featureId },\n            { active: false },\n          );\n        }\n\n        const minFeature = getMinValueFeature(features);\n\n        featureId = minFeature.id;\n        sourceId = minFeature.layer.source;\n        const activeState = features[0].state.active;\n\n        // add the active state to the closest feature\n        map.setFeatureState(\n          { source: sourceId, id: featureId },\n          { active: !activeState },\n        );\n        allFeatures.forEach((feature) => {\n          if (feature.id !== undefined && feature.layer.source !== undefined) {\n            map.setFeatureState(\n              { source: feature.layer.source, id: feature.id },\n              { isAnyActive: !activeState },\n            );\n          }\n        }); //TODO: change to inactive\n      } else {\n        if (!isUndefined(featureId) && !isUndefined(sourceId)) {\n          // remove the active state from the last active feature\n          map.setFeatureState(\n            { source: sourceId, id: featureId },\n            { active: false },\n          );\n          allFeatures.forEach((feature) => {\n            if (\n              feature.id !== undefined &&\n              feature.layer.source !== undefined\n            ) {\n              map.setFeatureState(\n                { source: feature.layer.source, id: feature.id },\n                { isAnyActive: false },\n              );\n            }\n          });\n        }\n      }\n    },\n    [featureId, sourceId, map],\n  );\n\n  const onEscapeKeyPressedHandler = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        if (!isUndefined(featureId) && !isUndefined(sourceId)) {\n          map.setFeatureState(\n            { source: sourceId, id: featureId },\n            { active: false },\n          );\n\n          const allFeatures = map.queryRenderedFeatures();\n          allFeatures.forEach((feature) => {\n            if (\n              feature.id !== undefined &&\n              feature.layer.source !== undefined\n            ) {\n              map.setFeatureState(\n                { source: feature.layer.source, id: feature.id },\n                { isAnyActive: false },\n              );\n            }\n          });\n        }\n      }\n    },\n    [featureId, sourceId, map],\n  );\n\n  useEffect(() => {\n    map.on('click', handleClick);\n    window.addEventListener('keyup', onEscapeKeyPressedHandler);\n    return () => {\n      map.off('click', handleClick);\n      window.removeEventListener('keyup', onEscapeKeyPressedHandler);\n    };\n  }, []);\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useMap } from '@vis.gl/react-maplibre';\nimport { isNil, isUndefined } from 'lodash-es';\nimport type { MapLayerMouseEvent } from 'maplibre-gl';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { getMinValueFeature } from '../utils/get-min-value-feature.js';\n\n/**\n * Handles click-to-activate interactions on map features.\n *\n * Scopes `queryRenderedFeatures` to `interactiveLayerIds` to prevent accidental\n * activation of base/background layers. Both query calls are try-caught to\n * contain maplibre-gl runtime errors without crashing the component tree.\n */\nexport const useActiveInteraction = (interactiveLayerIds: string[]) => {\n  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n  const map = useMap().current!;\n\n  /** Tracks the ID of the currently active feature across renders. */\n  const featureIdRef = useRef<string | number | undefined>(undefined);\n  /** Tracks the source of the currently active feature across renders. */\n  const sourceIdRef = useRef<string | undefined>(undefined);\n  /**\n   * Kept in a ref so that stable callbacks always read the latest layer list\n   * without needing to be recreated when the array reference changes.\n   */\n  const interactiveLayerIdsRef = useRef(interactiveLayerIds);\n  interactiveLayerIdsRef.current = interactiveLayerIds;\n\n  const handleClick = useCallback(\n    ({ point }: MapLayerMouseEvent) => {\n      let features: ReturnType<typeof map.queryRenderedFeatures> = [];\n\n      try {\n        features = map.queryRenderedFeatures(point, {\n          layers: interactiveLayerIdsRef.current,\n        });\n      } catch {\n        return;\n      }\n\n      // Keep the broad query for isAnyActive so all interactive features receive the flag.\n      let allFeatures: ReturnType<typeof map.queryRenderedFeatures> = [];\n      try {\n        allFeatures = map.queryRenderedFeatures(undefined, {\n          layers: interactiveLayerIdsRef.current,\n        });\n      } catch {\n        // falls through with empty allFeatures\n      }\n\n      const layerId = features?.[0]?.layer?.id;\n\n      const hasHoveredFeatures =\n        !isNil(features) && features.length > 0 && !isUndefined(layerId);\n\n      if (hasHoveredFeatures) {\n        if (\n          !isUndefined(featureIdRef.current) &&\n          !isUndefined(sourceIdRef.current)\n        ) {\n          // If there's already an active feature, remove the active state.\n          map.setFeatureState(\n            { source: sourceIdRef.current, id: featureIdRef.current },\n            { active: false },\n          );\n        }\n\n        const minFeature = getMinValueFeature(features);\n\n        featureIdRef.current = minFeature.id;\n        sourceIdRef.current = minFeature.layer.source;\n        const activeState = features[0].state.active;\n\n        // Add the active state to the closest feature.\n        map.setFeatureState(\n          { source: sourceIdRef.current, id: featureIdRef.current },\n          { active: !activeState },\n        );\n        allFeatures.forEach((feature) => {\n          if (feature.id !== undefined && feature.layer.source !== undefined) {\n            map.setFeatureState(\n              { source: feature.layer.source, id: feature.id },\n              { isAnyActive: !activeState },\n            );\n          }\n        }); //TODO: change to inactive\n      } else if (\n        !isUndefined(featureIdRef.current) &&\n        !isUndefined(sourceIdRef.current)\n      ) {\n        // Remove the active state from the last active feature.\n        map.setFeatureState(\n          { source: sourceIdRef.current, id: featureIdRef.current },\n          { active: false },\n        );\n        allFeatures.forEach((feature) => {\n          if (feature.id !== undefined && feature.layer.source !== undefined) {\n            map.setFeatureState(\n              { source: feature.layer.source, id: feature.id },\n              { isAnyActive: false },\n            );\n          }\n        });\n      }\n    },\n    [map],\n  );\n\n  const onEscapeKeyPressedHandler = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        if (\n          !isUndefined(featureIdRef.current) &&\n          !isUndefined(sourceIdRef.current)\n        ) {\n          map.setFeatureState(\n            { source: sourceIdRef.current, id: featureIdRef.current },\n            { active: false },\n          );\n\n          try {\n            const allFeatures = map.queryRenderedFeatures(undefined, {\n              layers: interactiveLayerIdsRef.current,\n            });\n            allFeatures.forEach((feature) => {\n              if (\n                feature.id !== undefined &&\n                feature.layer.source !== undefined\n              ) {\n                map.setFeatureState(\n                  { source: feature.layer.source, id: feature.id },\n                  { isAnyActive: false },\n                );\n              }\n            });\n          } catch {\n            // falls through \u2014 active state is already cleared above\n          }\n        }\n      }\n    },\n    [map],\n  );\n\n  useEffect(() => {\n    map.on('click', handleClick);\n    window.addEventListener('keyup', onEscapeKeyPressedHandler);\n    return () => {\n      map.off('click', handleClick);\n      window.removeEventListener('keyup', onEscapeKeyPressedHandler);\n    };\n  }, [map, handleClick, onEscapeKeyPressedHandler]);\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -8,6 +8,7 @@ import { attachImageToMap } from "../utils/attach-image-to-map.js";
 import { createBitmapConfigOptions } from "../utils/create-bitmap-config-options.js";
 import { getDataUri } from "../utils/get-data-uri.js";
 import { getScaledSymbolSize } from "../utils/get-scaled-symbol-size.js";
+import { isFirefox } from "../utils/is-browser-firefox.js";
 const useAttachImageFromIcon = (icon, suffix, outputSize) => {
   const { elementAsString, ref } = useSafeSvgParser();
   const defaultScaledIconSize = getScaledSymbolSize();
@@ -25,14 +26,15 @@ const useAttachImageFromIcon = (icon, suffix, outputSize) => {
   fakeDomContainer.remove();
   const stringUrl = getDataUri(elementAsString);
   img.addEventListener("load", () => {
-    createImageBitmap(
+    const bitmapPromise = isFirefox() ? createImageBitmap(img, createBitmapConfigOptions(outputSize)) : createImageBitmap(
       img,
       0,
       0,
       DEFAULT_INPUT_ICON_SIZE,
       DEFAULT_INPUT_ICON_SIZE,
       createBitmapConfigOptions(outputSize)
-    ).then((bitmap) => {
+    );
+    bitmapPromise.then((bitmap) => {
       if (!map) {
         return;
       }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/hooks/use-attach-image-from-icon.ts"],
-  "sourcesContent": ["import { useMap } from '@vis.gl/react-maplibre';\nimport { isString } from 'lodash-es';\nimport { createElement, type ReactNode, useLayoutEffect } from 'react';\nimport { createRoot } from 'react-dom/client';\n\nimport { useSafeSvgParser } from './use-safe-svg-parser.js';\nimport { DEFAULT_INPUT_ICON_SIZE } from '../constants.js';\nimport type { MapShape } from '../types/shapes.js';\nimport { attachImageToMap } from '../utils/attach-image-to-map.js';\nimport { createBitmapConfigOptions } from '../utils/create-bitmap-config-options.js';\nimport { getDataUri } from '../utils/get-data-uri.js';\nimport { getScaledSymbolSize } from '../utils/get-scaled-symbol-size.js';\n\nexport const useAttachImageFromIcon = (\n  icon: string | MapShape | ReactNode,\n  suffix: string,\n  outputSize?: number,\n) => {\n  const { elementAsString, ref } = useSafeSvgParser();\n  const defaultScaledIconSize = getScaledSymbolSize();\n\n  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n  const { current: map } = useMap()!;\n  const img = new Image(defaultScaledIconSize, defaultScaledIconSize);\n\n  /*\n   * As we can only create a reference in a React Node, but we need a virtual\n   * 'root' element in the DOM to attach it, we create a 'div'\n   * container that lately will hold the React Node. This is done to ensure\n   * everything is cached prior any manipulation.\n   */\n  // Create a div element that acts as a container node in the DOM\n  const fakeDomContainer = document.createElement('div');\n  useLayoutEffect(() => {\n    if (isString(icon)) {\n      return;\n    }\n    // Create a React Node that will have a ref callback to be run when loaded and\n    // the input icon as a children\n    const reactNodeRefContainer = createElement('div', { ref }, icon);\n    // Attach React Node with the ref callback into DOM Node\n    const root = createRoot(fakeDomContainer);\n    root.render(reactNodeRefContainer);\n  }, [icon]);\n\n  // Remove cached element to free resources\n  fakeDomContainer.remove();\n\n  const stringUrl = getDataUri(elementAsString);\n\n  img.addEventListener('load', () => {\n    createImageBitmap(\n      img,\n      0,\n      0,\n      DEFAULT_INPUT_ICON_SIZE,\n      DEFAULT_INPUT_ICON_SIZE,\n      createBitmapConfigOptions(outputSize),\n    ).then((bitmap) => {\n      if (!map) {\n        return;\n      }\n      const iconName = `custom-icon-${suffix}`;\n      attachImageToMap(map, bitmap, iconName);\n    });\n  });\n  img.src = stringUrl;\n\n  return !isString(icon);\n};\n"],
-  "mappings": "AAAA,SAAS,cAAc;AACvB,SAAS,gBAAgB;AACzB,SAAS,eAA+B,uBAAuB;AAC/D,SAAS,kBAAkB;AAE3B,SAAS,wBAAwB;AACjC,SAAS,+BAA+B;AAExC,SAAS,wBAAwB;AACjC,SAAS,iCAAiC;AAC1C,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AAE7B,MAAM,yBAAyB,CACpC,MACA,QACA,eACG;AACH,QAAM,EAAE,iBAAiB,IAAI,IAAI,iBAAiB;AAClD,QAAM,wBAAwB,oBAAoB;AAGlD,QAAM,EAAE,SAAS,IAAI,IAAI,OAAO;AAChC,QAAM,MAAM,IAAI,MAAM,uBAAuB,qBAAqB;AASlE,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,kBAAgB,MAAM;AACpB,QAAI,SAAS,IAAI,GAAG;AAClB;AAAA,IACF;AAGA,UAAM,wBAAwB,cAAc,OAAO,EAAE,IAAI,GAAG,IAAI;AAEhE,UAAM,OAAO,WAAW,gBAAgB;AACxC,SAAK,OAAO,qBAAqB;AAAA,EACnC,GAAG,CAAC,IAAI,CAAC;AAGT,mBAAiB,OAAO;AAExB,QAAM,YAAY,WAAW,eAAe;AAE5C,MAAI,iBAAiB,QAAQ,MAAM;AACjC;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,0BAA0B,UAAU;AAAA,IACtC,EAAE,KAAK,CAAC,WAAW;AACjB,UAAI,CAAC,KAAK;AACR;AAAA,MACF;AACA,YAAM,WAAW,eAAe,MAAM;AACtC,uBAAiB,KAAK,QAAQ,QAAQ;AAAA,IACxC,CAAC;AAAA,EACH,CAAC;AACD,MAAI,MAAM;AAEV,SAAO,CAAC,SAAS,IAAI;AACvB;",
+  "sourcesContent": ["import { useMap } from '@vis.gl/react-maplibre';\nimport { isString } from 'lodash-es';\nimport { createElement, type ReactNode, useLayoutEffect } from 'react';\nimport { createRoot } from 'react-dom/client';\n\nimport { useSafeSvgParser } from './use-safe-svg-parser.js';\nimport { DEFAULT_INPUT_ICON_SIZE } from '../constants.js';\nimport type { MapShape } from '../types/shapes.js';\nimport { attachImageToMap } from '../utils/attach-image-to-map.js';\nimport { createBitmapConfigOptions } from '../utils/create-bitmap-config-options.js';\nimport { getDataUri } from '../utils/get-data-uri.js';\nimport { getScaledSymbolSize } from '../utils/get-scaled-symbol-size.js';\nimport { isFirefox } from '../utils/is-browser-firefox.js';\n\nexport const useAttachImageFromIcon = (\n  icon: string | MapShape | ReactNode,\n  suffix: string,\n  outputSize?: number,\n) => {\n  const { elementAsString, ref } = useSafeSvgParser();\n  const defaultScaledIconSize = getScaledSymbolSize();\n\n  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n  const { current: map } = useMap()!;\n  const img = new Image(defaultScaledIconSize, defaultScaledIconSize);\n\n  /*\n   * As we can only create a reference in a React Node, but we need a virtual\n   * 'root' element in the DOM to attach it, we create a 'div'\n   * container that lately will hold the React Node. This is done to ensure\n   * everything is cached prior any manipulation.\n   */\n  // Create a div element that acts as a container node in the DOM\n  const fakeDomContainer = document.createElement('div');\n  useLayoutEffect(() => {\n    if (isString(icon)) {\n      return;\n    }\n    // Create a React Node that will have a ref callback to be run when loaded and\n    // the input icon as a children\n    const reactNodeRefContainer = createElement('div', { ref }, icon);\n    // Attach React Node with the ref callback into DOM Node\n    const root = createRoot(fakeDomContainer);\n    root.render(reactNodeRefContainer);\n  }, [icon]);\n\n  // Remove cached element to free resources\n  fakeDomContainer.remove();\n\n  const stringUrl = getDataUri(elementAsString);\n\n  img.addEventListener('load', () => {\n    // Firefox rasterizes SVG sources at the Image element's display size, not\n    // at the SVG's intrinsic dimensions, so an explicit source rect clips the\n    // icon. Drop the rect on Firefox only \u2014 other browsers keep the original\n    // path.\n    const bitmapPromise = isFirefox()\n      ? createImageBitmap(img, createBitmapConfigOptions(outputSize))\n      : createImageBitmap(\n          img,\n          0,\n          0,\n          DEFAULT_INPUT_ICON_SIZE,\n          DEFAULT_INPUT_ICON_SIZE,\n          createBitmapConfigOptions(outputSize),\n        );\n    bitmapPromise.then((bitmap) => {\n      if (!map) {\n        return;\n      }\n      const iconName = `custom-icon-${suffix}`;\n      attachImageToMap(map, bitmap, iconName);\n    });\n  });\n  img.src = stringUrl;\n\n  return !isString(icon);\n};\n"],
+  "mappings": "AAAA,SAAS,cAAc;AACvB,SAAS,gBAAgB;AACzB,SAAS,eAA+B,uBAAuB;AAC/D,SAAS,kBAAkB;AAE3B,SAAS,wBAAwB;AACjC,SAAS,+BAA+B;AAExC,SAAS,wBAAwB;AACjC,SAAS,iCAAiC;AAC1C,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AACpC,SAAS,iBAAiB;AAEnB,MAAM,yBAAyB,CACpC,MACA,QACA,eACG;AACH,QAAM,EAAE,iBAAiB,IAAI,IAAI,iBAAiB;AAClD,QAAM,wBAAwB,oBAAoB;AAGlD,QAAM,EAAE,SAAS,IAAI,IAAI,OAAO;AAChC,QAAM,MAAM,IAAI,MAAM,uBAAuB,qBAAqB;AASlE,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,kBAAgB,MAAM;AACpB,QAAI,SAAS,IAAI,GAAG;AAClB;AAAA,IACF;AAGA,UAAM,wBAAwB,cAAc,OAAO,EAAE,IAAI,GAAG,IAAI;AAEhE,UAAM,OAAO,WAAW,gBAAgB;AACxC,SAAK,OAAO,qBAAqB;AAAA,EACnC,GAAG,CAAC,IAAI,CAAC;AAGT,mBAAiB,OAAO;AAExB,QAAM,YAAY,WAAW,eAAe;AAE5C,MAAI,iBAAiB,QAAQ,MAAM;AAKjC,UAAM,gBAAgB,UAAU,IAC5B,kBAAkB,KAAK,0BAA0B,UAAU,CAAC,IAC5D;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,0BAA0B,UAAU;AAAA,IACtC;AACJ,kBAAc,KAAK,CAAC,WAAW;AAC7B,UAAI,CAAC,KAAK;AACR;AAAA,MACF;AACA,YAAM,WAAW,eAAe,MAAM;AACtC,uBAAiB,KAAK,QAAQ,QAAQ;AAAA,IACxC,CAAC;AAAA,EACH,CAAC;AACD,MAAI,MAAM;AAEV,SAAO,CAAC,SAAS,IAAI;AACvB;",
   "names": []
 }

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

@@ -1,13 +1,25 @@
 import { useMap } from "@vis.gl/react-maplibre";
-import { isNil, isString, isUndefined } from "lodash-es";
-import { useCallback, useEffect } from "react";
-import { BASE_LAYER_IDS } from "../constants.js";
+import { isNil, isString, isUndefined, throttle } from "lodash-es";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef
+} from "react";
 import {
   getAssociatedFeatures,
   hasAssociatedFeatures,
   isAssociatedFeature
 } from "../utils/associated-features.js";
 import { getMinValueFeature } from "../utils/get-min-value-feature.js";
+const MOUSEMOVE_THROTTLE_MS = 16;
+const blurTrackedFeature = (map, featureIdRef, sourceIdRef) => {
+  if (!isNil(featureIdRef.current) && !isNil(sourceIdRef.current)) {
+    blurFeature(map, sourceIdRef.current, featureIdRef.current);
+    featureIdRef.current = void 0;
+    sourceIdRef.current = void 0;
+  }
+};
 const featureExists = (map, source, id) => {
   const isSourcePresent = map.getSource(source) !== void 0;
   return isSourcePresent && map.getFeatureState({
@@ -49,55 +61,61 @@ const hoverFeature = (map, source, id) => {
     }
   }
 };
-const useHoverInteraction = () => {
+const useHoverInteraction = (interactiveLayerIds) => {
   const map = useMap().current;
-  let featureId;
-  let sourceId;
-  const handleMouseOut = useCallback(
-    ({ point }) => {
-      if (!isNil(map) && !isUndefined(featureId) && !isUndefined(sourceId)) {
-        blurFeature(map, sourceId, featureId);
-      }
-    },
-    [featureId, sourceId, map]
-  );
-  const handleMouseMove = useCallback(
-    ({ point }) => {
-      if (!isNil(map)) {
-        const features = map.queryRenderedFeatures(point).filter((feature) => !isAssociatedFeature(feature.properties.id));
-        map.getCanvas().style.cursor = "grab";
+  const featureIdRef = useRef(void 0);
+  const sourceIdRef = useRef(void 0);
+  const interactiveLayerIdsRef = useRef(interactiveLayerIds);
+  interactiveLayerIdsRef.current = interactiveLayerIds;
+  const handleMouseOut = useCallback(() => {
+    if (!isNil(map)) {
+      blurTrackedFeature(map, featureIdRef, sourceIdRef);
+    }
+  }, [map]);
+  const throttledMouseMove = useMemo(
+    () => throttle(
+      ({ point }) => {
+        if (isNil(map)) {
+          return;
+        }
+        let features;
+        try {
+          features = map.queryRenderedFeatures(point, {
+            layers: interactiveLayerIdsRef.current
+          }).filter((feature) => !isAssociatedFeature(feature.properties.id));
+        } catch {
+          return;
+        }
         const layerId = features?.[0]?.layer?.id;
         const hasHoveredFeatures = !isNil(features) && features.length > 0 && !isUndefined(layerId);
-        const isBaseLayer = BASE_LAYER_IDS.includes(layerId);
-        if (hasHoveredFeatures && !isBaseLayer) {
-          map.getCanvas().style.cursor = "pointer";
-          if (!isUndefined(featureId) && !isUndefined(sourceId)) {
-            blurFeature(map, sourceId, featureId);
-          }
-          const minFeature = getMinValueFeature(features);
-          featureId = minFeature.id;
-          sourceId = minFeature.layer.source;
-          if (!isUndefined(featureId)) {
-            hoverFeature(map, sourceId, featureId);
-          }
-        } else {
+        if (!hasHoveredFeatures) {
           map.getCanvas().style.cursor = "grab";
-          if (!isUndefined(featureId) && !isUndefined(sourceId)) {
-            blurFeature(map, sourceId, featureId);
-          }
+          blurTrackedFeature(map, featureIdRef, sourceIdRef);
+          return;
         }
-      }
-    },
-    [featureId, sourceId, map]
+        map.getCanvas().style.cursor = "pointer";
+        blurTrackedFeature(map, featureIdRef, sourceIdRef);
+        const minFeature = getMinValueFeature(features);
+        featureIdRef.current = minFeature.id;
+        sourceIdRef.current = minFeature.layer.source;
+        if (!isUndefined(featureIdRef.current)) {
+          hoverFeature(map, sourceIdRef.current, featureIdRef.current);
+        }
+      },
+      MOUSEMOVE_THROTTLE_MS,
+      { trailing: true }
+    ),
+    [map]
   );
   useEffect(() => {
-    map?.on("mousemove", handleMouseMove);
+    map?.on("mousemove", throttledMouseMove);
     map?.on("mouseout", handleMouseOut);
     return () => {
-      map?.off("mousemove", handleMouseMove);
+      throttledMouseMove.cancel();
+      map?.off("mousemove", throttledMouseMove);
       map?.off("mouseout", handleMouseOut);
     };
-  }, []);
+  }, [map, throttledMouseMove, handleMouseOut]);
 };
 export {
   useHoverInteraction

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/hooks/use-hover-interaction.ts"],
-  "sourcesContent": ["import type { MapRef } from '@vis.gl/react-maplibre';\nimport { useMap } from '@vis.gl/react-maplibre';\nimport { isNil, isString, isUndefined } from 'lodash-es';\nimport type { MapLayerMouseEvent } from 'maplibre-gl';\nimport { useCallback, useEffect } from 'react';\n\nimport { BASE_LAYER_IDS } from '../constants.js';\nimport {\n  getAssociatedFeatures,\n  hasAssociatedFeatures,\n  isAssociatedFeature,\n} from '../utils/associated-features.js';\nimport { getMinValueFeature } from '../utils/get-min-value-feature.js';\n\n/**\n * Checks whether a feature exists from a given source\n *\n * @param map -\n * @param source -\n * @param id -\n */\nconst featureExists = (\n  map: MapRef,\n  source: string,\n  id: string | number,\n): boolean => {\n  const isSourcePresent = map.getSource(source) !== undefined;\n\n  return (\n    isSourcePresent &&\n    map.getFeatureState({\n      source,\n      id,\n    }) !== undefined\n  );\n};\n\n/**\n * Removes hovered state from a feature and its associated features from a given source\n * @param map -\n * @param source -\n * @param id -\n */\nconst blurFeature = (map: MapRef, source: string, id: string | number) => {\n  map.setFeatureState({ source, id }, { hover: false });\n\n  if (isString(id) && hasAssociatedFeatures(id)) {\n    for (const associatedFeature of getAssociatedFeatures('connection')) {\n      const associatedSource = `${source}-direction`;\n      const associatedId = `${id}-${associatedFeature}`;\n\n      if (featureExists(map, associatedSource, associatedId)) {\n        map.setFeatureState(\n          { source: associatedSource, id: associatedId },\n          {\n            hover: false,\n          },\n        );\n      }\n    }\n  }\n};\n\n/**\n * Sets hovered state to a feature and its associated features from a given source\n * @param map -\n * @param source -\n * @param id -\n */\nconst hoverFeature = (map: MapRef, source: string, id: string | number) => {\n  map.setFeatureState({ source, id }, { hover: true });\n\n  if (isString(id) && hasAssociatedFeatures(id)) {\n    for (const associatedFeature of getAssociatedFeatures('connection')) {\n      const associatedSource = `${source}-direction`;\n      const associatedId = `${id}-${associatedFeature}`;\n\n      if (featureExists(map, associatedSource, associatedId)) {\n        map.setFeatureState(\n          { source: `${source}-direction`, id: `${id}-${associatedFeature}` },\n          {\n            hover: true,\n          },\n        );\n      }\n    }\n  }\n};\n\n/**\n * Sets and removes hovered state to the features depending on mouse position\n */\nexport const useHoverInteraction = () => {\n  const map = useMap().current;\n\n  let featureId: string | number | undefined;\n  let sourceId: string | undefined;\n\n  const handleMouseOut = useCallback(\n    ({ point }: MapLayerMouseEvent) => {\n      if (!isNil(map) && !isUndefined(featureId) && !isUndefined(sourceId)) {\n        blurFeature(map, sourceId, featureId);\n      }\n    },\n    [featureId, sourceId, map],\n  );\n\n  const handleMouseMove = useCallback(\n    ({ point }: MapLayerMouseEvent) => {\n      if (!isNil(map)) {\n        const features = map\n          .queryRenderedFeatures(point)\n          .filter((feature) => !isAssociatedFeature(feature.properties.id)); // associated features should only have hover state when the main feature is hovered\n\n        map.getCanvas().style.cursor = 'grab';\n        const layerId = features?.[0]?.layer?.id;\n\n        const hasHoveredFeatures =\n          !isNil(features) && features.length > 0 && !isUndefined(layerId);\n        const isBaseLayer = BASE_LAYER_IDS.includes(layerId);\n\n        if (hasHoveredFeatures && !isBaseLayer) {\n          map.getCanvas().style.cursor = 'pointer';\n          if (!isUndefined(featureId) && !isUndefined(sourceId)) {\n            // if there's already a hovered feature, remove the hover state\n            blurFeature(map, sourceId, featureId);\n          }\n\n          const minFeature = getMinValueFeature(features);\n\n          featureId = minFeature.id;\n          sourceId = minFeature.layer.source;\n\n          // add the hover state to the closest feature\n          if (!isUndefined(featureId)) {\n            hoverFeature(map, sourceId, featureId);\n          }\n        } else {\n          map.getCanvas().style.cursor = 'grab';\n\n          if (!isUndefined(featureId) && !isUndefined(sourceId)) {\n            // remove the active state from the last hovered feature\n            blurFeature(map, sourceId, featureId);\n          }\n        }\n      }\n    },\n    [featureId, sourceId, map],\n  );\n\n  useEffect(() => {\n    map?.on('mousemove', handleMouseMove);\n    map?.on('mouseout', handleMouseOut);\n    return () => {\n      map?.off('mousemove', handleMouseMove);\n      map?.off('mouseout', handleMouseOut);\n    };\n  }, []);\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { MapRef } from '@vis.gl/react-maplibre';\nimport { useMap } from '@vis.gl/react-maplibre';\nimport { isNil, isString, isUndefined, throttle } from 'lodash-es';\nimport type { MapLayerMouseEvent } from 'maplibre-gl';\nimport {\n  type MutableRefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport {\n  getAssociatedFeatures,\n  hasAssociatedFeatures,\n  isAssociatedFeature,\n} from '../utils/associated-features.js';\nimport { getMinValueFeature } from '../utils/get-min-value-feature.js';\n\n/** Minimum milliseconds between processed mousemove events (~1 frame at 60 fps). */\nconst MOUSEMOVE_THROTTLE_MS = 16;\n\nconst blurTrackedFeature = (\n  map: MapRef,\n  featureIdRef: MutableRefObject<string | number | undefined>,\n  sourceIdRef: MutableRefObject<string | undefined>,\n) => {\n  if (!isNil(featureIdRef.current) && !isNil(sourceIdRef.current)) {\n    blurFeature(map, sourceIdRef.current, featureIdRef.current);\n    featureIdRef.current = undefined;\n    sourceIdRef.current = undefined;\n  }\n};\n\n/**\n * Checks whether a feature exists from a given source\n *\n * @param map -\n * @param source -\n * @param id -\n */\nconst featureExists = (\n  map: MapRef,\n  source: string,\n  id: string | number,\n): boolean => {\n  const isSourcePresent = map.getSource(source) !== undefined;\n\n  return (\n    isSourcePresent &&\n    map.getFeatureState({\n      source,\n      id,\n    }) !== undefined\n  );\n};\n\n/**\n * Removes hovered state from a feature and its associated features from a given source\n * @param map -\n * @param source -\n * @param id -\n */\nconst blurFeature = (map: MapRef, source: string, id: string | number) => {\n  map.setFeatureState({ source, id }, { hover: false });\n\n  if (isString(id) && hasAssociatedFeatures(id)) {\n    for (const associatedFeature of getAssociatedFeatures('connection')) {\n      const associatedSource = `${source}-direction`;\n      const associatedId = `${id}-${associatedFeature}`;\n\n      if (featureExists(map, associatedSource, associatedId)) {\n        map.setFeatureState(\n          { source: associatedSource, id: associatedId },\n          {\n            hover: false,\n          },\n        );\n      }\n    }\n  }\n};\n\n/**\n * Sets hovered state to a feature and its associated features from a given source\n * @param map -\n * @param source -\n * @param id -\n */\nconst hoverFeature = (map: MapRef, source: string, id: string | number) => {\n  map.setFeatureState({ source, id }, { hover: true });\n\n  if (isString(id) && hasAssociatedFeatures(id)) {\n    for (const associatedFeature of getAssociatedFeatures('connection')) {\n      const associatedSource = `${source}-direction`;\n      const associatedId = `${id}-${associatedFeature}`;\n\n      if (featureExists(map, associatedSource, associatedId)) {\n        map.setFeatureState(\n          { source: `${source}-direction`, id: `${id}-${associatedFeature}` },\n          {\n            hover: true,\n          },\n        );\n      }\n    }\n  }\n};\n\n/**\n * Sets and removes hovered state to the features depending on mouse position.\n *\n * @param interactiveLayerIds - maplibre-gl layer IDs to scope the feature query.\n *   Scoping to data layers prevents touching base-map vector tiles whose internal\n *   feature index may be in a transitional state (root cause of APPDEV-17854).\n */\nexport const useHoverInteraction = (interactiveLayerIds: string[]) => {\n  const map = useMap().current;\n\n  const featureIdRef = useRef<string | number | undefined>(undefined);\n  const sourceIdRef = useRef<string | undefined>(undefined);\n\n  // Keep a ref so the stable callback always sees the latest layer IDs even\n  // if the consumer updates them after the first render.\n  const interactiveLayerIdsRef = useRef(interactiveLayerIds);\n  interactiveLayerIdsRef.current = interactiveLayerIds;\n\n  const handleMouseOut = useCallback(() => {\n    if (!isNil(map)) {\n      blurTrackedFeature(map, featureIdRef, sourceIdRef);\n    }\n  }, [map]);\n\n  const throttledMouseMove = useMemo(\n    () =>\n      throttle(\n        ({ point }: MapLayerMouseEvent) => {\n          if (isNil(map)) {\n            return;\n          }\n\n          let features;\n          try {\n            features = map\n              .queryRenderedFeatures(point, {\n                layers: interactiveLayerIdsRef.current,\n              })\n              .filter((feature) => !isAssociatedFeature(feature.properties.id));\n          } catch {\n            return;\n          }\n\n          const layerId = features?.[0]?.layer?.id;\n          const hasHoveredFeatures =\n            !isNil(features) && features.length > 0 && !isUndefined(layerId);\n\n          // No BASE_LAYER_IDS check needed: querying only interactiveLayerIds\n          // already excludes base-map layers entirely.\n          if (!hasHoveredFeatures) {\n            map.getCanvas().style.cursor = 'grab';\n            blurTrackedFeature(map, featureIdRef, sourceIdRef);\n            return;\n          }\n\n          map.getCanvas().style.cursor = 'pointer';\n          blurTrackedFeature(map, featureIdRef, sourceIdRef);\n\n          const minFeature = getMinValueFeature(features);\n          featureIdRef.current = minFeature.id;\n          sourceIdRef.current = minFeature.layer.source;\n\n          if (!isUndefined(featureIdRef.current)) {\n            hoverFeature(map, sourceIdRef.current, featureIdRef.current);\n          }\n        },\n        MOUSEMOVE_THROTTLE_MS,\n        { trailing: true },\n      ),\n    [map],\n  );\n\n  useEffect(() => {\n    map?.on('mousemove', throttledMouseMove);\n    map?.on('mouseout', handleMouseOut);\n    return () => {\n      throttledMouseMove.cancel();\n      map?.off('mousemove', throttledMouseMove);\n      map?.off('mouseout', handleMouseOut);\n    };\n  }, [map, throttledMouseMove, handleMouseOut]);\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/map/hooks/use-layer-before-id.js

@@ -0,0 +1,24 @@
+import { useMap } from "@vis.gl/react-maplibre";
+import { useContext } from "react";
+import { LayerIdsContext } from "../contexts/layer-ids.context.js";
+const useLayerBeforeId = (layerId) => {
+  const layerIds = useContext(LayerIdsContext);
+  const { current: map } = useMap();
+  if (!map) {
+    return void 0;
+  }
+  const currentIndex = layerIds.indexOf(layerId);
+  if (currentIndex === -1) {
+    return void 0;
+  }
+  for (let i = currentIndex + 1; i < layerIds.length; i++) {
+    if (map.getLayer(layerIds[i])) {
+      return layerIds[i];
+    }
+  }
+  return void 0;
+};
+export {
+  useLayerBeforeId
+};
+//# sourceMappingURL=use-layer-before-id.js.map

package/esm/map/hooks/use-layer-before-id.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/map/hooks/use-layer-before-id.ts"],
+  "sourcesContent": ["import { useMap } from '@vis.gl/react-maplibre';\nimport { useContext } from 'react';\n\nimport { LayerIdsContext } from '../contexts/layer-ids.context.js';\n\n/**\n * Returns the maplibre layer id that the current layer should be inserted before,\n * based on the JSX order of `MapView` children.\n *\n * Without this, layers that mount asynchronously (e.g. `{apiData && <ChoroplethLayer>}`)\n * are appended to the top of the maplibre stack and end up visually above siblings\n * that mounted earlier \u2014 even when JSX puts them first. Passing the returned value as\n * `beforeId` to a `<Layer>` keeps the rendered stack aligned with JSX order.\n *\n * Only returns an id that actually exists in the map right now, so the result is\n * always safe to pass to `map.addLayer(opts, beforeId)`.\n */\nexport const useLayerBeforeId = (layerId: string): string | undefined => {\n  const layerIds = useContext(LayerIdsContext);\n  const { current: map } = useMap();\n\n  if (!map) {\n    return undefined;\n  }\n\n  const currentIndex = layerIds.indexOf(layerId);\n  if (currentIndex === -1) {\n    return undefined;\n  }\n\n  for (let i = currentIndex + 1; i < layerIds.length; i++) {\n    if (map.getLayer(layerIds[i])) {\n      return layerIds[i];\n    }\n  }\n\n  return undefined;\n};\n"],
+  "mappings": "AAAA,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAE3B,SAAS,uBAAuB;AAczB,MAAM,mBAAmB,CAAC,YAAwC;AACvE,QAAM,WAAW,WAAW,eAAe;AAC3C,QAAM,EAAE,SAAS,IAAI,IAAI,OAAO;AAEhC,MAAI,CAAC,KAAK;AACR,WAAO;AAAA,EACT;AAEA,QAAM,eAAe,SAAS,QAAQ,OAAO;AAC7C,MAAI,iBAAiB,IAAI;AACvB,WAAO;AAAA,EACT;AAEA,WAAS,IAAI,eAAe,GAAG,IAAI,SAAS,QAAQ,KAAK;AACvD,QAAI,IAAI,SAAS,SAAS,CAAC,CAAC,GAAG;AAC7B,aAAO,SAAS,CAAC;AAAA,IACnB;AAAA,EACF;AAEA,SAAO;AACT;",
+  "names": []
+}

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

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
+import { useMapViewProviderContext } from "./use-map-view-provider-context.js";
 import { applyFeatureFilterRules } from "../utils/apply-feature-filter-rules.js";
 import {
   getCountryRegionsRules,
@@ -18,13 +19,17 @@ const useLoadMapBaseLayer = (baseLayerConfig) => {
   const [isMapEnabled, setIsMapEnabled] = useState(false);
   const [baseFeatureCollection, setBaseFeatureCollection] = useState(void 0);
   const [error, setError] = useState(false);
+  const {
+    countryCode: providerCountryCode,
+    displayWorldMap: providerDisplayWorldMap
+  } = useMapViewProviderContext();
   const getData = useCallback(async () => {
     setIsFetchingFeatures(true);
-    const isMapEnabledResponse = await fetchClientConfigMapEnabled();
+    const isMapEnabledResponse = providerDisplayWorldMap ?? await fetchClientConfigMapEnabled();
     setIsMapEnabled(isMapEnabledResponse);
     try {
       if (isMapEnabledResponse) {
-        const tenantCountryCode = await getTenantCountryCode();
+        const tenantCountryCode = providerCountryCode ?? await getTenantCountryCode();
         const { includeWorldView, countryRegions } = getBaseLayerShapesRequestConfig(baseLayerConfig.include);
         const featuresRequests = [];
         if (includeWorldView) {
@@ -55,7 +60,12 @@ const useLoadMapBaseLayer = (baseLayerConfig) => {
       setError(true);
     }
     setIsFetchingFeatures(false);
-  }, [baseLayerConfig.include, baseLayerConfig.exclude]);
+  }, [
+    baseLayerConfig.include,
+    baseLayerConfig.exclude,
+    providerCountryCode,
+    providerDisplayWorldMap
+  ]);
   useEffect(() => {
     getData();
   }, [getData]);