Data driven line-width in Mapbox JS GL

Question

I have added a geojson to my map. One of the feature's properties is called delay - it contains numbers between 0 and 160. Below, I have tried to make line-width a function of the value in this property (using this link as an example), just as one would style color. In fact, I would like it to be a mathematical function ( sqrt(delay) as opposed to using categories), but in either case I receive a syntax error in the console every time unexpected ")", suggesting that one cannot style line-width in the same way as color. What would be the best workaround in Mapbox JS GL?

map.on('load', function () {
   map.addSource("routes", {
       "type": "geojson",
       "data": "simplify_830.geojson"
   });

   map.addLayer({
       "id": "routes",
       "type": "line",
       "source": "routes",
       "layout": {},
       "paint": {
           "line-color": "#FFA500",
           'line-width': {
               property: 'delay',
               stops: [
                   [0, 2],
                   [20, 4],
                   [40, 6],
                   [60, 8],
                   [80, 10],
                   [100, 12],
                   [120, 14],
                   [140, 16],
                   [160, 20]
               ]
           },
       "filter": ["==", "name", ""]
   });

Support for line paint properties is still in the works. See github.com/mapbox/mapbox-gl-js/issues/2729 — tristen
Still seems to be not implemented. All the relevant issues are closed: github.com/mapbox/mapbox-gl-js/issues/2729 github.com/mapbox/mapbox-gl-js/issues/3646 github.com/mapbox/mapbox-gl-js/pull/3033 Not sure the current state exactly. — Steve Bennett

Lucas Wojciechowski Lucas Wojciechowski · Accepted Answer · 2016-07-01T18:44:12

We don't yet support data-driven styling for line properties.

We plan to add it very soon per http://github.com/mapbox/mapbox-gl-js/issues/2729.

My apologies for not more clearly communicating the state of data-driven styling support. A colleague of mine is working on a support table now! https://github.com/mapbox/mapbox-gl-style-spec/pull/465

Data driven line-width in Mapbox JS GL

1 Answers