Deck.gl: Color gradient in PolygonLayer

[wborgeaud]

Is it possible to fill the polygons in a PolygonLayer with color gradients? More precisely, I am building a triangulation of a set of points on the map, and I would like to color the triangles using a linear color gradient. Is that possible with the existing layers or should I try building a custom layer?

Thanks!

[jianhuang01]

I don't think so, we only support plain color in polygon layer. You need build a custom layer, and handle the tessellation, if the polygon is not convex polygon, the tessellation could be complicated because need figure out colors for new vertices.

[Pessimistress]

You can build a custom layer by extending the SolidPolygonLayer:

class MyPolygonLayer extends SolidPolygonLayer {
  calculateFillColors(attribute) {
     // value is a Uint8ClampedArray
     const {value} = attribute;
     const {data, getPolygon} = this.props;

     let i = 0;
     for (const object of data) {
       const polygon = getPolygon(object)

       // iterate through vertices
       polygon.forEach(ring => {
         ring.forEach(vertex => {
           const color = ...
           value[i++] = color[0]; // R
           value[i++] = color[1]; // G
           value[i++] = color[2]; // B
           value[i++] = color[3]; // A
         })
       })
     }
  }

}

[dcooley]

Would colouring each vertex in this way respect the order in which the polygon vertices were drawn?

For example, if a polygon array is defined as

[ [0, 0], [0, 1], [1, 1], [1, 0], [0, 0] ]

Will the vertices be drawn in the order the from left-to-right?

So if the data was like

[
  {
    "polygon" : [ [0, 0], [0, 1], [1, 1], [1, 0], [0, 0] ],
    "fill_colour" : [  [255, 255, 255], [150, 150, 150], [20, 20, 20], [0, 0, 0], [255, 255, 255] ]
  }
]

would colour [255, 255, 255] be guaranteed to be drawn with coordinate [0, 0],
and colour [150, 150, 150] with coordinate [0, 1], and so on?

[Pessimistress]

@dcooley Yes, that is correct.

[ruurtjan]

@Pessimistress, this is no longer possible since this PR: https://github.com/uber/deck.gl/pull/3094

What do you think is currently the best way to create gradient fills for polygons?

[dcooley]

@ruurtjan I have an example fiddle using the binary data format if it helps?

[ruurtjan]

Thanks @dcooley! That definitely helps :)