diff --git a/x-pack/plugins/maps/public/classes/_index.scss b/x-pack/plugins/maps/public/classes/_index.scss
index 29a5761255278..3fc31b4b2f66a 100644
--- a/x-pack/plugins/maps/public/classes/_index.scss
+++ b/x-pack/plugins/maps/public/classes/_index.scss
@@ -1 +1,2 @@
@import 'styles/index';
+@import 'layers/index';
diff --git a/x-pack/plugins/maps/public/classes/layers/_index.scss b/x-pack/plugins/maps/public/classes/layers/_index.scss
new file mode 100644
index 0000000000000..530ac2734855d
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/layers/_index.scss
@@ -0,0 +1 @@
+@import 'layers';
diff --git a/x-pack/plugins/maps/public/classes/layers/_layers.scss b/x-pack/plugins/maps/public/classes/layers/_layers.scss
new file mode 100644
index 0000000000000..54ab7d85ef170
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/layers/_layers.scss
@@ -0,0 +1,11 @@
+.mapLayersWizardIcon {
+ margin-top: $euiSizeS;
+
+ &__highlight {
+ fill: $euiColorFullShade;
+ }
+
+ &__background {
+ fill: $euiColorLightShade;
+ }
+}
diff --git a/x-pack/plugins/maps/public/classes/layers/choropleth_layer_wizard/choropleth_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/layers/choropleth_layer_wizard/choropleth_layer_wizard.tsx
index 6e806f4530df2..d87302a6a9f2e 100644
--- a/x-pack/plugins/maps/public/classes/layers/choropleth_layer_wizard/choropleth_layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/layers/choropleth_layer_wizard/choropleth_layer_wizard.tsx
@@ -9,13 +9,14 @@ import { i18n } from '@kbn/i18n';
import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
import { LayerWizard, RenderWizardArguments } from '../layer_wizard_registry';
import { LayerTemplate } from './layer_template';
+import { ChoroplethLayerIcon } from './cloropleth_layer_icon';
export const choroplethLayerWizardConfig: LayerWizard = {
categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH],
description: i18n.translate('xpack.maps.choropleth.desc', {
defaultMessage: 'Shaded areas to compare statistics across boundaries',
}),
- icon: 'logoElasticsearch',
+ icon: ChoroplethLayerIcon,
renderWizard: (renderWizardArguments: RenderWizardArguments) => {
return ;
},
diff --git a/x-pack/plugins/maps/public/classes/layers/choropleth_layer_wizard/cloropleth_layer_icon.tsx b/x-pack/plugins/maps/public/classes/layers/choropleth_layer_wizard/cloropleth_layer_icon.tsx
new file mode 100644
index 0000000000000..e0a0d450dfbff
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/layers/choropleth_layer_wizard/cloropleth_layer_icon.tsx
@@ -0,0 +1,35 @@
+/*
+ * 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, { FunctionComponent } from 'react';
+
+export const ChoroplethLayerIcon: FunctionComponent = () => (
+
+);
diff --git a/x-pack/plugins/maps/public/classes/layers/layer_wizard_registry.ts b/x-pack/plugins/maps/public/classes/layers/layer_wizard_registry.ts
index 0eb1d2c3b222c..278a3c0388b01 100644
--- a/x-pack/plugins/maps/public/classes/layers/layer_wizard_registry.ts
+++ b/x-pack/plugins/maps/public/classes/layers/layer_wizard_registry.ts
@@ -5,7 +5,7 @@
*/
/* eslint-disable @typescript-eslint/consistent-type-definitions */
-import { ReactElement } from 'react';
+import { ReactElement, FunctionComponent } from 'react';
import { LayerDescriptor } from '../../../common/descriptor_types';
import { LAYER_WIZARD_CATEGORY } from '../../../common/constants';
@@ -28,7 +28,7 @@ export type LayerWizard = {
categories: LAYER_WIZARD_CATEGORY[];
checkVisibility?: () => Promise;
description: string;
- icon: string;
+ icon: string | FunctionComponent;
prerequisiteSteps?: Array<{ id: string; label: string }>;
renderWizard(renderWizardArguments: RenderWizardArguments): ReactElement;
title: string;
diff --git a/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/clusters_layer_icon.tsx b/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/clusters_layer_icon.tsx
new file mode 100644
index 0000000000000..818ff789da19b
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/clusters_layer_icon.tsx
@@ -0,0 +1,37 @@
+/*
+ * 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, { FunctionComponent } from 'react';
+
+export const ClustersLayerIcon: FunctionComponent = () => (
+
+);
diff --git a/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/clusters_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/clusters_layer_wizard.tsx
index ee97fdd0a2bf6..5d0a414cd0d18 100644
--- a/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/clusters_layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/clusters_layer_wizard.tsx
@@ -29,13 +29,14 @@ import {
STYLE_TYPE,
} from '../../../../common/constants';
import { NUMERICAL_COLOR_PALETTES } from '../../styles/color_palettes';
+import { ClustersLayerIcon } from './clusters_layer_icon';
export const clustersLayerWizardConfig: LayerWizard = {
categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH],
description: i18n.translate('xpack.maps.source.esGridClustersDescription', {
defaultMessage: 'Geospatial data grouped in grids with metrics for each gridded cell',
}),
- icon: 'logoElasticsearch',
+ icon: ClustersLayerIcon,
renderWizard: ({ previewLayers }: RenderWizardArguments) => {
const onSourceConfigChange = (sourceConfig: Partial) => {
if (!sourceConfig) {
diff --git a/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/heatmap_layer_icon.tsx b/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/heatmap_layer_icon.tsx
new file mode 100644
index 0000000000000..5f4835e386911
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/heatmap_layer_icon.tsx
@@ -0,0 +1,33 @@
+/*
+ * 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, { FunctionComponent } from 'react';
+
+export const HeatmapLayerIcon: FunctionComponent = () => (
+
+);
diff --git a/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/heatmap_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/heatmap_layer_wizard.tsx
index 92a0f1006ea43..652514a3b9d34 100644
--- a/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/heatmap_layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/heatmap_layer_wizard.tsx
@@ -15,13 +15,14 @@ import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_re
import { HeatmapLayer } from '../../layers/heatmap_layer/heatmap_layer';
import { ESGeoGridSourceDescriptor } from '../../../../common/descriptor_types';
import { LAYER_WIZARD_CATEGORY, RENDER_AS } from '../../../../common/constants';
+import { HeatmapLayerIcon } from './heatmap_layer_icon';
export const heatmapLayerWizardConfig: LayerWizard = {
categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH],
description: i18n.translate('xpack.maps.source.esGridHeatmapDescription', {
defaultMessage: 'Geospatial data grouped in grids to show density',
}),
- icon: 'logoElasticsearch',
+ icon: HeatmapLayerIcon,
renderWizard: ({ previewLayers }: RenderWizardArguments) => {
const onSourceConfigChange = (sourceConfig: Partial) => {
if (!sourceConfig) {
diff --git a/x-pack/plugins/maps/public/classes/sources/es_pew_pew_source/point_2_point_layer_icon.tsx b/x-pack/plugins/maps/public/classes/sources/es_pew_pew_source/point_2_point_layer_icon.tsx
new file mode 100644
index 0000000000000..ed5d38bba0fba
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/sources/es_pew_pew_source/point_2_point_layer_icon.tsx
@@ -0,0 +1,129 @@
+/*
+ * 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, { FunctionComponent } from 'react';
+
+export const Point2PointLayerIcon: FunctionComponent = () => (
+
+);
diff --git a/x-pack/plugins/maps/public/classes/sources/es_pew_pew_source/point_2_point_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/es_pew_pew_source/point_2_point_layer_wizard.tsx
index fee84d0208978..74e690d4d3204 100644
--- a/x-pack/plugins/maps/public/classes/sources/es_pew_pew_source/point_2_point_layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/es_pew_pew_source/point_2_point_layer_wizard.tsx
@@ -23,13 +23,14 @@ import { NUMERICAL_COLOR_PALETTES } from '../../styles/color_palettes';
import { CreateSourceEditor } from './create_source_editor';
import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_registry';
import { ColorDynamicOptions, SizeDynamicOptions } from '../../../../common/descriptor_types';
+import { Point2PointLayerIcon } from './point_2_point_layer_icon';
export const point2PointLayerWizardConfig: LayerWizard = {
categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH],
description: i18n.translate('xpack.maps.source.pewPewDescription', {
defaultMessage: 'Aggregated data paths between the source and destination',
}),
- icon: 'logoElasticsearch',
+ icon: Point2PointLayerIcon,
renderWizard: ({ previewLayers }: RenderWizardArguments) => {
const onSourceConfigChange = (sourceConfig: unknown) => {
if (!sourceConfig) {
diff --git a/x-pack/plugins/maps/public/classes/sources/es_search_source/es_documents_layer_icon.tsx b/x-pack/plugins/maps/public/classes/sources/es_search_source/es_documents_layer_icon.tsx
new file mode 100644
index 0000000000000..dcd4985f44280
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/sources/es_search_source/es_documents_layer_icon.tsx
@@ -0,0 +1,40 @@
+/*
+ * 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, { FunctionComponent } from 'react';
+
+export const EsDocumentsLayerIcon: FunctionComponent = () => (
+
+);
diff --git a/x-pack/plugins/maps/public/classes/sources/es_search_source/es_documents_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/es_search_source/es_documents_layer_wizard.tsx
index 249b9a2454d7d..af2061d6c541f 100644
--- a/x-pack/plugins/maps/public/classes/sources/es_search_source/es_documents_layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/es_search_source/es_documents_layer_wizard.tsx
@@ -15,6 +15,7 @@ import { BlendedVectorLayer } from '../../layers/blended_vector_layer/blended_ve
import { VectorLayer } from '../../layers/vector_layer/vector_layer';
import { LAYER_WIZARD_CATEGORY, SCALING_TYPES } from '../../../../common/constants';
import { TiledVectorLayer } from '../../layers/tiled_vector_layer/tiled_vector_layer';
+import { EsDocumentsLayerIcon } from './es_documents_layer_icon';
export function createDefaultLayerDescriptor(sourceConfig: unknown, mapColors: string[]) {
const sourceDescriptor = ESSearchSource.createDescriptor(sourceConfig);
@@ -33,7 +34,7 @@ export const esDocumentsLayerWizardConfig: LayerWizard = {
description: i18n.translate('xpack.maps.source.esSearchDescription', {
defaultMessage: 'Points, lines, and polygons from Elasticsearch',
}),
- icon: 'logoElasticsearch',
+ icon: EsDocumentsLayerIcon,
renderWizard: ({ previewLayers, mapColors }: RenderWizardArguments) => {
const onSourceConfigChange = (sourceConfig: unknown) => {
if (!sourceConfig) {