@dynatrace/strato-geo 1.0.3 → 1.2.1

package/esm/map/components/MapUnavailable.js

@@ -5,12 +5,12 @@ const MapUnavailable = ({
   chartHeight,
   error,
   isDisabled,
-  isLoading
+  isFetchingFeatures
 }) => {
   if (error) {
     return /* @__PURE__ */ React.createElement(BaseLayerDataError, { height: chartHeight });
   }
-  if (!isLoading && isDisabled) {
+  if (!isFetchingFeatures && isDisabled) {
     return /* @__PURE__ */ React.createElement(DisabledState, { height: chartHeight });
   }
 };

package/esm/map/components/MapUnavailable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/components/MapUnavailable.tsx"],
-  "sourcesContent": ["import React from 'react';\n\nimport { BaseLayerDataError } from './BaseLayerDataError.js';\nimport { DisabledState } from '../slots/states/DisabledState.js';\n\ninterface MapUnavailableProps {\n  isLoading: boolean;\n  isDisabled: boolean;\n  error: boolean;\n  chartHeight: string | number;\n}\n\nexport const MapUnavailable = ({\n  chartHeight,\n  error,\n  isDisabled,\n  isLoading,\n}: MapUnavailableProps) => {\n  if (error) {\n    return <BaseLayerDataError height={chartHeight} />;\n  }\n  if (!isLoading && isDisabled) {\n    return <DisabledState height={chartHeight} />;\n  }\n};\n\nMapUnavailable.displayName = 'MapUnavailable';\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAElB,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AASvB,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2B;AACzB,MAAI,OAAO;AACT,WAAO,oCAAC,sBAAmB,QAAQ,aAAa;AAAA,EAClD;AACA,MAAI,CAAC,aAAa,YAAY;AAC5B,WAAO,oCAAC,iBAAc,QAAQ,aAAa;AAAA,EAC7C;AACF;AAEA,eAAe,cAAc;",
+  "sourcesContent": ["import React from 'react';\n\nimport { BaseLayerDataError } from './BaseLayerDataError.js';\nimport { DisabledState } from '../slots/states/DisabledState.js';\n\ninterface MapUnavailableProps {\n  isFetchingFeatures: boolean;\n  isDisabled: boolean;\n  error: boolean;\n  chartHeight: string | number;\n}\n\nexport const MapUnavailable = ({\n  chartHeight,\n  error,\n  isDisabled,\n  isFetchingFeatures,\n}: MapUnavailableProps) => {\n  if (error) {\n    return <BaseLayerDataError height={chartHeight} />;\n  }\n  if (!isFetchingFeatures && isDisabled) {\n    return <DisabledState height={chartHeight} />;\n  }\n};\n\nMapUnavailable.displayName = 'MapUnavailable';\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAElB,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AASvB,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2B;AACzB,MAAI,OAAO;AACT,WAAO,oCAAC,sBAAmB,QAAQ,aAAa;AAAA,EAClD;AACA,MAAI,CAAC,sBAAsB,YAAY;AACrC,WAAO,oCAAC,iBAAc,QAAQ,aAAa;AAAA,EAC7C;AACF;AAEA,eAAe,cAAc;",
   "names": []
 }

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

@@ -1,6 +1,6 @@
+import { useMap } from "@vis.gl/react-maplibre";
 import React, { useRef } from "react";
 import { useIntl } from "react-intl";
-import { useMap } from "react-map-gl/maplibre";
 import { _ChartToolbarRenderer as ChartToolbarRenderer } from "@dynatrace/strato-components-preview/charts";
 import { ResetIcon } from "@dynatrace/strato-icons";
 import { useInitialViewContext } from "../../../hooks/use-initial-view-context.js";

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/map/components/toolbar/buttons/MapResetButton.tsx"],
-  "sourcesContent": ["import React, { useRef } from 'react';\nimport { useIntl } from 'react-intl';\nimport { useMap } from 'react-map-gl/maplibre';\n\nimport { _ChartToolbarRenderer as ChartToolbarRenderer } from '@dynatrace/strato-components-preview/charts';\nimport { ResetIcon } from '@dynatrace/strato-icons';\n\nimport { useInitialViewContext } from '../../../hooks/use-initial-view-context.js';\nimport { TOOLBAR_MESSAGES } from '../constants.js';\nimport { useA11yToolbarTabIndex } from '../hooks/use-a11y-toolbar-tab-index.js';\n\nexport const MapResetButton = () => {\n  const { current: map } = useMap();\n  const { longitude = 0, latitude = 0, zoom = 0 } = useInitialViewContext();\n  const intl = useIntl();\n\n  const resetButtonRef = useRef<HTMLButtonElement>();\n  const tabIndex = useA11yToolbarTabIndex('reset');\n\n  const handleReset = () => {\n    map?.flyTo({ center: [longitude, latitude], zoom: zoom });\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.code === 'Enter') {\n      handleReset();\n    }\n  };\n\n  return (\n    <ChartToolbarRenderer.Control\n      ref={resetButtonRef}\n      prefixIcon={<ResetIcon />}\n      tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.zoomActionReset)}\n      testId=\"map-toolbar-reset\"\n      onKeyDown={handleKeyDown}\n      onClick={handleReset}\n      tabIndex={tabIndex}\n    />\n  );\n};\n"],
-  "mappings": "AAAA,OAAO,SAAS,cAAc;AAC9B,SAAS,eAAe;AACxB,SAAS,cAAc;AAEvB,SAAS,yBAAyB,4BAA4B;AAC9D,SAAS,iBAAiB;AAE1B,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AAEhC,MAAM,iBAAiB,MAAM;AAClC,QAAM,EAAE,SAAS,IAAI,IAAI,OAAO;AAChC,QAAM,EAAE,YAAY,GAAG,WAAW,GAAG,OAAO,EAAE,IAAI,sBAAsB;AACxE,QAAM,OAAO,QAAQ;AAErB,QAAM,iBAAiB,OAA0B;AACjD,QAAM,WAAW,uBAAuB,OAAO;AAE/C,QAAM,cAAc,MAAM;AACxB,SAAK,MAAM,EAAE,QAAQ,CAAC,WAAW,QAAQ,GAAG,KAAW,CAAC;AAAA,EAC1D;AAEA,QAAM,gBAAgB,CAAC,UAA+B;AACpD,QAAI,MAAM,SAAS,SAAS;AAC1B,kBAAY;AAAA,IACd;AAAA,EACF;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oCAAC,eAAU;AAAA,MACvB,aAAa,KAAK,cAAc,iBAAiB,eAAe;AAAA,MAChE,QAAO;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { useMap } from '@vis.gl/react-maplibre';\nimport React, { useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { _ChartToolbarRenderer as ChartToolbarRenderer } from '@dynatrace/strato-components-preview/charts';\nimport { ResetIcon } from '@dynatrace/strato-icons';\n\nimport { useInitialViewContext } from '../../../hooks/use-initial-view-context.js';\nimport { TOOLBAR_MESSAGES } from '../constants.js';\nimport { useA11yToolbarTabIndex } from '../hooks/use-a11y-toolbar-tab-index.js';\n\nexport const MapResetButton = () => {\n  const { current: map } = useMap();\n  const { longitude = 0, latitude = 0, zoom = 0 } = useInitialViewContext();\n  const intl = useIntl();\n\n  const resetButtonRef = useRef<HTMLButtonElement>();\n  const tabIndex = useA11yToolbarTabIndex('reset');\n\n  const handleReset = () => {\n    map?.flyTo({ center: [longitude, latitude], zoom: zoom });\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.code === 'Enter') {\n      handleReset();\n    }\n  };\n\n  return (\n    <ChartToolbarRenderer.Control\n      ref={resetButtonRef}\n      prefixIcon={<ResetIcon />}\n      tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.zoomActionReset)}\n      testId=\"map-toolbar-reset\"\n      onKeyDown={handleKeyDown}\n      onClick={handleReset}\n      tabIndex={tabIndex}\n    />\n  );\n};\n"],
+  "mappings": "AAAA,SAAS,cAAc;AACvB,OAAO,SAAS,cAAc;AAC9B,SAAS,eAAe;AAExB,SAAS,yBAAyB,4BAA4B;AAC9D,SAAS,iBAAiB;AAE1B,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AAEhC,MAAM,iBAAiB,MAAM;AAClC,QAAM,EAAE,SAAS,IAAI,IAAI,OAAO;AAChC,QAAM,EAAE,YAAY,GAAG,WAAW,GAAG,OAAO,EAAE,IAAI,sBAAsB;AACxE,QAAM,OAAO,QAAQ;AAErB,QAAM,iBAAiB,OAA0B;AACjD,QAAM,WAAW,uBAAuB,OAAO;AAE/C,QAAM,cAAc,MAAM;AACxB,SAAK,MAAM,EAAE,QAAQ,CAAC,WAAW,QAAQ,GAAG,KAAW,CAAC;AAAA,EAC1D;AAEA,QAAM,gBAAgB,CAAC,UAA+B;AACpD,QAAI,MAAM,SAAS,SAAS;AAC1B,kBAAY;AAAA,IACd;AAAA,EACF;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oCAAC,eAAU;AAAA,MACvB,aAAa,KAAK,cAAc,iBAAiB,eAAe;AAAA,MAChE,QAAO;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

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

@@ -1,6 +1,6 @@
+import { useMap } from "@vis.gl/react-maplibre";
 import React, { useRef } from "react";
 import { useIntl } from "react-intl";
-import { useMap } from "react-map-gl/maplibre";
 import { _ChartToolbarRenderer as ChartToolbarRenderer } from "@dynatrace/strato-components-preview/charts";
 import { ZoomInIcon, ZoomOutIcon } from "@dynatrace/strato-icons";
 import { TOOLBAR_MESSAGES } from "../constants.js";

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/map/components/toolbar/buttons/MapZoomInOutButtons.tsx"],
-  "sourcesContent": ["import React, { useRef } from 'react';\nimport { useIntl } from 'react-intl';\nimport { useMap } from 'react-map-gl/maplibre';\n\nimport { _ChartToolbarRenderer as ChartToolbarRenderer } from '@dynatrace/strato-components-preview/charts';\nimport { ZoomInIcon, ZoomOutIcon } from '@dynatrace/strato-icons';\n\nimport { TOOLBAR_MESSAGES } from '../constants.js';\nimport { useA11yToolbarTabIndex } from '../hooks/use-a11y-toolbar-tab-index.js';\n\ntype ZoomBehavior = 'zoom-in' | 'zoom-out';\nexport const MapZoomInOutButtons = () => {\n  const { current: map } = useMap();\n  const isMaxZoom = map && map?.getMaxZoom() === map?.getZoom();\n  const isMinZoom = map && map?.getMinZoom() === map?.getZoom();\n\n  const zoomInButtonRef = useRef<HTMLButtonElement>();\n  const zoomButtonOutRef = useRef<HTMLButtonElement>();\n  const intl = useIntl();\n  const tabIndexIn = useA11yToolbarTabIndex('zoom-in');\n  const tabIndexOut = useA11yToolbarTabIndex('zoom-out');\n\n  const handleZoomKeyboardMode = (\n    event: React.KeyboardEvent,\n    zoomBehavior: ZoomBehavior,\n  ) => {\n    if (event.code === 'Enter') {\n      handleZoomStepToolbarMode(zoomBehavior);\n    }\n  };\n\n  const handleZoomStepToolbarMode = (zoomBehavior: ZoomBehavior) => {\n    if (zoomBehavior === 'zoom-in') {\n      map?.zoomIn();\n    }\n    if (zoomBehavior === 'zoom-out') {\n      map?.zoomOut();\n    }\n  };\n\n  return (\n    <>\n      <ChartToolbarRenderer.Control\n        ref={zoomInButtonRef}\n        prefixIcon={<ZoomInIcon />}\n        tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.zoomActionZoomIn)}\n        testId=\"map-toolbar-zoom-in\"\n        onKeyDown={(event) => handleZoomKeyboardMode(event, 'zoom-in')}\n        onClick={() => handleZoomStepToolbarMode('zoom-in')}\n        tabIndex={tabIndexIn}\n        disabled={isMaxZoom}\n      />\n      <ChartToolbarRenderer.Control\n        ref={zoomButtonOutRef}\n        prefixIcon={<ZoomOutIcon />}\n        tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.zoomActionZoomOut)}\n        testId=\"map-toolbar-zoom-out\"\n        onKeyDown={(event) => handleZoomKeyboardMode(event, 'zoom-out')}\n        onClick={() => handleZoomStepToolbarMode('zoom-out')}\n        tabIndex={tabIndexOut}\n        disabled={isMinZoom}\n      />\n    </>\n  );\n};\n"],
-  "mappings": "AAAA,OAAO,SAAS,cAAc;AAC9B,SAAS,eAAe;AACxB,SAAS,cAAc;AAEvB,SAAS,yBAAyB,4BAA4B;AAC9D,SAAS,YAAY,mBAAmB;AAExC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AAGhC,MAAM,sBAAsB,MAAM;AACvC,QAAM,EAAE,SAAS,IAAI,IAAI,OAAO;AAChC,QAAM,YAAY,OAAO,KAAK,WAAW,MAAM,KAAK,QAAQ;AAC5D,QAAM,YAAY,OAAO,KAAK,WAAW,MAAM,KAAK,QAAQ;AAE5D,QAAM,kBAAkB,OAA0B;AAClD,QAAM,mBAAmB,OAA0B;AACnD,QAAM,OAAO,QAAQ;AACrB,QAAM,aAAa,uBAAuB,SAAS;AACnD,QAAM,cAAc,uBAAuB,UAAU;AAErD,QAAM,yBAAyB,CAC7B,OACA,iBACG;AACH,QAAI,MAAM,SAAS,SAAS;AAC1B,gCAA0B,YAAY;AAAA,IACxC;AAAA,EACF;AAEA,QAAM,4BAA4B,CAAC,iBAA+B;AAChE,QAAI,iBAAiB,WAAW;AAC9B,WAAK,OAAO;AAAA,IACd;AACA,QAAI,iBAAiB,YAAY;AAC/B,WAAK,QAAQ;AAAA,IACf;AAAA,EACF;AAEA,SACE,0DACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oCAAC,gBAAW;AAAA,MACxB,aAAa,KAAK,cAAc,iBAAiB,gBAAgB;AAAA,MACjE,QAAO;AAAA,MACP,WAAW,CAAC,UAAU,uBAAuB,OAAO,SAAS;AAAA,MAC7D,SAAS,MAAM,0BAA0B,SAAS;AAAA,MAClD,UAAU;AAAA,MACV,UAAU;AAAA;AAAA,EACZ,GACA;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oCAAC,iBAAY;AAAA,MACzB,aAAa,KAAK,cAAc,iBAAiB,iBAAiB;AAAA,MAClE,QAAO;AAAA,MACP,WAAW,CAAC,UAAU,uBAAuB,OAAO,UAAU;AAAA,MAC9D,SAAS,MAAM,0BAA0B,UAAU;AAAA,MACnD,UAAU;AAAA,MACV,UAAU;AAAA;AAAA,EACZ,CACF;AAEJ;",
+  "sourcesContent": ["import { useMap } from '@vis.gl/react-maplibre';\nimport React, { useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { _ChartToolbarRenderer as ChartToolbarRenderer } from '@dynatrace/strato-components-preview/charts';\nimport { ZoomInIcon, ZoomOutIcon } from '@dynatrace/strato-icons';\n\nimport { TOOLBAR_MESSAGES } from '../constants.js';\nimport { useA11yToolbarTabIndex } from '../hooks/use-a11y-toolbar-tab-index.js';\n\ntype ZoomBehavior = 'zoom-in' | 'zoom-out';\nexport const MapZoomInOutButtons = () => {\n  const { current: map } = useMap();\n  const isMaxZoom = map && map?.getMaxZoom() === map?.getZoom();\n  const isMinZoom = map && map?.getMinZoom() === map?.getZoom();\n\n  const zoomInButtonRef = useRef<HTMLButtonElement>();\n  const zoomButtonOutRef = useRef<HTMLButtonElement>();\n  const intl = useIntl();\n  const tabIndexIn = useA11yToolbarTabIndex('zoom-in');\n  const tabIndexOut = useA11yToolbarTabIndex('zoom-out');\n\n  const handleZoomKeyboardMode = (\n    event: React.KeyboardEvent,\n    zoomBehavior: ZoomBehavior,\n  ) => {\n    if (event.code === 'Enter') {\n      handleZoomStepToolbarMode(zoomBehavior);\n    }\n  };\n\n  const handleZoomStepToolbarMode = (zoomBehavior: ZoomBehavior) => {\n    if (zoomBehavior === 'zoom-in') {\n      map?.zoomIn();\n    }\n    if (zoomBehavior === 'zoom-out') {\n      map?.zoomOut();\n    }\n  };\n\n  return (\n    <>\n      <ChartToolbarRenderer.Control\n        ref={zoomInButtonRef}\n        prefixIcon={<ZoomInIcon />}\n        tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.zoomActionZoomIn)}\n        testId=\"map-toolbar-zoom-in\"\n        onKeyDown={(event) => handleZoomKeyboardMode(event, 'zoom-in')}\n        onClick={() => handleZoomStepToolbarMode('zoom-in')}\n        tabIndex={tabIndexIn}\n        disabled={isMaxZoom}\n      />\n      <ChartToolbarRenderer.Control\n        ref={zoomButtonOutRef}\n        prefixIcon={<ZoomOutIcon />}\n        tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.zoomActionZoomOut)}\n        testId=\"map-toolbar-zoom-out\"\n        onKeyDown={(event) => handleZoomKeyboardMode(event, 'zoom-out')}\n        onClick={() => handleZoomStepToolbarMode('zoom-out')}\n        tabIndex={tabIndexOut}\n        disabled={isMinZoom}\n      />\n    </>\n  );\n};\n"],
+  "mappings": "AAAA,SAAS,cAAc;AACvB,OAAO,SAAS,cAAc;AAC9B,SAAS,eAAe;AAExB,SAAS,yBAAyB,4BAA4B;AAC9D,SAAS,YAAY,mBAAmB;AAExC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AAGhC,MAAM,sBAAsB,MAAM;AACvC,QAAM,EAAE,SAAS,IAAI,IAAI,OAAO;AAChC,QAAM,YAAY,OAAO,KAAK,WAAW,MAAM,KAAK,QAAQ;AAC5D,QAAM,YAAY,OAAO,KAAK,WAAW,MAAM,KAAK,QAAQ;AAE5D,QAAM,kBAAkB,OAA0B;AAClD,QAAM,mBAAmB,OAA0B;AACnD,QAAM,OAAO,QAAQ;AACrB,QAAM,aAAa,uBAAuB,SAAS;AACnD,QAAM,cAAc,uBAAuB,UAAU;AAErD,QAAM,yBAAyB,CAC7B,OACA,iBACG;AACH,QAAI,MAAM,SAAS,SAAS;AAC1B,gCAA0B,YAAY;AAAA,IACxC;AAAA,EACF;AAEA,QAAM,4BAA4B,CAAC,iBAA+B;AAChE,QAAI,iBAAiB,WAAW;AAC9B,WAAK,OAAO;AAAA,IACd;AACA,QAAI,iBAAiB,YAAY;AAC/B,WAAK,QAAQ;AAAA,IACf;AAAA,EACF;AAEA,SACE,0DACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oCAAC,gBAAW;AAAA,MACxB,aAAa,KAAK,cAAc,iBAAiB,gBAAgB;AAAA,MACjE,QAAO;AAAA,MACP,WAAW,CAAC,UAAU,uBAAuB,OAAO,SAAS;AAAA,MAC7D,SAAS,MAAM,0BAA0B,SAAS;AAAA,MAClD,UAAU;AAAA,MACV,UAAU;AAAA;AAAA,EACZ,GACA;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oCAAC,iBAAY;AAAA,MACzB,aAAa,KAAK,cAAc,iBAAiB,iBAAiB;AAAA,MAClE,QAAO;AAAA,MACP,WAAW,CAAC,UAAU,uBAAuB,OAAO,UAAU;AAAA,MAC9D,SAAS,MAAM,0BAA0B,UAAU;AAAA,MACnD,UAAU;AAAA,MACV,UAAU;AAAA;AAAA,EACZ,CACF;AAEJ;",
   "names": []
 }

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

@@ -1,6 +1,6 @@
+import { useMap } from "@vis.gl/react-maplibre";
 import React, { useRef } from "react";
 import { useIntl } from "react-intl";
-import { useMap } from "react-map-gl/maplibre";
 import { _ChartToolbarRenderer as ChartToolbarRenderer } from "@dynatrace/strato-components-preview/charts";
 import { ZoomToFitIcon } from "@dynatrace/strato-icons";
 import { FIT_BOUNDS_OPTIONS } from "../../../constants.js";

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/map/components/toolbar/buttons/MapZoomToFitButton.tsx"],
-  "sourcesContent": ["import React, { useRef } from 'react';\nimport { useIntl } from 'react-intl';\nimport { useMap } from 'react-map-gl/maplibre';\n\nimport { _ChartToolbarRenderer as ChartToolbarRenderer } from '@dynatrace/strato-components-preview/charts';\nimport { ZoomToFitIcon } from '@dynatrace/strato-icons';\n\nimport { FIT_BOUNDS_OPTIONS } from '../../../constants.js';\nimport { useDataBoundingBox } from '../../../hooks/use-data-bounding-box.js';\nimport { TOOLBAR_MESSAGES } from '../constants.js';\nimport { useA11yToolbarTabIndex } from '../hooks/use-a11y-toolbar-tab-index.js';\n\nexport const MapZoomToFitButton = () => {\n  const resetButtonRef = useRef();\n  const { current: map } = useMap();\n  const tabIndex = useA11yToolbarTabIndex('zoom-to-fit');\n  const intl = useIntl();\n  const boundingBox = useDataBoundingBox();\n  const handleZoomToFit = () => {\n    map?.fitBounds(boundingBox, FIT_BOUNDS_OPTIONS);\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.code === 'Enter') {\n      handleZoomToFit();\n    }\n  };\n\n  return (\n    <ChartToolbarRenderer.Control\n      ref={resetButtonRef}\n      prefixIcon={<ZoomToFitIcon />}\n      tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.zoomActionZoomToFit)}\n      testId=\"map-toolbar-zoom-to-fit\"\n      onKeyDown={handleKeyDown}\n      onClick={handleZoomToFit}\n      tabIndex={tabIndex}\n    />\n  );\n};\n\nMapZoomToFitButton['displayName'] = 'MapZoomToFit';\n"],
-  "mappings": "AAAA,OAAO,SAAS,cAAc;AAC9B,SAAS,eAAe;AACxB,SAAS,cAAc;AAEvB,SAAS,yBAAyB,4BAA4B;AAC9D,SAAS,qBAAqB;AAE9B,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AAEhC,MAAM,qBAAqB,MAAM;AACtC,QAAM,iBAAiB,OAAO;AAC9B,QAAM,EAAE,SAAS,IAAI,IAAI,OAAO;AAChC,QAAM,WAAW,uBAAuB,aAAa;AACrD,QAAM,OAAO,QAAQ;AACrB,QAAM,cAAc,mBAAmB;AACvC,QAAM,kBAAkB,MAAM;AAC5B,SAAK,UAAU,aAAa,kBAAkB;AAAA,EAChD;AAEA,QAAM,gBAAgB,CAAC,UAA+B;AACpD,QAAI,MAAM,SAAS,SAAS;AAC1B,sBAAgB;AAAA,IAClB;AAAA,EACF;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oCAAC,mBAAc;AAAA,MAC3B,aAAa,KAAK,cAAc,iBAAiB,mBAAmB;AAAA,MACpE,QAAO;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;AAEA,mBAAmB,aAAa,IAAI;",
+  "sourcesContent": ["import { useMap } from '@vis.gl/react-maplibre';\nimport React, { useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { _ChartToolbarRenderer as ChartToolbarRenderer } from '@dynatrace/strato-components-preview/charts';\nimport { ZoomToFitIcon } from '@dynatrace/strato-icons';\n\nimport { FIT_BOUNDS_OPTIONS } from '../../../constants.js';\nimport { useDataBoundingBox } from '../../../hooks/use-data-bounding-box.js';\nimport { TOOLBAR_MESSAGES } from '../constants.js';\nimport { useA11yToolbarTabIndex } from '../hooks/use-a11y-toolbar-tab-index.js';\n\nexport const MapZoomToFitButton = () => {\n  const resetButtonRef = useRef();\n  const { current: map } = useMap();\n  const tabIndex = useA11yToolbarTabIndex('zoom-to-fit');\n  const intl = useIntl();\n  const boundingBox = useDataBoundingBox();\n  const handleZoomToFit = () => {\n    map?.fitBounds(boundingBox, FIT_BOUNDS_OPTIONS);\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.code === 'Enter') {\n      handleZoomToFit();\n    }\n  };\n\n  return (\n    <ChartToolbarRenderer.Control\n      ref={resetButtonRef}\n      prefixIcon={<ZoomToFitIcon />}\n      tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.zoomActionZoomToFit)}\n      testId=\"map-toolbar-zoom-to-fit\"\n      onKeyDown={handleKeyDown}\n      onClick={handleZoomToFit}\n      tabIndex={tabIndex}\n    />\n  );\n};\n\nMapZoomToFitButton['displayName'] = 'MapZoomToFit';\n"],
+  "mappings": "AAAA,SAAS,cAAc;AACvB,OAAO,SAAS,cAAc;AAC9B,SAAS,eAAe;AAExB,SAAS,yBAAyB,4BAA4B;AAC9D,SAAS,qBAAqB;AAE9B,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AAEhC,MAAM,qBAAqB,MAAM;AACtC,QAAM,iBAAiB,OAAO;AAC9B,QAAM,EAAE,SAAS,IAAI,IAAI,OAAO;AAChC,QAAM,WAAW,uBAAuB,aAAa;AACrD,QAAM,OAAO,QAAQ;AACrB,QAAM,cAAc,mBAAmB;AACvC,QAAM,kBAAkB,MAAM;AAC5B,SAAK,UAAU,aAAa,kBAAkB;AAAA,EAChD;AAEA,QAAM,gBAAgB,CAAC,UAA+B;AACpD,QAAI,MAAM,SAAS,SAAS;AAC1B,sBAAgB;AAAA,IAClB;AAAA,EACF;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oCAAC,mBAAc;AAAA,MAC3B,aAAa,KAAK,cAAc,iBAAiB,mBAAmB;AAAA,MACpE,QAAO;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;AAEA,mBAAmB,aAAa,IAAI;",
   "names": []
 }

package/esm/map/constants.js

@@ -1,13 +1,15 @@
 import { defineMessages } from "react-intl";
 import Colors from "@dynatrace/strato-design-tokens/colors";
-const DEFAULT_COUNTRIES_FILL_COLOR = Colors.Theme.Neutral["50"];
-const DEFAULT_COUNTRIES_BORDER_COLOR = Colors.Background.Surface.Default;
+const DEFAULT_COUNTRIES_FILL_COLOR = Colors.Background.Container.Neutral.Default;
+const DEFAULT_BOUNDARIES_BORDER_COLOR = Colors.Border.Neutral.Default;
+const COUNTRY_BORDER_WIDTH = 1;
+const REGION_BORDER_WIDTH = 0.4;
 const TRANSPARENT_BORDER_COLOR = "#00000000";
-const MAX_LATITUDE = 90;
-const MIN_LATITUDE = -90;
-const MAX_LONGITUDE = 180;
-const MIN_LONGITUDE = -180;
-const WHOLE_WORLD_VIEW_BOUNDARIES = [
+const MAX_LATITUDE = 85;
+const MIN_LATITUDE = -60;
+const MAX_LONGITUDE = 179.99;
+const MIN_LONGITUDE = -179.99;
+const WORLD_VIEW_MAX_BOUNDARIES = [
   MAX_LONGITUDE,
   MAX_LATITUDE,
   MIN_LONGITUDE,
@@ -19,15 +21,16 @@ const DEFAULT_MAP_HEIGHT = 400;
 const DEFAULT_MAP_LEGEND_RATIO = "auto";
 const DEFAULT_MAP_POSITION = "auto";
 const DEFAULT_INPUT_ICON_SIZE = 20;
-const ACTIVE_COLOR = Colors.Border.Neutral.AccentActive;
+const ACTIVE_COLOR = Colors.Border.Neutral.Accent;
 const BASE_LAYER_FILL_ID = "geojson-fill";
 const BASE_LAYER_LINE_ID = "geojson-line";
 const BASE_LAYER_IDS = [BASE_LAYER_LINE_ID, BASE_LAYER_FILL_ID];
-const SHAPE_OPACITY = 1;
+const SHAPE_OPACITY_DEFAULT = 1;
+const SHAPE_OPACITY_DIMMED = 0.2;
 const DEFAULT_SYMBOL_SIZE = 32;
 const FALLBACK_SYMBOL_SIZE = 1;
 const DEFAULT_TRUNCATION_MODE = "middle";
-const CDN_BASE_PATH = "https://dt-cdn.net/scripts/data/worldmap/maps/v003/";
+const CDN_BASE_PATH = "https://dt-cdn.net/scripts/data/worldmap/maps/v004/";
 const INCLUDE_ALL_WILDCARD_RULE = "*";
 const DEFAULT_BASIC_SHAPE_COLOR_TOKEN = Colors.Charts.CategoricalThemed.PurpleRain.Color01;
 const DEFAULT_LEGEND_SIZES = {
@@ -44,7 +47,6 @@ const DEFAULT_FORMATTER = {
   maximumFractionDigits: 1
 };
 const DEFAULT_RANGE_COLOR = Colors.Background.Container.Neutral.Accent;
-const LEGEND_DIM_OPACITY = 0.2;
 const DEFAULT_SEQUENTIAL_LEGEND_COLOR_PALETTE = "blue";
 const ICON_BACKGROUND_OPACITY = 0.7;
 const ICON_BACKGROUND_RADIUS = 16;
@@ -70,7 +72,8 @@ const MIN_LINE_THICKNESS = 1;
 const MAX_LINE_THICKNESS = 64;
 const DIRECTION_ICON_OUTPUT_SIZE = 128;
 const DIRECTION_ICON_SHRINK_RATIO = 1 / 15;
-const ACTIVE_STATE_BORDERS_WIDTH = 1.8;
+const ACTIVE_BORDER_WIDTH_OUTER = 3;
+const ACTIVE_BORDER_WIDTH_INNER = 1;
 const DEFAULT_CHOROPLETH_COLOR = Colors.Charts.Sequential.Blue.Color05.Default;
 const COPY_TO_CLIPBOARD_MESSAGES = defineMessages({
   copyActionCoords: {
@@ -84,8 +87,9 @@ const DEFAULT_BASE_LAYER_RULES = {
   exclude: []
 };
 export {
+  ACTIVE_BORDER_WIDTH_INNER,
+  ACTIVE_BORDER_WIDTH_OUTER,
   ACTIVE_COLOR,
-  ACTIVE_STATE_BORDERS_WIDTH,
   BASE_LAYER_FILL_ID,
   BASE_LAYER_IDS,
   BASE_LAYER_LINE_ID,
@@ -94,11 +98,12 @@ export {
   BUBBLE_STROKE,
   CDN_BASE_PATH,
   COPY_TO_CLIPBOARD_MESSAGES,
+  COUNTRY_BORDER_WIDTH,
   DEFAULT_BASE_LAYER_RULES,
   DEFAULT_BASIC_SHAPE_COLOR_TOKEN,
+  DEFAULT_BOUNDARIES_BORDER_COLOR,
   DEFAULT_BUBBLE_COLOR,
   DEFAULT_CHOROPLETH_COLOR,
-  DEFAULT_COUNTRIES_BORDER_COLOR,
   DEFAULT_COUNTRIES_FILL_COLOR,
   DEFAULT_COUNTRY_CODE,
   DEFAULT_FORMATTER,
@@ -129,15 +134,16 @@ export {
   ICON_BACKGROUND_OPACITY,
   ICON_BACKGROUND_RADIUS,
   INCLUDE_ALL_WILDCARD_RULE,
-  LEGEND_DIM_OPACITY,
   MAX_LATITUDE,
   MAX_LINE_THICKNESS,
   MAX_LONGITUDE,
   MIN_LATITUDE,
   MIN_LINE_THICKNESS,
   MIN_LONGITUDE,
-  SHAPE_OPACITY,
+  REGION_BORDER_WIDTH,
+  SHAPE_OPACITY_DEFAULT,
+  SHAPE_OPACITY_DIMMED,
   TRANSPARENT_BORDER_COLOR,
-  WHOLE_WORLD_VIEW_BOUNDARIES
+  WORLD_VIEW_MAX_BOUNDARIES
 };
 //# sourceMappingURL=constants.js.map

package/esm/map/constants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/map/constants.ts"],
-  "sourcesContent": ["import type { ExpressionSpecification } from '@maplibre/maplibre-gl-style-spec';\nimport { defineMessages } from 'react-intl';\n\nimport type { _TruncationMode as TruncationMode } from '@dynatrace/strato-components/typography';\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport type { BaseLayerRules } from './types/base-layer.js';\n\n//region GENERAL\nexport const DEFAULT_COUNTRIES_FILL_COLOR = Colors.Theme.Neutral['50'];\nexport const DEFAULT_COUNTRIES_BORDER_COLOR = Colors.Background.Surface.Default;\nexport const TRANSPARENT_BORDER_COLOR = '#00000000';\nexport const MAX_LATITUDE = 90;\nexport const MIN_LATITUDE = -90;\nexport const MAX_LONGITUDE = 180;\nexport const MIN_LONGITUDE = -180;\nexport const WHOLE_WORLD_VIEW_BOUNDARIES: [number, number, number, number] = [\n  MAX_LONGITUDE,\n  MAX_LATITUDE,\n  MIN_LONGITUDE,\n  MIN_LATITUDE,\n];\nexport const DEFAULT_COUNTRY_CODE = 'default';\nexport const FIT_BOUNDS_OPTIONS = { padding: 20 };\nexport const DEFAULT_MAP_HEIGHT = 400;\nexport const DEFAULT_MAP_LEGEND_RATIO = 'auto';\nexport const DEFAULT_MAP_POSITION = 'auto';\nexport const DEFAULT_INPUT_ICON_SIZE = 20;\nexport const ACTIVE_COLOR = Colors.Border.Neutral.AccentActive;\n\nexport const BASE_LAYER_FILL_ID = 'geojson-fill';\nexport const BASE_LAYER_LINE_ID = 'geojson-line';\nexport const BASE_LAYER_IDS = [BASE_LAYER_LINE_ID, BASE_LAYER_FILL_ID];\nexport const SHAPE_OPACITY = 1;\nexport const DEFAULT_SYMBOL_SIZE = 32;\nexport const FALLBACK_SYMBOL_SIZE = 1;\nexport const DEFAULT_TRUNCATION_MODE = 'middle' as TruncationMode;\n\nexport const CDN_BASE_PATH =\n  'https://dt-cdn.net/scripts/data/worldmap/maps/v003/' as const;\nexport const INCLUDE_ALL_WILDCARD_RULE = '*' as const;\n//endregion\n\n//region LEGEND\nexport const DEFAULT_BASIC_SHAPE_COLOR_TOKEN =\n  Colors.Charts.CategoricalThemed.PurpleRain.Color01;\nexport const DEFAULT_LEGEND_SIZES = {\n  // Minimum size in which the legend can be resized (vertical layout)\n  minWidth: 0.1,\n  // Minimum size in which the legend can be resized (horizontal layout)\n  minHeight: 0.1,\n  // Maximum size in which the legend can be resized (vertical layout). 80% represent 4 / 5ths of the container.\n  maxWidth: 0.8,\n  // Maximum size in which the legend can be resized (horizontal layout). 80% represent 4 / 5ths of the container.\n  maxHeight: 0.8,\n};\nexport const DEFAULT_FORMATTER = {\n  maximumFractionDigits: 1,\n};\nexport const DEFAULT_RANGE_COLOR = Colors.Background.Container.Neutral.Accent;\nexport const LEGEND_DIM_OPACITY = 0.2;\nexport const DEFAULT_SEQUENTIAL_LEGEND_COLOR_PALETTE = 'blue';\n//endregion\n\n//region DOT LAYER\nexport const ICON_BACKGROUND_OPACITY = 0.7;\nexport const ICON_BACKGROUND_RADIUS = 16;\nexport const DEFAULT_ICON_BACKGROUND_COLOR =\n  Colors.Background.Container.Neutral.Subdued;\nexport const DEFAULT_ICON_SIZE_RATIO = 0.6;\nexport const DEFAULT_SHAPE_COLOR = Colors.Charts.Categorical.Color15.Default;\nexport const DEFAULT_ICON_COLOR = Colors.Icon.Neutral.Default;\n//endregion\n\n//region BUBBLE LAYER\nexport const DEFAULT_BUBBLE_COLOR = Colors.Charts.Categorical.Color07.Default;\nexport const DEFAULT_RADIUS = 12;\nexport const BUBBLE_DEFAULT_OPACITY = 0.4;\nexport const BUBBLE_STROKE = 1;\nexport const BUBBLE_OUTLINE_STROKE = 1;\nexport const DEFAULT_RADIUS_EXPRESSION: ExpressionSpecification = [\n  'get',\n  '__radius',\n];\n//endregion\n\n//region CONNECTION LAYER\nexport const DEFAULT_LINE_JOIN: 'bevel' | 'round' | 'miter' = 'miter';\nexport const DEFAULT_LINE_CAP: 'butt' | 'round' | 'square' = 'butt';\nexport const DEFAULT_LINE_THICKNESS = 2;\nexport const DEFAULT_LINE_COLOR = Colors.Charts.Categorical.Color03.Default;\nexport const DEFAULT_LINE_DASH_ARRAY = [5, 2.5];\nexport const MIN_LINE_THICKNESS = 1;\nexport const MAX_LINE_THICKNESS = 64;\nexport const DIRECTION_ICON_OUTPUT_SIZE = 128;\nexport const DIRECTION_ICON_SHRINK_RATIO = 1 / 15;\n//endregion\n\n//region CHOROPLETH LAYER\n\nexport const ACTIVE_STATE_BORDERS_WIDTH = 1.8;\n\nexport const DEFAULT_CHOROPLETH_COLOR =\n  Colors.Charts.Sequential.Blue.Color05.Default;\n\nexport const COPY_TO_CLIPBOARD_MESSAGES = defineMessages({\n  copyActionCoords: {\n    id: 'g2qESM+ibB5sUyjf',\n    defaultMessage: 'Copy coordinates',\n    description:\n      'Text in a tooltip shown when hovering a tooltip item and hovering the copy button next to its coordinates',\n  },\n});\n//endregion\n\n//region BASE LAYER RULES\nexport const DEFAULT_BASE_LAYER_RULES = {\n  include: [INCLUDE_ALL_WILDCARD_RULE],\n  exclude: [],\n} as const as BaseLayerRules;\n\n//endregion\n"],
-  "mappings": "AACA,SAAS,sBAAsB;AAG/B,OAAO,YAAY;AAKZ,MAAM,+BAA+B,OAAO,MAAM,QAAQ,IAAI;AAC9D,MAAM,iCAAiC,OAAO,WAAW,QAAQ;AACjE,MAAM,2BAA2B;AACjC,MAAM,eAAe;AACrB,MAAM,eAAe;AACrB,MAAM,gBAAgB;AACtB,MAAM,gBAAgB;AACtB,MAAM,8BAAgE;AAAA,EAC3E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AACO,MAAM,uBAAuB;AAC7B,MAAM,qBAAqB,EAAE,SAAS,GAAG;AACzC,MAAM,qBAAqB;AAC3B,MAAM,2BAA2B;AACjC,MAAM,uBAAuB;AAC7B,MAAM,0BAA0B;AAChC,MAAM,eAAe,OAAO,OAAO,QAAQ;AAE3C,MAAM,qBAAqB;AAC3B,MAAM,qBAAqB;AAC3B,MAAM,iBAAiB,CAAC,oBAAoB,kBAAkB;AAC9D,MAAM,gBAAgB;AACtB,MAAM,sBAAsB;AAC5B,MAAM,uBAAuB;AAC7B,MAAM,0BAA0B;AAEhC,MAAM,gBACX;AACK,MAAM,4BAA4B;AAIlC,MAAM,kCACX,OAAO,OAAO,kBAAkB,WAAW;AACtC,MAAM,uBAAuB;AAAA;AAAA,EAElC,UAAU;AAAA;AAAA,EAEV,WAAW;AAAA;AAAA,EAEX,UAAU;AAAA;AAAA,EAEV,WAAW;AACb;AACO,MAAM,oBAAoB;AAAA,EAC/B,uBAAuB;AACzB;AACO,MAAM,sBAAsB,OAAO,WAAW,UAAU,QAAQ;AAChE,MAAM,qBAAqB;AAC3B,MAAM,0CAA0C;AAIhD,MAAM,0BAA0B;AAChC,MAAM,yBAAyB;AAC/B,MAAM,gCACX,OAAO,WAAW,UAAU,QAAQ;AAC/B,MAAM,0BAA0B;AAChC,MAAM,sBAAsB,OAAO,OAAO,YAAY,QAAQ;AAC9D,MAAM,qBAAqB,OAAO,KAAK,QAAQ;AAI/C,MAAM,uBAAuB,OAAO,OAAO,YAAY,QAAQ;AAC/D,MAAM,iBAAiB;AACvB,MAAM,yBAAyB;AAC/B,MAAM,gBAAgB;AACtB,MAAM,wBAAwB;AAC9B,MAAM,4BAAqD;AAAA,EAChE;AAAA,EACA;AACF;AAIO,MAAM,oBAAiD;AACvD,MAAM,mBAAgD;AACtD,MAAM,yBAAyB;AAC/B,MAAM,qBAAqB,OAAO,OAAO,YAAY,QAAQ;AAC7D,MAAM,0BAA0B,CAAC,GAAG,GAAG;AACvC,MAAM,qBAAqB;AAC3B,MAAM,qBAAqB;AAC3B,MAAM,6BAA6B;AACnC,MAAM,8BAA8B,IAAI;AAKxC,MAAM,6BAA6B;AAEnC,MAAM,2BACX,OAAO,OAAO,WAAW,KAAK,QAAQ;AAEjC,MAAM,6BAA6B,eAAe;AAAA,EACvD,kBAAkB;AAAA,IAChB,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,aACE;AAAA,EACJ;AACF,CAAC;AAIM,MAAM,2BAA2B;AAAA,EACtC,SAAS,CAAC,yBAAyB;AAAA,EACnC,SAAS,CAAC;AACZ;",
+  "sourcesContent": ["import type { ExpressionSpecification } from '@maplibre/maplibre-gl-style-spec';\nimport { defineMessages } from 'react-intl';\n\nimport type { _TruncationMode as TruncationMode } from '@dynatrace/strato-components/typography';\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport type { BaseLayerRules } from './types/base-layer.js';\n\n//region GENERAL\nexport const DEFAULT_COUNTRIES_FILL_COLOR =\n  Colors.Background.Container.Neutral.Default;\nexport const DEFAULT_BOUNDARIES_BORDER_COLOR = Colors.Border.Neutral.Default;\nexport const COUNTRY_BORDER_WIDTH = 1;\nexport const REGION_BORDER_WIDTH = 0.4;\nexport const TRANSPARENT_BORDER_COLOR = '#00000000';\n\n// region Map max bounds:\n// These bounds hide the space used by Antarctica and some portion of the North Pole\nexport const MAX_LATITUDE = 85;\nexport const MIN_LATITUDE = -60;\nexport const MAX_LONGITUDE = 179.99;\nexport const MIN_LONGITUDE = -179.99;\n// endregion\n\nexport const WORLD_VIEW_MAX_BOUNDARIES: [number, number, number, number] = [\n  MAX_LONGITUDE,\n  MAX_LATITUDE,\n  MIN_LONGITUDE,\n  MIN_LATITUDE,\n];\nexport const DEFAULT_COUNTRY_CODE = 'default';\nexport const FIT_BOUNDS_OPTIONS = { padding: 20 };\nexport const DEFAULT_MAP_HEIGHT = 400;\nexport const DEFAULT_MAP_LEGEND_RATIO = 'auto';\nexport const DEFAULT_MAP_POSITION = 'auto';\nexport const DEFAULT_INPUT_ICON_SIZE = 20;\nexport const ACTIVE_COLOR = Colors.Border.Neutral.Accent;\n\nexport const BASE_LAYER_FILL_ID = 'geojson-fill';\nexport const BASE_LAYER_LINE_ID = 'geojson-line';\nexport const BASE_LAYER_IDS = [BASE_LAYER_LINE_ID, BASE_LAYER_FILL_ID];\nexport const SHAPE_OPACITY_DEFAULT = 1;\nexport const SHAPE_OPACITY_DIMMED = 0.2;\n\nexport const DEFAULT_SYMBOL_SIZE = 32;\nexport const FALLBACK_SYMBOL_SIZE = 1;\nexport const DEFAULT_TRUNCATION_MODE = 'middle' as TruncationMode;\n\nexport const CDN_BASE_PATH =\n  'https://dt-cdn.net/scripts/data/worldmap/maps/v004/' as const;\nexport const INCLUDE_ALL_WILDCARD_RULE = '*' as const;\n//endregion\n\n//region LEGEND\nexport const DEFAULT_BASIC_SHAPE_COLOR_TOKEN =\n  Colors.Charts.CategoricalThemed.PurpleRain.Color01;\nexport const DEFAULT_LEGEND_SIZES = {\n  // Minimum size in which the legend can be resized (vertical layout)\n  minWidth: 0.1,\n  // Minimum size in which the legend can be resized (horizontal layout)\n  minHeight: 0.1,\n  // Maximum size in which the legend can be resized (vertical layout). 80% represent 4 / 5ths of the container.\n  maxWidth: 0.8,\n  // Maximum size in which the legend can be resized (horizontal layout). 80% represent 4 / 5ths of the container.\n  maxHeight: 0.8,\n};\nexport const DEFAULT_FORMATTER = {\n  maximumFractionDigits: 1,\n};\nexport const DEFAULT_RANGE_COLOR = Colors.Background.Container.Neutral.Accent;\nexport const DEFAULT_SEQUENTIAL_LEGEND_COLOR_PALETTE = 'blue';\n//endregion\n\n//region DOT LAYER\nexport const ICON_BACKGROUND_OPACITY = 0.7;\nexport const ICON_BACKGROUND_RADIUS = 16;\nexport const DEFAULT_ICON_BACKGROUND_COLOR =\n  Colors.Background.Container.Neutral.Subdued;\nexport const DEFAULT_ICON_SIZE_RATIO = 0.6;\nexport const DEFAULT_SHAPE_COLOR = Colors.Charts.Categorical.Color15.Default;\nexport const DEFAULT_ICON_COLOR = Colors.Icon.Neutral.Default;\n//endregion\n\n//region BUBBLE LAYER\nexport const DEFAULT_BUBBLE_COLOR = Colors.Charts.Categorical.Color07.Default;\nexport const DEFAULT_RADIUS = 12;\nexport const BUBBLE_DEFAULT_OPACITY = 0.4;\nexport const BUBBLE_STROKE = 1;\nexport const BUBBLE_OUTLINE_STROKE = 1;\nexport const DEFAULT_RADIUS_EXPRESSION: ExpressionSpecification = [\n  'get',\n  '__radius',\n];\n//endregion\n\n//region CONNECTION LAYER\nexport const DEFAULT_LINE_JOIN: 'bevel' | 'round' | 'miter' = 'miter';\nexport const DEFAULT_LINE_CAP: 'butt' | 'round' | 'square' = 'butt';\nexport const DEFAULT_LINE_THICKNESS = 2;\nexport const DEFAULT_LINE_COLOR = Colors.Charts.Categorical.Color03.Default;\nexport const DEFAULT_LINE_DASH_ARRAY = [5, 2.5];\nexport const MIN_LINE_THICKNESS = 1;\nexport const MAX_LINE_THICKNESS = 64;\nexport const DIRECTION_ICON_OUTPUT_SIZE = 128;\nexport const DIRECTION_ICON_SHRINK_RATIO = 1 / 15;\n//endregion\n\n//region CHOROPLETH LAYER\nexport const ACTIVE_BORDER_WIDTH_OUTER = 3;\nexport const ACTIVE_BORDER_WIDTH_INNER = 1;\n\nexport const DEFAULT_CHOROPLETH_COLOR =\n  Colors.Charts.Sequential.Blue.Color05.Default;\n\nexport const COPY_TO_CLIPBOARD_MESSAGES = defineMessages({\n  copyActionCoords: {\n    id: 'g2qESM+ibB5sUyjf',\n    defaultMessage: 'Copy coordinates',\n    description:\n      'Text in a tooltip shown when hovering a tooltip item and hovering the copy button next to its coordinates',\n  },\n});\n//endregion\n\n//region BASE LAYER RULES\nexport const DEFAULT_BASE_LAYER_RULES = {\n  include: [INCLUDE_ALL_WILDCARD_RULE],\n  exclude: [],\n} as const as BaseLayerRules;\n\n//endregion\n"],
+  "mappings": "AACA,SAAS,sBAAsB;AAG/B,OAAO,YAAY;AAKZ,MAAM,+BACX,OAAO,WAAW,UAAU,QAAQ;AAC/B,MAAM,kCAAkC,OAAO,OAAO,QAAQ;AAC9D,MAAM,uBAAuB;AAC7B,MAAM,sBAAsB;AAC5B,MAAM,2BAA2B;AAIjC,MAAM,eAAe;AACrB,MAAM,eAAe;AACrB,MAAM,gBAAgB;AACtB,MAAM,gBAAgB;AAGtB,MAAM,4BAA8D;AAAA,EACzE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AACO,MAAM,uBAAuB;AAC7B,MAAM,qBAAqB,EAAE,SAAS,GAAG;AACzC,MAAM,qBAAqB;AAC3B,MAAM,2BAA2B;AACjC,MAAM,uBAAuB;AAC7B,MAAM,0BAA0B;AAChC,MAAM,eAAe,OAAO,OAAO,QAAQ;AAE3C,MAAM,qBAAqB;AAC3B,MAAM,qBAAqB;AAC3B,MAAM,iBAAiB,CAAC,oBAAoB,kBAAkB;AAC9D,MAAM,wBAAwB;AAC9B,MAAM,uBAAuB;AAE7B,MAAM,sBAAsB;AAC5B,MAAM,uBAAuB;AAC7B,MAAM,0BAA0B;AAEhC,MAAM,gBACX;AACK,MAAM,4BAA4B;AAIlC,MAAM,kCACX,OAAO,OAAO,kBAAkB,WAAW;AACtC,MAAM,uBAAuB;AAAA;AAAA,EAElC,UAAU;AAAA;AAAA,EAEV,WAAW;AAAA;AAAA,EAEX,UAAU;AAAA;AAAA,EAEV,WAAW;AACb;AACO,MAAM,oBAAoB;AAAA,EAC/B,uBAAuB;AACzB;AACO,MAAM,sBAAsB,OAAO,WAAW,UAAU,QAAQ;AAChE,MAAM,0CAA0C;AAIhD,MAAM,0BAA0B;AAChC,MAAM,yBAAyB;AAC/B,MAAM,gCACX,OAAO,WAAW,UAAU,QAAQ;AAC/B,MAAM,0BAA0B;AAChC,MAAM,sBAAsB,OAAO,OAAO,YAAY,QAAQ;AAC9D,MAAM,qBAAqB,OAAO,KAAK,QAAQ;AAI/C,MAAM,uBAAuB,OAAO,OAAO,YAAY,QAAQ;AAC/D,MAAM,iBAAiB;AACvB,MAAM,yBAAyB;AAC/B,MAAM,gBAAgB;AACtB,MAAM,wBAAwB;AAC9B,MAAM,4BAAqD;AAAA,EAChE;AAAA,EACA;AACF;AAIO,MAAM,oBAAiD;AACvD,MAAM,mBAAgD;AACtD,MAAM,yBAAyB;AAC/B,MAAM,qBAAqB,OAAO,OAAO,YAAY,QAAQ;AAC7D,MAAM,0BAA0B,CAAC,GAAG,GAAG;AACvC,MAAM,qBAAqB;AAC3B,MAAM,qBAAqB;AAC3B,MAAM,6BAA6B;AACnC,MAAM,8BAA8B,IAAI;AAIxC,MAAM,4BAA4B;AAClC,MAAM,4BAA4B;AAElC,MAAM,2BACX,OAAO,OAAO,WAAW,KAAK,QAAQ;AAEjC,MAAM,6BAA6B,eAAe;AAAA,EACvD,kBAAkB;AAAA,IAChB,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,aACE;AAAA,EACJ;AACF,CAAC;AAIM,MAAM,2BAA2B;AAAA,EACtC,SAAS,CAAC,yBAAyB;AAAA,EACnC,SAAS,CAAC;AACZ;",
   "names": []
 }

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { WHOLE_WORLD_VIEW_BOUNDARIES } from "../constants.js";
-const MapDataBoundingBoxContext = React.createContext(WHOLE_WORLD_VIEW_BOUNDARIES);
+import { WORLD_VIEW_MAX_BOUNDARIES } from "../constants.js";
+const MapDataBoundingBoxContext = React.createContext(WORLD_VIEW_MAX_BOUNDARIES);
 export {
   MapDataBoundingBoxContext
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/contexts/map-data-bounding-box.context.ts"],
-  "sourcesContent": ["import React from 'react';\n\nimport { WHOLE_WORLD_VIEW_BOUNDARIES } from '../constants.js';\n\nexport const MapDataBoundingBoxContext = React.createContext<\n  [number, number, number, number]\n>(WHOLE_WORLD_VIEW_BOUNDARIES);\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAElB,SAAS,mCAAmC;AAErC,MAAM,4BAA4B,MAAM,cAE7C,2BAA2B;",
+  "sourcesContent": ["import React from 'react';\n\nimport { WORLD_VIEW_MAX_BOUNDARIES } from '../constants.js';\n\nexport const MapDataBoundingBoxContext = React.createContext<\n  [number, number, number, number]\n>(WORLD_VIEW_MAX_BOUNDARIES);\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAElB,SAAS,iCAAiC;AAEnC,MAAM,4BAA4B,MAAM,cAE7C,yBAAyB;",
   "names": []
 }

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

@@ -1,6 +1,6 @@
+import { useMap } from "@vis.gl/react-maplibre";
 import { isNil, isUndefined } from "lodash-es";
 import { useCallback, useEffect } from "react";
-import { useMap } from "react-map-gl/maplibre";
 import { BASE_LAYER_IDS } from "../constants.js";
 const useActiveInteraction = () => {
   const map = useMap().current;
@@ -9,6 +9,7 @@ const useActiveInteraction = () => {
   const handleClick = useCallback(
     ({ point }) => {
       const features = map.queryRenderedFeatures(point);
+      const allFeatures = map.queryRenderedFeatures();
       const layerId = features?.[0]?.layer?.id;
       const hasHoveredFeatures = !isNil(features) && features.length > 0 && !isUndefined(layerId);
       const isBaseLayer = BASE_LAYER_IDS.includes(layerId);
@@ -26,12 +27,24 @@ const useActiveInteraction = () => {
           { source: sourceId, id: featureId },
           { active: !activeState }
         );
+        allFeatures.map(
+          (feature) => map.setFeatureState(
+            { source: feature.layer.source, id: feature.id },
+            { isAnyActive: !activeState }
+          )
+        );
       } else {
         if (!isUndefined(featureId) && !isUndefined(sourceId)) {
           map.setFeatureState(
             { source: sourceId, id: featureId },
             { active: false }
           );
+          allFeatures.map(
+            (feature) => map.setFeatureState(
+              { source: feature.layer.source, id: feature.id },
+              { isAnyActive: false }
+            )
+          );
         }
       }
     },

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/hooks/use-active-interaction.ts"],
-  "sourcesContent": ["import { isNil, isUndefined } from 'lodash-es';\nimport type { MapLayerMouseEvent } from 'maplibre-gl';\nimport { useCallback, useEffect } from 'react';\nimport { useMap } from 'react-map-gl/maplibre';\n\nimport { BASE_LAYER_IDS } from '../constants.js';\n\nexport const useActiveInteraction = () => {\n  const map = useMap().current!;\n\n  let featureId: string | number | undefined;\n  let sourceId: string | undefined;\n  const handleClick = useCallback(\n    ({ point }: MapLayerMouseEvent) => {\n      const features = map.queryRenderedFeatures(point);\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        featureId = features[0].id;\n        sourceId = features[0].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      } 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        }\n      }\n    },\n    [featureId, sourceId, map],\n  );\n\n  useEffect(() => {\n    map.on('click', handleClick);\n    return () => {\n      map.off('click', handleClick);\n    };\n  }, []);\n};\n"],
-  "mappings": "AAAA,SAAS,OAAO,mBAAmB;AAEnC,SAAS,aAAa,iBAAiB;AACvC,SAAS,cAAc;AAEvB,SAAS,sBAAsB;AAExB,MAAM,uBAAuB,MAAM;AACxC,QAAM,MAAM,OAAO,EAAE;AAErB,MAAI;AACJ,MAAI;AACJ,QAAM,cAAc;AAAA,IAClB,CAAC,EAAE,MAAM,MAA0B;AACjC,YAAM,WAAW,IAAI,sBAAsB,KAAK;AAEhD,YAAM,UAAU,WAAW,CAAC,GAAG,OAAO;AAEtC,YAAM,qBACJ,CAAC,MAAM,QAAQ,KAAK,SAAS,SAAS,KAAK,CAAC,YAAY,OAAO;AACjE,YAAM,cAAc,eAAe,SAAS,OAAO;AAEnD,UAAI,sBAAsB,CAAC,aAAa;AACtC,YAAI,CAAC,YAAY,SAAS,KAAK,CAAC,YAAY,QAAQ,GAAG;AAErD,cAAI;AAAA,YACF,EAAE,QAAQ,UAAU,IAAI,UAAU;AAAA,YAClC,EAAE,QAAQ,MAAM;AAAA,UAClB;AAAA,QACF;AAEA,oBAAY,SAAS,CAAC,EAAE;AACxB,mBAAW,SAAS,CAAC,EAAE,MAAM;AAC7B,cAAM,cAAc,SAAS,CAAC,EAAE,MAAM;AAGtC,YAAI;AAAA,UACF,EAAE,QAAQ,UAAU,IAAI,UAAU;AAAA,UAClC,EAAE,QAAQ,CAAC,YAAY;AAAA,QACzB;AAAA,MACF,OAAO;AACL,YAAI,CAAC,YAAY,SAAS,KAAK,CAAC,YAAY,QAAQ,GAAG;AAErD,cAAI;AAAA,YACF,EAAE,QAAQ,UAAU,IAAI,UAAU;AAAA,YAClC,EAAE,QAAQ,MAAM;AAAA,UAClB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,WAAW,UAAU,GAAG;AAAA,EAC3B;AAEA,YAAU,MAAM;AACd,QAAI,GAAG,SAAS,WAAW;AAC3B,WAAO,MAAM;AACX,UAAI,IAAI,SAAS,WAAW;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,CAAC;AACP;",
+  "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';\n\nexport const useActiveInteraction = () => {\n  const map = useMap().current!;\n\n  let featureId: string | number | undefined;\n  let sourceId: string | undefined;\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        featureId = features[0].id;\n        sourceId = features[0].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.map((feature) =>\n          map.setFeatureState(\n            { source: feature.layer.source, id: feature.id },\n            { isAnyActive: !activeState },\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.map((feature) =>\n            map.setFeatureState(\n              { source: feature.layer.source, id: feature.id },\n              { isAnyActive: false },\n            ),\n          );\n        }\n      }\n    },\n    [featureId, sourceId, map],\n  );\n\n  useEffect(() => {\n    map.on('click', handleClick);\n    return () => {\n      map.off('click', handleClick);\n    };\n  }, []);\n};\n"],
+  "mappings": "AAAA,SAAS,cAAc;AACvB,SAAS,OAAO,mBAAmB;AAEnC,SAAS,aAAa,iBAAiB;AAEvC,SAAS,sBAAsB;AAExB,MAAM,uBAAuB,MAAM;AACxC,QAAM,MAAM,OAAO,EAAE;AAErB,MAAI;AACJ,MAAI;AACJ,QAAM,cAAc;AAAA,IAClB,CAAC,EAAE,MAAM,MAA0B;AACjC,YAAM,WAAW,IAAI,sBAAsB,KAAK;AAChD,YAAM,cAAc,IAAI,sBAAsB;AAE9C,YAAM,UAAU,WAAW,CAAC,GAAG,OAAO;AAEtC,YAAM,qBACJ,CAAC,MAAM,QAAQ,KAAK,SAAS,SAAS,KAAK,CAAC,YAAY,OAAO;AACjE,YAAM,cAAc,eAAe,SAAS,OAAO;AAEnD,UAAI,sBAAsB,CAAC,aAAa;AACtC,YAAI,CAAC,YAAY,SAAS,KAAK,CAAC,YAAY,QAAQ,GAAG;AAErD,cAAI;AAAA,YACF,EAAE,QAAQ,UAAU,IAAI,UAAU;AAAA,YAClC,EAAE,QAAQ,MAAM;AAAA,UAClB;AAAA,QACF;AAEA,oBAAY,SAAS,CAAC,EAAE;AACxB,mBAAW,SAAS,CAAC,EAAE,MAAM;AAC7B,cAAM,cAAc,SAAS,CAAC,EAAE,MAAM;AAGtC,YAAI;AAAA,UACF,EAAE,QAAQ,UAAU,IAAI,UAAU;AAAA,UAClC,EAAE,QAAQ,CAAC,YAAY;AAAA,QACzB;AACA,oBAAY;AAAA,UAAI,CAAC,YACf,IAAI;AAAA,YACF,EAAE,QAAQ,QAAQ,MAAM,QAAQ,IAAI,QAAQ,GAAG;AAAA,YAC/C,EAAE,aAAa,CAAC,YAAY;AAAA,UAC9B;AAAA,QACF;AAAA,MACF,OAAO;AACL,YAAI,CAAC,YAAY,SAAS,KAAK,CAAC,YAAY,QAAQ,GAAG;AAErD,cAAI;AAAA,YACF,EAAE,QAAQ,UAAU,IAAI,UAAU;AAAA,YAClC,EAAE,QAAQ,MAAM;AAAA,UAClB;AACA,sBAAY;AAAA,YAAI,CAAC,YACf,IAAI;AAAA,cACF,EAAE,QAAQ,QAAQ,MAAM,QAAQ,IAAI,QAAQ,GAAG;AAAA,cAC/C,EAAE,aAAa,MAAM;AAAA,YACvB;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,WAAW,UAAU,GAAG;AAAA,EAC3B;AAEA,YAAU,MAAM;AACd,QAAI,GAAG,SAAS,WAAW;AAC3B,WAAO,MAAM;AACX,UAAI,IAAI,SAAS,WAAW;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,CAAC;AACP;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
+import { useMap } from "@vis.gl/react-maplibre";
 import { isString } from "lodash-es";
 import { createElement, useLayoutEffect } from "react";
 import { createRoot } from "react-dom/client";
-import { useMap } from "react-map-gl/maplibre";
 import { useSafeSvgParser } from "./use-safe-svg-parser.js";
 import { DEFAULT_INPUT_ICON_SIZE } from "../constants.js";
 import { attachImageToMap } from "../utils/attach-image-to-map.js";
@@ -33,6 +33,9 @@ const useAttachImageFromIcon = (icon, suffix, outputSize) => {
       DEFAULT_INPUT_ICON_SIZE,
       createBitmapConfigOptions(outputSize)
     ).then((bitmap) => {
+      if (!map) {
+        return;
+      }
       const iconName = `custom-icon-${suffix}`;
       attachImageToMap(map, bitmap, iconName);
     });

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 { isString } from 'lodash-es';\nimport { createElement, type ReactNode, useLayoutEffect } from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { useMap } from 'react-map-gl/maplibre';\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  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      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,gBAAgB;AACzB,SAAS,eAA+B,uBAAuB;AAC/D,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAEvB,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;AAClD,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,YAAM,WAAW,eAAe,MAAM;AACtC,uBAAiB,KAAM,QAAQ,QAAQ;AAAA,IACzC,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';\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  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;AAClD,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;",
   "names": []
 }

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

@@ -1,5 +1,5 @@
-import { isNil, isString } from "lodash-es";
-import { useMap } from "react-map-gl/maplibre";
+import { useMap } from "@vis.gl/react-maplibre";
+import { isString, isNil } from "lodash-es";
 import { useAttachImageFromIcon } from "./use-attach-image-from-icon.js";
 import { attachImageFromString } from "../utils/attach-image-from-string.js";
 const useAttachSymbolToMap = (icon, suffix = "", outputSize) => {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/hooks/use-attach-symbol-to-map.ts"],
-  "sourcesContent": ["import { isNil, isString } from 'lodash-es';\nimport type { ReactNode } from 'react';\nimport { useMap } from 'react-map-gl/maplibre';\n\nimport { useAttachImageFromIcon } from './use-attach-image-from-icon.js';\nimport type { MapShape } from '../types/shapes.js';\nimport { attachImageFromString } from '../utils/attach-image-from-string.js';\n\nexport const useAttachSymbolToMap = (\n  icon: string | MapShape | ReactNode,\n  suffix: string = '',\n  outputSize?: number,\n) => {\n  const { current: map } = useMap();\n  const customIconAttached = useAttachImageFromIcon(icon, suffix, outputSize);\n\n  if (isNil(map)) {\n    return null;\n  }\n\n  if (!customIconAttached && isString(icon)) {\n    attachImageFromString(map, icon, suffix, outputSize);\n  }\n};\n"],
-  "mappings": "AAAA,SAAS,OAAO,gBAAgB;AAEhC,SAAS,cAAc;AAEvB,SAAS,8BAA8B;AAEvC,SAAS,6BAA6B;AAE/B,MAAM,uBAAuB,CAClC,MACA,SAAiB,IACjB,eACG;AACH,QAAM,EAAE,SAAS,IAAI,IAAI,OAAO;AAChC,QAAM,qBAAqB,uBAAuB,MAAM,QAAQ,UAAU;AAE1E,MAAI,MAAM,GAAG,GAAG;AACd,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,sBAAsB,SAAS,IAAI,GAAG;AACzC,0BAAsB,KAAK,MAAM,QAAQ,UAAU;AAAA,EACrD;AACF;",
+  "sourcesContent": ["import { useMap } from '@vis.gl/react-maplibre';\nimport { isString, isNil } from 'lodash-es';\nimport type { ReactNode } from 'react';\n\nimport { useAttachImageFromIcon } from './use-attach-image-from-icon.js';\nimport type { MapShape } from '../types/shapes.js';\nimport { attachImageFromString } from '../utils/attach-image-from-string.js';\n\nexport const useAttachSymbolToMap = (\n  icon: string | MapShape | ReactNode,\n  suffix: string = '',\n  outputSize?: number,\n) => {\n  const { current: map } = useMap();\n  const customIconAttached = useAttachImageFromIcon(icon, suffix, outputSize);\n\n  if (isNil(map)) {\n    return null;\n  }\n\n  if (!customIconAttached && isString(icon)) {\n    attachImageFromString(map, icon, suffix, outputSize);\n  }\n};\n"],
+  "mappings": "AAAA,SAAS,cAAc;AACvB,SAAS,UAAU,aAAa;AAGhC,SAAS,8BAA8B;AAEvC,SAAS,6BAA6B;AAE/B,MAAM,uBAAuB,CAClC,MACA,SAAiB,IACjB,eACG;AACH,QAAM,EAAE,SAAS,IAAI,IAAI,OAAO;AAChC,QAAM,qBAAqB,uBAAuB,MAAM,QAAQ,UAAU;AAE1E,MAAI,MAAM,GAAG,GAAG;AACd,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,sBAAsB,SAAS,IAAI,GAAG;AACzC,0BAAsB,KAAK,MAAM,QAAQ,UAAU;AAAA,EACrD;AACF;",
   "names": []
 }

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

@@ -1,6 +1,6 @@
+import { useMap } from "@vis.gl/react-maplibre";
 import { isNil, isString, isUndefined } from "lodash-es";
 import { useCallback, useEffect } from "react";
-import { useMap } from "react-map-gl/maplibre";
 import { BASE_LAYER_IDS } from "../constants.js";
 import {
   getAssociatedFeatures,

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 { isNil, isString, isUndefined } from 'lodash-es';\nimport type { MapLayerMouseEvent } from 'maplibre-gl';\nimport { useCallback, useEffect } from 'react';\nimport type { MapRef } from 'react-map-gl/maplibre';\nimport { useMap } from 'react-map-gl/maplibre';\n\nimport { BASE_LAYER_IDS } from '../constants.js';\nimport {\n  getAssociatedFeatures,\n  hasAssociatedFeatures,\n  isAssociatedFeature,\n} from '../utils/associated-features.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          featureId = features[0].id;\n          sourceId = features[0].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 } 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';\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          featureId = features[0].id;\n          sourceId = features[0].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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",
   "names": []
 }

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

@@ -1,7 +1,8 @@
+import { useMap } from "@vis.gl/react-maplibre";
 import { isUndefined } from "lodash-es";
-import { useMap } from "react-map-gl/maplibre";
 import { useMapSelectionState } from "../store/selectors.js";
 import { isLegendColoring } from "../types/coloring.js";
+import { hasAssociatedFeatures } from "../utils/associated-features.js";
 const useLegendInteractionHighlighting = (props, sourceId) => {
   const { highlightedSeries } = useMapSelectionState();
   const { current: map } = useMap();
@@ -15,6 +16,18 @@ const useLegendInteractionHighlighting = (props, sourceId) => {
         { legendHover: true }
       )
     );
+    if (hasAssociatedFeatures(sourceId)) {
+      const associatedId = `${sourceId}-direction`;
+      const hoveredByLegend2 = map.querySourceFeatures(associatedId, {
+        filter: ["all"]
+      });
+      hoveredByLegend2?.map(
+        (ft) => map.setFeatureState(
+          { source: associatedId, id: ft.id },
+          { legendHover: true }
+        )
+      );
+    }
     if (highlightedSeries) {
       const highlightedSeriesNames = highlightedSeries.map((s) => s.name);
       const hoveredByLegend2 = map.querySourceFeatures(sourceId, {
@@ -26,6 +39,22 @@ const useLegendInteractionHighlighting = (props, sourceId) => {
           { legendHover: false }
         )
       );
+      if (hasAssociatedFeatures(sourceId)) {
+        const associatedId = `${sourceId}-direction`;
+        const hoveredByLegend3 = map.querySourceFeatures(associatedId, {
+          filter: ["!in", props.valueAccessor, ...highlightedSeriesNames]
+        });
+        hoveredByLegend3?.map(
+          (ft) => map.setFeatureState(
+            { source: associatedId, id: ft.id },
+            { legendHover: false }
+          )
+        );
+      }
+    } else {
+      hoveredByLegend?.map(
+        (ft) => map.removeFeatureState({ source: sourceId, id: ft.id }, "legendHover")
+      );
     }
   }
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/hooks/use-legend-interaction-highlighting.ts"],
-  "sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport { useMap } from 'react-map-gl/maplibre';\n\nimport { useMapSelectionState } from '../store/selectors.js';\nimport type { BubbleLayerProps } from '../types/bubble-layer.js';\nimport type { ChoroplethLayerProps } from '../types/choropleth-layer.js';\nimport { isLegendColoring } from '../types/coloring.js';\nimport type { DotLayerProps } from '../types/dot-layer.js';\nimport type { Location } from '../types/location.js';\n\nexport const useLegendInteractionHighlighting = <\n  L extends Location,\n  R extends Record<string, unknown>,\n>(\n  props: DotLayerProps<L> | BubbleLayerProps<L> | ChoroplethLayerProps<R>,\n  sourceId: string,\n) => {\n  const { highlightedSeries } = useMapSelectionState();\n  const { current: map } = useMap();\n\n  if (isLegendColoring(props) && !isUndefined(map)) {\n    // Before highlight, we need to remove previous state (all highlighted symbols)\n    const hoveredByLegend = map.querySourceFeatures(sourceId, {\n      filter: ['all'],\n    });\n    hoveredByLegend?.map((ft) =>\n      map.setFeatureState(\n        { source: sourceId, id: ft.id },\n        { legendHover: true },\n      ),\n    );\n\n    if (highlightedSeries) {\n      const highlightedSeriesNames = highlightedSeries.map((s) => s.name);\n      const hoveredByLegend = map.querySourceFeatures(sourceId, {\n        filter: ['!in', props.valueAccessor, ...highlightedSeriesNames],\n      });\n      hoveredByLegend?.map((ft) =>\n        map.setFeatureState(\n          { source: sourceId, id: ft.id },\n          { legendHover: false },\n        ),\n      );\n    }\n  }\n};\n"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AAEvB,SAAS,4BAA4B;AAGrC,SAAS,wBAAwB;AAI1B,MAAM,mCAAmC,CAI9C,OACA,aACG;AACH,QAAM,EAAE,kBAAkB,IAAI,qBAAqB;AACnD,QAAM,EAAE,SAAS,IAAI,IAAI,OAAO;AAEhC,MAAI,iBAAiB,KAAK,KAAK,CAAC,YAAY,GAAG,GAAG;AAEhD,UAAM,kBAAkB,IAAI,oBAAoB,UAAU;AAAA,MACxD,QAAQ,CAAC,KAAK;AAAA,IAChB,CAAC;AACD,qBAAiB;AAAA,MAAI,CAAC,OACpB,IAAI;AAAA,QACF,EAAE,QAAQ,UAAU,IAAI,GAAG,GAAG;AAAA,QAC9B,EAAE,aAAa,KAAK;AAAA,MACtB;AAAA,IACF;AAEA,QAAI,mBAAmB;AACrB,YAAM,yBAAyB,kBAAkB,IAAI,CAAC,MAAM,EAAE,IAAI;AAClE,YAAMA,mBAAkB,IAAI,oBAAoB,UAAU;AAAA,QACxD,QAAQ,CAAC,OAAO,MAAM,eAAe,GAAG,sBAAsB;AAAA,MAChE,CAAC;AACD,MAAAA,kBAAiB;AAAA,QAAI,CAAC,OACpB,IAAI;AAAA,UACF,EAAE,QAAQ,UAAU,IAAI,GAAG,GAAG;AAAA,UAC9B,EAAE,aAAa,MAAM;AAAA,QACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { useMap } from '@vis.gl/react-maplibre';\nimport { isUndefined } from 'lodash-es';\n\nimport { useMapSelectionState } from '../store/selectors.js';\nimport type { BubbleLayerProps } from '../types/bubble-layer.js';\nimport type { ChoroplethLayerProps } from '../types/choropleth-layer.js';\nimport { isLegendColoring } from '../types/coloring.js';\nimport type {\n  Connection,\n  ConnectionLayerProps,\n} from '../types/connection-layer.js';\nimport type { DotLayerProps } from '../types/dot-layer.js';\nimport type { Location } from '../types/location.js';\nimport { hasAssociatedFeatures } from '../utils/associated-features.js';\n\nexport const useLegendInteractionHighlighting = <\n  L extends Location,\n  C extends Connection,\n  R extends Record<string, unknown>,\n>(\n  props:\n    | DotLayerProps<L>\n    | BubbleLayerProps<L>\n    | ChoroplethLayerProps<R>\n    | ConnectionLayerProps<C>,\n  sourceId: string,\n) => {\n  const { highlightedSeries } = useMapSelectionState();\n\n  const { current: map } = useMap();\n\n  if (isLegendColoring(props) && !isUndefined(map)) {\n    // Before highlight, we need to remove previous state (all highlighted symbols)\n    const hoveredByLegend = map.querySourceFeatures(sourceId, {\n      filter: ['all'],\n    });\n    hoveredByLegend?.map((ft) =>\n      map.setFeatureState(\n        { source: sourceId, id: ft.id },\n        { legendHover: true },\n      ),\n    );\n\n    if (hasAssociatedFeatures(sourceId)) {\n      const associatedId = `${sourceId}-direction`;\n\n      const hoveredByLegend = map.querySourceFeatures(associatedId, {\n        filter: ['all'],\n      });\n\n      hoveredByLegend?.map((ft) =>\n        map.setFeatureState(\n          { source: associatedId, id: ft.id },\n          { legendHover: true },\n        ),\n      );\n    }\n\n    if (highlightedSeries) {\n      const highlightedSeriesNames = highlightedSeries.map((s) => s.name);\n      const hoveredByLegend = map.querySourceFeatures(sourceId, {\n        filter: ['!in', props.valueAccessor, ...highlightedSeriesNames],\n      });\n      hoveredByLegend?.map((ft) =>\n        map.setFeatureState(\n          { source: sourceId, id: ft.id },\n          { legendHover: false },\n        ),\n      );\n\n      if (hasAssociatedFeatures(sourceId)) {\n        const associatedId = `${sourceId}-direction`;\n\n        const hoveredByLegend = map.querySourceFeatures(associatedId, {\n          filter: ['!in', props.valueAccessor, ...highlightedSeriesNames],\n        });\n\n        hoveredByLegend?.map((ft) =>\n          map.setFeatureState(\n            { source: associatedId, id: ft.id },\n            { legendHover: false },\n          ),\n        );\n      }\n    } else {\n      hoveredByLegend?.map((ft) =>\n        map.removeFeatureState({ source: sourceId, id: ft.id }, 'legendHover'),\n      );\n    }\n  }\n};\n"],
+  "mappings": "AAAA,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAE5B,SAAS,4BAA4B;AAGrC,SAAS,wBAAwB;AAOjC,SAAS,6BAA6B;AAE/B,MAAM,mCAAmC,CAK9C,OAKA,aACG;AACH,QAAM,EAAE,kBAAkB,IAAI,qBAAqB;AAEnD,QAAM,EAAE,SAAS,IAAI,IAAI,OAAO;AAEhC,MAAI,iBAAiB,KAAK,KAAK,CAAC,YAAY,GAAG,GAAG;AAEhD,UAAM,kBAAkB,IAAI,oBAAoB,UAAU;AAAA,MACxD,QAAQ,CAAC,KAAK;AAAA,IAChB,CAAC;AACD,qBAAiB;AAAA,MAAI,CAAC,OACpB,IAAI;AAAA,QACF,EAAE,QAAQ,UAAU,IAAI,GAAG,GAAG;AAAA,QAC9B,EAAE,aAAa,KAAK;AAAA,MACtB;AAAA,IACF;AAEA,QAAI,sBAAsB,QAAQ,GAAG;AACnC,YAAM,eAAe,GAAG,QAAQ;AAEhC,YAAMA,mBAAkB,IAAI,oBAAoB,cAAc;AAAA,QAC5D,QAAQ,CAAC,KAAK;AAAA,MAChB,CAAC;AAED,MAAAA,kBAAiB;AAAA,QAAI,CAAC,OACpB,IAAI;AAAA,UACF,EAAE,QAAQ,cAAc,IAAI,GAAG,GAAG;AAAA,UAClC,EAAE,aAAa,KAAK;AAAA,QACtB;AAAA,MACF;AAAA,IACF;AAEA,QAAI,mBAAmB;AACrB,YAAM,yBAAyB,kBAAkB,IAAI,CAAC,MAAM,EAAE,IAAI;AAClE,YAAMA,mBAAkB,IAAI,oBAAoB,UAAU;AAAA,QACxD,QAAQ,CAAC,OAAO,MAAM,eAAe,GAAG,sBAAsB;AAAA,MAChE,CAAC;AACD,MAAAA,kBAAiB;AAAA,QAAI,CAAC,OACpB,IAAI;AAAA,UACF,EAAE,QAAQ,UAAU,IAAI,GAAG,GAAG;AAAA,UAC9B,EAAE,aAAa,MAAM;AAAA,QACvB;AAAA,MACF;AAEA,UAAI,sBAAsB,QAAQ,GAAG;AACnC,cAAM,eAAe,GAAG,QAAQ;AAEhC,cAAMA,mBAAkB,IAAI,oBAAoB,cAAc;AAAA,UAC5D,QAAQ,CAAC,OAAO,MAAM,eAAe,GAAG,sBAAsB;AAAA,QAChE,CAAC;AAED,QAAAA,kBAAiB;AAAA,UAAI,CAAC,OACpB,IAAI;AAAA,YACF,EAAE,QAAQ,cAAc,IAAI,GAAG,GAAG;AAAA,YAClC,EAAE,aAAa,MAAM;AAAA,UACvB;AAAA,QACF;AAAA,MACF;AAAA,IACF,OAAO;AACL,uBAAiB;AAAA,QAAI,CAAC,OACpB,IAAI,mBAAmB,EAAE,QAAQ,UAAU,IAAI,GAAG,GAAG,GAAG,aAAa;AAAA,MACvE;AAAA,IACF;AAAA,EACF;AACF;",
   "names": ["hoveredByLegend"]
 }

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

@@ -1,7 +1,8 @@
+import { useMap } from "@vis.gl/react-maplibre";
 import { isUndefined } from "lodash-es";
-import { useMap } from "react-map-gl/maplibre";
 import { useMapSelectionState } from "../store/selectors.js";
 import { isLegendColoring } from "../types/coloring.js";
+import { hasAssociatedFeatures } from "../utils/associated-features.js";
 const useLegendInteractionVisibility = (props, layerId) => {
   const { visible } = useMapSelectionState();
   const { current: map } = useMap();
@@ -14,6 +15,14 @@ const useLegendInteractionVisibility = (props, layerId) => {
         props.valueAccessor,
         ...visibleCategoriesNames
       ]);
+      if (hasAssociatedFeatures(layerId)) {
+        const associatedId = `${layerId}-direction`;
+        mapInstance.setFilter(associatedId, [
+          "in",
+          props.valueAccessor,
+          ...visibleCategoriesNames
+        ]);
+      }
     } else {
       const layer = map.getLayer(layerId);
       if (!isUndefined(layer)) {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/hooks/use-legend-interaction-visibility.ts"],
-  "sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport { useMap } from 'react-map-gl/maplibre';\n\nimport { useMapSelectionState } from '../store/selectors.js';\nimport type { BubbleLayerProps } from '../types/bubble-layer.js';\nimport type { ChoroplethLayerProps } from '../types/choropleth-layer.js';\nimport { isLegendColoring } from '../types/coloring.js';\nimport type { DotLayerProps } from '../types/dot-layer.js';\nimport type { Location } from '../types/location.js';\n\nexport const useLegendInteractionVisibility = <\n  L extends Location,\n  R extends Record<string, unknown>,\n>(\n  props: DotLayerProps<L> | BubbleLayerProps<L> | ChoroplethLayerProps<R>,\n  layerId: string,\n) => {\n  const { visible } = useMapSelectionState();\n  const { current: map } = useMap();\n\n  if (isLegendColoring(props) && !isUndefined(map)) {\n    if (!isUndefined(visible)) {\n      const mapInstance = map.getMap();\n      const visibleCategoriesNames = visible.map(({ name }) => name);\n      mapInstance.setFilter(layerId, [\n        'in',\n        props.valueAccessor,\n        ...visibleCategoriesNames,\n      ]);\n    } else {\n      const layer = map.getLayer(layerId);\n      if (!isUndefined(layer)) {\n        const mapInstance = map.getMap();\n        mapInstance.setFilter(layerId, null);\n      }\n    }\n  }\n};\n"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AAEvB,SAAS,4BAA4B;AAGrC,SAAS,wBAAwB;AAI1B,MAAM,iCAAiC,CAI5C,OACA,YACG;AACH,QAAM,EAAE,QAAQ,IAAI,qBAAqB;AACzC,QAAM,EAAE,SAAS,IAAI,IAAI,OAAO;AAEhC,MAAI,iBAAiB,KAAK,KAAK,CAAC,YAAY,GAAG,GAAG;AAChD,QAAI,CAAC,YAAY,OAAO,GAAG;AACzB,YAAM,cAAc,IAAI,OAAO;AAC/B,YAAM,yBAAyB,QAAQ,IAAI,CAAC,EAAE,KAAK,MAAM,IAAI;AAC7D,kBAAY,UAAU,SAAS;AAAA,QAC7B;AAAA,QACA,MAAM;AAAA,QACN,GAAG;AAAA,MACL,CAAC;AAAA,IACH,OAAO;AACL,YAAM,QAAQ,IAAI,SAAS,OAAO;AAClC,UAAI,CAAC,YAAY,KAAK,GAAG;AACvB,cAAM,cAAc,IAAI,OAAO;AAC/B,oBAAY,UAAU,SAAS,IAAI;AAAA,MACrC;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { useMap } from '@vis.gl/react-maplibre';\nimport { isUndefined } from 'lodash-es';\n\nimport { useMapSelectionState } from '../store/selectors.js';\nimport type { BubbleLayerProps } from '../types/bubble-layer.js';\nimport type { ChoroplethLayerProps } from '../types/choropleth-layer.js';\nimport { isLegendColoring } from '../types/coloring.js';\nimport { Connection, ConnectionLayerProps } from '../types/connection-layer.js';\nimport type { DotLayerProps } from '../types/dot-layer.js';\nimport type { Location } from '../types/location.js';\nimport { hasAssociatedFeatures } from '../utils/associated-features.js';\n\nexport const useLegendInteractionVisibility = <\n  L extends Location,\n  C extends Connection,\n  R extends Record<string, unknown>,\n>(\n  props:\n    | DotLayerProps<L>\n    | BubbleLayerProps<L>\n    | ChoroplethLayerProps<R>\n    | ConnectionLayerProps<C>,\n  layerId: string,\n) => {\n  const { visible } = useMapSelectionState();\n  const { current: map } = useMap();\n\n  if (isLegendColoring(props) && !isUndefined(map)) {\n    if (!isUndefined(visible)) {\n      const mapInstance = map.getMap();\n      const visibleCategoriesNames = visible.map(({ name }) => name);\n\n      mapInstance.setFilter(layerId, [\n        'in',\n        props.valueAccessor,\n        ...visibleCategoriesNames,\n      ]);\n\n      if (hasAssociatedFeatures(layerId)) {\n        const associatedId = `${layerId}-direction`;\n\n        mapInstance.setFilter(associatedId, [\n          'in',\n          props.valueAccessor,\n          ...visibleCategoriesNames,\n        ]);\n      }\n    } else {\n      const layer = map.getLayer(layerId);\n      if (!isUndefined(layer)) {\n        const mapInstance = map.getMap();\n        mapInstance.setFilter(layerId, null);\n      }\n    }\n  }\n};\n"],
+  "mappings": "AAAA,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAE5B,SAAS,4BAA4B;AAGrC,SAAS,wBAAwB;AAIjC,SAAS,6BAA6B;AAE/B,MAAM,iCAAiC,CAK5C,OAKA,YACG;AACH,QAAM,EAAE,QAAQ,IAAI,qBAAqB;AACzC,QAAM,EAAE,SAAS,IAAI,IAAI,OAAO;AAEhC,MAAI,iBAAiB,KAAK,KAAK,CAAC,YAAY,GAAG,GAAG;AAChD,QAAI,CAAC,YAAY,OAAO,GAAG;AACzB,YAAM,cAAc,IAAI,OAAO;AAC/B,YAAM,yBAAyB,QAAQ,IAAI,CAAC,EAAE,KAAK,MAAM,IAAI;AAE7D,kBAAY,UAAU,SAAS;AAAA,QAC7B;AAAA,QACA,MAAM;AAAA,QACN,GAAG;AAAA,MACL,CAAC;AAED,UAAI,sBAAsB,OAAO,GAAG;AAClC,cAAM,eAAe,GAAG,OAAO;AAE/B,oBAAY,UAAU,cAAc;AAAA,UAClC;AAAA,UACA,MAAM;AAAA,UACN,GAAG;AAAA,QACL,CAAC;AAAA,MACH;AAAA,IACF,OAAO;AACL,YAAM,QAAQ,IAAI,SAAS,OAAO;AAClC,UAAI,CAAC,YAAY,KAAK,GAAG;AACvB,cAAM,cAAc,IAAI,OAAO;AAC/B,oBAAY,UAAU,SAAS,IAAI;AAAA,MACrC;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }