@deck.gl/carto 9.0.34 → 9.0.36

package/dist/index.cjs

@@ -39,7 +39,10 @@ __export(dist_exports, {
   VectorTileLayer: () => vector_tile_layer_default,
   _GOOGLE_BASEMAPS: () => GOOGLE_BASEMAPS,
   _PointLabelLayer: () => point_label_layer_default,
+  _QuadbinLayer: () => quadbin_layer_default,
+  _RasterLayer: () => raster_layer_default,
   _STYLE_LAYER_GROUPS: () => STYLE_LAYER_GROUPS,
+  _SpatialIndexTileLayer: () => spatial_index_tile_layer_default,
   _applyLayerGroupFilters: () => applyLayerGroupFilters,
   _fetchStyle: () => fetchStyle,
   _getStyleUrl: () => getStyleUrl,
@@ -548,7 +551,7 @@ function binaryToSpatialjson(binary) {
 }
 
 // dist/layers/schema/carto-spatial-tile-loader.js
-var VERSION = true ? "9.0.34" : "latest";
+var VERSION = true ? "9.0.36" : "latest";
 var id = "cartoSpatialTile";
 var DEFAULT_OPTIONS = {
   cartoSpatialTile: {
@@ -913,7 +916,7 @@ var TileReader3 = class {
 };
 
 // dist/layers/schema/carto-raster-tile-loader.js
-var VERSION2 = true ? "9.0.34" : "latest";
+var VERSION2 = true ? "9.0.36" : "latest";
 var id2 = "cartoRasterTile";
 var DEFAULT_OPTIONS2 = {
   cartoRasterTile: {
@@ -1045,17 +1048,16 @@ var H3TileLayer = class extends import_core8.CompositeLayer {
     if (this.props.maxZoom) {
       maxresolution = Math.min(maxresolution, getHexagonResolution({ zoom: this.props.maxZoom, latitude: 0 }, this.props.tileSize));
     }
-    return [
-      new spatial_index_tile_layer_default(this.props, {
-        id: `h3-tile-layer-${this.props.id}`,
-        data,
-        TilesetClass: H3Tileset2D,
-        renderSubLayers,
-        minZoom: minresolution,
-        maxZoom: maxresolution,
-        loadOptions: this.getLoadOptions()
-      })
-    ];
+    const SubLayerClass = this.getSubLayerClass("spatial-index-tile", spatial_index_tile_layer_default);
+    return new SubLayerClass(this.props, {
+      id: `h3-tile-layer-${this.props.id}`,
+      data,
+      TilesetClass: H3Tileset2D,
+      renderSubLayers,
+      minZoom: minresolution,
+      maxZoom: maxresolution,
+      loadOptions: this.getLoadOptions()
+    });
   }
 };
 H3TileLayer.layerName = "H3TileLayer";
@@ -1069,41 +1071,15 @@ var import_layers2 = require("@deck.gl/layers");
 
 // dist/layers/heatmap.js
 var fs = `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);
 const float MAX_VAL = SHIFT.z * 255.0;
@@ -1143,57 +1119,33 @@ color.a *= heatmap.opacity;
 return color;
 }
 `;
-var defaultColorRange = [
-  [255, 255, 178],
-  [254, 217, 118],
-  [254, 178, 76],
-  [253, 141, 60],
-  [240, 59, 32],
-  [189, 0, 38]
-];
 var 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"
   },
   getUniforms: (opts) => {
-    const { delta = [1, 0], colorRange = defaultColorRange, radiusPixels = 20, colorDomain = [0, 1], intensity = 1, opacity = 1 } = opts;
-    const [color1, color2, color3, color4, color5, color6] = colorRange;
+    if (!opts)
+      return {};
+    const { colorDomain = [0, 1], colorTexture, delta = [1, 0], intensity = 1, opacity = 1, radiusPixels = 20 } = opts;
     return {
-      delta,
-      color1,
-      color2,
-      color3,
-      color4,
-      color5,
-      color6,
-      radiusPixels,
       colorDomain,
+      colorTexture,
+      delta,
       intensity,
-      opacity
+      opacity,
+      radiusPixels
     };
   },
   fs,
@@ -1370,16 +1322,15 @@ var QuadbinTileLayer = class extends import_core10.CompositeLayer {
     if (!tileJSON)
       return null;
     const { tiles: data, maxresolution: maxZoom } = tileJSON;
-    return [
-      new spatial_index_tile_layer_default(this.props, {
-        id: `quadbin-tile-layer-${this.props.id}`,
-        data,
-        TilesetClass: QuadbinTileset2D,
-        renderSubLayers: renderSubLayers2,
-        maxZoom,
-        loadOptions: this.getLoadOptions()
-      })
-    ];
+    const SubLayerClass = this.getSubLayerClass("spatial-index-tile", spatial_index_tile_layer_default);
+    return new SubLayerClass(this.props, {
+      id: `quadbin-tile-layer-${this.props.id}`,
+      data,
+      TilesetClass: QuadbinTileset2D,
+      renderSubLayers: renderSubLayers2,
+      maxZoom,
+      loadOptions: this.getLoadOptions()
+    });
   }
 };
 QuadbinTileLayer.layerName = "QuadbinTileLayer";
@@ -1387,10 +1338,40 @@ QuadbinTileLayer.defaultProps = defaultProps5;
 var quadbin_tile_layer_default = QuadbinTileLayer;
 
 // dist/layers/heatmap-tile-layer.js
+var defaultColorRange = [
+  [255, 255, 178],
+  [254, 217, 118],
+  [254, 178, 76],
+  [253, 141, 60],
+  [240, 59, 32],
+  [189, 0, 38]
+];
+var TEXTURE_PROPS2 = {
+  format: "rgba8unorm",
+  mipmaps: false,
+  sampler: {
+    minFilter: "linear",
+    magFilter: "linear",
+    addressModeU: "clamp-to-edge",
+    addressModeV: "clamp-to-edge"
+  }
+};
 function unitDensityForCell(cell) {
   const cellResolution = Number((0, import_quadbin6.getResolution)(cell));
   return Math.pow(4, cellResolution);
 }
+function colorRangeToFlatArray(colorRange) {
+  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] : 255;
+  }
+  return flatArray;
+}
 var RTTSolidPolygonLayer = class extends RTTModifier(import_layers2.SolidPolygonLayer) {
   getShaders(type) {
     const shaders = super.getShaders(type);
@@ -1436,6 +1417,7 @@ var defaultProps6 = {
   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 }
 };
@@ -1452,9 +1434,16 @@ var HeatmapTileLayer = class extends import_core11.CompositeLayer {
     this.setState({ viewportChanged });
     return changeFlags.somethingChanged;
   }
+  updateState(opts) {
+    const { props, oldProps } = opts;
+    super.updateState(opts);
+    if (props.colorRange !== oldProps.colorRange) {
+      this._updateColorTexture(opts);
+    }
+  }
   renderLayers() {
     var _a, _b, _c;
-    const { data, getWeight, colorDomain, colorRange, intensity, radiusPixels, _subLayerProps, updateTriggers, onMaxDensityChange, onViewportLoad, onTileLoad, onTileUnload, ...tileLayerProps } = this.props;
+    const { data, getWeight, colorDomain, intensity, radiusPixels, _subLayerProps, updateTriggers, onMaxDensityChange, onViewportLoad, onTileLoad, onTileUnload, ...tileLayerProps } = this.props;
     const subLayerProps = {
       ..._subLayerProps,
       cell: {
@@ -1490,11 +1479,11 @@ var HeatmapTileLayer = class extends import_core11.CompositeLayer {
       getElevation: getWeight,
       elevationScale: maxDensity,
       colorDomain,
-      colorRange,
       radiusPixels,
       intensity,
       _subLayerProps: subLayerProps,
       refinementStrategy: "no-overlap",
+      colorTexture: this.state.colorTexture,
       extruded: false,
       stroked: false,
       updateTriggers: {
@@ -1530,6 +1519,23 @@ var HeatmapTileLayer = class extends import_core11.CompositeLayer {
       transitions: { elevationScale: { type: "spring", stiffness: 0.3, damping: 0.5 } }
     }));
   }
+  _updateColorTexture(opts) {
+    const { colorRange } = opts.props;
+    let { colorTexture } = this.state;
+    const colors = colorRangeToFlatArray(colorRange);
+    if (colorTexture && (colorTexture == null ? void 0 : colorTexture.width) === colorRange.length) {
+      colorTexture.setSubImageData({ data: colors });
+    } else {
+      colorTexture == null ? void 0 : colorTexture.destroy();
+      colorTexture = this.context.device.createTexture({
+        ...TEXTURE_PROPS2,
+        data: colors,
+        width: colorRange.length,
+        height: 1
+      });
+    }
+    this.setState({ colorTexture });
+  }
 };
 HeatmapTileLayer.layerName = "HeatmapTileLayer";
 HeatmapTileLayer.defaultProps = defaultProps6;
@@ -1702,7 +1708,7 @@ vec2 common_position = offset.xy;
 float scale = offset.z;
 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;
 float shouldRender = float(color.a > 0.0 && instanceElevations >= 0.0);
 float cellWidth = coverage * scale;
@@ -1889,17 +1895,16 @@ var RasterTileLayer = class extends import_core14.CompositeLayer {
     if (!tileJSON)
       return null;
     const { tiles: data, minzoom: minZoom, maxzoom: maxZoom } = tileJSON;
-    return [
-      new import_geo_layers7.TileLayer(this.props, {
-        id: `raster-tile-layer-${this.props.id}`,
-        data,
-        TilesetClass: QuadbinTileset2D,
-        renderSubLayers: renderSubLayers3,
-        minZoom,
-        maxZoom,
-        loadOptions: this.getLoadOptions()
-      })
-    ];
+    const SubLayerClass = this.getSubLayerClass("tile", import_geo_layers7.TileLayer);
+    return new SubLayerClass(this.props, {
+      id: `raster-tile-layer-${this.props.id}`,
+      data,
+      TilesetClass: QuadbinTileset2D,
+      renderSubLayers: renderSubLayers3,
+      minZoom,
+      maxZoom,
+      loadOptions: this.getLoadOptions()
+    });
   }
 };
 RasterTileLayer.layerName = "RasterTileLayer";
@@ -1947,7 +1952,7 @@ var carto_properties_tile_loader_default = CartoPropertiesTileLoader;
 
 // dist/layers/schema/carto-vector-tile-loader.js
 var import_earcut = __toESM(require("earcut"), 1);
-var VERSION3 = true ? "9.0.34" : "latest";
+var VERSION3 = true ? "9.0.36" : "latest";
 var id3 = "cartoVectorTile";
 var DEFAULT_OPTIONS3 = {
   cartoVectorTile: {