Mapbox-gl-js: Enable property functions for symbol paint properties

Created on 14 Jun 2016 · 23Comments · Source: mapbox/mapbox-gl-js

Properties

icon-opacity ✅
icon-color ✅
icon-halo-color ✅
icon-halo-width ✅
icon-halo-blur ✅
icon-translate
icon-translate-anchor
text-opacity ✅
text-color ✅
text-halo-color ✅
text-halo-width ✅
text-halo-blur ✅
text-translate
text-translate-anchor

feature

Source

lucaswoj

👍11

Most helpful comment

👍 icon-color would be much appreciated!

sdawson26 on 21 Nov 2016

👍23

All 23 comments

icon-rotate?

please don´t miss it; any traffic application or stuff like field-data (e.g. wind directions) would benefit.

indus on 14 Jun 2016

👍4

@indus This ticket is about _paint_ properties. I just opened https://github.com/mapbox/mapbox-gl-js/issues/2736 for icon-rotate which is a _layout_ property.

lucaswoj on 14 Jun 2016

👍1

Is there any plan to implement this anytime soon? Or at least an idea as to what needs to happen in order to implement this?

I have the resources to help with an implementation (my team needs some of those features for a project), so it would be great if we could contribute to your project instead of rolling our own solution..

usefulthink on 28 Jul 2016

👍8

Any update on this enhancement? Our team is specifically looking for a solution for data-driven icon coloring. This seems to be the best route, given the unclear future and lack of documentation for SDF icons.

ivelander on 18 Oct 2016

When there is an update to share, it will be done so on this ticket. I regret that other priorities stand in the way of our ability to work on this particular issue.

Our team is specifically looking for a solution for data-driven icon coloring. This seems to be the best route, given the unclear future and lack of documentation for SDF icons.

There are no plans to support icon-color for non-SDF icons. This has nothing to do with data-driven styling. I recommend seeking other solutions.

lucaswoj on 19 Oct 2016

@lucaswoj Is there a technical barrier to supporting a data-driven icon-color for non-SDF icons, or is it just not in the plans? I've spent a few hours seeing if there might be a path to replicate what circle_bucket/draw_circle do to allow this and have had luck getting the shader to apply a single color across all icons, but no luck with per-feature coloring. Specifically I am uncertain where a call to populatePaintArrays would have the desired affect in symbol_bucket.

Is this a fruitless direction to go? Would it require a significant re-write of the way symbol layers render to support this? The other approach I am considering is a custom layer type that works essentially like the circle layer type but with shaders for the other basic geometric shapes we are after.

Appreciate any feedback you have.

ivelander on 27 Oct 2016

as long as you just use monochrome symbols applying a color should work kinda ok (in that case you would probably just use the alpha-channel from the texture and multiply that with your color-value).

The problem with the symbol-layer is just that it is so immensely complex because of all this collision-handling and text-rendering that it doesn't quite fit with the populatePaintArrays you see in other layer-types.

From what I found out, a good place would be somewhere around SymbolBucket.addSymbols() which is the final stage of the symbol-assembly. The problem is that you need to make the feature-data available there, as the quads at that point cannot be associated with the features they belong to. I solved that by adding the featureIndex to the symbolInstancesArray and used that to access the feature later to compute the color.

However, all of that didn't quite work out and it felt too fragile (too many things I don't understand yet happening there), so I aborted the experiment in favor of implementing a new layer-type to render symbols without all that collision-handling and other features we don't need in our project.

usefulthink on 28 Oct 2016

@ivelander Once property functions are supported for text-color, you will be able to use a symbol based font to draw and color basic symbols.

jasonpepper on 28 Oct 2016

@ivelander That's a good feature idea. Could you open an Issue suggesting it in https://github.com/mapbox/mapbox-gl?

lucaswoj on 31 Oct 2016

@lucaswoj happy to write up a feature request, are you referring to enabling icon-color as a property function for symbol layers or adding basic geometric shapes (squares, diamonds, etc) as a property of the circle layer type (or perhaps a new layer type since circle would be a strange fit)?

ivelander on 31 Oct 2016

@ivelander Apologies for the lack of clarity. I'm most excited about supporting something like icon-color (or perhaps icon-colorize, icon-hue, etc) for non-SDF icons.

lucaswoj on 1 Nov 2016

👍1

Could we add text-rotate to the list. I'm using glyph symbols to represent aircraft and need to rotate them based on heading. Token based on a feature property would be great as well.

mkeshields on 2 Nov 2016

@mkeshields text-rotate isn't on the list because it is a layout property. This ticket is only about paint properties. The implementation of the two is quite different. I opened a separate ticket for text-rotate at https://github.com/mapbox/mapbox-gl-js/issues/3516

lucaswoj on 2 Nov 2016

Thank you very much!!! You’re work is so appreciated.

Mike

On Nov 2, 2016, at 1:06 PM, Lucas Wojciechowski [email protected] wrote:

@mkeshields https://github.com/mkeshields text-rotate isn't on the list because it is a layout property. This ticket is only about paint properties. The implementation of the two is quite different. I opened a separate ticket for text-rotate at #3516 https://github.com/mapbox/mapbox-gl-js/issues/3516
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/mapbox/mapbox-gl-js/issues/2730#issuecomment-257930662, or mute the thread https://github.com/notifications/unsubscribe-auth/AIDIHuaLmyWDBlMYD4nNPv9t8NynyEfCks5q6MMMgaJpZM4I01R2.

mkeshields on 2 Nov 2016

I'm also looking for the ability to use a function for text-color. Right now, if you feed it a function, it just seems to always use the last stop.

In the meantime, might it make sense to clean up the documentation since this is a known case that doesn't work?
https://www.mapbox.com/mapbox-gl-style-spec/#types-function

The value for any layout or paint property may be specified as a function. Functions allow you to make the appearance of a map feature change with the current zoom level and/or the feature's properties.

The above statement caused me to spend too much time trying to get this to for text-color. I'd argue this is a "bug" not an "enhancement" as long as it is at odds with the main documentation. If the documentation is at least corrected, then "enhancement" seems like an appropriate classification.

I appreciate all the great work thus far and am looking forward to being able to have the text-color (and the other symbol paint properties) take a property function!

dhassouni on 7 Nov 2016

@dhassouni We do say within the "Property functions" section

Note that support for property functions is not available across all properties and platforms at this time.

Based on how often this issue comes up, this notice should be more prominent. I will open an issue on the style spec repo. https://github.com/mapbox/mapbox-gl-style-spec/issues/568

lucaswoj on 8 Nov 2016

👍1

👍 icon-color would be much appreciated!

sdawson26 on 21 Nov 2016

👍23

Sorry to hijack this thread and apols if this is not the right place. Can I also request the ability to make select icons/markers opaque please (along with the icon-color of course).

I am mapping satellite data and need the colors for another categorisation. Whilst I can color ramp these it would be better to just be able to say image-transparency:0.5 or similar.