diff --git a/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
index 6d63fc08ef85e..162f43f0911a6 100644
--- a/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
+++ b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
@@ -7,6 +7,8 @@
import React, { ChangeEvent, Fragment } from 'react';
import {
+ EuiCallOut,
+ EuiText,
EuiTitle,
EuiPanel,
EuiFormRow,
@@ -242,8 +244,44 @@ export function LayerSettings(props: Props) {
);
};
+ const renderLayerGroupInstructions = () => {
+ return isLayerGroup(props.layer) ? (
+ <>
+
+
+
+ -
+ {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupAddToFront', {
+ defaultMessage: 'To add your first layer, drag it onto the group name.',
+ })}
+
+ -
+ {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupAddToPosition', {
+ defaultMessage:
+ 'To add another layer, drag it anywhere above the last layer in the group.',
+ })}
+
+ -
+ {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupRemove', {
+ defaultMessage: 'To remove a layer, drag it above or below the group.',
+ })}
+
+
+
+
+
+ >
+ ) : null;
+ };
+
return (
+ {renderLayerGroupInstructions()}