[Maps] style icons by category

[nreese]

Fixes #55204

This PR updates icon styling to allow by value styling that will assign different icons to each category

To support data driven styling, this PR migrates old style descriptor

 symbol: {
  options: {
    symbolizeAs: 'icon',
    symbolId: 'square',
  },
}

to

symbolizeAs: {
  options: { value: 'icon' },
},
icon: {
  type: STYLE_TYPE.STATIC,
  options: { value: 'square' },
}

This PR also ensures that icon-anchor is properly set for dynamic icons. In the image below, there are 2 layers. The circles are just showing where the point is located. The icons show icons for the points. Notice that the marker icons are above the point while the star icons are centered on the point.

This PR highlights the problem that each style is displayed independently in legend. For example, in the screen shot below users see both colors and icons in the legend. Fixing this issue is out of scope of this PR

[elasticmachine]

Pinging @elastic/kibana-gis (Team:Geo)

[nreese]

@nickpeihl @jsanz

I am having some mapbox problems with this PR. View the screen shots below to view the problem. At certain zoom levels, the icons are displayed all fuzzy with a map box warning: Style sheet warning: Cannot mix SDF and non-SDF icons in one buffer. Change the zoom level appears to fixes everything. Any ideas what is going on or causing this? Solved, passing in icon name with pixel suffix so the icon was not found.

[nreese]

@nickpeihl @jsanz

I figured out the problem. I was not setting icon pixels for the fallback icon so the icon was missing.

[spong]

Checked out, tested locally and all is good with the SIEM Network Map. LGTM from the SIEM side of things. Thanks for these changes @nreese! 🙂

[nickpeihl]

this is awesome! lgtm!

I have just one nit. Is it possible to add left padding for the icon in the select box? It runs right up to the edge of the box. Compare how it looks relative to the color selectors below.

[nreese]

Is it possible to add left padding for the icon in the select box? It runs right up to the edge of the box.

That will be fixed once Kibana upgrades to the next EUI version. There was a bug that got fixed yesterday preventing the passing of a className to the component.

elastic/eui#2796

[jsanz]

beautiful, tested in Chromium and Firefox 🆗

[jsanz]

One thing @nreese, should the custom icon set be prepopulated as with #54964?

[nreese]

One thing @nreese, should the custom icon set be prepopulated as with #54964?

For this PR, pre-populating the custom icon set is out of scope. In the long term, yes, we want to provide a way to pre-populate the custom styling maps for the current field. This will effect color ramps and icon ramps. We need to work with design to get a good UI for this work flow.

[nreese]

@elasticmachine merge upstream

[kibanamachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request
• Commit: 00b58f7

History

• 💚 Build #23274 succeeded 00b58f7
• 💚 Build #22794 succeeded 3b39b54
• 💔 Build #22761 failed ed345ed
• 💚 Build #22706 succeeded 1772f15
• 💚 Build #22596 succeeded 4898c50

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