What styling options for layers are available?

#1

So I draw a bunch of traffic information on the map, like so:

map.addLayer({
    'id': '123',
    'type': 'line',
    'source': {
        'type': 'geojson',
        'data': geojsonData,
    },
    'paint': {
        'line-color': '#ff0000,
        'line-width': 6,
        // 'line-cap': 'round',
        // 'line-join': 'round',
    }
});

And it works, I see the traffic information drawn. But I was trying to style the layer a bit more. And since - in my understanding - the v5-version of the SDK is based on the Mapbox GL JS library, I was browsing through their documentation to see what options I had (since it’s not described in the v5-documentation, right?)

So I checked here: https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers-line and tried to apply the line-cap property. But then I’ll get a runtime error that the line-cap isn’t an allowed option.

Could someone please tell me what options are available or (even better) where it’s documented?

1 Like
#2

We are investigating this.

When it comes to the documentation - we are working on putting it on the portal.

#3

Ok. I figured the TomTom Web SDK was based on one of the latest Mapbox versions.
So I wonder what caused this.

Maybe this might help. When I uncomment the lines above, so I have:

'paint': {
        'line-color': '#ff0000,
        'line-width': 6,
        line-cap': 'round',
    }

it will result in:

Error: layers.10551905.paint.line-cap: unknown property "line-cap"
    at Object.un [as emitValidationErrors] (bundle.js:14)
    at Te (bundle.js:14)
    at r._validate (bundle.js:14)
    at r.addLayer (bundle.js:14)
    at A.addLayer (bundle.js:14)
    at t.<computed> [as addLayer] (bundle.js:14)
    at bundle.js:2237
    at Array.forEach (<anonymous>)
    at drawRoads (bundle.js:2236)
#4

line-cap is a property of layout, not paint.

'layout': {
    'line-cap': 'square'
}
1 Like
#5

Awesome! Thanks, it works :+1:

For anyone else who is struggling with this, I just noticed that below each property is displayed where it’s a property of. For instance:

line-cap
Layout property

line-color
Paint property

1 Like