Mapbox-gl-js: Setting colors to GeoJson Source

[vallettea]

hello,

Thanks for this awesome job you're doing with these vector tiles.

I have trouble finding how to set a different color for the different Linstrings I have plotted.

Once the style of the source is set by:

  style.layers.push({
    "id": "route",
    "type": "line",
    "source": "route",
    "layout": {
      "line-join": "round",
      "line-cap": "round"
    },
    "paint": {
      "line-color": "red",
      "line-width": 8
    }
  });

All the linestrings of my source will have the same properties.

Should I have a layer per line ?
Any code example appreciated.

BEst

[peterqliu]

@vallettea everything within a layer will have the same styling properties (including color), which means you'll need one layer per color.

To apply different colors to each linestring, you'll first have to add a property to the source that distinguishes the linestrings with your desired color scheme. Then, to actually apply the colors, filter your style layers by the property you just made.

Let me know if that makes sense-- hopefully you're not working with an astronomical number of unique colors!

[vallettea]

thanks for the advice, I'm trying this now.

Before your answer I was looking into this example. It seems it is possible to have some sort of variables within a layer like this "icon-image": "{marker-symbol}-12" set inside the geojson properties.

I tried to do the same with the color for the paint field without success.

[vallettea]

Works the way said with one layer per color.

This is quite a change in the usual way to plot data on a map and don't yet see how to change the color dynamically...

thx

[lbud]

Hey @vallettea, we're working toward figuring out the best way to support use cases like this — see https://github.com/mapbox/mapbox-gl-style-spec/issues/226 for the ongoing discussion.

[vallettea]

thx @lbud As I understand there is no way (at the moment) to animate the data on a map ?
I did some trials on this gist. My observations are:

• the data of the source is not dynamical, ie when you call setData after things are rendered it doesn't change anything
• removing a source and re-adding it after having modified the data would be a dirty solution but you need to move the map to see the layer disappear...

I so sad to give it up, I would have loved to use this for my project.

Thx anyway

[marcuus]

Thats a shame I have 50 vegetation classes and about 1100 features. Youre saying I need a layer for each class?

[lucaswoj]

@marcuus We have since released new features that will make this use case much easier https://www.mapbox.com/blog/data-driven-styling/

[sebastianpatten]

The above link covers styling styling circles. Is there styling for lines too?

[mollymerp]

@sebastianpatten most line paint properties are now supported in mapbox-gl-js and we're actively working on support for our mobile sdks – you can check if a property is supported in the SDK support table