diff --git a/x-pack/plugins/maps/public/_main.scss b/x-pack/plugins/maps/public/_main.scss
index 620a5d41069f..51dfebcf8c23 100644
--- a/x-pack/plugins/maps/public/_main.scss
+++ b/x-pack/plugins/maps/public/_main.scss
@@ -23,26 +23,40 @@
.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-ctrl-top-left .mapboxgl-ctrl {
+ margin-left: $euiSizeM;
+ margin-top: $euiSizeM;
+ }
+
+ .mapboxgl-ctrl-group:not(:empty) {
+ @include euiBottomShadowLarge;
+ background-color: $euiColorEmptyShade;
+ border-radius: $euiBorderRadius;
+
+ > button {
+ @include size($euiSizeXL);
-.mapboxgl-popup-tip {
- border-top-color: $euiColorEmptyShade !important;
+ + button {
+ border: none;
+ }
+ }
+ }
}
-// 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
-// }
// EUIFIXTODO:
diff --git a/x-pack/plugins/maps/public/components/toolbar_overlay/_index.scss b/x-pack/plugins/maps/public/components/toolbar_overlay/_index.scss
index 019f1f16bcf9..da662d99d080 100644
--- a/x-pack/plugins/maps/public/components/toolbar_overlay/_index.scss
+++ b/x-pack/plugins/maps/public/components/toolbar_overlay/_index.scss
@@ -1,7 +1,17 @@
-.toolbarOverlay {
+.mapToolbarOverlay {
position: absolute;
- top: 80px;
- padding: 0;
- left: 16px;
- background-color: white;
+ top: ($euiSizeM * 2) + ($euiSizeXL * 2); // Position and height of mapbox controls plus margin
+ left: $euiSizeM;
+ z-index: 2; // Sit on top of mapbox controls shadow
+}
+
+.mapToolbarOverlay__button {
+ @include size($euiSizeXL);
+ background-color: $euiColorEmptyShade !important;
+
+ &:enabled,
+ &:enabled:hover,
+ &:enabled:focus {
+ @include euiBottomShadowLarge;
+ }
}
diff --git a/x-pack/plugins/maps/public/components/toolbar_overlay/view.js b/x-pack/plugins/maps/public/components/toolbar_overlay/view.js
index 7a02fc332cac..1325b3bb60a0 100644
--- a/x-pack/plugins/maps/public/components/toolbar_overlay/view.js
+++ b/x-pack/plugins/maps/public/components/toolbar_overlay/view.js
@@ -4,15 +4,16 @@
* 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,
- EuiText,
EuiButtonIcon,
EuiPopover,
EuiContextMenu,
- EuiSuperSelect
+ EuiSelectable,
+ EuiHighlight,
+ EuiTextColor,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { getIndexPatternsFromIds } from '../../index_pattern_util';
@@ -124,20 +125,14 @@ export class ToolbarOverlay extends React.Component {
const drawPolygonAction = {
name: i18n.translate('xpack.maps.toolbarOverlay.drawShapeLabel', {
- defaultMessage: 'Draw shape',
+ defaultMessage: 'Draw shape to filter data',
}),
- toolTipContent: i18n.translate('xpack.maps.toolbarOverlay.drawShapeTooltip', {
- defaultMessage: 'Draw shape to filter data from index pattern',
- })
};
const drawBoundsAction = {
name: i18n.translate('xpack.maps.toolbarOverlay.drawBoundsLabel', {
- defaultMessage: 'Draw bounds',
+ defaultMessage: 'Draw bounds to filter data',
}),
- toolTipContent: i18n.translate('xpack.maps.toolbarOverlay.drawBoundsTooltip', {
- defaultMessage: 'Draw bounds to filter data from index pattern',
- })
};
if (this.state.uniqueIndexPatternsAndGeoFields.length === 1) {
@@ -162,16 +157,53 @@ export class ToolbarOverlay extends React.Component {
_getIndexPatternSelectionPanel(id) {
const options = this.state.uniqueIndexPatternsAndGeoFields.map((indexPatternAndGeoField) => {
return {
- inputDisplay: {`${indexPatternAndGeoField.indexPatternTitle} : ${indexPatternAndGeoField.geoField}`}
+