mapbox gl geojson style

Question

I try to reproduce the capture below within Mapbox GL. The colors are added for the sake of readability, yet to be able to customize colors is not mandatory. The key aspect is the different lines weights.

I've read about styling in Mapbox GL here and there. To add as many style layers that there are different weights is not an option. I tried it with two thousands LineStrings and the performances are not acceptable.

I've crawled several github issues there about data driven styles in mapbox GL, but I cannot figure out if what I need is on the road map.

Below a MWE of the GEOJSON I've used to produce the image above.

{
  "type": "FeatureCollection",
  "features": [
    {
      "geometry": {
        "type": "LineString",
        "coordinates": [[2.3420237, 48.9437736], 
                        [2.3430249, 48.9462233],
                        [2.3428777, 48.9469687]]
      },
      "type": "Feature",
      "properties": {
        "color": "#0000FF",
        "weight": 5
      }
    },
    {
      "geometry": {
        "type": "LineString",
        "coordinates": [[2.3880359, 48.9077387],
                        [2.3885364, 48.9072262],
                        [2.3886376, 48.9071376],
                        [2.3891088, 48.9066521]]
      },
      "type": "Feature",
      "properties": {
        "color": "#FF0000",
        "weight": 15
      }
    }
  ]
}

Answer 1

There's documentation here on adding a styling a lineString from GeoJSON. Here's an additional example that demonstrates two lineStrings on a map with two different weights/colors: http://bl.ocks.org/tristen/5f807d44726b401b727f3ab06c7ed864

I tried it with two thousands LineStrings and the performances are not acceptable.

A more performant data format for thousands of points is to convert your GeoJSON to vector tiles. There's an example of adding a vector tile layer to a map using Mapbox GL JS here: https://www.mapbox.com/mapbox-gl-js/example/vector-source/