[Maps] add drawing toolbar to create filters to map (#33686)

src/dev/license_checker/config.js

@@ -52,6 +52,7 @@ export const LICENSE_WHITELIST = [
   'CC-BY-3.0',
   'CC-BY-4.0',
   'Eclipse Distribution License - v 1.0',
+  'FreeBSD',
   'ISC',
   'ISC*',
   'MIT OR GPL-2.0',

x-pack/package.json

@@ -178,6 +178,7 @@
     "@kbn/i18n": "1.0.0",
     "@kbn/interpreter": "1.0.0",
     "@kbn/ui-framework": "1.0.0",
+    "@mapbox/mapbox-gl-draw": "^1.1.1",
     "@samverschueren/stream-to-observable": "^0.3.0",
     "@scant/router": "^0.1.0",
     "@slack/client": "^4.8.0",
@@ -255,6 +256,7 @@
     "lodash.uniqby": "^4.7.0",
     "lz-string": "^1.4.4",
     "mapbox-gl": "0.52.0",
+    "mapbox-gl-draw-rectangle-mode": "^1.0.4",
     "markdown-it": "^8.4.1",
     "mime": "^2.2.2",
     "mkdirp": "0.5.1",

x-pack/plugins/maps/common/constants.js

@@ -28,3 +28,8 @@ export const APP_ICON = 'gisApp';
 export const SOURCE_DATA_ID_ORIGIN = 'source';
 
 export const FEATURE_ID_PROPERTY_NAME = '__kbn__feature_id__';
+
+export const ES_GEO_FIELD_TYPE = {
+  GEO_POINT: 'geo_point',
+  GEO_SHAPE: 'geo_shape'
+};

x-pack/plugins/maps/public/_main.scss

@@ -23,29 +23,39 @@
 
 .mapContainer {
   flex-grow: 1;
-}
 
-.mapboxgl-popup {
-  z-index: 100;
-  border-color: $euiColorEmptyShade;
-}
+  .mapboxgl-popup {
+    z-index: 100;
+    border-color: $euiColorEmptyShade;
+  }
 
-.mapboxgl-popup-content {
-  background-color: $euiColorEmptyShade;
-}
+  .mapboxgl-popup-content {
+    background-color: $euiColorEmptyShade;
+  }
 
-.mapboxgl-popup-tip {
-  border-top-color: $euiColorEmptyShade !important;
-}
+  .mapboxgl-popup-tip {
+    border-top-color: $euiColorEmptyShade !important;
+  }
+
+  .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
+    margin-left: $euiSizeM;
+    margin-top: $euiSizeM;
+  }
 
-// This is not good practice to create such a generic class.
-// I can't seem to find it being applied anywhere in GIS
-// .hidden {
-//   display: none
-// }
+  .mapboxgl-ctrl-group:not(:empty) {
+    @include euiBottomShadowLarge;
+    background-color: $euiColorEmptyShade;
+    border-radius: $euiBorderRadius;
 
-// EUIFIXTODO:
+    > button {
+      @include size($euiSizeXL);
 
+      + button {
+        border: none;
+      }
+    }
+  }
+}
 .euiColorPicker__emptySwatch {
   position: relative;
 }

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

@@ -52,6 +52,12 @@ export const TRACK_CURRENT_LAYER_STATE = 'TRACK_CURRENT_LAYER_STATE';
 export const ROLLBACK_TO_TRACKED_LAYER_STATE = 'ROLLBACK_TO_TRACKED_LAYER_STATE';
 export const REMOVE_TRACKED_LAYER_STATE = 'REMOVE_TRACKED_LAYER_STATE';
 export const SET_TOOLTIP_STATE = 'SET_TOOLTIP_STATE';
+export const UPDATE_DRAW_STATE = 'UPDATE_DRAW_STATE';
+
+export const DRAW_TYPE = {
+  BOUNDS: 'BOUNDS',
+  POLYGON: 'POLYGON'
+};
 export const SET_SCROLL_ZOOM = 'SET_SCROLL_ZOOM';
 
 function getLayerLoadingCallbacks(dispatch, layerId) {
@@ -685,3 +691,15 @@ export function setJoinsForLayer(layer, joins) {
     dispatch(syncDataForLayer(layer.getId()));
   };
 }
+
+export function updateDrawState(drawState) {
+  return async (dispatch) => {
+    if (drawState !== null) {
+      await dispatch(setTooltipState(null));//tooltips just get in the way
+    }
+    dispatch({
+      type: UPDATE_DRAW_STATE,
+      drawState: drawState
+    });
+  };
+}

x-pack/plugins/maps/public/components/_index.scss

@@ -2,3 +2,4 @@
 @import './layer_addpanel/layer_addpanel';
 @import './layer_panel/index';
 @import './widget_overlay/index';
+@import './toolbar_overlay/index';

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

@@ -7,6 +7,7 @@
 import React, { Component } from 'react';
 import { MBMapContainer } from '../map/mb';
 import { WidgetOverlay } from '../widget_overlay/index';
+import { ToolbarOverlay } from '../toolbar_overlay/index';
 import { LayerPanel } from '../layer_panel/index';
 import { AddLayerPanel } from '../layer_addpanel/index';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
@@ -47,13 +48,13 @@ export class GisMap extends Component {
         interval
       );
     }
-  }
+  };
 
   clearRefreshTimer = () => {
     if (this.refreshTimerId) {
       clearInterval(this.refreshTimerId);
     }
-  }
+  };
 
   render() {
     const {
@@ -91,6 +92,7 @@ export class GisMap extends Component {
       <EuiFlexGroup gutterSize="none" responsive={false}>
         <EuiFlexItem className="mapMapWrapper">
           <MBMapContainer/>
+          <ToolbarOverlay />
           <WidgetOverlay/>
         </EuiFlexItem>
 

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

@@ -13,9 +13,17 @@ import {
   setMouseCoordinates,
   clearMouseCoordinates,
   clearGoto,
-  setTooltipState
+  setTooltipState,
+  updateDrawState
 } from '../../../actions/store_actions';
-import { getTooltipState, getLayerList, getMapReady, getGoto, getScrollZoom } from '../../../selectors/map_selectors';
+import {
+  getTooltipState,
+  getLayerList,
+  getMapReady,
+  getGoto,
+  getDrawState,
+  getScrollZoom
+} from '../../../selectors/map_selectors';
 import { getIsFilterable } from '../../../store/ui';
 import { getInspectorAdapters } from '../../../store/non_serializable_instances';
 
@@ -27,7 +35,8 @@ function mapStateToProps(state = {}) {
     goto: getGoto(state),
     inspectorAdapters: getInspectorAdapters(state),
     tooltipState: getTooltipState(state),
-    scrollZoom: getScrollZoom(state),
+    drawState: getDrawState(state),
+    scrollZoom: getScrollZoom(state)
   };
 }
 
@@ -55,6 +64,9 @@ function mapDispatchToProps(dispatch) {
     },
     setTooltipState(tooltipState) {
       dispatch(setTooltipState(tooltipState));
+    },
+    disableDrawState() {
+      dispatch(updateDrawState(null));
     }
   };
 }