CARTO: QuadbinHeatmapTileLayer docs (#8909)

docs/api-reference/carto/overview.md

@@ -69,6 +69,7 @@ The CARTO module contains a number of custom layers which can be used to visuali
 
 - [H3TileLayer](./h3-tile-layer.md)
 - [QuadbinTileLayer](./quadbin-tile-layer.md)
+- [QuadbinHeatmapTileLayer](./quadbin-heatmap-tile-layer.md)
 - [RasterTileLayer](./raster-tile-layer.md)
 - [VectorTileLayer](./vector-tile-layer.md)
 

docs/api-reference/carto/quadbin-heatmap-tile-layer.md

@@ -0,0 +1,104 @@
+# QuadbinHeatmapTileLayer (Experimental)
+
+`QuadbinHeatmapTileLayer` is a layer for visualizing tiled data indexed with a [Quadbin Spatial Index](https://docs.carto.com/data-and-analysis/analytics-toolbox-for-bigquery/key-concepts/spatial-indexes#quadbin) using a heatmap. 
+
+## Usage 
+
+```tsx
+import DeckGL from '@deck.gl/react';
+import {QuadbinHeatmapTileLayer, quadbinTableSource} from '@deck.gl/carto';
+
+function App({viewState}) {
+  const data = quadbinTableSource({
+    accessToken: 'XXX',
+    connectionName: 'carto_dw',
+    tableName: 'carto-demo-data.demo_tables.quadbin'
+  });
+
+  const layer = new QuadbinHeatmapTileLayer({
+    data,
+    getWeight: d => d.properties.count
+  })
+
+  return <DeckGL viewState={viewState} layers={[layer]} />;
+}
+```
+
+## Installation
+
+To install the dependencies from NPM:
+
+```bash
+npm install deck.gl
+# or
+npm install @deck.gl/core @deck.gl/layers @deck.gl/carto
+```
+
+```js
+import {QuadbinHeatmapTileLayer} from '@deck.gl/carto';
+new QuadbinHeatmapTileLayer({});
+```
+
+To use pre-bundled scripts:
+
+```html
+<script src="https://unpkg.com/deck.gl@^9.0.0/dist.min.js"></script>
+<script src="https://unpkg.com/@deck.gl/carto@^9.0.0/dist.min.js"></script>
+
+<!-- or -->
+<script src="https://unpkg.com/@deck.gl/core@^9.0.0/dist.min.js"></script>
+<script src="https://unpkg.com/@deck.gl/layers@^9.0.0/dist.min.js"></script>
+<script src="https://unpkg.com/@deck.gl/geo-layers@^9.0.0/dist.min.js"></script>
+<script src="https://unpkg.com/@deck.gl/carto@^9.0.0/dist.min.js"></script>
+```
+
+```js
+new deck.carto.QuadbinHeatmapTileLayer({});
+```
+
+## Properties
+
+Inherits from all [Base Layer](../core/layer.md) and [CompositeLayer](../core/composite-layer.md) properties.
+
+#### `data` (TilejsonResult) {#data}
+
+Required. A valid `TilejsonResult` object.
+
+Use one of the following [Data Sources](./data-sources.md) to fetch this from the CARTO API:
+
+- [quadbinTableSource](./data-sources#quadbintablesource)
+- [quadbinQuerySource](./data-sources#quadbinquerysource)
+- [quadbinTilesetSource](./data-sources#quadbintilesetsource)
+
+### Render Options
+
+#### `radiusPixels` (number, optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square") {#radiuspixels}
+
+* Default: `20`
+
+Radius of the heatmap blur in pixels, to which the weight of a cell is distributed.
+
+#### `colorDomain` (number[2], optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square") {#colordomain}
+
+* Default: `[0, 1]`
+
+Controls how weight values are mapped to the `colorRange`, as an array of two numbers [`minValue`, `maxValue`].
+
+When `colorDomain` is specified, a pixel with `minValue` is assigned the first color in `colorRange`, a pixel with `maxValue` is assigned the last color in `colorRange`, and any value in between is interpolated. Pixels in the bottom 10% of the range defined by `colorDomain` are gradually faded out by reducing alpha, until 100% transparency at `minValue`. Pixels with weight more than `maxValue` are capped to the last color in `colorRange`.
+
+#### `colorRange` (Color[], optional) {#colorrange}
+
+* Default: [colorbrewer](http://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=6) `6-class YlOrRd` <img src="https://deck.gl/images/colorbrewer_YlOrRd_6.png"/>
+
+The color palette used in the heatmap, as an array of colors [color1, color2, ...]. Each color is in the format of `[r, g, b]`. Each channel is a number between 0-255.
+
+
+### Data Accessors
+
+#### `getWeight` ([Accessor&lt;number&gt;](../../developer-guide/using-layers.md#accessors), optional) {#getweight}
+
+* Default: `1`
+
+Method called to retrieve weight of each quadbin cell. By default each cell will use a weight of `1`.
+
+

docs/table-of-contents.json

@@ -230,6 +230,7 @@
           "api-reference/carto/data-sources",
           "api-reference/carto/h3-tile-layer",
           "api-reference/carto/quadbin-tile-layer",
+          "api-reference/carto/quadbin-heatmap-tile-layer",
           "api-reference/carto/raster-tile-layer",
           "api-reference/carto/vector-tile-layer",
           "api-reference/carto/styles"

modules/carto/src/layers/heatmap.ts

@@ -121,9 +121,9 @@ const defaultColorRange: Color[] = [
 
 export type HeatmapProps = {
   /**
-   * Radius of the circle in pixels, to which the weight of an object is distributed.
+   * Radius of the heatmap blur in pixels, to which the weight of a cell is distributed.
    *
-   * @default 30
+   * @default 20
    */
   radiusPixels?: number;
   /**

modules/carto/src/layers/quadbin-heatmap-tile-layer.ts

@@ -1,11 +1,13 @@
 import {getResolution} from 'quadbin';
 
-import {Accessor, CompositeLayer, DefaultProps, Layer} from '@deck.gl/core';
+import {Accessor, CompositeLayer, CompositeLayerProps, DefaultProps, Layer} from '@deck.gl/core';
 import {SolidPolygonLayer} from '@deck.gl/layers';
 
 import {HeatmapProps, heatmap} from './heatmap';
 import {RTTModifier, PostProcessModifier} from './post-process-utils';
 import QuadbinTileLayer, {QuadbinTileLayerProps} from './quadbin-tile-layer';
+import {TilejsonPropType} from './utils';
+import {TilejsonResult} from '../sources';
 
 // Modified polygon layer to draw offscreen and output value expected by heatmap
 class RTTSolidPolygonLayer extends RTTModifier(SolidPolygonLayer) {
@@ -50,14 +52,15 @@ function encodeWeight(w: number) {
 }
 
 const defaultProps: DefaultProps<QuadbinHeatmapTileLayerProps> = {
-  ...QuadbinTileLayer.defaultProps,
-
+  data: TilejsonPropType,
   getWeight: {type: 'accessor', value: 1}
 };
 
 /** All properties supported by QuadbinHeatmapTileLayer. */
 export type QuadbinHeatmapTileLayerProps<DataT = unknown> = _QuadbinHeatmapTileLayerProps<DataT> &
-  QuadbinTileLayerProps;
+  CompositeLayerProps & {
+    data: null | TilejsonResult | Promise<TilejsonResult>;
+  };
 
 /** Properties added by QuadbinHeatmapTileLayer. */
 type _QuadbinHeatmapTileLayerProps<DataT> = QuadbinTileLayerProps<DataT> &