[Maps] Support custom icons in maps #113144

nickpeihl · 2021-09-27T16:58:24Z

Summary

Adds support for users to upload their own SVG icons for styling geo_points or clusters in Elastic Maps.

Because Elastic Maps uses WebGL, dynamic styling requires rendering SVG icons as monochromatic PNGs using a Signed Distance Function algorithm. As a result, highly detailed designs and any color definitions in SVGs uploaded to Maps are not retained. Monochromatic SVG icons such as these examples from Wikimedia work best.

Custom icons are appended to the map saved object and are not accessible in other maps. Using the custom icon in another map requires creating a copy of the existing map or uploading the icon to the new map. Custom icons can be added, edited, or deleted in Map Settings. Custom icons can also be added from within the Icon select menu.

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

Risk Matrix

Delete this section if it is not applicable to this PR.

Before closing this PR, invite QA, stakeholders, and other developers to identify risks that should be tested prior to the change/feature release.

When forming the risk matrix, consider some of the following examples and how they may potentially impact the change:

Risk	Probability	Severity	Mitigation/Notes
Multiple Spaces—unexpected behavior in non-default Kibana Space.	Low	High	Integration tests will verify that all features are still supported in non-default Kibana Space and when user switches between spaces.
Multiple nodes—Elasticsearch polling might have race conditions when multiple Kibana nodes are polling for the same tasks.	High	Low	Tasks are idempotent, so executing them multiple times will not result in logical error, but will degrade performance. To test for this case we add plenty of unit tests around this logic and document manual testing procedure.
Code should gracefully handle cases when feature X or plugin Y are disabled.	Medium	High	Unit tests will verify that any feature flag or plugin combination still results in our service operational.
See more potential risk examples

For maintainers

This was checked for breaking API changes and was labeled appropriately

* Re-uses code from Canvas asset manager component to upload images * Adds "Add Custom Icon" button to IconSelect component * Adds CustomIcons array to VectorStyle descriptor (not yet persisted to saved object)

kibanamachine · 2021-09-28T00:15:06Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 74d8cf0
Storybooks not built
Pipeline Steps (look for red circles / failed steps)
Interpreting CI Failures

Failed CI Steps

Metrics [docs]

‼️ ERROR: metrics for 74d8cf0 were not reported

History

💔 Build #155845 failed 00d4404

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

* Convert SVG icon to SDF * Add SDF icon to map * Add Image2SDF class (based on tiny-sdf) Note: Only tested with simple monochrome SVG icons. Examples: https://commons.wikimedia.org/wiki/Category:Black_SVG_icons

…custom-icons

…stom-icons

* Adds components for fine tuning cutoff and radius in SDF * Uses bitmap-sdf library instead of custom library Custom icon sizes still differ from maki icon sizes. Not sure why this is happening. Maybe we consider generating SDF icons for maki on the fly as well instead of pregenerating them in a separate library?

…stom-icons

jsanz · 2021-11-17T14:20:24Z

I gave this a first test and it works great! The user experience is pretty good with the sliders to adapt the render for each icon.

I tested it rendering from all different scaling options without issues.

…stom-icons

Made the requested changes.

nreese · 2022-03-29T20:29:42Z

x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_stops.js

+  customIcons,
+}) {
+  return iconStops.map(({ stop, icon, iconSource }, index) => {
+    const { svg, label } =


customIcons.find(({ symbolId }) => symbolId === icon) and getMakiSymbol(icon) can return undefined and you can not spread undefined. Add logic to handle case where icon is not found

nreese · 2022-03-29T20:31:02Z

x-pack/plugins/maps/public/classes/styles/vector/components/style_prop_editor.tsx

@@ -27,9 +28,11 @@ export interface Props<StaticOptions, DynamicOptions> {
  defaultDynamicStyleOptions: DynamicOptions;
  disabled?: boolean;
  disabledBy?: VECTOR_STYLES;
+  customIcons?: CustomIcon[];


type as customIcons: CustomIcon[];

Classes like VectorStyleColorEditor and VectorStyleSizeEditor inherit from StylePropEditor but don't use customIcons, so I don't require them here.

nreese · 2022-03-29T20:31:14Z

x-pack/plugins/maps/public/classes/styles/vector/components/style_prop_editor.tsx

  fields: StyleField[];
  onDynamicStyleChange: (propertyName: VECTOR_STYLES, options: DynamicOptions) => void;
  onStaticStyleChange: (propertyName: VECTOR_STYLES, options: StaticOptions) => void;
+  onCustomIconsChange?: (customIcons: CustomIcon[]) => void;


Type as onCustomIconsChange: (customIcons: CustomIcon[]) => void;

Classes like VectorStyleColorEditor and VectorStyleSizeEditor inherit from StylePropEditor but don't use onCustomIconsChange.

then should onCustomIconsChange be moved to VectorStyleIconEditor?

The updateCustomIcons function from map_actions is mapped as a Prop in the StyleSettings and passed to the layer.renderStyleEditor method. I'm not sure if there's a better way to connect the map action directly to VectorStyleIconEditor?

nreese · 2022-03-29T20:33:45Z

x-pack/plugins/maps/public/classes/styles/vector/vector_style.tsx

@@ -697,12 +711,32 @@ export class VectorStyle implements IVectorStyle {
    return formatters ? formatters[fieldName] : null;
  };

+  getIconSvg(symbolId: string) {
+    const meta = this._getIconMeta(symbolId);
+    if (meta) {


Change to

return meta ? meta.svg : undefined

nreese · 2022-03-29T20:35:16Z

x-pack/plugins/maps/public/classes/styles/vector/vector_style.tsx

+      return { ...icon, iconSource: ICON_SOURCE.CUSTOM };
+    }
+    const symbol = getMakiSymbol(symbolId);
+    return symbol ? { ...symbol, iconSource: ICON_SOURCE.MAKI } : {};


Change to return symbol ? { ...symbol, iconSource: ICON_SOURCE.MAKI } : undefined;

nreese · 2022-03-29T20:35:30Z

x-pack/plugins/maps/public/classes/styles/vector/vector_style.tsx

+  _getIconMeta(
+    symbolId: string
+  ): { svg: string; label: string; iconSource: ICON_SOURCE } | undefined {
+    if (!symbolId) return;


remove !symbolId check, symbolId is required

nreese · 2022-03-29T21:28:11Z

x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_stops.js

+      iconSource === ICON_SOURCE.CUSTOM
+        ? customIcons.find(({ symbolId }) => symbolId === icon)
+        : getMakiSymbol(icon);
+    if (!iconInfo) return;


This may cause problems. You are in map function so returning undefined will return an array of ReactNode and undefined. How about adding a filter after iconStops.map to remove undefineds?

nreese · 2022-03-29T21:34:41Z

x-pack/plugins/maps/public/classes/layers/layer.tsx

@@ -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


change to onCustomIconsChange so its the same as in implementation and shows up in search results

nreese · 2022-03-29T21:42:41Z

x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_map_select.tsx

@@ -32,6 +37,8 @@ interface StyleOptionChanges {
 interface Props {
  customIconStops?: IconStop[];
  iconPaletteId: string | null;
+  customIcons: CustomIcon[];
+  onCustomIconsChange?: (customIcons: CustomIcon[]) => void;


Type as onCustomIconsChange: (customIcons: CustomIcon[]) => void;

onCustomIconsChange is passed to IconSelect which does not have a guard that onCustomIconsChange is undefined

nreese · 2022-03-29T21:47:37Z

x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.tsx

            onStaticStyleChange={this._onStaticStyleChange}
            onDynamicStyleChange={this._onDynamicStyleChange}
+            onCustomIconsChange={this._onCustomIconsChange}


Just make onCustomIconsChange={this.props.onCustomIconsChange} and remove _onCustomIconsChange

… into maps-custom-icons

nreese

LGTM
This is a huge feature, thanks for putting together such a great enhancement. All the UIs look great and are easy to use and the icons look great on the map. Can't wait to see what users do with this.
code review, tested in chrome

kibana-ci · 2022-03-30T04:17:55Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`maps`	779	961	+182

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`maps`	2.5MB	2.6MB	+86.0KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`maps`	69.3KB	69.7KB	+387.0B

Unknown metric groups

ESLint disabled line counts

id	before	after	diff
`maps`	37	38	+1

Total ESLint disabled count

id	before	after	diff
`maps`	65	66	+1

History

💔 Build #34750 failed bdc6279
💔 Build #34722 failed 827c7c2
💔 Build #34698 failed ad559b7
💔 Build #34594 failed e087b00
💔 Build #34257 failed cd0b17c
💔 Build #34248 failed 11b0046

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

Initial work on custom icon support in maps

00d4404

* Re-uses code from Canvas asset manager component to upload images * Adds "Add Custom Icon" button to IconSelect component * Adds CustomIcons array to VectorStyle descriptor (not yet persisted to saved object)

nickpeihl changed the title ~~[Maps] Initial work on custom icon support in maps~~ [Maps] Support custom icons in maps Sep 27, 2021

nickpeihl added the [Deprecated-Use Team:Presentation]Team:Geo Former Team Label for Geo Team. Now use Team:Presentation label Sep 27, 2021

Persist custom icons to saved object

74d8cf0

nickpeihl added 2 commits September 28, 2021 16:59

Support static SVG custom icons

fa799ea

* Convert SVG icon to SDF * Add SDF icon to map * Add Image2SDF class (based on tiny-sdf) Note: Only tested with simple monochrome SVG icons. Examples: https://commons.wikimedia.org/wiki/Category:Black_SVG_icons

Merge branch 'master' of https://github.com/elastic/kibana into maps-…

1b8fd8f

…custom-icons

nickpeihl mentioned this pull request Sep 29, 2021

[Maps] Custom icons point styling #30738

Closed

nickpeihl added 18 commits September 29, 2021 10:04

Move custom icons to top of select list

f98296a

Better handling for switching custom icons

43478f5

Fix label for custom icons

4d178c9

Increase resolution of SDF icons

1adb5ff

Fix icon in select form

0e8595f

Add custom icons to legend

a7b5703

Support custom icons in dynamic icon form

e664dbc

Store custom icons in map rather than layer

70663e1

Fix dynamic icons in breaked legend

a911f6d

Merge branch 'master' of https://github.com/elastic/kibana into maps-…

df34d94

…custom-icons

Merge branch 'master' of https://github.com/elastic/kibana into maps-…

2a6fee1

…custom-icons

Preview custom icon in modal

e485048

Convert IconPreview to class component

f67a07f

Merge branch 'master' of https://github.com/elastic/kibana into maps-…

794ca84

…custom-icons

Merge branch 'main' of https://github.com/elastic/kibana into maps-cu…

3127e05

…stom-icons

Merge branch 'main' of https://github.com/elastic/kibana into maps-cu…

397c17e

…stom-icons

Merge branch 'main' of https://github.com/elastic/kibana into maps-cu…

66d9330

…stom-icons

Merge branch 'main' of https://github.com/elastic/kibana into maps-cu…

f6e7f1f

…stom-icons

elastic deleted a comment from kibanamachine Jan 5, 2022

Better custom icon handling

605eab5

Remove custom icon demo visual regression test

cd301b2

nreese reviewed Mar 29, 2022

View reviewed changes

nickpeihl added 2 commits March 29, 2022 17:15

Review feedback

09b3311

Merge branch 'main' into maps-custom-icons

ad559b7

nickpeihl requested a review from nreese March 29, 2022 21:21

nreese reviewed Mar 29, 2022

View reviewed changes

nickpeihl added 3 commits March 29, 2022 18:38

Review feedback

bd48b2b

Merge branch 'maps-custom-icons' of https://github.com/nickpeihl/kibana…

e822e0b

… into maps-custom-icons

Review feedback

827c7c2

nreese approved these changes Mar 29, 2022

View reviewed changes

Merge branch 'main' into maps-custom-icons

bdc6279

nickpeihl enabled auto-merge (squash) March 30, 2022 02:11

nickpeihl added the backport:skip This commit does not require backporting label Mar 30, 2022

Merge branch 'main' into maps-custom-icons

38f6dd0

nickpeihl merged commit 118321f into elastic:main Mar 30, 2022

nickpeihl deleted the maps-custom-icons branch March 30, 2022 04:20

nickpeihl mentioned this pull request Apr 5, 2022

[DOCS] [Maps] Add documentation for custom icons #129530

Merged

nreese mentioned this pull request Apr 6, 2022

fix filter drawing and feature drawing broken in 8.2 #129642

Merged

tylersmalley added ci:cloud-deploy Create or update a Cloud deployment and removed ci:deploy-cloud labels Aug 17, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Maps] Support custom icons in maps #113144

[Maps] Support custom icons in maps #113144

nickpeihl commented Sep 27, 2021 •

edited

Loading

kibanamachine commented Sep 28, 2021 •

edited

Loading

jsanz commented Nov 17, 2021

nreese Mar 29, 2022

nreese Mar 29, 2022

nickpeihl Mar 29, 2022

nreese Mar 29, 2022

nickpeihl Mar 29, 2022

nreese Mar 29, 2022

nickpeihl Mar 29, 2022

nreese Mar 29, 2022

nreese Mar 29, 2022

nreese Mar 29, 2022

nreese Mar 29, 2022

nreese Mar 29, 2022

nreese Mar 29, 2022

nreese Mar 29, 2022

nreese left a comment

kibana-ci commented Mar 30, 2022

ESLint disabled line counts

Total ESLint disabled count

[Maps] Support custom icons in maps #113144

[Maps] Support custom icons in maps #113144

Conversation

nickpeihl commented Sep 27, 2021 • edited Loading

Summary

Checklist

Risk Matrix

For maintainers

kibanamachine commented Sep 28, 2021 • edited Loading

💔 Build Failed

Failed CI Steps

Metrics [docs]

History

jsanz commented Nov 17, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nreese left a comment

Choose a reason for hiding this comment

kibana-ci commented Mar 30, 2022

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

ESLint disabled line counts

Total ESLint disabled count

History

nickpeihl commented Sep 27, 2021 •

edited

Loading

kibanamachine commented Sep 28, 2021 •

edited

Loading