[Maps] Add layer type preview icons (elastic#78650)

* Added layer type preview icons * Added margin tops
nreese · Oct 1, 2020 · 0a3449c · 0a3449c
1 parent 7d34537
commit 0a3449c
Show file tree

Hide file tree

Showing 14 changed files with 299 additions and 7 deletions.
diff --git 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
@@ -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
@@ -0,0 +1,11 @@
+.mapLayersWizardIcon {
+  margin-top: $euiSizeS;
+
+  &__highlight {
+    fill: $euiColorFullShade;
+  }
+
+  &__background {
+    fill: $euiColorLightShade;
+  }
+}
diff --git a/...ck/plugins/maps/public/classes/layers/choropleth_layer_wizard/choropleth_layer_wizard.tsx b/...ck/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 <LayerTemplate {...renderWizardArguments} />;
   },

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
@@ -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 = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="49"
+    height="25"
+    fill="none"
+    viewBox="0 0 49 25"
+    className="mapLayersWizardIcon"
+  >
+    <path
+      fill="#98A2B3"
+      d="M32.206 15.364V1.588l-1.492.204c-.743.254-1.768.38-2.702.45a41.39 41.39 0 01-1.258.07l-.093.005c-.312.014-.57.025-.72.042a1.895 1.895 0 00-.558.167c-.156.07-.316.156-.47.238l-.057.031c-.356.19-.687.357-1.025.4l-2.262.474v5.864c0 .698-.677 2.578-.818 3.852l.34 1.807 11.114.17z"
+    />
+    <path
+      fill="#69707D"
+      d="M22.36 3.558c-.178-.104-.416-.15-.664-.172a6.333 6.333 0 00-.885 0c-.657.04-1.452.144-2.264.261l-.703.103c-.583.087-1.16.172-1.692.238-.751.093-1.39.145-1.82.113-.593-.044-1.125.341-1.611.843-.453.467-.925 1.101-1.429 1.777l-.144.193c-1.132 1.517-2.452 3.218-4.22 4.102-.213.107-.346.312-.431.528a3.065 3.065 0 00-.173.78c-.064.586-.046 1.324.007 2.083.072 1.01.211 2.102.32 2.955.055.42.101.784.128 1.05.08.78-.128 1.77-.37 2.653-.088.319-.178.616-.258.882l-.086.285a9.67 9.67 0 00-.12.434 1.518 1.518 0 00-.053.334c0 .28.11.577.283.842a2.3 2.3 0 00.735.708l.067.04h.078c4.133-.069 11.445-.366 12.196-.45a.58.58 0 00.334-.17 1.41 1.41 0 00.224-.293c.134-.223.264-.524.388-.867.249-.69.495-1.6.72-2.52.162-.654.314-1.32.452-1.92l.16-.695c.088-.378.167-.707.235-.963.07-.267.123-.43.156-.494a1.57 1.57 0 00.1-.314c.03-.129.063-.291.096-.48.067-.38.14-.876.213-1.45.146-1.149.296-2.614.403-4.073.107-1.458.171-2.917.146-4.052a10.13 10.13 0 00-.112-1.438 2.469 2.469 0 00-.131-.495c-.053-.128-.135-.275-.276-.358z"
+    />
+    <path
+      fill="#D3DAE6"
+      d="M31.435 15.227c-.218.006-1.066-.01-1.445 0-.758.02-1.298-.026-2.353 0H22.15l-2.864 8.915c.2.067 1.938.445 2.242.447.62.005 1.478-.08 2.393-.197.88-.112 1.824-.257 2.679-.389l.112-.017c.888-.136 1.664-.254 2.166-.304.348-.035.996-.025 1.858-.007l.128.002c.827.017 1.818.037 2.868.023 2.199-.028 4.695-.203 6.5-.887 1.42-.538 2.1-.87 2.513-1.339.414-.469.558-.468.643-1.44.086-.972.086-2.063.086-2.063l-8.131-2.744h-3.907z"
+    />
+    <path
+      className="mapLayersWizardIcon__highlight"
+      d="M32.206 1.588s-2.046 13.417-1.603 13.639c.787.393 2.66.63 3.785 1.636 1.23 1.1 1.171 2.5 2.318 3.239.834.538 6.73-.874 6.73-.874l.228-7.956s-.174-4.5-.89-5.216c-.716-.715-2.489-1.125-3-2.08-1.115-2.08-3.068-2.351-3.068-2.351l-4.5-.037z"
+    />
+  </svg>
+);
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
@@ -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<boolean>;
   description: string;
-  icon: string;
+  icon: string | FunctionComponent<any>;
   prerequisiteSteps?: Array<{ id: string; label: string }>;
   renderWizard(renderWizardArguments: RenderWizardArguments): ReactElement<any>;
   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
@@ -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 = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="49"
+    height="25"
+    fill="none"
+    viewBox="0 0 49 25"
+    className="mapLayersWizardIcon"
+  >
+    <circle cx="17.867" cy="5.032" r="2.045" className="mapLayersWizardIcon__highlight" />
+    <circle cx="13.367" cy="11.717" r="2.045" className="mapLayersWizardIcon__highlight" />
+    <circle cx="14.594" cy="19.901" r="3.273" className="mapLayersWizardIcon__highlight" />
+    <circle cx="4.776" cy="18.398" r="2.662" className="mapLayersWizardIcon__highlight" />
+    <circle cx="6.619" cy="5.649" r="2.662" className="mapLayersWizardIcon__highlight" />
+    <path className="mapLayersWizardIcon__highlight" d="M31.114 7.454h5.455v5.455h-5.455z" />
+    <path fill="#98A2B3" d="M31.114 12.909h5.455v5.455h-5.455z" />
+    <path fill="#69707D" d="M42.023 12.909h5.455v5.455h-5.455z" />
+    <path fill="#69707D" d="M42.023 12.909h5.455v5.455h-5.455z" />
+    <path fill="#69707D" d="M42.023 12.909h5.455v5.455h-5.455z" />
+    <path fill="#69707D" d="M42.023 12.909h5.455v5.455h-5.455zm-5.454-5.455h5.455v5.455h-5.455z" />
+    <path fill="#69707D" d="M36.569 7.454h5.455v5.455h-5.455z" />
+    <path fill="#69707D" d="M36.569 7.454h5.455v5.455h-5.455z" />
+    <path fill="#69707D" d="M36.569 7.454h5.455v5.455h-5.455z" />
+    <path fill="#98A2B3" d="M42.023 7.454h5.455v5.455h-5.455z" />
+    <path fill="#98A2B3" d="M36.569 1.999h5.455v5.455h-5.455z" />
+    <path className="mapLayersWizardIcon__highlight" d="M36.569 12.909h5.455v5.455h-5.455z" />
+    <path fill="#D3DAE6" d="M36.569 18.363h5.455v5.455h-5.455z" />
+  </svg>
+);
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
@@ -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<ESGeoGridSourceDescriptor>) => {
       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
@@ -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 = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="49"
+    height="25"
+    fill="none"
+    viewBox="0 0 49 25"
+    className="mapLayersWizardIcon"
+  >
+    <path
+      className="mapLayersWizardIcon__background"
+      fillRule="evenodd"
+      d="M29.012 20.309a10.393 10.393 0 01-6.608 2.359c-1.134 0-2.225-.181-3.247-.515a8.322 8.322 0 11-6.005-14.747A10.433 10.433 0 0122.404 1.8c3.973 0 7.428 2.222 9.19 5.49a8.322 8.322 0 11-2.582 13.019z"
+      clipRule="evenodd"
+      opacity="0.8"
+    />
+    <circle cx="35.741" cy="14.778" r="3.989" className="mapLayersWizardIcon__highlight" />
+    <path
+      className="mapLayersWizardIcon__highlight"
+      fillRule="evenodd"
+      d="M20.021 16.957c-1.199-.773-2.221-.518-3.224.826-.896 1.2-2.587 1.272-3.963.482-1.332-.764-1.843-2.084-1.403-3.62.447-1.558 1.517-2.379 3.084-2.365 1.676.015 1.886-.16 2.496-1.863.8-2.235 2.274-3.8 4.704-4.07 2.266-.252 4.174.556 5.41 2.574 1.323 2.158 1.17 4.623-.348 6.462-1.65 1.998-3.962 2.574-6.756 1.574z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
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
@@ -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<ESGeoGridSourceDescriptor>) => {
       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
@@ -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 = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="49"
+    height="25"
+    fill="none"
+    viewBox="0 0 49 25"
+    className="mapLayersWizardIcon"
+  >
+    <circle cx="38.311" cy="12.889" r="1.636" className="mapLayersWizardIcon__highlight" />
+    <circle
+      cx="10.85"
+      cy="15.12"
+      r="1.636"
+      className="mapLayersWizardIcon__highlight"
+      transform="rotate(-27.34 10.85 15.12)"
+    />
+    <path
+      className="mapLayersWizardIcon__highlight"
+      d="M10.746 14.918l12.499-3.892.162.521-12.499 3.892z"
+    />
+    <path
+      className="mapLayersWizardIcon__highlight"
+      d="M10.746 14.918l12.499-3.892.162.521-12.499 3.892z"
+    />
+    <path
+      className="mapLayersWizardIcon__highlight"
+      d="M10.746 14.918l12.499-3.892.162.521-12.499 3.892z"
+    />
+    <path
+      className="mapLayersWizardIcon__highlight"
+      d="M10.746 14.918l12.499-3.892.162.521-12.499 3.892z"
+    />
+    <circle
+      cx="6.805"
+      cy="4.603"
+      r="1.636"
+      className="mapLayersWizardIcon__highlight"
+      transform="rotate(-23.178 6.805 4.603)"
+    />
+    <path
+      className="mapLayersWizardIcon__highlight"
+      d="M6.27 4.194l17.235 5.888-.176.516L6.094 4.71z"
+    />
+    <path
+      className="mapLayersWizardIcon__highlight"
+      d="M6.27 4.194l17.235 5.888-.176.516L6.094 4.71z"
+    />
+    <path
+      className="mapLayersWizardIcon__highlight"
+      d="M6.27 4.194l17.235 5.888-.176.516L6.094 4.71z"
+    />
+    <path
+      className="mapLayersWizardIcon__highlight"
+      d="M6.27 4.194l17.235 5.888-.176.516L6.094 4.71z"
+    />
+    <path
+      className="mapLayersWizardIcon__highlight"
+      d="M22.8 9.673l16.113 2.854-.095.538-16.113-2.855z"
+    />
+    <path
+      className="mapLayersWizardIcon__highlight"
+      d="M22.8 9.673l16.113 2.854-.095.538-16.113-2.855z"
+    />
+    <path
+      className="mapLayersWizardIcon__highlight"
+      d="M22.8 9.673l16.113 2.854-.095.538-16.113-2.855z"
+    />
+    <path
+      className="mapLayersWizardIcon__highlight"
+      d="M22.8 9.673l16.113 2.854-.095.538-16.113-2.855z"
+    />
+    <circle
+      cx="19.542"
+      cy="22.262"
+      r="1.636"
+      className="mapLayersWizardIcon__highlight"
+      transform="rotate(8.84 19.542 22.262)"
+    />
+    <path
+      className="mapLayersWizardIcon__highlight"
+      d="M19.28 22.43l4.937-12.124.505.206-4.937 12.124z"
+    />
+    <path
+      className="mapLayersWizardIcon__highlight"
+      d="M19.28 22.43l4.937-12.124.505.206-4.937 12.124z"
+    />
+    <path
+      className="mapLayersWizardIcon__highlight"
+      d="M19.28 22.43l4.937-12.124.505.206-4.937 12.124z"
+    />
+    <path
+      className="mapLayersWizardIcon__highlight"
+      d="M19.28 22.43l4.937-12.124.505.206-4.937 12.124z"
+    />
+    <circle
+      cx="42.691"
+      cy="3.795"
+      r="1.636"
+      className="mapLayersWizardIcon__highlight"
+      transform="rotate(-6.89 42.691 3.795)"
+    />
+    <path
+      className="mapLayersWizardIcon__highlight"
+      d="M42.715 3.993l-18.251 7.243-.202-.507 18.252-7.243z"
+    />
+    <path
+      className="mapLayersWizardIcon__highlight"
+      d="M42.715 3.993l-18.251 7.243-.202-.507 18.252-7.243z"
+    />
+    <path
+      className="mapLayersWizardIcon__highlight"
+      d="M42.715 3.993l-18.251 7.243-.202-.507 18.252-7.243z"
+    />
+    <path
+      className="mapLayersWizardIcon__highlight"
+      d="M42.715 3.993l-18.251 7.243-.202-.507 18.252-7.243z"
+    />
+    <circle cx="24.578" cy="11.109" r="2.727" className="mapLayersWizardIcon__highlight" />
+  </svg>
+);
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
@@ -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
@@ -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 = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="49"
+    height="25"
+    fill="none"
+    viewBox="0 0 49 25"
+    className="mapLayersWizardIcon"
+  >
+    <path
+      className="mapLayersWizardIcon__background"
+      d="M30.501 14.511l1.602-12.954-1.388.236c-.744.254-1.768.38-2.703.45-.463.034-.899.055-1.258.07l-.093.005c-.311.014-.57.025-.72.042a1.895 1.895 0 00-.558.167 7.55 7.55 0 00-.47.238l-.057.031c-.356.19-.686.357-1.025.4l-1.307.338v5.864c0 .697.141 2.168 0 3.443l-.205 1.67h8.182zM20.607 3.249c-.657.038-1.248.281-2.06.398l-.703.103c-.583.087-1.16.172-1.692.238-.751.093-1.39.145-1.82.113-.593-.044-1.125.341-1.611.843-.453.467-.925 1.101-1.429 1.777l-.144.193c-1.132 1.517-2.452 3.218-4.22 4.102-.213.107-.346.312-.431.528a3.07 3.07 0 00-.173.78c-.064.586-.046 1.324.007 2.083.072 1.01.211 2.102.32 2.955.055.42.101.784.128 1.05.08.78-.128 1.77-.37 2.653-.088.319-.178.616-.258.882l-.086.285a9.67 9.67 0 00-.12.434 1.518 1.518 0 00-.053.334c0 .28.11.577.283.842a2.3 2.3 0 00.735.708l.067.04h.078c4.133-.069 10.221-.555 10.973-.639a.581.581 0 00.333-.17c.083-.08.158-.181.225-.293.134-.223.263-.524.387-.867.25-.69.495-1.6.721-2.519.161-.654.544-1.41.682-2.011l.784-2.796c.067-.379.199-1.13.272-1.704.147-1.149-.01-2.54.097-4 .107-1.458.172-2.917.147-4.052a10.13 10.13 0 00-.113-1.438 2.469 2.469 0 00-.131-.495c-.052-.128-.276-.357-.276-.357h-.55zM31.538 15.87s-1.17-.652-1.548-.643c-.758.02-1.298-.026-2.353 0H22.15l-2.864 8.915c.2.067 1.938.445 2.242.447.62.005 1.478-.08 2.393-.197.88-.112 1.824-.257 2.679-.389l.112-.017c.888-.136 1.664-.254 2.166-.304.348-.035.996-.025 1.858-.007l.128.002c.827.017 1.818.037 2.868.023 2.199-.028 4.695-.203 6.5-.887 1.42-.538 2.1-.87 2.513-1.339.414-.469.575-1.576.575-1.576s-2.906.867-4.807.784c-.927-.041-1.507.044-2.352-.341-1.428-.652-1.205-2.22-2.429-3.205-.771-.62-2.194-1.267-2.194-1.267z"
+    />
+    <path
+      className="mapLayersWizardIcon__background"
+      d="M33.058 1.625S31.012 14.8 31.455 15.023c.787.393 2.012.664 3.137 1.67 1.23 1.1 1.172 2.5 2.318 3.239.835.538 6.525-.704 6.525-.704l.228-7.956s-.173-4.5-.89-5.215c-.715-.716-2.488-1.125-3-2.08-1.114-2.081-3.068-2.352-3.068-2.352h-3.647z"
+    />
+    <circle cx="14.761" cy="9.754" r="1.091" className="mapLayersWizardIcon__highlight" />
+    <circle cx="36.63" cy="10.706" r="1.091" className="mapLayersWizardIcon__highlight" />
+    <circle cx="24.842" cy="19.181" r="1.091" className="mapLayersWizardIcon__highlight" />
+    <circle cx="39.024" cy="15.363" r="1.091" className="mapLayersWizardIcon__highlight" />
+    <circle cx="27.569" cy="6.091" r="1.091" className="mapLayersWizardIcon__highlight" />
+    <circle cx="28.66" cy="11" r="1.091" className="mapLayersWizardIcon__highlight" />
+    <circle cx="35.206" cy="4.454" r="1.091" className="mapLayersWizardIcon__highlight" />
+    <circle cx="18.842" cy="6.091" r="1.091" className="mapLayersWizardIcon__highlight" />
+    <circle cx="10.115" cy="13.727" r="1.091" className="mapLayersWizardIcon__highlight" />
+    <circle cx="16.66" cy="14.818" r="1.091" className="mapLayersWizardIcon__highlight" />
+    <circle cx="11.206" cy="20.272" r="1.091" className="mapLayersWizardIcon__highlight" />
+    <circle cx="17.751" cy="20.818" r="1.091" className="mapLayersWizardIcon__highlight" />
+    <circle cx="30.842" cy="20.818" r="1.091" className="mapLayersWizardIcon__highlight" />
+  </svg>
+);
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
@@ -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) {