Support gradient-colored shapes

[lucaswoj]

From @lucaswoj on August 21, 2015 19:8

It would be useful to support gradient-colored lines, fills, and backgrounds. What would the stylesheet syntax look like? How would this work with data-driven styling?

ref mapbox/mapbox-gl-native#2142

cc @webventil

Copied from original issue: mapbox/mapbox-gl-style-spec#349

[lucaswoj]

From @jfirebaugh on August 21, 2015 19:14

See also #748.

[lucaswoj]

From @tmcw on August 21, 2015 19:14

I think the style spec side here is totally doable but the hard part is going to be data representation: GeoJSON and lots of other formats are derived at a basic level from the Simple Features Spec, which, in its definition of 'simple' does not include the concept of values differing along lines, which is how I'd assume you would want to control the color of the line.

The GPX and OSM formats do support this, and I have a proposal for an add-on spec for GeoJSON. Vector tiles, as far as I know, don't support values along lines.

[lucaswoj]

From @tomtaylor on August 24, 2015 12:58

While this is being considered, it would also be useful to be able to have polylines where the dashing varies along the line too. So you can make certain sections as dotted, for example.

[lucaswoj]

From @jordi-adame on August 29, 2015 17:30

+1

[lucaswoj]

From @cowgp on February 2, 2016 22:26

+1

[lucaswoj]

From @isimonescu on September 7, 2016 11:0

Any progress on this?

[kaligrafy]

Any progress?

[espy1122]

Any progress??

[andrewharvey]

I think the style spec side here is totally doable but the hard part is going to be data representation: GeoJSON and lots of other formats are derived at a basic level from the Simple Features Spec, which, in its definition of 'simple' does not include the concept of values differing along lines, which is how I'd assume you would want to control the color of the line.

The GPX and OSM formats do support this, and I have a proposal for an add-on spec for GeoJSON. Vector tiles, as far as I know, don't support values along lines.

I wonder if using Turf's LineSegment or something like that based on your values along the line, and assigning each segment a start/end value would suffice, seems much easier than getting proper support for linear referenced feature properties into MVT?

@espy1122 Have you tried segmenting http://turfjs.org/docs/#linesegment the line and using data driven styles for an approximation of a smooth gradient? I know this is a poor workaround of this issue, but would be worth trying. I wonder if you can segment enough that it appears to be a smooth gradient without much performance impact...

[andrewharvey]

mapbox/vector-tile-spec#93 is related to this, as it could unlock data driven styling where the style value is evaluated per node along the LineString instead of per feature, with an interpolation between nodes in the LineString.

One potential use case could be a line-offset which varies along the line for doing transit network maps.

[kylehovey]

@andrewharvey I like this idea. The GeoJSON spec for a LineString (and any GeoJSON feature in general) supports an abstract properties object. It already seems like much of mapbox supports styling via templating ({icon}-15) based upon values stored in the properties object, perhaps this could also follow that pattern.

Example design pattern (based upon the same way heatmaps have already been done:
1.) Define color stops on the gradient
2.) Store some colorValue property (can be custom) in the properties object for each node in the LineString. This value should be normalized between 0 and 1.
3.) Create a LineString with the following paint option:

"colorGradient": {
  "property": "colorValue",
  "type": "interpolate",
  "stops": [
    [ 0, #248216 ],
    [ 0.5, #843099 ],
    [ 1, #9e243a ]
  ]
}

[andrewharvey]

2.) Store some colorValue property (can be custom) in the properties object for each node in the LineString.

@kylehovey I think the problem is that the GeoJSON spec doesn't support assigning properties for each vertex of the LineString. There is https://github.com/mapbox/geojson-coordinate-properties but isn't not standardised and it probably needs mapbox/vector-tile-spec#75 addressed to work in GL JS

[kylehovey]

@andrewharvey Isn't this sort of functionality already supported in the Heatmap specification? That feature in the gl-JS API utilizes a mag value in the properties object of each feature in the feature collection of the data source. I know that a FeatureMap is not a LineString, but it seems to be an equivalent use case/relaxation of strict GeoJSON formatting.

[andrewharvey]

@lbud should we close this now #6303 is merged?

[lbud]

🤔 I'm inclined to leave it open as a placeholder ticket for other shapes (OP also mentions gradient fills and backgrounds) — these are not under active development or prioritized at all but could feasibly be useful to people.

[1ec5]

mapbox/mapbox-gl-native#11718 tracks porting #6303 to the native SDKs.

[danpe]

👍

[tomasdev]

Is this going to be available on Mapbox GL JS?

[kaligrafy]

Please provide linesofar as absolute distance instead of percentage so we can create custom shaders or provide the total length of the line to the shader. See #3883

[asheemmamoowala]

@kaligrafy Support for gradient colored lines was implemented in #6303, and is now available with GeoJSON data sources.

It looks like linesofar does use high prevision floats in the line shader now:

mapbox-gl-js/src/shaders/line.vertex.glsl

Line 20 in b0a37a0

varying highp float v_linesofar;

[NCLlamas]

I realize this thread hasn't been touched in a while, but I have a use case requiring a gradient fill layer. Would love to see that, or know how to work around it!

[qri57i]

I realize this thread hasn't been touched in a while, but I have a use case requiring a gradient fill layer. Would love to see that, or know how to work around it!

found anything to get a gradient fill ?

[NCLlamas]

Unfortunately not! We ended up opting for a different visualization

[qri57i]

mind I ask, did you try creating custom WebGL ?

[NCLlamas]

I didn't, we were moving pretty fast on this project so I didn't have a lot of time to really try a lot of alternative approaches outside the basic and easily accessible ones. I believe that could work though!

[qri57i]

I didn't, we were moving pretty fast on this project so I didn't have a lot of time to really try a lot of alternative approaches outside the basic and easily accessible ones. I believe that could work though!

yeah, will try. Thanks for the confidence boost, almost abandoned the idea.

[Moorst]

I didn't, we were moving pretty fast on this project so I didn't have a lot of time to really try a lot of alternative approaches outside the basic and easily accessible ones. I believe that could work though!

yeah, will try. Thanks for the confidence boost, almost abandoned the idea.

any luck? looking to do the same

[BrodieGriggs]

@qri57i @Moorst Did either of you come up with a solution for gradient fills? Currently looking for a way to achieve this

[srmncnk]

@BrodieGriggs You can do this with data driven styling, however you can only select one color per one line - so you have to fake the interpolation by supplying a lot of lines. You have to supply appropriate data to properties in the geojson:

"properties": {
    "key": someValue
},

Then you reference the data in the styling part.

"paint": {
    "line-color": [
      "interpolate",
      ["linear"],
      ["get", "key"],
      [ *** list of values from which you can interpolate ***],
    ],
  },

[staffordsmith83]

@srmncnk could you please expand on your example? I have a geojson polygon layer and want to have gradient fills like this:

Does your interpolate method draw extra "concentric" lines inside the polygon from the border until the center?

[pdoggle]

Adding to the requests for a gradient polygon fill feature. Really necessary to display uncertainty or overlapping claims in regions.