[Maps] Label style properties #52957

nreese · 2019-12-12T22:07:56Z

fixes #52607

Adds label, labelSize, and labelColor style properties to allow users to display a label for point features.

elasticmachine · 2019-12-12T22:07:59Z

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

nickpeihl

I love this feature! I found one minor issue.

x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_text_property.js

elasticmachine · 2019-12-13T22:52:33Z

Pinging @elastic/kibana-docs (Team:Docs)

jsanz · 2019-12-16T10:53:34Z

Beautiful job @nreese, having not only content but also text color and size driven by data is super cool!! 😍

Not totally sure, but it's quite typical for users to also want to change the font. Since the most common scenario is to use Maps with EMS basemaps this would not be a high priority to me at this moment since most of the visualization is already "defined" in cartographic terms, and a good default font already used in the basemap should be enough. But with custom basemaps also available, other fonts would be better suited, so we may need also that setting to be offered.

nreese · 2019-12-16T15:02:21Z

Not totally sure, but it's quite typical for users to also want to change the font

I created #53127 to track that feature request

thomasneirynck

holy smokes. killer feature.

Some initial comments. Will look more tomorrow.

I ran into two little bugs with styling with icons.

saving removes icon

Steps:

style a point layer with an icon
add a label
save the map
refresh the browser
-> label is showing but icon is not showing

labels are drawn under icons

Steps:

style a point layer with an icon
add a label
-> not that label is drawn under the icon.

(fwiw, there are bugs in mapbox wrt ordering of layers. e.g. heatmap layers sometimes behave oddly when reordering. I'm not sure if this is a similar issue with mb. It might also be us adding the symbol-layer on top of the text-layer).

.../legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_selection.js

x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style_defaults.js

x-pack/legacy/plugins/maps/public/layers/vector_layer.js

thomasneirynck · 2019-12-16T22:54:07Z

wrt @jsanz comment and custom fonts.

Agreed on creating separate feature request. It's somewhat of a bigger issue than just offering that here. By design, font-libraries not configurable in Maps. Right now, the available fonts are a "blackboxed" hardcoded configuration specifically for EMS basemaps ((https://github.com/elastic/kibana/blob/8e9a8a84dccfa7965ce8a22362885e6cdef8b51f/src/legacy/server/config/schema.js)), and these cannot be modified (due to limitations in mapbox-gl API with registering font-libraries at runtime). I think we should punt on custom fonts until Maps supports some sort of configurable font-library and/or preset lists of guaranteed-to-exist fonts, and untie this from EMS.

nreese · 2019-12-17T16:06:09Z

I ran into two little bugs with styling with icons.

@thomasneirynck I have resolved the bugs you spotted. The icons where not displaying after saving because mapbox appears to not draw the symbol layer under another symbol layer at the same location. I resolved this by just using a single symbol layer when points are symbolized as icons.

jsanz · 2019-12-17T16:47:43Z

@nreese I'm getting an error when trying to enable labels

No errors on the network tab, sharing console screenshot:

Happening in both documents and aggregation layers, tested on Chromium and Firefox.

Let me know if you need further details.

nreese · 2019-12-17T17:17:44Z

I'm getting an error when trying to enable labels

@jsanz Thanks for finding this. Its all fixed now

jsanz · 2019-12-17T18:19:36Z

Working nicely on both Chromium and Firefox, apart from the decimals topic mentioned earlier I haven't find any other relevant issue 🎉

Maybe we can put this in a separate feature request but it would be great to allow labels to optionally have a halo (color and width). This is a very common setting to improve readability, specially when points have a color ramp, but also in many other situations. Sharing same data on Kibana and QGIS.

thomasneirynck

mostly minor comments below.

x-pack/legacy/plugins/maps/public/layers/layer.js

x-pack/legacy/plugins/maps/public/layers/sources/es_search_source/es_search_source.js

x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js

x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style_defaults.js

x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js

x-pack/legacy/plugins/maps/public/layers/vector_layer.js

thomasneirynck

💣 💯 Will really empower users

lgtm on green.

agreed with @jsanz that addition of halos would help with readability, but that can always be done later.

elasticmachine · 2019-12-19T19:52:04Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 568f8eb

History

💚 Build #16685 succeeded 7ed525c
💚 Build #16455 succeeded 9ef5e7a
💚 Build #16240 succeeded d49ed93
💔 Build #16202 failed 869ac04
💔 Build #16178 failed b7dbd35

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

nickpeihl

lgtm! love this feature.

tested in Chrome.

* text styling * label style editor UI * wire up styles to mb * allow string values * remove console.log * default getFields to provide ordinal fields for vector source * fix vector_style jest test * add label styles to docs * fix prettier errors * use index-pattern field formatter to format label * rename LABEL to LABEL_TEXT * review feedback * fix problem with icons not displaying with labels * fix functional tests * fix canno read name of null error * update jest expect * fix eslint errors * do not display label text in legend * always show all label styling properties in editor * review feedback

nreese added 5 commits December 12, 2019 10:06

text styling

b8702b2

Merge branch 'master' of github.com:elastic/kibana into text_styling

86cd4d2

label style editor UI

ac5f989

wire up styles to mb

e11575c

allow string values

37913cf

nreese added release_note:enhancement [Deprecated-Use Team:Presentation]Team:Geo Former Team Label for Geo Team. Now use Team:Presentation v8.0.0 v7.6.0 labels Dec 12, 2019

nreese requested review from nickpeihl and thomasneirynck December 12, 2019 22:07

nreese added 4 commits December 12, 2019 15:08

remove console.log

1e01d7c

merge with master

5588492

default getFields to provide ordinal fields for vector source

81dbba0

fix vector_style jest test

b83b26d

nickpeihl requested changes Dec 13, 2019

View reviewed changes

x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_text_property.js Outdated Show resolved Hide resolved

add label styles to docs

aa02419

nreese added the Team:Docs label Dec 13, 2019

nreese requested a review from gchaps December 13, 2019 22:52

nreese mentioned this pull request Dec 16, 2019

[Maps] allow users to configure font for text labels #53127

Closed

nreese added 2 commits December 16, 2019 08:27

merge with master

e669be7

fix prettier errors

1a402ac

thomasneirynck reviewed Dec 16, 2019

View reviewed changes

use index-pattern field formatter to format label

6c36a3a

nreese mentioned this pull request Dec 17, 2019

[Maps] change equals check for mapbox filter expressions #53246

Closed

fix problem with icons not displaying with labels

2180699

nreese requested review from jsanz, nickpeihl and thomasneirynck December 17, 2019 16:06

fix functional tests

5a91c10

fix canno read name of null error

b7dbd35

nreese mentioned this pull request Dec 17, 2019

[Maps] gather field formatters in data request #53311

Merged

nreese added 6 commits December 17, 2019 11:45

Merge branch 'master' of github.com:elastic/kibana into text_styling

a1011af

update jest expect

869ac04

fix eslint errors

d49ed93

merge with master

d11129e

do not display label text in legend

9ef5e7a

always show all label styling properties in editor

7ed525c

thomasneirynck reviewed Dec 19, 2019

View reviewed changes

review feedback

568f8eb

nreese requested a review from a team as a code owner December 19, 2019 18:31

nreese requested a review from thomasneirynck December 19, 2019 18:31

thomasneirynck approved these changes Dec 19, 2019

View reviewed changes

nickpeihl approved these changes Dec 19, 2019

View reviewed changes

nreese merged commit 8969cdc into elastic:master Dec 19, 2019

nreese mentioned this pull request Dec 19, 2019

[7.x] [Maps] Label style properties (#52957) #53630

Merged

jsanz mentioned this pull request Dec 27, 2019

[Maps] add text halo color and width style properties #53827

Merged

nreese mentioned this pull request Feb 24, 2020

Tile map show metrics in middle of scaled circle markers #5309

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Maps] Label style properties #52957

[Maps] Label style properties #52957

nreese commented Dec 12, 2019

elasticmachine commented Dec 12, 2019

nickpeihl left a comment

elasticmachine commented Dec 13, 2019

jsanz commented Dec 16, 2019

nreese commented Dec 16, 2019

thomasneirynck left a comment

thomasneirynck commented Dec 16, 2019

nreese commented Dec 17, 2019

jsanz commented Dec 17, 2019

nreese commented Dec 17, 2019

jsanz commented Dec 17, 2019

thomasneirynck left a comment

thomasneirynck left a comment

elasticmachine commented Dec 19, 2019

nickpeihl left a comment

[Maps] Label style properties #52957

[Maps] Label style properties #52957

Conversation

nreese commented Dec 12, 2019

elasticmachine commented Dec 12, 2019

nickpeihl left a comment

Choose a reason for hiding this comment

elasticmachine commented Dec 13, 2019

jsanz commented Dec 16, 2019

nreese commented Dec 16, 2019

thomasneirynck left a comment

Choose a reason for hiding this comment

thomasneirynck commented Dec 16, 2019

nreese commented Dec 17, 2019

jsanz commented Dec 17, 2019

nreese commented Dec 17, 2019

jsanz commented Dec 17, 2019

thomasneirynck left a comment

Choose a reason for hiding this comment

thomasneirynck left a comment

Choose a reason for hiding this comment

elasticmachine commented Dec 19, 2019

💚 Build Succeeded

History

nickpeihl left a comment

Choose a reason for hiding this comment