[Maps] Map settings: min and max zoom

x-pack/legacy/plugins/maps/public/angular/map_controller.js

@@ -39,6 +39,7 @@ import {
   replaceLayerList,
   setQuery,
   clearTransientLayerStateAndCloseFlyout,
+  setMapSettings,
   // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 } from '../../../../../plugins/maps/public/actions/map_actions';
 import {
@@ -52,10 +53,11 @@ import {
   setReadOnly,
   setIsLayerTOCOpen,
   setOpenTOCDetails,
+  openMapSettings,
   // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 } from '../../../../../plugins/maps/public/actions/ui_actions';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { getIsFullScreen } from '../../../../../plugins/maps/public/selectors/ui_selectors';
+import { getIsFullScreen, getFlyoutDisplay } from '../../../../../plugins/maps/public/selectors/ui_selectors';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { copyPersistentState } from '../../../../../plugins/maps/public/reducers/util';
 import {
@@ -395,6 +397,9 @@ app.controller(
         if (mapState.filters) {
           savedObjectFilters = mapState.filters;
         }
+        if (mapState.settings) {
+          store.dispatch(setMapSettings(mapState.settings));
+        }
       }
 
       if (savedMap.uiStateJSON) {
@@ -453,6 +458,7 @@ app.controller(
 
     $scope.isFullScreen = false;
     $scope.isSaveDisabled = false;
+    $scope.isOpenSettingsDisabled = false;
     function handleStoreChanges(store) {
       const nextIsFullScreen = getIsFullScreen(store.getState());
       if (nextIsFullScreen !== $scope.isFullScreen) {
@@ -474,6 +480,14 @@ app.controller(
           $scope.isSaveDisabled = nextIsSaveDisabled;
         });
       }
+
+      const flyoutDisplay = getFlyoutDisplay(store.getState());
+      const nextIsOpenSettingsDisabled = flyoutDisplay !== FLYOUT_STATE.NONE;
+      if (nextIsOpenSettingsDisabled !== $scope.isOpenSettingsDisabled) {
+        $scope.$evalAsync(() => {
+          $scope.isOpenSettingsDisabled = nextIsOpenSettingsDisabled;
+        });
+      }
     }
 
     $scope.$on('$destroy', () => {
@@ -651,6 +665,22 @@ app.controller(
             },
           ]
         : []),
+      {
+        id: 'mapSettings',
+        label: i18n.translate('xpack.maps.mapController.openSettingsButtonLabel', {
+          defaultMessage: `Settings`,
+        }),
+        description: i18n.translate('xpack.maps.mapController.openSettingsDescription', {
+          defaultMessage: `Open settings`,
+        }),
+        testId: 'openSettingsButton',
+        disableButton() {
+          return $scope.isOpenSettingsDisabled;
+        },
+        run() {
+          store.dispatch(openMapSettings());
+        },
+      },
     ];
   }
 );

x-pack/plugins/maps/public/actions/map_actions.d.ts

@@ -14,6 +14,7 @@ import {
   MapCenterAndZoom,
   MapRefreshConfig,
 } from '../../common/descriptor_types';
+import { MapSettings } from '../reducers/map';
 
 export type SyncContext = {
   startLoading(dataId: string, requestToken: symbol, meta: DataMeta): void;
@@ -62,3 +63,14 @@ export function hideViewControl(): AnyAction;
 export function setHiddenLayers(hiddenLayerIds: string[]): AnyAction;
 
 export function addLayerWithoutDataSync(layerDescriptor: unknown): AnyAction;
+
+export function setMapSettings(settings: MapSettings): AnyAction;
+
+export function rollbackMapSettings(): AnyAction;
+
+export function trackMapSettings(): AnyAction;
+
+export function updateMapSetting(
+  settingKey: string,
+  settingValue: string | boolean | number
+): AnyAction;

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

@@ -76,6 +76,10 @@ export const HIDE_TOOLBAR_OVERLAY = 'HIDE_TOOLBAR_OVERLAY';
 export const HIDE_LAYER_CONTROL = 'HIDE_LAYER_CONTROL';
 export const HIDE_VIEW_CONTROL = 'HIDE_VIEW_CONTROL';
 export const SET_WAITING_FOR_READY_HIDDEN_LAYERS = 'SET_WAITING_FOR_READY_HIDDEN_LAYERS';
+export const SET_MAP_SETTINGS = 'SET_MAP_SETTINGS';
+export const ROLLBACK_MAP_SETTINGS = 'ROLLBACK_MAP_SETTINGS';
+export const TRACK_MAP_SETTINGS = 'TRACK_MAP_SETTINGS';
+export const UPDATE_MAP_SETTING = 'UPDATE_MAP_SETTING';
 
 function getLayerLoadingCallbacks(dispatch, getState, layerId) {
   return {
@@ -145,6 +149,29 @@ export function setMapInitError(errorMessage) {
   };
 }
 
+export function setMapSettings(settings) {
+  return {
+    type: SET_MAP_SETTINGS,
+    settings,
+  };
+}
+
+export function rollbackMapSettings() {
+  return { type: ROLLBACK_MAP_SETTINGS };
+}
+
+export function trackMapSettings() {
+  return { type: TRACK_MAP_SETTINGS };
+}
+
+export function updateMapSetting(settingKey, settingValue) {
+  return {
+    type: UPDATE_MAP_SETTING,
+    settingKey,
+    settingValue,
+  };
+}
+
 export function trackCurrentLayerState(layerId) {
   return {
     type: TRACK_CURRENT_LAYER_STATE,

x-pack/plugins/maps/public/actions/ui_actions.d.ts

@@ -5,6 +5,7 @@
  */
 
 import { AnyAction } from 'redux';
+import { FLYOUT_STATE } from '../reducers/ui';
 
 export const UPDATE_FLYOUT: string;
 export const CLOSE_SET_VIEW: string;
@@ -17,6 +18,8 @@ export const SHOW_TOC_DETAILS: string;
 export const HIDE_TOC_DETAILS: string;
 export const UPDATE_INDEXING_STAGE: string;
 
+export function updateFlyout(display: FLYOUT_STATE): AnyAction;
+
 export function setOpenTOCDetails(layerIds?: string[]): AnyAction;
 
 export function setIsLayerTOCOpen(open: boolean): AnyAction;

x-pack/plugins/maps/public/actions/ui_actions.js

@@ -4,6 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { getFlyoutDisplay } from '../selectors/ui_selectors';
+import { FLYOUT_STATE } from '../reducers/ui';
+import { setSelectedLayer, trackMapSettings } from './map_actions';
+
 export const UPDATE_FLYOUT = 'UPDATE_FLYOUT';
 export const CLOSE_SET_VIEW = 'CLOSE_SET_VIEW';
 export const OPEN_SET_VIEW = 'OPEN_SET_VIEW';
@@ -28,6 +32,17 @@ export function updateFlyout(display) {
     display,
   };
 }
+export function openMapSettings() {
+  return (dispatch, getState) => {
+    const flyoutDisplay = getFlyoutDisplay(getState());
+    if (flyoutDisplay === FLYOUT_STATE.MAP_SETTINGS_PANEL) {
+      return;
+    }
+    dispatch(setSelectedLayer(null));
+    dispatch(trackMapSettings());
+    dispatch(updateFlyout(FLYOUT_STATE.MAP_SETTINGS_PANEL));
+  };
+}
 export function closeSetView() {
   return {
     type: CLOSE_SET_VIEW,

x-pack/plugins/maps/public/angular/services/saved_gis_map.js

@@ -15,6 +15,7 @@ import {
   getRefreshConfig,
   getQuery,
   getFilters,
+  getMapSettings,
 } from '../../selectors/map_selectors';
 import { getIsLayerTOCOpen, getOpenTOCDetails } from '../../selectors/ui_selectors';
 
@@ -98,6 +99,7 @@ export function createSavedGisMapClass(services) {
         refreshConfig: getRefreshConfig(state),
         query: _.omit(getQuery(state), 'queryLastTriggeredAt'),
         filters: getFilters(state),
+        settings: getMapSettings(state),
       });
 
       this.uiStateJSON = JSON.stringify({

x-pack/plugins/maps/public/connected_components/gis_map/index.js

@@ -6,8 +6,6 @@
 
 import { connect } from 'react-redux';
 import { GisMap } from './view';
-
-import { FLYOUT_STATE } from '../../reducers/ui';
 import { exitFullScreen } from '../../actions/ui_actions';
 import { getFlyoutDisplay, getIsFullScreen } from '../../selectors/ui_selectors';
 import { triggerRefreshTimer, cancelAllInFlightRequests } from '../../actions/map_actions';
@@ -22,12 +20,9 @@ import {
 import { getCoreChrome } from '../../kibana_services';
 
 function mapStateToProps(state = {}) {
-  const flyoutDisplay = getFlyoutDisplay(state);
   return {
     areLayersLoaded: areLayersLoaded(state),
-    layerDetailsVisible: flyoutDisplay === FLYOUT_STATE.LAYER_PANEL,
-    addLayerVisible: flyoutDisplay === FLYOUT_STATE.ADD_LAYER_WIZARD,
-    noFlyoutVisible: flyoutDisplay === FLYOUT_STATE.NONE,
+    flyoutDisplay: getFlyoutDisplay(state),
     isFullScreen: getIsFullScreen(state),
     refreshConfig: getRefreshConfig(state),
     mapInitError: getMapInitError(state),

x-pack/plugins/maps/public/connected_components/gis_map/view.js

@@ -6,6 +6,7 @@
 
 import _ from 'lodash';
 import React, { Component } from 'react';
+import classNames from 'classnames';
 import { MBMapContainer } from '../map/mb';
 import { WidgetOverlay } from '../widget_overlay';
 import { ToolbarOverlay } from '../toolbar_overlay';
@@ -19,6 +20,8 @@ import { ES_GEO_FIELD_TYPE } from '../../../common/constants';
 import { indexPatterns as indexPatternsUtils } from '../../../../../../src/plugins/data/public';
 import { i18n } from '@kbn/i18n';
 import uuid from 'uuid/v4';
+import { FLYOUT_STATE } from '../../reducers/ui';
+import { MapSettingsPanel } from '../map_settings_panel';
 
 const RENDER_COMPLETE_EVENT = 'renderComplete';
 
@@ -147,9 +150,7 @@ export class GisMap extends Component {
   render() {
     const {
       addFilters,
-      layerDetailsVisible,
-      addLayerVisible,
-      noFlyoutVisible,
+      flyoutDisplay,
       isFullScreen,
       exitFullScreen,
       mapInitError,
@@ -174,16 +175,13 @@ export class GisMap extends Component {
       );
     }
 
-    let currentPanel;
-    let currentPanelClassName;
-    if (noFlyoutVisible) {
-      currentPanel = null;
-    } else if (addLayerVisible) {
-      currentPanelClassName = 'mapMapLayerPanel-isVisible';
-      currentPanel = <AddLayerPanel />;
-    } else if (layerDetailsVisible) {
-      currentPanelClassName = 'mapMapLayerPanel-isVisible';
-      currentPanel = <LayerPanel />;
+    let flyoutPanel = null;
+    if (flyoutDisplay === FLYOUT_STATE.ADD_LAYER_WIZARD) {
+      flyoutPanel = <AddLayerPanel />;
+    } else if (flyoutDisplay === FLYOUT_STATE.LAYER_PANEL) {
+      flyoutPanel = <LayerPanel />;
+    } else if (flyoutDisplay === FLYOUT_STATE.MAP_SETTINGS_PANEL) {
+      flyoutPanel = <MapSettingsPanel />;
     }
 
     let exitFullScreenButton;
@@ -210,8 +208,13 @@ export class GisMap extends Component {
           <WidgetOverlay />
         </EuiFlexItem>
 
-        <EuiFlexItem className={`mapMapLayerPanel ${currentPanelClassName}`} grow={false}>
-          {currentPanel}
+        <EuiFlexItem
+          className={classNames('mapMapLayerPanel', {
+            'mapMapLayerPanel-isVisible': !!flyoutPanel,
+          })}
+          grow={false}
+        >
+          {flyoutPanel}
         </EuiFlexItem>
 
         {exitFullScreenButton}

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

@@ -23,13 +23,15 @@ import {
   isInteractiveDisabled,
   isTooltipControlDisabled,
   isViewControlHidden,
+  getMapSettings,
 } from '../../../selectors/map_selectors';
 
 import { getInspectorAdapters } from '../../../reducers/non_serializable_instances';
 
 function mapStateToProps(state = {}) {
   return {
     isMapReady: getMapReady(state),
+    settings: getMapSettings(state),
     layerList: getLayerList(state),
     goto: getGoto(state),
     inspectorAdapters: getInspectorAdapters(state),

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

@@ -12,14 +12,8 @@ import {
   removeOrphanedSourcesAndLayers,
   addSpritesheetToMap,
 } from './utils';
-
 import { getGlyphUrl, isRetina } from '../../../meta';
-import {
-  DECIMAL_DEGREES_PRECISION,
-  MAX_ZOOM,
-  MIN_ZOOM,
-  ZOOM_PRECISION,
-} from '../../../../common/constants';
+import { DECIMAL_DEGREES_PRECISION, ZOOM_PRECISION } from '../../../../common/constants';
 import mapboxgl from 'mapbox-gl/dist/mapbox-gl-csp';
 import mbWorkerUrl from '!!file-loader!mapbox-gl/dist/mapbox-gl-csp-worker';
 import mbRtlPlugin from '!!file-loader!@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.min.js';
@@ -80,7 +74,7 @@ export class MBMapContainer extends React.Component {
   }
 
   _debouncedSync = _.debounce(() => {
-    if (this._isMounted) {
+    if (this._isMounted || !this.props.isMapReady) {
       if (!this.state.hasSyncedLayerList) {
         this.setState(
           {
@@ -92,6 +86,7 @@ export class MBMapContainer extends React.Component {
           }
         );
       }
+      this._syncSettings();
     }
   }, 256);
 
@@ -133,8 +128,8 @@ export class MBMapContainer extends React.Component {
         scrollZoom: this.props.scrollZoom,
         preserveDrawingBuffer: getInjectedVarFunc()('preserveDrawingBuffer', false),
         interactive: !this.props.disableInteractive,
-        minZoom: MIN_ZOOM,
-        maxZoom: MAX_ZOOM,
+        maxZoom: this.props.settings.maxZoom,
+        minZoom: this.props.settings.minZoom,
       };
       const initialView = _.get(this.props.goto, 'center');
       if (initialView) {
@@ -265,17 +260,13 @@ export class MBMapContainer extends React.Component {
   };
 
   _syncMbMapWithLayerList = () => {
-    if (!this.props.isMapReady) {
-      return;
-    }
-
     removeOrphanedSourcesAndLayers(this.state.mbMap, this.props.layerList);
     this.props.layerList.forEach(layer => layer.syncLayerWithMB(this.state.mbMap));
     syncLayerOrderForSingleLayer(this.state.mbMap, this.props.layerList);
   };
 
   _syncMbMapWithInspector = () => {
-    if (!this.props.isMapReady || !this.props.inspectorAdapters.map) {
+    if (!this.props.inspectorAdapters.map) {
       return;
     }
 
@@ -289,6 +280,15 @@ export class MBMapContainer extends React.Component {
     });
   };
 
+  _syncSettings = () => {
+    if (this.props.settings.minZoom !== this.state.mbMap.getMinZoom()) {
+      this.state.mbMap.setMinZoom(this.props.settings.minZoom);
+    }
+    if (this.props.settings.maxZoom !== this.state.mbMap.getMaxZoom()) {
+      this.state.mbMap.setMaxZoom(this.props.settings.maxZoom);
+    }
+  };
+
   render() {
     let drawControl;
     let tooltipControl;