[Maps] Feature/hide view/layer control in embeddable (#53469)

* Added options to hide layer/view controls

* remove event attachments

Author: shahzad31

x-pack/legacy/plugins/maps/public/actions/map_actions.js

@@ -70,6 +70,8 @@ export const SET_MAP_INIT_ERROR = 'SET_MAP_INIT_ERROR';
 export const SET_INTERACTIVE = 'SET_INTERACTIVE';
 export const DISABLE_TOOLTIP_CONTROL = 'DISABLE_TOOLTIP_CONTROL';
 export const HIDE_TOOLBAR_OVERLAY = 'HIDE_TOOLBAR_OVERLAY';
+export const HIDE_LAYER_CONTROL = 'HIDE_LAYER_CONTROL';
+export const HIDE_VIEW_CONTROL = 'HIDE_VIEW_CONTROL';
 
 function getLayerLoadingCallbacks(dispatch, layerId) {
   return {
@@ -831,3 +833,10 @@ export function disableTooltipControl() {
 export function hideToolbarOverlay() {
   return { type: HIDE_TOOLBAR_OVERLAY, hideToolbarOverlay: true };
 }
+
+export function hideLayerControl() {
+  return { type: HIDE_LAYER_CONTROL, hideLayerControl: true };
+}
+export function hideViewControl() {
+  return { type: HIDE_VIEW_CONTROL, hideViewControl: true };
+}

x-pack/legacy/plugins/maps/public/connected_components/map/mb/index.js

@@ -23,6 +23,7 @@ import {
   getScrollZoom,
   isInteractiveDisabled,
   isTooltipControlDisabled,
+  isViewControlHidden,
 } from '../../../selectors/map_selectors';
 import { getInspectorAdapters } from '../../../reducers/non_serializable_instances';
 
@@ -36,6 +37,8 @@ function mapStateToProps(state = {}) {
     scrollZoom: getScrollZoom(state),
     disableInteractive: isInteractiveDisabled(state),
     disableTooltipControl: isTooltipControlDisabled(state),
+    disableTooltipControl: isTooltipControlDisabled(state),
+    hideViewControl: isViewControlHidden(state),
   };
 }
 

x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js

@@ -188,18 +188,20 @@ export class MBMapContainer extends React.Component {
         this.props.extentChanged(this._getMapState());
       }, 100)
     );
-
-    const throttledSetMouseCoordinates = _.throttle(e => {
-      this.props.setMouseCoordinates({
-        lat: e.lngLat.lat,
-        lon: e.lngLat.lng,
+    // Attach event only if view control is visible, which shows lat/lon
+    if (!this.props.hideViewControl) {
+      const throttledSetMouseCoordinates = _.throttle(e => {
+        this.props.setMouseCoordinates({
+          lat: e.lngLat.lat,
+          lon: e.lngLat.lng,
+        });
+      }, 100);
+      this.state.mbMap.on('mousemove', throttledSetMouseCoordinates);
+      this.state.mbMap.on('mouseout', () => {
+        throttledSetMouseCoordinates.cancel(); // cancel any delayed setMouseCoordinates invocations
+        this.props.clearMouseCoordinates();
       });
-    }, 100);
-    this.state.mbMap.on('mousemove', throttledSetMouseCoordinates);
-    this.state.mbMap.on('mouseout', () => {
-      throttledSetMouseCoordinates.cancel(); // cancel any delayed setMouseCoordinates invocations
-      this.props.clearMouseCoordinates();
-    });
+    }
   }
 
   _initResizerChecker() {

x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/index.js

@@ -7,5 +7,14 @@
 import { connect } from 'react-redux';
 import { WidgetOverlay } from './widget_overlay';
 
-const connectedWidgetOverlay = connect(null, null)(WidgetOverlay);
+import { isLayerControlHidden, isViewControlHidden } from '../../selectors/map_selectors';
+
+function mapStateToProps(state = {}) {
+  return {
+    hideLayerControl: isLayerControlHidden(state),
+    hideViewControl: isViewControlHidden(state),
+  };
+}
+
+const connectedWidgetOverlay = connect(mapStateToProps, null)(WidgetOverlay);
 export { connectedWidgetOverlay as WidgetOverlay };

x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/widget_overlay.js

@@ -10,7 +10,7 @@ import { LayerControl } from './layer_control';
 import { ViewControl } from './view_control';
 import { AttributionControl } from './attribution_control';
 
-export function WidgetOverlay() {
+export function WidgetOverlay({ hideLayerControl, hideViewControl }) {
   return (
     <EuiFlexGroup
       className="mapWidgetOverlay"
@@ -20,11 +20,9 @@ export function WidgetOverlay() {
       gutterSize="s"
     >
       <EuiFlexItem className="mapWidgetOverlay__layerWrapper">
-        <LayerControl />
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <ViewControl />
+        {!hideLayerControl && <LayerControl />}
       </EuiFlexItem>
+      <EuiFlexItem grow={false}>{!hideViewControl && <ViewControl />}</EuiFlexItem>
       <EuiFlexItem grow={false}>
         <AttributionControl />
       </EuiFlexItem>

x-pack/legacy/plugins/maps/public/embeddable/README.md

@@ -7,6 +7,8 @@
 - **disableInteractive:** (Boolean) Will disable map interactions, panning, zooming in the map.
 - **disableTooltipControl:** (Boolean) Will disable tooltip which shows relevant information on hover, like Continent name etc
 - **hideToolbarOverlay:** (Boolean) Will disable toolbar, which can be used to navigate to coordinate by entering lat/long and zoom values.
+- **hideLayerControl:** (Boolean) Will hide useful layer control, which can be used to hide/show a layer to get a refined view of the map.
+- **hideViewControl:** (Boolean) Will hide view control at bottom right of the map, which shows lat/lon values based on mouse hover in the map, this is useful to get coordinate value from a particular point in map.
 
 ### Creating a Map embeddable from saved object
 ```

x-pack/legacy/plugins/maps/public/embeddable/map_embeddable.js

@@ -30,6 +30,8 @@ import {
   disableInteractive,
   disableTooltipControl,
   hideToolbarOverlay,
+  hideLayerControl,
+  hideViewControl,
 } from '../actions/map_actions';
 import { setReadOnly, setIsLayerTOCOpen, setOpenTOCDetails } from '../actions/ui_actions';
 import { getIsLayerTOCOpen, getOpenTOCDetails } from '../selectors/ui_selectors';
@@ -132,6 +134,14 @@ export class MapEmbeddable extends Embeddable {
       this._store.dispatch(hideToolbarOverlay(this.input.hideToolbarOverlay));
     }
 
+    if (_.has(this.input, 'hideLayerControl') && this.input.hideLayerControl) {
+      this._store.dispatch(hideLayerControl(this.input.hideLayerControl));
+    }
+
+    if (_.has(this.input, 'hideViewControl') && this.input.hideViewControl) {
+      this._store.dispatch(hideViewControl(this.input.hideViewControl));
+    }
+
     if (this.input.mapCenter) {
       this._store.dispatch(
         setGotoWithCenter({

x-pack/legacy/plugins/maps/public/reducers/map.js

@@ -44,6 +44,8 @@ import {
   SET_INTERACTIVE,
   DISABLE_TOOLTIP_CONTROL,
   HIDE_TOOLBAR_OVERLAY,
+  HIDE_LAYER_CONTROL,
+  HIDE_VIEW_CONTROL,
 } from '../actions/map_actions';
 
 import { copyPersistentState, TRACKED_LAYER_DESCRIPTOR } from './util';
@@ -113,6 +115,8 @@ const INITIAL_STATE = {
     disableInteractive: false,
     disableTooltipControl: false,
     hideToolbarOverlay: false,
+    hideLayerControl: false,
+    hideViewControl: false,
   },
   selectedLayerId: null,
   __transientLayerId: null,
@@ -356,6 +360,22 @@ export function map(state = INITIAL_STATE, action) {
           hideToolbarOverlay: action.hideToolbarOverlay,
         },
       };
+    case HIDE_LAYER_CONTROL:
+      return {
+        ...state,
+        mapState: {
+          ...state.mapState,
+          hideLayerControl: action.hideLayerControl,
+        },
+      };
+    case HIDE_VIEW_CONTROL:
+      return {
+        ...state,
+        mapState: {
+          ...state.mapState,
+          hideViewControl: action.hideViewControl,
+        },
+      };
     default:
       return state;
   }

x-pack/legacy/plugins/maps/public/selectors/map_selectors.js

@@ -71,6 +71,10 @@ export const isTooltipControlDisabled = ({ map }) => map.mapState.disableTooltip
 
 export const isToolbarOverlayHidden = ({ map }) => map.mapState.hideToolbarOverlay;
 
+export const isLayerControlHidden = ({ map }) => map.mapState.hideLayerControl;
+
+export const isViewControlHidden = ({ map }) => map.mapState.hideViewControl;
+
 export const getMapExtent = ({ map }) => (map.mapState.extent ? map.mapState.extent : {});
 
 export const getMapBuffer = ({ map }) => (map.mapState.buffer ? map.mapState.buffer : {});