Can I add custom SVGs as symbols on ElasticSearch Kibana Maps?

Elastic Stack Kibana
#1

Hi all,

We have a map view taking a GeoJSON feed and plotting points according to long/lat. It works really well, but the out of the box symbols provided don't match our data use-case (weather events etc). I'm capable of creating my own SVGs, but I'm wondering where these files reside on the ES/Kibana hosts. I imagine the existing symbols are all just SVGs sitting in a directory, so in theory it should be easy enough to add more.

Short of doing a massive scan over the directory structure (which will produce thousands of false leads), does anyone know the path to the symbols files, or any other methods for adding these in?

Thanks.

#2

Hi @irwazr. Custom symbols are not available in Elastic Maps at this time.

This is technically challenging. To enable changing the style (color and size) of icons (and text labels) in WebGL requires a special method of rasterization using a Signed Distance Function. Because icons are rasterized, it is common to see artifacts and poor resolution in the output (sprites). The SVG icons we use (Maki) are specifically designed to support rasterization via SDF with a minimal loss of resolution.

The location of the sprites is imported into the node_modules directory from the @elastic/maki NPM module.

More reading:
This blog post by Mapbox goes into more detail on the implementation of SDF in drawing fonts.

Elastic's fork of spritezero adds an option to produce sprites using signed distance fields.

1 Like
#3

Thanks for the detailed and helpful reply Nick. I like the sound of a technical challenge :slight_smile:

In terms of a way forward here, would it be fair to say then that I either need to find a way to convert SVGs into the correct format, or alternatively to contribute SVGs to Elastic for potential inclusion in a future release? What's the viability of either?

Thanks.

#4

Hi @irwazr.

We can only add icons that are CC 1.0 licensed. Usually this means we need to design our own icons rather than use an existing one.

Would you mind opening an issue at GitHub - elastic/maki: POI Icon Set with a description of the icon(s) you wish to include? We can continue the discussion there.

1 Like
#5

Thanks Nick, I've opened issues for each icon requirement, and provided an example.

1 Like