[Feat] add setMapControlVisibility action to set mapControl visibility

src/actions/ui-state-actions.d.ts

@@ -57,10 +57,23 @@ export type ToggleMapControlUpdaterAction = {
   };
 };
 export function toggleMapControl(
-  panelId,
-  index
+  panelId: string,
+  index: number
 ): Merge<ToggleMapControlUpdaterAction, {type: ActionTypes.TOGGLE_MAP_CONTROL}>;
 
+
+/** SET_MAP_CONTROL_VISIBILITY */
+export type setMapControlVisibilityUpdaterAction = {
+  payload: {
+    panelId: string;
+    show: boolean;
+  };
+};
+export function setMapControlVisibility(
+  panelId: string,
+  show: boolean
+): Merge<setMapControlVisibilityUpdaterAction, {type: ActionTypes.SET_MAP_CONTROL_VISIBILITY}>;
+
 /** OPEN_DELETE_MODAL */
 export type OpenDeleteModalUpdaterAction = {
   payload: string;

src/actions/ui-state-actions.js

@@ -74,6 +74,21 @@ export const toggleMapControl = createAction(ActionTypes.TOGGLE_MAP_CONTROL, (pa
   index
 }));
 
+/**
+ * Toggle active map control panel
+ * @memberof uiStateActions
+ * @param panelId - map control panel id, one of the keys of: [`DEFAULT_MAP_CONTROLS`](#default_map_controls)
+ * @type {typeof import('./ui-state-actions').setMapControlVisibility}
+ * @public
+ */
+export const setMapControlVisibility = createAction(
+  ActionTypes.SET_MAP_CONTROL_VISIBILITY,
+  (panelId, show) => ({
+    panelId,
+    show
+  })
+);
+
 /**
  * Toggle active map control panel
  * @memberof uiStateActions

src/components/index.js

@@ -91,7 +91,11 @@ export {default as LayerSelectorPanelFactory} from './map/layer-selector-panel';
 export {default as LocalePanelFactory} from './map/locale-panel';
 export {default as MapControlPanelFactory} from './map/map-control-panel';
 export {default as MapControlTooltipFactory} from './map/map-control-tooltip';
-export {default as MapLegendFactory} from './map/map-legend';
+export {
+  default as MapLegendFactory,
+  LayerLegendHeaderFactory,
+  LayerLegendContentFactory
+} from './map/map-legend';
 export {default as MapDrawPanelFactory} from './map/map-draw-panel';
 export {default as SplitMapButtonFactory} from './map/split-map-button';
 export {default as MapLegendPanelFactory} from './map/map-legend-panel';

src/constants/action-types.d.ts

@@ -87,6 +87,7 @@ export type ActionType = {
   HIDE_EXPORT_DROPDOWN: string;
   OPEN_DELETE_MODAL: string;
   TOGGLE_MAP_CONTROL: string;
+  SET_MAP_CONTROL_VISIBILITY: string;
   ADD_NOTIFICATION: string;
   REMOVE_NOTIFICATION: string;
   SET_LOCALE: string;

src/constants/action-types.js

@@ -138,6 +138,7 @@ const ActionTypes = {
   HIDE_EXPORT_DROPDOWN: `${ACTION_PREFIX}HIDE_EXPORT_DROPDOWN`,
   OPEN_DELETE_MODAL: `${ACTION_PREFIX}OPEN_DELETE_MODAL`,
   TOGGLE_MAP_CONTROL: `${ACTION_PREFIX}TOGGLE_MAP_CONTROL`,
+  SET_MAP_CONTROL_VISIBILITY: `${ACTION_PREFIX}SET_MAP_CONTROL_VISIBILITY`,
   ADD_NOTIFICATION: `${ACTION_PREFIX}ADD_NOTIFICATION`,
   REMOVE_NOTIFICATION: `${ACTION_PREFIX}REMOVE_NOTIFICATION`,
   SET_LOCALE: `${ACTION_PREFIX}SET_LOCALE`,

src/constants/default-settings.js

@@ -884,3 +884,13 @@ export const DATASET_FORMATS = keyMirror({
   csv: null,
   keplergl: null
 });
+
+export const MAP_CONTROLS = keyMirror({
+  visibleLayers: null,
+  mapLegend: null,
+  toggle3d: null,
+  toggleGlobe: null,
+  splitMap: null,
+  mapDraw: null,
+  mapLocale: null
+});

src/constants/index.js

@@ -63,7 +63,8 @@ export {
   DEFAULT_TIME_FORMAT,
   SPEED_CONTROL_RANGE,
   RESOLUTIONS,
-  SORT_ORDER
+  SORT_ORDER,
+  MAP_CONTROLS
 } from './default-settings';
 
 export {BUG_REPORT_LINK, USER_GUIDE_DOC} from './user-guides';

src/reducers/ui-state-updaters.d.ts

@@ -115,6 +115,10 @@ export function toggleMapControlUpdater(
   state: UiState,
   action: UiStateActions.ToggleMapControlUpdaterAction
 ): UiState;
+export function setMapControlVisibilityUpdater(
+  state: UiState,
+  action: UiStateActions.setMapControlVisibilityUpdaterAction
+): UiState;
 export function openDeleteModalUpdater(
   state: UiState,
   action: UiStateActions.OpenDeleteModalUpdaterAction

src/reducers/ui-state-updaters.js

@@ -28,7 +28,8 @@ import {
   EXPORT_HTML_MAP_MODES,
   EXPORT_IMG_RATIOS,
   EXPORT_MAP_FORMATS,
-  RESOLUTIONS
+  RESOLUTIONS,
+  MAP_CONTROLS
 } from 'constants/default-settings';
 import {LOCALE_CODES} from 'localization/locales';
 import {createNotification, errorNotification} from 'utils/notifications-utils';
@@ -99,14 +100,7 @@ const DEFAULT_MAP_CONTROLS_FEATURES = {
  * @type {import('./ui-state-updaters').MapControls}
  * @public
  */
-export const DEFAULT_MAP_CONTROLS = [
-  'visibleLayers',
-  'mapLegend',
-  'toggle3d',
-  'splitMap',
-  'mapDraw',
-  'mapLocale'
-].reduce(
+export const DEFAULT_MAP_CONTROLS = Object.keys(MAP_CONTROLS).reduce(
   (final, current) => ({
     ...final,
     [current]: DEFAULT_MAP_CONTROLS_FEATURES
@@ -359,6 +353,33 @@ export const toggleMapControlUpdater = (state, {payload: {panelId, index = 0}})
   }
 });
 
+/**
+ * Toggle map control visibility
+ * @memberof uiStateUpdaters
+ * @param state `uiState`
+ * @param action action
+ * @param action.payload map control panel id, one of the keys of: [`DEFAULT_MAP_CONTROLS`](#default_map_controls)
+ * @returns nextState
+ * @type {typeof import('./ui-state-updaters').setMapControlVisibilityUpdater}
+ * @public
+ */
+export const setMapControlVisibilityUpdater = (state, {payload: {panelId, show}}) => {
+  if (!state.mapControls?.[panelId]) {
+    return state;
+  }
+
+  return {
+    ...state,
+    mapControls: {
+      ...state.mapControls,
+      [panelId]: {
+        ...state.mapControls[panelId],
+        show: Boolean(show)
+      }
+    }
+  };
+};
+
 /**
  * Toggle active map control panel
  * @memberof uiStateUpdaters

src/reducers/ui-state.js

@@ -34,6 +34,7 @@ const actionHandler = {
   [ActionTypes.HIDE_EXPORT_DROPDOWN]: uiStateUpdaters.hideExportDropdownUpdater,
   [ActionTypes.OPEN_DELETE_MODAL]: uiStateUpdaters.openDeleteModalUpdater,
   [ActionTypes.TOGGLE_MAP_CONTROL]: uiStateUpdaters.toggleMapControlUpdater,
+  [ActionTypes.SET_MAP_CONTROL_VISIBILITY]: uiStateUpdaters.setMapControlVisibilityUpdater,
   [ActionTypes.ADD_NOTIFICATION]: uiStateUpdaters.addNotificationUpdater,
   [ActionTypes.REMOVE_NOTIFICATION]: uiStateUpdaters.removeNotificationUpdater,
 

test/node/reducers/ui-state-test.js

@@ -26,6 +26,7 @@ import {
   openDeleteModal,
   setExportImageSetting,
   toggleMapControl,
+  setMapControlVisibility,
   setExportSelectedDataset,
   setExportDataType,
   setExportFiltered,
@@ -181,6 +182,36 @@ test('#uiStateReducer -> TOGGLE_MAP_CONTROL', t => {
   t.end();
 });
 
+test('#uiStateReducer -> SET_MAP_CONTROL_VISIBILITY', t => {
+  const newReducer = reducer(INITIAL_UI_STATE, setMapControlVisibility('mapLegend', false));
+
+  const expectedMapControl = {
+    ...INITIAL_UI_STATE.mapControls,
+    mapLegend: {
+      ...INITIAL_UI_STATE.mapControls.mapLegend,
+      show: false
+    }
+  };
+
+  t.deepEqual(newReducer.mapControls, expectedMapControl, 'should set map legend show to be false');
+
+  const newReducer1 = reducer(newReducer, setMapControlVisibility('mapLegend', true));
+
+  const expectedMapControl1 = {
+    ...INITIAL_UI_STATE.mapControls,
+    mapLegend: {
+      ...INITIAL_UI_STATE.mapControls.mapLegend,
+      show: true
+    }
+  };
+
+  t.deepEqual(newReducer1.mapControls, expectedMapControl1, 'should set map legend show to true');
+
+  const newReducer2 = reducer(newReducer1, setMapControlVisibility('something', true));
+  t.equal(newReducer1, newReducer2, 'should note update state');
+  t.end();
+});
+
 test('#uiStateReducer -> SET_EXPORT_SELECTED_DATASET', t => {
   const newReducer = reducer(INITIAL_UI_STATE, setExportSelectedDataset('a'));