diff --git a/x-pack/plugins/gis/public/_main.scss b/x-pack/plugins/gis/public/_main.scss
index fe4853ebc29cf..636c8fa22d51e 100644
--- a/x-pack/plugins/gis/public/_main.scss
+++ b/x-pack/plugins/gis/public/_main.scss
@@ -34,27 +34,49 @@ map-listing, .gisListingPage {
   flex-grow: 1;
 }
 
-.LayerControl {
+/**
+ * 1. The overlay captures mouse events even if it's empty space. To counter-act this,
+ *    we remove all pointer events from the overlay then add them back on the
+ *    individual widgets.
+ */
+
+.gisWidgetOverlay {
   position: absolute;
-  z-index: 100;
+  z-index: $euiZLevel1;
   min-width: 17rem;
+  max-width: 24rem;
   top: $euiSizeM;
   right: $euiSizeM;
-  max-width: 24rem;
-  padding-bottom: 8px;
-  border-color: transparent;
+  bottom: $euiSizeM;
+  pointer-events: none; /* 1 */
+}
+
+.gisWidgetControl {
+  max-height: 100%;
+  overflow: hidden;
+  padding-bottom: $euiSizeS; // ensures the scrollbar doesn't appear unnecessarily because of flex group negative margins
+  border-color: transparent !important;
+  flex-direction: column;
+  display: flex;
+  pointer-events: all; /* 1 */
 
   &.euiPanel--shadow {
     @include euiBottomShadowLarge;
   }
 
-  .LayerControl--header {
-    padding: 16px 16px 8px;
+  .gisWidgetControl__header {
+    padding: $euiSizeS $euiSize;
+    flex-shrink: 0;
   }
 }
 
+.gisWidgetControl__tocHolder {
+  @include euiScrollBar;
+  overflow-y: auto;
+}
+
 .layerEntry {
-  padding: 8px 16px;
+  padding: $euiSizeS $euiSize;
   position: relative;
 }
 
@@ -255,4 +277,4 @@ map-listing, .gisListingPage {
   .euiComboBox__inputWrap {
     display: flex;
   }
-}
\ No newline at end of file
+}
diff --git a/x-pack/plugins/gis/public/actions/store_actions.js b/x-pack/plugins/gis/public/actions/store_actions.js
index 92e947b0cc730..1a8826f8e99c4 100644
--- a/x-pack/plugins/gis/public/actions/store_actions.js
+++ b/x-pack/plugins/gis/public/actions/store_actions.js
@@ -44,6 +44,10 @@ export const TOUCH_LAYER = 'TOUCH_LAYER';
 export const UPDATE_LAYER_ALPHA_VALUE = 'UPDATE_LAYER_ALPHA_VALUE';
 export const UPDATE_SOURCE_PROP = 'UPDATE_SOURCE_PROP';
 export const SET_REFRESH_CONFIG = 'SET_REFRESH_CONFIG';
+export const SET_MOUSE_COORDINATES = 'SET_MOUSE_COORDINATES';
+export const CLEAR_MOUSE_COORDINATES = 'CLEAR_MOUSE_COORDINATES';
+export const SET_GOTO = 'SET_GOTO';
+export const CLEAR_GOTO = 'CLEAR_GOTO';
 
 const GIS_API_RELATIVE = `../${GIS_API_PATH}`;
 
@@ -226,6 +230,31 @@ export function mapExtentChanged(newMapConstants) {
   };
 }
 
+export function setMouseCoordinates({ lat, lon }) {
+  return {
+    type: SET_MOUSE_COORDINATES,
+    lat,
+    lon,
+  };
+}
+
+export function clearMouseCoordinates() {
+  return { type: CLEAR_MOUSE_COORDINATES };
+}
+
+export function setGoto({ lat, lon, zoom }) {
+  return {
+    type: SET_GOTO,
+    lat,
+    lon,
+    zoom,
+  };
+}
+
+export function clearGoto() {
+  return { type: CLEAR_GOTO };
+}
+
 export function startDataLoad(layerId, dataId, requestToken, meta = {}) {
   return ({
     meta,
diff --git a/x-pack/plugins/gis/public/angular/map_controller.js b/x-pack/plugins/gis/public/angular/map_controller.js
index 9404e4af0b177..bba2cdcd0d0f0 100644
--- a/x-pack/plugins/gis/public/angular/map_controller.js
+++ b/x-pack/plugins/gis/public/angular/map_controller.js
@@ -17,7 +17,7 @@ import {
   setSelectedLayer,
   setTimeFilters,
   setRefreshConfig,
-  mapExtentChanged,
+  setGoto,
   replaceLayerList,
 } from '../actions/store_actions';
 import { getIsDarkTheme, updateFlyout, FLYOUT_STATE } from '../store/ui';
@@ -56,9 +56,10 @@ app.controller('GisMapController', ($scope, $route, config, kbnUrl) => {
       const mapState = JSON.parse(savedMap.mapStateJSON);
       const timeFilters = mapState.timeFilters ? mapState.timeFilters : timefilter.getTime();
       store.dispatch(setTimeFilters(timeFilters));
-      store.dispatch(mapExtentChanged({
+      store.dispatch(setGoto({
+        lat: mapState.center.lat,
+        lon: mapState.center.lon,
         zoom: mapState.zoom,
-        center: mapState.center,
       }));
       if (mapState.refreshConfig) {
         store.dispatch(setRefreshConfig(mapState.refreshConfig));
diff --git a/x-pack/plugins/gis/public/components/gis_map/view.js b/x-pack/plugins/gis/public/components/gis_map/view.js
index af60307bfe42d..77c7a29f2074b 100644
--- a/x-pack/plugins/gis/public/components/gis_map/view.js
+++ b/x-pack/plugins/gis/public/components/gis_map/view.js
@@ -6,7 +6,7 @@
 
 import React, { Component } from 'react';
 import { MBMapContainer } from '../map/mb';
-import { LayerControl } from '../layer_control/index';
+import { WidgetOverlay } from '../widget_overlay/index';
 import { LayerPanel } from '../layer_panel/index';
 import { AddLayerPanel } from '../layer_addpanel/index';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
@@ -78,7 +78,7 @@ export class GisMap extends Component {
       <EuiFlexGroup gutterSize="none" responsive={false}>
         <EuiFlexItem className="gisMapWrapper">
           <MBMapContainer/>
-          <LayerControl/>
+          <WidgetOverlay/>
         </EuiFlexItem>
 
         <EuiFlexItem className={`gisLayerPanel ${currentPanelClassName}`} grow={false}>
diff --git a/x-pack/plugins/gis/public/components/map/mb/index.js b/x-pack/plugins/gis/public/components/map/mb/index.js
index b63cbc5d13cb5..47caf3f0ac421 100644
--- a/x-pack/plugins/gis/public/components/map/mb/index.js
+++ b/x-pack/plugins/gis/public/components/map/mb/index.js
@@ -6,14 +6,21 @@
 
 import { connect } from 'react-redux';
 import { MBMapContainer } from './view';
-import { mapExtentChanged, mapReady, mapDestroyed } from '../../../actions/store_actions';
-import { getLayerList, getMapState, getMapReady } from "../../../selectors/map_selectors";
+import {
+  mapExtentChanged,
+  mapReady,
+  mapDestroyed,
+  setMouseCoordinates,
+  clearMouseCoordinates,
+  clearGoto,
+} from '../../../actions/store_actions';
+import { getLayerList, getMapReady, getGoto } from "../../../selectors/map_selectors";
 
 function mapStateToProps(state = {}) {
   return {
     isMapReady: getMapReady(state),
-    mapState: getMapState(state),
     layerList: getLayerList(state),
+    goto: getGoto(state),
   };
 }
 
@@ -23,11 +30,21 @@ function mapDispatchToProps(dispatch) {
       dispatch(mapExtentChanged(e));
     },
     onMapReady: (e) => {
+      dispatch(clearGoto());
       dispatch(mapExtentChanged(e));
       dispatch(mapReady());
     },
     onMapDestroyed: () => {
       dispatch(mapDestroyed());
+    },
+    setMouseCoordinates: ({ lat, lon }) => {
+      dispatch(setMouseCoordinates({ lat, lon }));
+    },
+    clearMouseCoordinates: () => {
+      dispatch(clearMouseCoordinates());
+    },
+    clearGoto: () => {
+      dispatch(clearGoto());
     }
   };
 }
diff --git a/x-pack/plugins/gis/public/components/map/mb/utils.js b/x-pack/plugins/gis/public/components/map/mb/utils.js
index 300c8be0b1cda..430a0c8636fbf 100644
--- a/x-pack/plugins/gis/public/components/map/mb/utils.js
+++ b/x-pack/plugins/gis/public/components/map/mb/utils.js
@@ -7,7 +7,7 @@
 import _ from 'lodash';
 import mapboxgl from 'mapbox-gl';
 
-export async function createMbMapInstance(node, initialZoom, initialCenter) {
+export async function createMbMapInstance(node, initialView) {
   return new Promise((resolve) => {
     const options = {
       container: node,
@@ -17,13 +17,11 @@ export async function createMbMapInstance(node, initialZoom, initialCenter) {
         layers: [],
       },
     };
-    if (initialZoom) {
-      options.zoom = initialZoom;
-    }
-    if (initialCenter) {
+    if (initialView) {
+      options.zoom = initialView.zoom;
       options.center = {
-        lng: initialCenter.lon,
-        lat: initialCenter.lat
+        lng: initialView.lon,
+        lat: initialView.lat
       };
     }
     const mbMap = new mapboxgl.Map(options);
diff --git a/x-pack/plugins/gis/public/components/map/mb/view.js b/x-pack/plugins/gis/public/components/map/mb/view.js
index e17cbcdd9d09d..bb275811a80c8 100644
--- a/x-pack/plugins/gis/public/components/map/mb/view.js
+++ b/x-pack/plugins/gis/public/components/map/mb/view.js
@@ -61,10 +61,7 @@ export class MBMapContainer extends React.Component {
   }
 
   async _initializeMap() {
-    const initialZoom = this.props.mapState.zoom;
-    const initialCenter = this.props.mapState.center;
-    this._mbMap = await createMbMapInstance(this.refs.mapContainer, initialZoom, initialCenter);
-    window._mbMap = this._mbMap;
+    this._mbMap = await createMbMapInstance(this.refs.mapContainer, this.props.goto);
 
     // Override mapboxgl.Map "on" and "removeLayer" methods so we can track layer listeners
     // Tracked layer listerners are used to clean up event handlers
@@ -90,9 +87,27 @@ export class MBMapContainer extends React.Component {
     };
 
     this.assignSizeWatch();
-    this._mbMap.on('moveend', () => {
+
+    // moveend callback is debounced to avoid updating map extent state while map extent is still changing
+    // moveend is fired while the map extent is still changing in the following scenarios
+    // 1) During opening/closing of layer details panel, the EUI animation results in 8 moveend events
+    // 2) Setting map zoom and center from goto is done in 2 API calls, resulting in 2 moveend events
+    this._mbMap.on('moveend', _.debounce(() => {
       this.props.extentChanged(this._getMapState());
+    }, 100));
+
+    const throttledSetMouseCoordinates = _.throttle(e => {
+      this.props.setMouseCoordinates({
+        lat: _.round(e.lngLat.lat, DECIMAL_DEGREES_PRECISION),
+        lon: _.round(e.lngLat.lng, DECIMAL_DEGREES_PRECISION)
+      });
+    }, 100);
+    this._mbMap.on('mousemove', throttledSetMouseCoordinates);
+    this._mbMap.on('mouseout', () => {
+      throttledSetMouseCoordinates.cancel(); // cancel any delayed setMouseCoordinates invocations
+      this.props.clearMouseCoordinates();
     });
+
     this.props.onMapReady(this._getMapState());
   }
 
@@ -145,27 +160,20 @@ export class MBMapContainer extends React.Component {
   _syncMbMapWithMapState = () => {
     const {
       isMapReady,
-      mapState,
+      goto,
+      clearGoto,
     } = this.props;
 
-    if (!isMapReady) {
+    if (!isMapReady || !goto) {
       return;
     }
 
-    const zoom = _.round(this._mbMap.getZoom(), ZOOM_PRECISION);
-    if (typeof mapState.zoom === 'number' && mapState.zoom !== zoom) {
-      this._mbMap.setZoom(mapState.zoom);
-    }
-
-    const center = this._mbMap.getCenter();
-    if (mapState.center &&
-      (mapState.center.lat !== _.round(center.lat, DECIMAL_DEGREES_PRECISION)
-      || mapState.center.lon !== _.round(center.lng, DECIMAL_DEGREES_PRECISION))) {
-      this._mbMap.setCenter({
-        lng: mapState.center.lon,
-        lat: mapState.center.lat
-      });
-    }
+    clearGoto();
+    this._mbMap.setZoom(goto.zoom);
+    this._mbMap.setCenter({
+      lng: goto.lon,
+      lat: goto.lat
+    });
   }
 
   _syncMbMapWithLayerList = () => {
diff --git a/x-pack/plugins/gis/public/components/widget_overlay/index.js b/x-pack/plugins/gis/public/components/widget_overlay/index.js
new file mode 100644
index 0000000000000..f610070880fc8
--- /dev/null
+++ b/x-pack/plugins/gis/public/components/widget_overlay/index.js
@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { connect } from 'react-redux';
+import { WidgetOverlay } from './widget_overlay';
+
+const connectedWidgetOverlay = connect(null, null)(WidgetOverlay);
+export { connectedWidgetOverlay as WidgetOverlay };
diff --git a/x-pack/plugins/gis/public/components/widget_overlay/layer_control/index.js b/x-pack/plugins/gis/public/components/widget_overlay/layer_control/index.js
new file mode 100644
index 0000000000000..8bddf4b293190
--- /dev/null
+++ b/x-pack/plugins/gis/public/components/widget_overlay/layer_control/index.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { connect } from 'react-redux';
+import { LayerControl } from './view';
+import {
+  updateFlyout,
+  FLYOUT_STATE
+} from '../../../store/ui';
+
+function mapDispatchToProps(dispatch) {
+  return {
+    showAddLayerWizard: () => {
+      dispatch(updateFlyout(FLYOUT_STATE.ADD_LAYER_WIZARD));
+    },
+  };
+}
+
+const connectedLayerControl = connect(null, mapDispatchToProps)(LayerControl);
+export { connectedLayerControl as LayerControl };
diff --git a/x-pack/plugins/gis/public/components/layer_toc/index.js b/x-pack/plugins/gis/public/components/widget_overlay/layer_control/layer_toc/index.js
similarity index 82%
rename from x-pack/plugins/gis/public/components/layer_toc/index.js
rename to x-pack/plugins/gis/public/components/widget_overlay/layer_control/layer_toc/index.js
index 7f791c8f8a3d1..2a7093160364e 100644
--- a/x-pack/plugins/gis/public/components/layer_toc/index.js
+++ b/x-pack/plugins/gis/public/components/widget_overlay/layer_control/layer_toc/index.js
@@ -6,8 +6,8 @@
 
 import { connect } from 'react-redux';
 import { LayerTOC } from './view';
-import { updateLayerOrder } from "../../actions/store_actions";
-import { getLayerList } from "../../selectors/map_selectors";
+import { updateLayerOrder } from "../../../../actions/store_actions";
+import { getLayerList } from "../../../../selectors/map_selectors";
 
 const mapDispatchToProps = {
   updateLayerOrder: newOrder => updateLayerOrder(newOrder)
diff --git a/x-pack/plugins/gis/public/components/layer_toc/toc_entry/index.js b/x-pack/plugins/gis/public/components/widget_overlay/layer_control/layer_toc/toc_entry/index.js
similarity index 83%
rename from x-pack/plugins/gis/public/components/layer_toc/toc_entry/index.js
rename to x-pack/plugins/gis/public/components/widget_overlay/layer_control/layer_toc/toc_entry/index.js
index 74a15f54869d4..a8ba35f8aa0be 100644
--- a/x-pack/plugins/gis/public/components/layer_toc/toc_entry/index.js
+++ b/x-pack/plugins/gis/public/components/widget_overlay/layer_control/layer_toc/toc_entry/index.js
@@ -7,8 +7,8 @@
 import _ from 'lodash';
 import { connect } from 'react-redux';
 import { TOCEntry } from './toc_entry';
-import { updateFlyout, FLYOUT_STATE } from '../../../store/ui';
-import { setSelectedLayer, toggleLayerVisible } from '../../../actions/store_actions';
+import { updateFlyout, FLYOUT_STATE } from '../../../../../store/ui';
+import { setSelectedLayer, toggleLayerVisible } from '../../../../../actions/store_actions';
 
 function mapStateToProps(state = {}) {
   return {
diff --git a/x-pack/plugins/gis/public/components/layer_toc/toc_entry/toc_entry.js b/x-pack/plugins/gis/public/components/widget_overlay/layer_control/layer_toc/toc_entry/toc_entry.js
similarity index 97%
rename from x-pack/plugins/gis/public/components/layer_toc/toc_entry/toc_entry.js
rename to x-pack/plugins/gis/public/components/widget_overlay/layer_control/layer_toc/toc_entry/toc_entry.js
index d363cd2402ec4..d2bb43c0828d1 100644
--- a/x-pack/plugins/gis/public/components/layer_toc/toc_entry/toc_entry.js
+++ b/x-pack/plugins/gis/public/components/widget_overlay/layer_control/layer_toc/toc_entry/toc_entry.js
@@ -14,7 +14,7 @@ import {
   EuiIconTip,
   EuiSpacer
 } from '@elastic/eui';
-import { VisibilityToggle } from '../../../shared/components/visibility_toggle';
+import { VisibilityToggle } from '../../../../../shared/components/visibility_toggle';
 
 export class TOCEntry extends React.Component {
 
diff --git a/x-pack/plugins/gis/public/components/layer_toc/view.js b/x-pack/plugins/gis/public/components/widget_overlay/layer_control/layer_toc/view.js
similarity index 100%
rename from x-pack/plugins/gis/public/components/layer_toc/view.js
rename to x-pack/plugins/gis/public/components/widget_overlay/layer_control/layer_toc/view.js
diff --git a/x-pack/plugins/gis/public/components/widget_overlay/layer_control/view.js b/x-pack/plugins/gis/public/components/widget_overlay/layer_control/view.js
new file mode 100644
index 0000000000000..6abd0d877690c
--- /dev/null
+++ b/x-pack/plugins/gis/public/components/widget_overlay/layer_control/view.js
@@ -0,0 +1,48 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+  EuiButtonEmpty,
+  EuiTitle,
+} from '@elastic/eui';
+import { LayerTOC } from './layer_toc';
+
+export function LayerControl(props) {
+  const addLayer = (
+    <EuiButtonEmpty size="xs" flush="right" onClick={props.showAddLayerWizard}>
+      Add layer
+    </EuiButtonEmpty>);
+
+  return (
+    <EuiPanel className="gisWidgetControl" hasShadow paddingSize="none" grow={false}>
+      <EuiFlexItem className="gisWidgetControl__header" grow={false}>
+        <EuiFlexGroup
+          justifyContent="spaceBetween"
+          alignItems="center"
+          responsive={false}
+          gutterSize="none"
+        >
+          <EuiFlexItem>
+            <EuiTitle size="s">
+              <h1>Layers</h1>
+            </EuiTitle>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            {addLayer}
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+
+      <EuiFlexItem className="gisWidgetControl__tocHolder">
+        <LayerTOC />
+      </EuiFlexItem>
+    </EuiPanel>
+  );
+}
diff --git a/x-pack/plugins/gis/public/components/layer_control/index.js b/x-pack/plugins/gis/public/components/widget_overlay/view_control/index.js
similarity index 65%
rename from x-pack/plugins/gis/public/components/layer_control/index.js
rename to x-pack/plugins/gis/public/components/widget_overlay/view_control/index.js
index 2f9caae0a1cef..4d5bf791d5d52 100644
--- a/x-pack/plugins/gis/public/components/layer_control/index.js
+++ b/x-pack/plugins/gis/public/components/widget_overlay/view_control/index.js
@@ -5,26 +5,23 @@
  */
 
 import { connect } from 'react-redux';
-import { LayerControl } from './view';
+import { ViewControl } from './view_control';
+import { getMouseCoordinates } from "../../../selectors/map_selectors";
 import {
   getIsSetViewOpen,
   closeSetView,
   openSetView,
-  updateFlyout,
-  FLYOUT_STATE
-} from '../../store/ui';
+} from '../../../store/ui';
 
 function mapStateToProps(state = {}) {
   return {
     isSetViewOpen: getIsSetViewOpen(state),
+    mouseCoordinates: getMouseCoordinates(state),
   };
 }
 
 function mapDispatchToProps(dispatch) {
   return {
-    showAddLayerWizard: () => {
-      dispatch(updateFlyout(FLYOUT_STATE.ADD_LAYER_WIZARD));
-    },
     closeSetView: () => {
       dispatch(closeSetView());
     },
@@ -34,5 +31,5 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-const connectedLayerControl = connect(mapStateToProps, mapDispatchToProps)(LayerControl);
-export { connectedLayerControl as LayerControl };
+const connectedViewControl = connect(mapStateToProps, mapDispatchToProps)(ViewControl);
+export { connectedViewControl as ViewControl };
diff --git a/x-pack/plugins/gis/public/components/set_view/index.js b/x-pack/plugins/gis/public/components/widget_overlay/view_control/set_view/index.js
similarity index 70%
rename from x-pack/plugins/gis/public/components/set_view/index.js
rename to x-pack/plugins/gis/public/components/widget_overlay/view_control/set_view/index.js
index 2fde36b8959ce..594de9d520b59 100644
--- a/x-pack/plugins/gis/public/components/set_view/index.js
+++ b/x-pack/plugins/gis/public/components/widget_overlay/view_control/set_view/index.js
@@ -6,9 +6,9 @@
 
 import { connect } from 'react-redux';
 import { SetView } from './set_view';
-import { mapExtentChanged } from '../../actions/store_actions';
-import { getMapZoom, getMapCenter } from "../../selectors/map_selectors";
-import { closeSetView } from '../../store/ui';
+import { setGoto } from '../../../../actions/store_actions';
+import { getMapZoom, getMapCenter } from "../../../../selectors/map_selectors";
+import { closeSetView } from '../../../../store/ui';
 
 function mapStateToProps(state = {}) {
   return {
@@ -19,9 +19,9 @@ function mapStateToProps(state = {}) {
 
 function mapDispatchToProps(dispatch) {
   return {
-    onSubmit: (newMapConstants) => {
+    onSubmit: ({ lat, lon, zoom }) => {
       dispatch(closeSetView());
-      dispatch(mapExtentChanged(newMapConstants));
+      dispatch(setGoto({ lat, lon, zoom }));
     }
   };
 }
diff --git a/x-pack/plugins/gis/public/components/set_view/set_view.js b/x-pack/plugins/gis/public/components/widget_overlay/view_control/set_view/set_view.js
similarity index 97%
rename from x-pack/plugins/gis/public/components/set_view/set_view.js
rename to x-pack/plugins/gis/public/components/widget_overlay/view_control/set_view/set_view.js
index ab41a42bc34f9..ace303b50328e 100644
--- a/x-pack/plugins/gis/public/components/set_view/set_view.js
+++ b/x-pack/plugins/gis/public/components/widget_overlay/view_control/set_view/set_view.js
@@ -50,6 +50,7 @@ export class SetView  extends React.Component {
           label={label}
           isInvalid={isInvalid}
           error={error}
+          compressed
         >
           <EuiFieldNumber
             value={value}
@@ -68,11 +69,7 @@ export class SetView  extends React.Component {
       lon,
       zoom
     } = this.state;
-    const center = {
-      lat,
-      lon
-    };
-    this.props.onSubmit({ center, zoom });
+    this.props.onSubmit({ lat, lon, zoom });
   }
 
   render() {
@@ -114,6 +111,7 @@ export class SetView  extends React.Component {
 
         <EuiFormRow hasEmptyLabelSpace>
           <EuiButton
+            size="s"
             disabled={isLatInvalid || isLonInvalid || isZoomInvalid}
             onClick={this.onSubmit}
             data-test-subj="submitViewButton"
diff --git a/x-pack/plugins/gis/public/components/layer_control/view.js b/x-pack/plugins/gis/public/components/widget_overlay/view_control/view_control.js
similarity index 51%
rename from x-pack/plugins/gis/public/components/layer_control/view.js
rename to x-pack/plugins/gis/public/components/widget_overlay/view_control/view_control.js
index 81c8a81e2090f..a31c023686d8e 100644
--- a/x-pack/plugins/gis/public/components/layer_control/view.js
+++ b/x-pack/plugins/gis/public/components/widget_overlay/view_control/view_control.js
@@ -4,77 +4,79 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { Fragment } from 'react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiPanel,
   EuiButtonEmpty,
-  EuiTitle,
-  EuiPopover
+  EuiPopover,
+  EuiText,
 } from '@elastic/eui';
-import { LayerTOC } from '../layer_toc';
-import { SetView } from '../set_view';
-
-export function LayerControl(props) {
-  const addLayer = (
-    <EuiButtonEmpty size="xs" flush="right" onClick={props.showAddLayerWizard}>
-      Add layer
-    </EuiButtonEmpty>);
+import { SetView } from './set_view';
 
+export function ViewControl({ isSetViewOpen, closeSetView, openSetView, mouseCoordinates }) {
   const toggleSetViewVisibility = () => {
-    if (props.isSetViewOpen) {
-      props.closeSetView();
+    if (isSetViewOpen) {
+      closeSetView();
       return;
     }
 
-    props.openSetView();
+    openSetView();
   };
   const setView = (
     <EuiPopover
       button={(
         <EuiButtonEmpty
+          flush="right"
           size="xs"
           onClick={toggleSetViewVisibility}
           data-test-subj="toggleSetViewVisibilityButton"
         >
-          Set view
+          Goto
         </EuiButtonEmpty>)}
-      isOpen={props.isSetViewOpen}
-      closePopover={props.closeSetView}
+      isOpen={isSetViewOpen}
+      closePopover={closeSetView}
     >
       <SetView />
     </EuiPopover>
   );
 
+  function renderMouseCoordinates() {
+    return (
+      <Fragment>
+        <EuiFlexItem grow={false}>
+          <EuiText size="xs">
+            <p>
+              <strong>lat:</strong> {mouseCoordinates && mouseCoordinates.lat}
+            </p>
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiText size="xs">
+            <p>
+              <strong>long:</strong> {mouseCoordinates && mouseCoordinates.lon}
+            </p>
+          </EuiText>
+        </EuiFlexItem>
+      </Fragment>
+    );
+  }
+
   return (
-    <EuiPanel className="LayerControl" hasShadow paddingSize="none">
+    <EuiPanel className="gisWidgetControl" hasShadow paddingSize="s">
       <EuiFlexGroup
-        className="LayerControl--header"
         justifyContent="spaceBetween"
         alignItems="center"
-        responsive={false}
-        gutterSize="none"
+        gutterSize="s"
       >
-        <EuiFlexItem>
-          <EuiTitle size="s">
-            <h1>Layers</h1>
-          </EuiTitle>
-        </EuiFlexItem>
+
+        {renderMouseCoordinates()}
+
         <EuiFlexItem grow={false}>
           {setView}
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          {addLayer}
-        </EuiFlexItem>
       </EuiFlexGroup>
-
-      <EuiFlexGroup>
-        <EuiFlexItem>
-          <LayerTOC />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-
     </EuiPanel>
   );
 }
diff --git a/x-pack/plugins/gis/public/components/widget_overlay/widget_overlay.js b/x-pack/plugins/gis/public/components/widget_overlay/widget_overlay.js
new file mode 100644
index 0000000000000..4714618aa420d
--- /dev/null
+++ b/x-pack/plugins/gis/public/components/widget_overlay/widget_overlay.js
@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '@elastic/eui';
+import { LayerControl } from './layer_control';
+import { ViewControl } from './view_control';
+
+export function WidgetOverlay() {
+  return (
+    <EuiFlexGroup
+      className="gisWidgetOverlay"
+      direction="column"
+      justifyContent="spaceBetween"
+    >
+      <EuiFlexItem>
+        <LayerControl/>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <ViewControl/>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
diff --git a/x-pack/plugins/gis/public/selectors/map_selectors.js b/x-pack/plugins/gis/public/selectors/map_selectors.js
index c2611678c8525..fb9f350e3b03c 100644
--- a/x-pack/plugins/gis/public/selectors/map_selectors.js
+++ b/x-pack/plugins/gis/public/selectors/map_selectors.js
@@ -86,6 +86,7 @@ export const getMapState = ({ map }) => map && map.mapState;
 
 export const getMapReady = ({ map }) => map && map.ready;
 
+export const getGoto = ({ map }) => map && map.goto;
 
 const getSelectedLayerId = ({ map }) => {
   return (!map.selectedLayerId || !map.layerList) ? null : map.selectedLayerId;
@@ -109,6 +110,8 @@ export const getMapZoom = ({ map }) => map.mapState.zoom ?
 export const getMapCenter = ({ map }) => map.mapState.center ?
   map.mapState.center : { lat: 0, lon: 0 };
 
+export const getMouseCoordinates = ({ map }) => map.mapState.mouseCoordinates;
+
 export const getMapColors = ({ map }) => {
   return map.layerList.reduce((accu, layer) => {
     // This will evolve as color options are expanded
diff --git a/x-pack/plugins/gis/public/store/map.js b/x-pack/plugins/gis/public/store/map.js
index 0f997debc77cb..173148dbdd82c 100644
--- a/x-pack/plugins/gis/public/store/map.js
+++ b/x-pack/plugins/gis/public/store/map.js
@@ -30,6 +30,10 @@ import {
   UPDATE_SOURCE_PROP,
   SET_REFRESH_CONFIG,
   TRIGGER_REFRESH_TIMER,
+  SET_MOUSE_COORDINATES,
+  CLEAR_MOUSE_COORDINATES,
+  SET_GOTO,
+  CLEAR_GOTO,
 } from "../actions/store_actions";
 
 const getLayerIndex = (list, layerId) => list.findIndex(({ id }) => layerId === id);
@@ -71,6 +75,7 @@ const updateLayerSourceDescriptorProp = (state, layerId, propName, value) => {
 
 const INITIAL_STATE = {
   ready: false,
+  goto: null,
   mapState: {
     zoom: 4,
     center: {
@@ -78,6 +83,7 @@ const INITIAL_STATE = {
       lat: 32.82
     },
     extent: null,
+    mouseCoordinates: null,
     timeFilters: null,
     refreshConfig: null,
     refreshTimerLastTriggeredAt: null,
@@ -91,6 +97,39 @@ export function map(state = INITIAL_STATE, action) {
   window._state = state;
   //todo throw actions with actual objects so this doesn't get so cluttered
   switch (action.type) {
+    case SET_MOUSE_COORDINATES:
+      return {
+        ...state,
+        mapState: {
+          ...state.mapState,
+          mouseCoordinates: {
+            lat: action.lat,
+            lon: action.lon
+          }
+        }
+      };
+    case CLEAR_MOUSE_COORDINATES:
+      return {
+        ...state,
+        mapState: {
+          ...state.mapState,
+          mouseCoordinates: null
+        }
+      };
+    case SET_GOTO:
+      return {
+        ...state,
+        goto: {
+          lat: action.lat,
+          lon: action.lon,
+          zoom: action.zoom,
+        }
+      };
+    case CLEAR_GOTO:
+      return {
+        ...state,
+        goto: null,
+      };
     case LAYER_DATA_LOAD_STARTED:
       return updateWithDataRequest(state, action);
     case LAYER_DATA_LOAD_ERROR: