Add getCoverage accessor to ColumnLayer

docs/api-reference/layers/column-layer.md

@@ -108,12 +108,12 @@ Replace the default geometry (regular polygon that fits inside the unit circle)
 
 Disk offset from the position, relative to the radius. By default, the disk is centered at each position.
 
-##### `coverage` (Number, optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square")
+##### `coverage` (Number, optional) **DEPRECATED** ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square")
 
 * Default: `1`
 
 Radius multiplier, between 0 - 1. The radius of the disk is calculated by
-`coverage * radius`
+`coverage * radius`. This prop is deprecated in version 8.9.0, use `getCoverage` instead.
 
 ##### `elevationScale` (Number, optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square")
 
@@ -222,6 +222,16 @@ The rgba color is in the format of `[r, g, b, [a]]`. Each channel is a number be
 * If a function is provided, it is called on each object to retrieve its outline color.
 * If not provided, it falls back to `getColor`.
 
+##### `getCoverage` ([Function](/docs/developer-guide/using-layers.md#accessors)|Number, optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square")
+
+* Default: `1`
+
+Radius multiplier, between 0 - 1. The radius of the disk is calculated by `radius * getCoverage(d)`.
+
+* If a number is provided, it is used as the coverage for all objects.
+* If a function is provided, it is called on each object to retrieve its coverage.
+
+
 ##### `getElevation` ([Function](/docs/developer-guide/using-layers.md#accessors)|Number, optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square")
 
 * Default: `1000`

docs/upgrade-guide.md

@@ -1,5 +1,14 @@
 # Upgrade Guide
 
+## Upgrading from deck.gl v8.6 to v8.7
+
+#### Deprecations
+
+##### Core
+
+- `ColumnLayer` prop `coverage` is deprecated. Use `getCoverage` instead.
+
+
 ## Upgrading from deck.gl v8.7 to v8.8
 
 #### Breaking changes

modules/layers/src/column-layer/column-layer-vertex.glsl.ts

@@ -26,6 +26,7 @@ in vec3 positions;
 in vec3 normals;
 
 in vec3 instancePositions;
+in float instanceCoverage;
 in float instanceElevations;
 in vec3 instancePositions64Low;
 in vec4 instanceFillColors;
@@ -42,7 +43,6 @@ uniform vec2 offset;
 uniform bool extruded;
 uniform bool stroked;
 uniform bool isStroke;
-uniform float coverage;
 uniform float elevationScale;
 uniform float edgeDistance;
 uniform float widthScale;
@@ -76,7 +76,7 @@ void main(void) {
     float widthPixels = clamp(
       project_size_to_pixel(instanceStrokeWidths * widthScale, widthUnits),
       widthMinPixels, widthMaxPixels) / 2.0;
-    float halfOffset = project_pixel_size(widthPixels) / project_size(edgeDistance * coverage * radius);
+    float halfOffset = project_pixel_size(widthPixels) / project_size(edgeDistance * instanceCoverage * radius);
     if (isStroke) {
       strokeOffsetRatio -= sign(positions.z) * halfOffset;
     } else {
@@ -86,7 +86,7 @@ void main(void) {
 
   // if alpha == 0.0 or z < 0.0, do not render element
   float shouldRender = float(color.a > 0.0 && instanceElevations >= 0.0);
-  float dotRadius = radius * coverage * shouldRender;
+  float dotRadius = radius * instanceCoverage * shouldRender;
 
   geometry.pickingColor = instancePickingColors;
 

modules/layers/src/column-layer/column-layer.ts

@@ -50,7 +50,6 @@ const defaultProps: DefaultProps<ColumnLayerProps> = {
   radius: {type: 'number', min: 0, value: 1000},
   angle: {type: 'number', value: 0},
   offset: {type: 'array', value: [0, 0]},
-  coverage: {type: 'number', min: 0, max: 1, value: 1},
   elevationScale: {type: 'number', min: 0, value: 1},
   radiusUnits: 'meters',
   lineWidthUnits: 'meters',
@@ -67,9 +66,11 @@ const defaultProps: DefaultProps<ColumnLayerProps> = {
   getFillColor: {type: 'accessor', value: DEFAULT_COLOR},
   getLineColor: {type: 'accessor', value: DEFAULT_COLOR},
   getLineWidth: {type: 'accessor', value: 1},
+  getCoverage: {type: 'accessor', value: 1},
   getElevation: {type: 'accessor', value: 1000},
   material: true,
-  getColor: {deprecatedFor: ['getFillColor', 'getLineColor']}
+  getColor: {deprecatedFor: ['getFillColor', 'getLineColor']},
+  coverage: {deprecatedFor: ['getCoverage']}
 };
 
 /** All properties supported by ColumnLayer. */
@@ -108,8 +109,7 @@ type _ColumnLayerProps<DataT> = {
   offset?: [number, number];
 
   /**
-   * Radius multiplier, between 0 - 1
-   * @default 1
+   * @deprecated Use getCoverage instead
    */
   coverage?: number;
 
@@ -211,6 +211,13 @@ type _ColumnLayerProps<DataT> = {
    */
   getLineColor?: Accessor<DataT, Color>;
 
+  /**
+   * The coverage of the column, in the range 0-1
+   *
+   * @default 1
+   */
+  getCoverage?: Accessor<DataT, number>;
+
   /**
    * The elevation of each cell in meters.
    * @default 1000
@@ -265,6 +272,11 @@ export default class ColumnLayer<DataT = any, ExtraPropsT = {}> extends Layer<
         transition: true,
         accessor: 'getPosition'
       },
+      instanceCoverage: {
+        size: 1,
+        transition: true,
+        accessor: 'getCoverage'
+      },
       instanceElevations: {
         size: 1,
         transition: true,
@@ -376,7 +388,6 @@ export default class ColumnLayer<DataT = any, ExtraPropsT = {}> extends Layer<
       stroked,
       wireframe,
       offset,
-      coverage,
       radius,
       angle
     } = this.props;
@@ -388,7 +399,6 @@ export default class ColumnLayer<DataT = any, ExtraPropsT = {}> extends Layer<
       offset,
       extruded,
       stroked,
-      coverage,
       elevationScale,
       edgeDistance,
       radiusUnits: UNIT[radiusUnits],

test/render/test-cases/column-layer.js

@@ -160,5 +160,30 @@ export default [
       vertices: polygonCCW,
       getElevation: h => h.value * 5000
     }
+  ),
+  genColumnLayerTestCase(
+    {
+      name: 'column-lnglat-flat-stroke-coverage'
+    },
+    {
+      extruded: false,
+      stroked: true,
+      lineWidthUnits: 'pixels',
+      getLineWidth: 4,
+      getLineColor: [255, 255, 255],
+      getCoverage: h => Math.min(1, Math.sqrt(5 * h.value))
+    },
+    {pitch: 0}
+  ),
+  genColumnLayerTestCase(
+    {
+      name: 'column-lnglat-extruded-coverage'
+    },
+    {
+      extruded: true,
+      stroked: false,
+      getCoverage: h => Math.min(1, Math.sqrt(5 * h.value)),
+      getElevation: h => h.value * 5000
+    }
   )
 ];