elastic · nickpeihl · Mar 30, 2022 · Sep 27, 2021 · Sep 27, 2021 · Sep 28, 2021
diff --git a/docs/maps/vector-style-properties.asciidoc b/docs/maps/vector-style-properties.asciidoc
@@ -61,6 +61,12 @@ Available icons
 [role="screenshot"]
 image::maps/images/maki-icons.png[]
 
+Custom Icons
+
+You may also use your own SVG icon to style Point features in your map. In Layer Settings click the **Add custom icon** button from the *Icon* dropdown list to upload your icon to the map. For best results, your SVG icon should be monochrome and have limited details. Dynamic styling in **Elastic Maps** requires rendering SVG icons as PNGs using a https://en.wikipedia.org/wiki/Signed_distance_function[Signed Distance Function]. As a result, sharp corners and intricate details may not render correctly. You may be able to tweak the **Alpha threshold** and **Radius** when adding or editing the icon for better results.
+
+Custom icons can be added, edited, or deleted in Map settings. 
+
 
 [float]
 [[polygon-style-properties]]

@@ -218,6 +218,17 @@ export enum LABEL_BORDER_SIZES {
 }
 
 export const DEFAULT_ICON = 'marker';
+export const DEFAULT_CUSTOM_ICON_CUTOFF = 0.25;
+export const DEFAULT_CUSTOM_ICON_RADIUS = 0.25;
+export const CUSTOM_ICON_SIZE = 64;
+export const CUSTOM_ICON_PREFIX_SDF = '__kbn__custom_icon_sdf__';
+export const MAKI_ICON_SIZE = 16;
+export const HALF_MAKI_ICON_SIZE = MAKI_ICON_SIZE / 2;
+
+export enum ICON_SOURCE {
+  CUSTOM = 'CUSTOM',
+  MAKI = 'MAKI',
+}
 
 export enum VECTOR_STYLES {
   SYMBOLIZE_AS = 'symbolizeAs',

@@ -10,6 +10,7 @@
 import {
   COLOR_MAP_TYPE,
   FIELD_ORIGIN,
+  ICON_SOURCE,
   LABEL_BORDER_SIZES,
   SYMBOLIZE_AS_TYPES,
   VECTOR_STYLES,
@@ -60,6 +61,7 @@ export type CategoryColorStop = {
 export type IconStop = {
   stop: string | null;
   icon: string;
+  iconSource?: ICON_SOURCE;
 };
 
 export type ColorDynamicOptions = {
@@ -108,6 +110,9 @@ export type IconDynamicOptions = {
 
 export type IconStaticOptions = {
   value: string; // icon id
+  label?: string;
+  svg?: string;
+  iconSource?: ICON_SOURCE;
 };
 
 export type IconStylePropertyDescriptor =
@@ -178,6 +183,14 @@ export type SizeStylePropertyDescriptor =
       options: SizeDynamicOptions;
     };
 
+export type CustomIcon = {
+  symbolId: string;
+  svg: string; // svg string
+  label: string; // user given label
+  cutoff: number;
+  radius: number;
+};
+
 export type VectorStylePropertiesDescriptor = {
   [VECTOR_STYLES.SYMBOLIZE_AS]: SymbolizeAsStylePropertyDescriptor;
   [VECTOR_STYLES.FILL_COLOR]: ColorStylePropertyDescriptor;

@@ -39,6 +39,11 @@ describe('layer_actions', () => {
         return true;
       };
 
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      require('../selectors/map_selectors').getCustomIcons = () => {
+        return [];
+      };
+
       // eslint-disable-next-line @typescript-eslint/no-var-requires
       require('../selectors/map_selectors').createLayerInstance = () => {
         return {

@@ -11,6 +11,7 @@ import { Query } from 'src/plugins/data/public';
 import { MapStoreState } from '../reducers/store';
 import {
   createLayerInstance,
+  getCustomIcons,
   getEditState,
   getLayerById,
   getLayerList,
@@ -174,8 +175,7 @@ export function addLayer(layerDescriptor: LayerDescriptor) {
       layer: layerDescriptor,
     });
     dispatch(syncDataForLayerId(layerDescriptor.id, false));
-
-    const layer = createLayerInstance(layerDescriptor);
+    const layer = createLayerInstance(layerDescriptor, getCustomIcons(getState()));
     const features = await layer.getLicensedFeatures();
     features.forEach(notifyLicensedFeatureUsage);
   };

@@ -14,10 +14,11 @@ import turfBooleanContains from '@turf/boolean-contains';
 import { Filter } from '@kbn/es-query';
 import { Query, TimeRange } from 'src/plugins/data/public';
 import { Geometry, Position } from 'geojson';
-import { asyncForEach } from '@kbn/std';
-import { DRAW_MODE, DRAW_SHAPE } from '../../common/constants';
+import { asyncForEach, asyncMap } from '@kbn/std';
+import { DRAW_MODE, DRAW_SHAPE, LAYER_STYLE_TYPE } from '../../common/constants';
 import type { MapExtentState, MapViewContext } from '../reducers/map/types';
 import { MapStoreState } from '../reducers/store';
+import { IVectorStyle } from '../classes/styles/vector/vector_style';
 import {
   getDataFilters,
   getFilters,
@@ -60,7 +61,13 @@ import {
 } from './data_request_actions';
 import { addLayer, addLayerWithoutDataSync } from './layer_actions';
 import { MapSettings } from '../reducers/map';
-import { DrawState, MapCenterAndZoom, MapExtent, Timeslice } from '../../common/descriptor_types';
+import {
+  CustomIcon,
+  DrawState,
+  MapCenterAndZoom,
+  MapExtent,
+  Timeslice,
+} from '../../common/descriptor_types';
 import { INITIAL_LOCATION } from '../../common/constants';
 import { updateTooltipStateForLayer } from './tooltip_actions';
 import { isVectorLayer, IVectorLayer } from '../classes/layers/vector_layer';
@@ -108,6 +115,51 @@ export function updateMapSetting(
   };
 }
 
+export function updateCustomIcons(customIcons: CustomIcon[]) {
+  return {
+    type: UPDATE_MAP_SETTING,
+    settingKey: 'customIcons',
+    settingValue: customIcons.map((icon) => {
+      return { ...icon, svg: Buffer.from(icon.svg).toString('base64') };
+    }),
+  };
+}
+
+export function deleteCustomIcon(value: string) {
+  return async (
+    dispatch: ThunkDispatch<MapStoreState, void, AnyAction>,
+    getState: () => MapStoreState
+  ) => {
+    const layersContainingCustomIcon = getLayerList(getState()).filter((layer) => {
+      const style = layer.getCurrentStyle();
+      if (!style || style.getType() !== LAYER_STYLE_TYPE.VECTOR) {
+        return false;
+      }
+      return (style as IVectorStyle).isUsingCustomIcon(value);
+    });
+
+    if (layersContainingCustomIcon.length > 0) {
+      const layerList = await asyncMap(layersContainingCustomIcon, async (layer) => {
+        return await layer.getDisplayName();
+      });
+      getToasts().addWarning(
+        i18n.translate('xpack.maps.mapActions.deleteCustomIconWarning', {
+          defaultMessage: `Unable to delete icon. The icon is in use by the {count, plural, one {layer} other {layers}}: {layerNames}`,
+          values: {
+            count: layerList.length,
+            layerNames: layerList.join(', '),
+          },
+        })
+      );
+    } else {
+      const newIcons = getState().map.settings.customIcons.filter(
+        ({ symbolId }) => symbolId !== value
+      );
+      dispatch(updateMapSetting('customIcons', newIcons));
+    }
+  };
+}
+
 export function mapReady() {
   return (
     dispatch: ThunkDispatch<MapStoreState, void, AnyAction>,

@@ -26,6 +26,7 @@ import {
 import { copyPersistentState } from '../../reducers/copy_persistent_state';
 import {
   Attribution,
+  CustomIcon,
   LayerDescriptor,
   MapExtent,
   StyleDescriptor,
@@ -92,7 +93,8 @@ export interface ILayer {
   isVisible(): boolean;
   cloneDescriptor(): Promise<LayerDescriptor>;
   renderStyleEditor(
-    onStyleDescriptorChange: (styleDescriptor: StyleDescriptor) => void
+    onStyleDescriptorChange: (styleDescriptor: StyleDescriptor) => void,
+    onCustomIconChange: (customIcons: CustomIcon[]) => void
   ): ReactElement<any> | null;
   getInFlightRequestTokens(): symbol[];
   getPrevRequestToken(dataId: string): symbol | undefined;
@@ -431,13 +433,14 @@ export class AbstractLayer implements ILayer {
   }
 
   renderStyleEditor(
-    onStyleDescriptorChange: (styleDescriptor: StyleDescriptor) => void
+    onStyleDescriptorChange: (styleDescriptor: StyleDescriptor) => void,
+    onCustomIconsChange: (customIcons: CustomIcon[]) => void
   ): ReactElement<any> | null {
     const style = this.getStyleForEditing();
     if (!style) {
       return null;
     }
-    return style.renderEditor(onStyleDescriptorChange);
+    return style.renderEditor(onStyleDescriptorChange, onCustomIconsChange);
   }
 
   getIndexPatternIds(): string[] {

@@ -10,6 +10,7 @@ import { BlendedVectorLayer } from './blended_vector_layer';
 import { ESSearchSource } from '../../../sources/es_search_source';
 import {
   AbstractESSourceDescriptor,
+  CustomIcon,
   ESGeoGridSourceDescriptor,
 } from '../../../../../common/descriptor_types';
 
@@ -23,6 +24,8 @@ jest.mock('../../../../kibana_services', () => {
 
 const mapColors: string[] = [];
 
+const customIcons: CustomIcon[] = [];
+
 const notClusteredDataRequest = {
   data: { isSyncClustered: false },
   dataId: 'ACTIVE_COUNT_DATA_ID',
@@ -51,6 +54,7 @@ describe('getSource', () => {
           },
           mapColors
         ),
+        customIcons,
       });
 
       const source = blendedVectorLayer.getSource();
@@ -72,6 +76,7 @@ describe('getSource', () => {
           },
           mapColors
         ),
+        customIcons,
       });
 
       const source = blendedVectorLayer.getSource();
@@ -112,6 +117,7 @@ describe('getSource', () => {
           },
           mapColors
         ),
+        customIcons,
       });
 
       const source = blendedVectorLayer.getSource();
@@ -132,6 +138,7 @@ describe('cloneDescriptor', () => {
           },
           mapColors
         ),
+        customIcons,
       });
 
       const clonedLayerDescriptor = await blendedVectorLayer.cloneDescriptor();
@@ -151,6 +158,7 @@ describe('cloneDescriptor', () => {
           },
           mapColors
         ),
+        customIcons,
       });
 
       const clonedLayerDescriptor = await blendedVectorLayer.cloneDescriptor();

@@ -31,6 +31,7 @@ import { ISource } from '../../../sources/source';
 import { DataRequestContext } from '../../../../actions';
 import { DataRequestAbortError } from '../../../util/data_request';
 import {
+  CustomIcon,
   VectorStyleDescriptor,
   SizeDynamicOptions,
   DynamicStylePropertyOptions,
@@ -171,6 +172,7 @@ export interface BlendedVectorLayerArguments {
   chartsPaletteServiceGetColor?: (value: string) => string | null;
   source: IVectorSource;
   layerDescriptor: VectorLayerDescriptor;
+  customIcons: CustomIcon[];
 }
 
 export class BlendedVectorLayer extends GeoJsonVectorLayer implements IVectorLayer {
@@ -207,6 +209,7 @@ export class BlendedVectorLayer extends GeoJsonVectorLayer implements IVectorLay
       clusterStyleDescriptor,
       this._clusterSource,
       this,
+      options.customIcons,
       options.chartsPaletteServiceGetColor
     );
 

@@ -58,7 +58,7 @@ function createLayer(
     sourceDescriptor,
   };
   const layerDescriptor = MvtVectorLayer.createDescriptor(defaultLayerOptions);
-  return new MvtVectorLayer({ layerDescriptor, source: mvtSource });
+  return new MvtVectorLayer({ layerDescriptor, source: mvtSource, customIcons: [] });
 }
 
 describe('visiblity', () => {

@@ -54,8 +54,8 @@ export class MvtVectorLayer extends AbstractVectorLayer {
 
   readonly _source: IMvtVectorSource;
 
-  constructor({ layerDescriptor, source }: VectorLayerArguments) {
-    super({ layerDescriptor, source });
+  constructor({ layerDescriptor, source, customIcons }: VectorLayerArguments) {
+    super({ layerDescriptor, source, customIcons });
     this._source = source as IMvtVectorSource;
   }
 

@@ -86,6 +86,7 @@ describe('cloneDescriptor', () => {
       const layer = new AbstractVectorLayer({
         layerDescriptor,
         source: new MockSource() as unknown as IVectorSource,
+        customIcons: [],
       });
       const clonedDescriptor = await layer.cloneDescriptor();
       const clonedStyleProps = (clonedDescriptor.style as VectorStyleDescriptor).properties;
@@ -123,6 +124,7 @@ describe('cloneDescriptor', () => {
       const layer = new AbstractVectorLayer({
         layerDescriptor,
         source: new MockSource() as unknown as IVectorSource,
+        customIcons: [],
       });
       const clonedDescriptor = await layer.cloneDescriptor();
       const clonedStyleProps = (clonedDescriptor.style as VectorStyleDescriptor).properties;

@@ -38,6 +38,7 @@ import {
 } from '../../util/mb_filter_expressions';
 import {
   AggDescriptor,
+  CustomIcon,
   DynamicStylePropertyOptions,
   DataFilters,
   ESTermSourceDescriptor,
@@ -70,6 +71,7 @@ export interface VectorLayerArguments {
   source: IVectorSource;
   joins?: InnerJoin[];
   layerDescriptor: VectorLayerDescriptor;
+  customIcons: CustomIcon[];
   chartsPaletteServiceGetColor?: (value: string) => string | null;
 }
 
@@ -133,6 +135,7 @@ export class AbstractVectorLayer extends AbstractLayer implements IVectorLayer {
     layerDescriptor,
     source,
     joins = [],
+    customIcons,
     chartsPaletteServiceGetColor,
   }: VectorLayerArguments) {
     super({
@@ -144,6 +147,7 @@ export class AbstractVectorLayer extends AbstractLayer implements IVectorLayer {
       layerDescriptor.style,
       source,
       this,
+      customIcons,
       chartsPaletteServiceGetColor
     );
   }

@@ -2,5 +2,7 @@
 @import 'vector/components/style_prop_editor';
 @import 'vector/components/color/color_stops';
 @import 'vector/components/symbol/icon_select';
+@import 'vector/components/symbol/icon_preview';
+@import 'vector/components/symbol/custom_icon_modal';
 @import 'vector/components/legend/category';
 @import 'vector/components/legend/vector_legend';
@@ -6,11 +6,12 @@
  */
 
 import { ReactElement } from 'react';
-import { StyleDescriptor } from '../../../common/descriptor_types';
+import { CustomIcon, StyleDescriptor } from '../../../common/descriptor_types';
 
 export interface IStyle {
   getType(): string;
   renderEditor(
-    onStyleDescriptorChange: (styleDescriptor: StyleDescriptor) => void
+    onStyleDescriptorChange: (styleDescriptor: StyleDescriptor) => void,
+    onCustomIconsChange: (customIcons: CustomIcon[]) => void
   ): ReactElement<any> | null;
 }