[Maps] Provide preview-icons of layer-type

[thomasneirynck]

The add-layer type has many layer types available. From the description it is not always clear how exactly that layer would look like on a map.

e.g. a heatmap, a choropleth layer, a cluster-layer, a document layer,... all have very "characteristic" look&feel when they are added on a map.

It would be nice to show a little icon in the wizard (either as a replacement for the source-type icon, or in a tooltip) that shows to the user how that layer would look like. e.g. the heatmap-card could show the heatmap-color blobs, the choropleth-layer could show some thematically colored cartoon map, ...

CartoDB has similar UX.

cc @kmartastic @miukimiu @jsanz

[elasticmachine]

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

[jsanz]

Just to be sure, you mean changing the current big icons by something that depicts each layer type, right? I like the idea

[thomasneirynck]

changing the current big icons by something that depicts each layer type

yes. iso Elasticsearch logo for all these layer-types, we'd have little preview-icons.

e.g. in CartoDb we have these 3 little icons

left: choropleth
middle: cluster/grid
right: heatmap

We could have something similar for lines with Point-to-point, or some "point/line/poly"-icon for Documents.

The "Elasticsearch icon" is less useful now, since we have a separate "Elasticsearch"-facet to group ES-sources.

[jsanz]

CARTO also uses that approach for the datasets layer to indicate the geometry type

ArcGIS Online also uses icons for content types

[kmartastic]

Agree that this is better for users that know the results/analysis they want to perform, instead of needing to understand the data source.

[elizabetdev]

@thomasneirynck, @jsanz, and @kmartastic,

What do you think of these icons?

[thomasneirynck]

Nice, thx @miukimiu!

My 2c:

choropleth

+1 looks great

clusters and grids

+1 great. I would consider removing the polygon background.

Is it possible to add something with squares to represent the "grids"-option? (the bubbles already represent the "clusters"-options

e.g.:

vs

are the same data. The top is "grids", the bottom is "clusters". Users can edit them interchangeably.

Documents

+1, great

Point to point

I would consider removing the edge-node effect, it kind of looks like a triangle or network. I think what it looks like more often than not in practice (e.g. network traffic) is a sort of "hairball" with a few centers connected from the outside.

I'd also consider removing the "background"-polygons. That "point2point" is just lines.

Heatmap

+1, great. I'd consider removing the background-polygons. The layer is just the heatmap-blobs.

[elizabetdev]

Hi @thomasneirynck,

I did a few updates based on your comments. What do you think of the new versions?

Also, I tried to see how it might look like in dark mode. I will need to adjust the dark theme colors when implementing.

[thomasneirynck]

@miukimiu all looks great to me!

any thoughts @kmartastic @jsanz @nreese ?

[kmartastic]

Wow. These revisions are spot-on. Nice work @miukimiu.

[jsanz]

Sorry I missed the first iteration @miukimiu 😓

I love the new icons in monochrome, but would it make sense to add to them some color to align with the other layers icons? Or the gray theme is intentioned, so the solution layers stand out a bit more?

[elizabetdev]

I just picked a gray theme to make it easier. But @jsanz I agree, the other icons stand out more. Let me try to add color.

[elizabetdev]

@jsanz, I tested adding colors and it didn't look good.

@jsanz, @kmartastic, @thomasneirynck what do you think if we also change the icons for the following layers to also have a preview or to make them more similar to the new ones? This way, only the solutions layers would have a different type of icons.

[jsanz]

+1 on having a full coherent icon set, leaving the solution layers to stand out on their own

[kmartastic]

@jsanz, @kmartastic, @thomasneirynck what do you think if we also change the icons for the following layers to also have a preview or to make them more similar to the new ones? This way, only the solutions layers would have a different type of icons.

What do you mean by "preview"? Are there other types of icons besides "preview"?

Otherwise, this plan sounds good.

[elizabetdev]

Hi @kmartastic,

Sorry for the late reply. I'm back from PTO.

By preview, I mean to show how that layer would look like on a map. But in case it's not possible, because it's difficult to represent it. At least I can make icons that seem to belong to the same "family".