@deck.gl/carto 9.0.34 → 9.0.36

package/package.json

@@ -3,7 +3,7 @@
   "description": "CARTO official integration with Deck.gl. Build geospatial applications using CARTO and Deck.gl.",
   "license": "MIT",
   "type": "module",
-  "version": "9.0.34",
+  "version": "9.0.36",
   "publishConfig": {
     "access": "public"
   },
@@ -72,5 +72,5 @@
     "@deck.gl/layers": "^9.0.0",
     "@loaders.gl/core": "^4.2.0"
   },
-  "gitHead": "eb03446717e49042747ef6f7b1be581561a2249e"
+  "gitHead": "9f1a85a66ced70ff35fd404a81f37aaf1c338c62"
 }

package/src/index.ts

@@ -1,3 +1,4 @@
+// CARTO Layers
 import {default as ClusterTileLayer} from './layers/cluster-tile-layer';
 import {default as H3TileLayer} from './layers/h3-tile-layer';
 import {default as HeatmapTileLayer} from './layers/heatmap-tile-layer';
@@ -5,6 +6,8 @@ import {default as _PointLabelLayer} from './layers/point-label-layer';
 import {default as QuadbinTileLayer} from './layers/quadbin-tile-layer';
 import {default as RasterTileLayer} from './layers/raster-tile-layer';
 import {default as VectorTileLayer} from './layers/vector-tile-layer';
+
+// Exports for playground/bindings
 const CARTO_LAYERS = {
   ClusterTileLayer,
   H3TileLayer,
@@ -25,6 +28,24 @@ export {
   VectorTileLayer
 };
 
+// Internal Layers
+export {default as _QuadbinLayer} from './layers/quadbin-layer';
+export {default as _RasterLayer} from './layers/raster-layer';
+export {default as _SpatialIndexTileLayer} from './layers/spatial-index-tile-layer';
+
+// Types
+export type {ClusterTileLayerProps} from './layers/cluster-tile-layer';
+export type {H3TileLayerProps} from './layers/h3-tile-layer';
+export type {HeatmapTileLayerProps} from './layers/heatmap-tile-layer';
+export type {PointLabelLayerProps} from './layers/point-label-layer';
+export type {QuadbinLayerProps} from './layers/quadbin-layer';
+export type {QuadbinTileLayerProps} from './layers/quadbin-tile-layer';
+export type {RasterLayerProps} from './layers/raster-layer';
+export type {RasterTileLayerProps} from './layers/raster-tile-layer';
+export type {SpatialIndexTileLayerProps} from './layers/spatial-index-tile-layer';
+export type {VectorTileLayerProps} from './layers/vector-tile-layer';
+
+// Helpers
 export {
   default as BASEMAP,
   GOOGLE_BASEMAPS as _GOOGLE_BASEMAPS,

package/src/layers/h3-tile-layer.ts

@@ -50,7 +50,7 @@ export default class H3TileLayer<DataT = any, ExtraPropsT extends {} = {}> exten
     return loadOptions;
   }
 
-  renderLayers(): Layer | null | LayersList {
+  renderLayers(): SpatialIndexTileLayer | null {
     const tileJSON = this.props.data as TilejsonResult;
     if (!tileJSON) return null;
 
@@ -71,21 +71,19 @@ export default class H3TileLayer<DataT = any, ExtraPropsT extends {} = {}> exten
       );
     }
 
+    const SubLayerClass = this.getSubLayerClass('spatial-index-tile', SpatialIndexTileLayer);
     // The naming is unfortunate, but minZoom & maxZoom in the context
     // of a Tileset2D refer to the resolution levels, not the Mercator zooms
-    return [
-      // @ts-ignore
-      new SpatialIndexTileLayer(this.props, {
-        id: `h3-tile-layer-${this.props.id}`,
-        data,
-        // TODO: Tileset2D should be generic over TileIndex type
-        TilesetClass: H3Tileset2D as any,
-        renderSubLayers,
-        // minZoom and maxZoom are H3 resolutions, however we must use this naming as that is what the Tileset2D class expects
-        minZoom: minresolution,
-        maxZoom: maxresolution,
-        loadOptions: this.getLoadOptions()
-      })
-    ];
+    return new SubLayerClass(this.props, {
+      id: `h3-tile-layer-${this.props.id}`,
+      data,
+      // TODO: Tileset2D should be generic over TileIndex type
+      TilesetClass: H3Tileset2D as any,
+      renderSubLayers,
+      // minZoom and maxZoom are H3 resolutions, however we must use this naming as that is what the Tileset2D class expects
+      minZoom: minresolution,
+      maxZoom: maxresolution,
+      loadOptions: this.getLoadOptions()
+    });
   }
 }

package/src/layers/heatmap-tile-layer.ts

@@ -1,6 +1,14 @@
 import {getResolution} from 'quadbin';
 
-import {Accessor, CompositeLayer, CompositeLayerProps, DefaultProps, Layer} from '@deck.gl/core';
+import {
+  Accessor,
+  Color,
+  CompositeLayer,
+  CompositeLayerProps,
+  DefaultProps,
+  Layer,
+  UpdateParameters
+} from '@deck.gl/core';
 import {SolidPolygonLayer} from '@deck.gl/layers';
 
 import {HeatmapProps, heatmap} from './heatmap';
@@ -9,7 +17,27 @@ import QuadbinTileLayer, {QuadbinTileLayerProps} from './quadbin-tile-layer';
 import {TilejsonPropType} from './utils';
 import {TilejsonResult} from '../sources';
 import {_Tile2DHeader as Tile2DHeader} from '@deck.gl/geo-layers';
+import {Texture, TextureProps} from '@luma.gl/core';
 
+const defaultColorRange: Color[] = [
+  [255, 255, 178],
+  [254, 217, 118],
+  [254, 178, 76],
+  [253, 141, 60],
+  [240, 59, 32],
+  [189, 0, 38]
+];
+
+const TEXTURE_PROPS: TextureProps = {
+  format: 'rgba8unorm',
+  mipmaps: false,
+  sampler: {
+    minFilter: 'linear',
+    magFilter: 'linear',
+    addressModeU: 'clamp-to-edge',
+    addressModeV: 'clamp-to-edge'
+  }
+};
 /**
  * Computes the unit density (inverse of cell area)
  */
@@ -18,6 +46,24 @@ function unitDensityForCell(cell: bigint) {
   return Math.pow(4.0, cellResolution);
 }
 
+/**
+ * Converts a colorRange array to a flat array with 4 components per color
+ */
+function colorRangeToFlatArray(colorRange: Color[]): Uint8Array {
+  const flatArray = new Uint8Array(colorRange.length * 4);
+  let index = 0;
+
+  for (let i = 0; i < colorRange.length; i++) {
+    const color = colorRange[i];
+    flatArray[index++] = color[0];
+    flatArray[index++] = color[1];
+    flatArray[index++] = color[2];
+    flatArray[index++] = Number.isFinite(color[3]) ? (color[3] as number) : 255;
+  }
+
+  return flatArray;
+}
+
 // Modified polygon layer to draw offscreen and output value expected by heatmap
 class RTTSolidPolygonLayer extends RTTModifier(SolidPolygonLayer) {
   static layerName = 'RTTSolidPolygonLayer';
@@ -70,6 +116,7 @@ const defaultProps: DefaultProps<HeatmapTileLayerProps> = {
   getWeight: {type: 'accessor', value: 1},
   onMaxDensityChange: {type: 'function', optional: true, value: null},
   colorDomain: {type: 'array', value: [0, 1]},
+  colorRange: defaultColorRange,
   intensity: {type: 'number', value: 1},
   radiusPixels: {type: 'number', min: 0, max: 100, value: 20}
 };
@@ -83,6 +130,13 @@ export type HeatmapTileLayerProps<DataT = unknown> = _HeatmapTileLayerProps<Data
 /** Properties added by HeatmapTileLayer. */
 type _HeatmapTileLayerProps<DataT> = QuadbinTileLayerProps<DataT> &
   HeatmapProps & {
+    /**
+     * Specified as an array of colors [color1, color2, ...].
+     *
+     * @default `6-class YlOrRd` - [colorbrewer](http://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=6)
+     */
+    colorRange: Color[];
+
     /**
      * The weight of each object.
      *
@@ -101,6 +155,7 @@ class HeatmapTileLayer<DataT = any, ExtraProps extends {} = {}> extends Composit
   static defaultProps = defaultProps;
 
   state!: {
+    colorTexture?: Texture;
     isLoaded: boolean;
     tiles: Set<Tile2DHeader>;
     viewportChanged?: boolean;
@@ -119,12 +174,19 @@ class HeatmapTileLayer<DataT = any, ExtraProps extends {} = {}> extends Composit
     return changeFlags.somethingChanged;
   }
 
+  updateState(opts: UpdateParameters<this>) {
+    const {props, oldProps} = opts;
+    super.updateState(opts);
+    if (props.colorRange !== oldProps.colorRange) {
+      this._updateColorTexture(opts);
+    }
+  }
+
   renderLayers(): Layer {
     const {
       data,
       getWeight,
       colorDomain,
-      colorRange,
       intensity,
       radiusPixels,
       _subLayerProps,
@@ -183,12 +245,13 @@ class HeatmapTileLayer<DataT = any, ExtraProps extends {} = {}> extends Composit
 
         colorDomain,
 
-        colorRange,
         radiusPixels,
         intensity,
         _subLayerProps: subLayerProps,
         refinementStrategy: 'no-overlap',
 
+        colorTexture: this.state.colorTexture,
+
         // Disable line rendering
         extruded: false,
         stroked: false,
@@ -231,6 +294,26 @@ class HeatmapTileLayer<DataT = any, ExtraProps extends {} = {}> extends Composit
       })
     );
   }
+
+  _updateColorTexture(opts) {
+    const {colorRange} = opts.props;
+    let {colorTexture} = this.state;
+    const colors = colorRangeToFlatArray(colorRange);
+
+    if (colorTexture && colorTexture?.width === colorRange.length) {
+      // TODO(v9): Unclear whether `setSubImageData` is a public API, or what to use if not.
+      (colorTexture as any).setSubImageData({data: colors});
+    } else {
+      colorTexture?.destroy();
+      colorTexture = this.context.device.createTexture({
+        ...TEXTURE_PROPS,
+        data: colors,
+        width: colorRange.length,
+        height: 1
+      });
+    }
+    this.setState({colorTexture});
+  }
 }
 
 export default HeatmapTileLayer;

package/src/layers/heatmap.ts

@@ -1,54 +1,29 @@
 import type {ShaderPass} from '@luma.gl/shadertools';
-import {Color} from '@deck.gl/core';
+import {Texture} from '@luma.gl/core';
 const glsl = (s: TemplateStringsArray) => `${s}`;
 
 /**
  * @filter       Heatmap
  * @param radiusPixels Blur radius in pixels, controls smoothness of heatmap
  * @param colorDomain Domain to apply to values prior to applying color scale
- * @param color1-6 Colors to use in color scale
+ * @param colorTexture 1D RGB lookup texture for color scale
+ * @param intensity Multiplier to apply to value
+ * @param opacity Output opacity
  */
 
 const fs = glsl`\
 uniform heatmapUniforms {
-  vec2 delta;
-  float radiusPixels;
   vec2 colorDomain;
-  vec3 color1;
-  vec3 color2;
-  vec3 color3;
-  vec3 color4;
-  vec3 color5;
-  vec3 color6;
+  vec2 delta;
   float intensity;
   float opacity;
+  float radiusPixels;
 } heatmap;
 
-const vec4 STOPS = vec4(0.2, 0.4, 0.6, 0.8);
+uniform sampler2D colorTexture;
 
 vec3 colorGradient(float value) {
-  vec3 c1;
-  vec3 c2;
-  vec2 range;
-  if (value < STOPS.x) {
-    range = vec2(0.0, STOPS.x);
-    c1 = heatmap.color1; c2 = heatmap.color2;
-  } else if (value < STOPS.y) {
-    range = STOPS.xy;
-    c1 = heatmap.color2; c2 = heatmap.color3;
-  } else if (value < STOPS.z) {
-    range = STOPS.yz;
-    c1 = heatmap.color3; c2 = heatmap.color4;
-  } else if (value < STOPS.w) {
-    range = STOPS.zw;
-    c1 = heatmap.color4; c2 = heatmap.color5;
-  } else {
-    range = vec2(STOPS.w, 1.0);
-    c1 = heatmap.color5; c2 = heatmap.color6;
-  }
-
-  float f = (clamp(value, 0.0, 1.0) - range.x) / (range.y - range.x);
-  return mix(c1, c2, f) / 255.0;
+  return texture(colorTexture, vec2(value, 0.5)).rgb;
 }
 
 const vec3 SHIFT = vec3(1.0, 256.0, 256.0 * 256.0);
@@ -115,15 +90,6 @@ vec4 heatmap_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) {
 }
 `;
 
-const defaultColorRange: Color[] = [
-  [255, 255, 178],
-  [254, 217, 118],
-  [254, 178, 76],
-  [253, 141, 60],
-  [240, 59, 32],
-  [189, 0, 38]
-];
-
 export type HeatmapProps = {
   /**
    * Radius of the heatmap blur in pixels, to which the weight of a cell is distributed.
@@ -132,89 +98,59 @@ export type HeatmapProps = {
    */
   radiusPixels?: number;
   /**
-   * Controls how weight values are mapped to the `colorRange`, as an array of two numbers [`minValue`, `maxValue`].
+   * Controls how weight values are mapped to the colors in `colorTexture`, as an array of two numbers [`minValue`, `maxValue`].
    *
    * @default [0, 1]
    */
   colorDomain?: [number, number];
-  /**
-   * Specified as an array of colors [color1, color2, ...].
-   *
-   * @default `6-class YlOrRd` - [colorbrewer](http://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=6)
-   */
-  colorRange: Color[];
   /**
    * Value that is multiplied with the total weight at a pixel to obtain the final weight. A value larger than 1 biases the output color towards the higher end of the spectrum, and a value less than 1 biases the output color towards the lower end of the spectrum.
    */
   intensity?: number;
+  /**
+   * Color LUT for color gradient
+   */
+  colorTexture: Texture;
   opacity: number;
 };
 
-export type HeatmapUniforms = {
-  delta?: [number, number];
-  radiusPixels?: number;
-  colorDomain?: [number, number];
-  color1?: [number, number, number];
-  color2?: [number, number, number];
-  color3?: [number, number, number];
-  color4?: [number, number, number];
-  color5?: [number, number, number];
-  color6?: [number, number, number];
-  intensity: number;
-  opacity?: number;
+type PassProps = {
+  delta: [number, number];
 };
 
-export const heatmap: ShaderPass<HeatmapProps, HeatmapUniforms> = {
+export const heatmap = {
   name: 'heatmap',
   uniformPropTypes: {
-    delta: {value: [0, 1]},
-    radiusPixels: {value: 20, min: 0, softMax: 100},
     colorDomain: {value: [0, 1]},
-    color1: {value: [0, 0, 0]},
-    color2: {value: [0, 0, 0]},
-    color3: {value: [0, 0, 0]},
-    color4: {value: [0, 0, 0]},
-    color5: {value: [0, 0, 0]},
-    color6: {value: [0, 0, 0]},
+    delta: {value: [0, 1]},
     intensity: {value: 1, min: 0.1, max: 10},
-    opacity: {value: 1, min: 0, max: 1}
+    opacity: {value: 1, min: 0, max: 1},
+    radiusPixels: {value: 20, min: 0, softMax: 100}
   },
   uniformTypes: {
-    delta: 'vec2<f32>',
-    radiusPixels: 'f32',
     colorDomain: 'vec2<f32>',
-    color1: 'vec3<f32>',
-    color2: 'vec3<f32>',
-    color3: 'vec3<f32>',
-    color4: 'vec3<f32>',
-    color5: 'vec3<f32>',
-    color6: 'vec3<f32>',
+    delta: 'vec2<f32>',
     intensity: 'f32',
-    opacity: 'f32'
+    opacity: 'f32',
+    radiusPixels: 'f32'
   },
-  // @ts-expect-error stricter luma gl types
   getUniforms: opts => {
+    if (!opts) return {};
     const {
-      delta = [1, 0],
-      colorRange = defaultColorRange,
-      radiusPixels = 20,
       colorDomain = [0, 1],
+      colorTexture,
+      delta = [1, 0],
       intensity = 1,
-      opacity = 1
-    } = opts as HeatmapProps & {delta: [number, number]};
-    const [color1, color2, color3, color4, color5, color6] = colorRange;
+      opacity = 1,
+      radiusPixels = 20
+    } = opts;
     return {
-      delta,
-      color1,
-      color2,
-      color3,
-      color4,
-      color5,
-      color6,
-      radiusPixels,
       colorDomain,
+      colorTexture,
+      delta,
       intensity,
-      opacity
+      opacity,
+      radiusPixels
     };
   },
   fs,
@@ -222,4 +158,4 @@ export const heatmap: ShaderPass<HeatmapProps, HeatmapUniforms> = {
     {sampler: true, uniforms: {delta: [1, 0]}},
     {sampler: true, uniforms: {delta: [0, 1]}}
   ]
-};
+} as const satisfies ShaderPass<HeatmapProps & PassProps>;

package/src/layers/quadbin-tile-layer.ts

@@ -46,22 +46,20 @@ export default class QuadbinTileLayer<
     return loadOptions;
   }
 
-  renderLayers(): Layer | null | LayersList {
+  renderLayers(): SpatialIndexTileLayer | null {
     const tileJSON = this.props.data as TilejsonResult;
     if (!tileJSON) return null;
 
     const {tiles: data, maxresolution: maxZoom} = tileJSON;
-    return [
-      // @ts-ignore
-      new SpatialIndexTileLayer(this.props, {
-        id: `quadbin-tile-layer-${this.props.id}`,
-        data,
-        // TODO: Tileset2D should be generic over TileIndex type
-        TilesetClass: QuadbinTileset2D as any,
-        renderSubLayers,
-        maxZoom,
-        loadOptions: this.getLoadOptions()
-      })
-    ];
+    const SubLayerClass = this.getSubLayerClass('spatial-index-tile', SpatialIndexTileLayer);
+    return new SubLayerClass(this.props, {
+      id: `quadbin-tile-layer-${this.props.id}`,
+      data,
+      // TODO: Tileset2D should be generic over TileIndex type
+      TilesetClass: QuadbinTileset2D as any,
+      renderSubLayers,
+      maxZoom,
+      loadOptions: this.getLoadOptions()
+    });
   }
 }

package/src/layers/raster-layer-vertex.glsl.ts

@@ -34,7 +34,7 @@ void main(void) {
 
   int yIndex = - (gl_InstanceID / BLOCK_WIDTH);
   int xIndex = gl_InstanceID + (yIndex * BLOCK_WIDTH);
-  common_position += scale * vec2(float(xIndex), float(yIndex));
+  common_position += scale * vec2(float(xIndex), float(yIndex - 1));
 
   vec4 color = isStroke ? instanceLineColors : instanceFillColors;
 

package/src/layers/raster-tile-layer.ts

@@ -46,18 +46,16 @@ export default class RasterTileLayer<
     if (!tileJSON) return null;
 
     const {tiles: data, minzoom: minZoom, maxzoom: maxZoom} = tileJSON;
-    return [
-      // @ts-ignore
-      new TileLayer(this.props, {
-        id: `raster-tile-layer-${this.props.id}`,
-        data,
-        // TODO: Tileset2D should be generic over TileIndex type
-        TilesetClass: QuadbinTileset2D as any,
-        renderSubLayers,
-        minZoom,
-        maxZoom,
-        loadOptions: this.getLoadOptions()
-      })
-    ];
+    const SubLayerClass = this.getSubLayerClass('tile', TileLayer);
+    return new SubLayerClass(this.props, {
+      id: `raster-tile-layer-${this.props.id}`,
+      data,
+      // TODO: Tileset2D should be generic over TileIndex type
+      TilesetClass: QuadbinTileset2D as any,
+      renderSubLayers,
+      minZoom,
+      maxZoom,
+      loadOptions: this.getLoadOptions()
+    });
   }
 }