Mapbox-gl-js: "text-color": "{color}" not working

[gertcuykens]

Uncaught TypeError: Cannot read property '0' of null
color is set to #ffff00

map.addLayer({
                    "id": "markers",
                    "type": "symbol",
                    "source": "markers",
                    "layout": {
                        "icon-image": "{marker-symbol}-15",
                        "text-field": "{color}",
                        "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
                        "text-offset": [0, 0.6],
                        "text-anchor": "top",
                    },
                    "paint": {
                        "text-size": 12,
                        "text-color": "{color}"
                    },
                    "interactive": true
                })

I can check it by doing "text-field": "{color}" and i can see #ffff00 text on the map

[averas]

How about if you set color to rgba(255, 255, 0, 1)?

[gertcuykens]

nope, only the things inside layout works

[averas]

Oh, I just realised you probably can't do it like that. As far as I know text-field and icon-image are the only properties accepting {}-syntax until #1626 becomes a reality.

You will have to accomplish your dynamic coloring using filters (https://www.mapbox.com/mapbox-gl-style-spec/#types-filter), which, however, provides a little less flexibility.

[jfirebaugh]

@averas is 100% correct -- you'll need to wait for data-driven styling to be implemented for full flexibility, and use multiple filtered layers in the meantime.

[gertcuykens]

Just to make sure I understand it correctly. If I want to achieve the following using filters. Suppose every marker represents a car that can be red green orange. I have to create 3 different layers for every car using filters and then create code to manage all those layers going through the geojson properties?

[averas]

If you only need three colors you only need three layers. Your data can still be a single source (for example GeoJSON). If you add a property to your data set such as "color" which can be "green", "orange" and "red" a filter on one of these layers might looks like:

...
paint: {
 fill-color: "#00ff00"
}
...
"filter": [
 "==",
 "color",
 "green"
]
...

[gertcuykens]

Three layers multiplied by every single car on the map right? (Let say it represents the fuel of a car as example)

[averas]

If the fuel level is normalised to a scale of "red", "orange", "green" you will only need to see to it that your application code maintains that property on your data set and you will, again, get away with three layers -- one for each color.

[gertcuykens]

Ok I think I understand now thanks. So 1 layer can represent all the red cars on the map for example. 2 layer all the orange, and third layer all the green cars.

[averas]

Correct, and you only need one source data set.

[ericjames]

Has data-driven styling been implemented yet?

[lbud]

@ericjames yes, data-driven styling is available for text-color. You can see SDK support tables detailing which version of any Mapbox GL SDK first supported data-driven styling for any given paint property on the style spec page:

[powelljordan]

It's worth noting that the text-color data-driven styling is slightly different from say icon-image or text-field. Let's say my map feature has property color, my thinking was that I'd just do text-color: '{color}' to use my variable. However this throws a mapbox error saying interpolation syntax is not supported and recommends using an identity property function.

So what actually works is: {'paint': {'text-color': {'type': 'identity', 'property': 'color'}}}.

Hopefully this will save someone some time.
I'm using Mapboxo GL JS version 0.44.2.

[danger89]

Well, actually you can use color from the property field, by using the get expression. Mind blown!
https://www.mapbox.com/mapbox-gl-js/style-spec/#expressions-get

Example:
geojson file:

{
  "type": "FeatureCollection",
  "features": [
        {"type":"Feature","properties":{"title": "Blah", "color": "#86EA66"}, "geometry": .... .....
   ]
}

javascript code:

"paint": {
   'text-color': ['get', 'color']
}

Works great!

See the same for drawing a line, example:
https://www.mapbox.com/mapbox-gl-js/example/data-driven-lines/

[danger89]

You know what also works?... :+1:

This!
Convert an interger value (eg. 0 until 2), let's say type feature, to a rgb output or hex color:

    // RGB mapping
    var redColor = [200, 86, 100];
    var greenColor = [70, 180, 50];
    var blueColor = [57, 74, 210];

...

    'text-color': [
        "rgb",
         ["at", ['get', 'type'], ["literal", redColor]],
         ["at", ['get', 'type'], ["literal", greenColor]],
         ["at", ['get', 'type'], ["literal", blueColor]]
     ]
````

Or something similar, but in this case directly use a hex (#) value:
```js
  // HTML Hex color array
  var colors = ["#9A3F46", "#7AE8A7", "#D056AE"];
...

   'text-color': ["to-string", ['at', ['get', 'type'], ["literal", colors]]]

I think Mapbox should really put some examples likes these to their website!