diff --git a/src/components/map/map-control.js b/src/components/map/map-control.js
index cda3c9ef2c..bb3e184f08 100644
--- a/src/components/map/map-control.js
+++ b/src/components/map/map-control.js
@@ -125,29 +125,34 @@ const MapLegendTooltip = ({id, message}) => (
);
/** @type {import('./map-control').LayerSelectorPanelComponent} */
-const LayerSelectorPanel = React.memo(({items, onMapToggleLayer, isActive, toggleMenuPanel}) =>
- !isActive ? (
- ( {
- e.preventDefault();
- toggleMenuPanel();
- }}
- className="map-control-button toggle-layer"
- data-tip
- data-for="toggle-layer"
- >
-
-
- )
- ) : (
- (
-
- )
- )
+const LayerSelectorPanel = React.memo(
+ ({items, onMapToggleLayer, isActive, toggleMenuPanel, disableClose}) =>
+ !isActive ? (
+ ( {
+ e.preventDefault();
+ toggleMenuPanel();
+ }}
+ className="map-control-button toggle-layer"
+ data-tip
+ data-for="toggle-layer"
+ >
+
+
+ )
+ ) : (
+ (
+
+ )
+ )
);
LayerSelectorPanel.displayName = 'LayerSelectorPanel';
@@ -372,7 +377,7 @@ export function MapDrawPanelFactory() {
/** @type {import('./map-control').LocalePanelComponent} */
const LocalePanel = React.memo(
- ({availableLocales, isActive, onToggleMenuPanel, onSetLocale, activeLocale}) => {
+ ({availableLocales, isActive, onToggleMenuPanel, onSetLocale, activeLocale, disableClose}) => {
const onClickItem = useCallback(
locale => {
onSetLocale(locale);
@@ -403,7 +408,13 @@ const LocalePanel = React.memo(
))}
) : null}
-
+
{activeLocale.toUpperCase()}
@@ -522,6 +533,7 @@ function MapControlFactory(MapDrawPanel, Toggle3dButton, SplitMapButton, MapLege
onMapToggleLayer={onMapToggleLayer}
isActive={visibleLayers.active}
toggleMenuPanel={() => onToggleMapControl('visibleLayers')}
+ disableClose={visibleLayers.disableClose}
/>
) : null}
diff --git a/src/reducers/ui-state-updaters.d.ts b/src/reducers/ui-state-updaters.d.ts
index 4b147ce096..2a407daf36 100644
--- a/src/reducers/ui-state-updaters.d.ts
+++ b/src/reducers/ui-state-updaters.d.ts
@@ -44,7 +44,8 @@ export type ExportMap = {
export type MapControl = {
show: boolean;
active: boolean;
- activeMapIndex: number;
+ disableClose?: boolean;
+ activeMapIndex?: number;
};
export type MapControls = {
visibleLayers: MapControl;
diff --git a/src/reducers/ui-state-updaters.js b/src/reducers/ui-state-updaters.js
index a39d418344..6edb2c2b45 100644
--- a/src/reducers/ui-state-updaters.js
+++ b/src/reducers/ui-state-updaters.js
@@ -81,6 +81,7 @@ const uiStateUpdaters = null;
const DEFAULT_MAP_CONTROLS_FEATURES = {
show: true,
active: false,
+ disableClose: false,
// defines which map index users are interacting with (through map controls)
activeMapIndex: 0
};
diff --git a/test/node/reducers/ui-state-test.js b/test/node/reducers/ui-state-test.js
index 6960fbe9b1..f5234bdb6e 100644
--- a/test/node/reducers/ui-state-test.js
+++ b/test/node/reducers/ui-state-test.js
@@ -169,7 +169,7 @@ test('#uiStateReducer -> TOGGLE_MAP_CONTROL', t => {
mapControls: {
...INITIAL_UI_STATE.mapControls,
mapLegend: {
- show: INITIAL_UI_STATE.mapControls.mapLegend.show,
+ ...INITIAL_UI_STATE.mapControls.mapLegend,
active: !INITIAL_UI_STATE.mapControls.mapLegend.active,
activeMapIndex: 0
}