@deck.gl/carto 9.0.17 → 9.0.18

package/dist/index.cjs

@@ -31,7 +31,7 @@ __export(dist_exports, {
   CARTO_SOURCES: () => CARTO_SOURCES,
   CartoAPIError: () => CartoAPIError,
   H3TileLayer: () => H3TileLayer,
-  QuadbinHeatmapTileLayer: () => quadbin_heatmap_tile_layer_default,
+  HeatmapTileLayer: () => heatmap_tile_layer_default,
   QuadbinTileLayer: () => QuadbinTileLayer,
   RasterTileLayer: () => RasterTileLayer,
   SOURCE_DEFAULTS: () => SOURCE_DEFAULTS,
@@ -273,7 +273,7 @@ var isObject = (x) => x !== null && typeof x === "object";
 var isPureObject = (x) => isObject(x) && x.constructor === {}.constructor;
 
 // dist/layers/schema/carto-raster-tile-loader.js
-var VERSION = true ? "9.0.17" : "latest";
+var VERSION = true ? "9.0.18" : "latest";
 var id = "cartoRasterTile";
 var DEFAULT_OPTIONS = {
   cartoRasterTile: {
@@ -544,7 +544,7 @@ function binaryToSpatialjson(binary) {
 }
 
 // dist/layers/schema/carto-spatial-tile-loader.js
-var VERSION2 = true ? "9.0.17" : "latest";
+var VERSION2 = true ? "9.0.18" : "latest";
 var id2 = "cartoSpatialTile";
 var DEFAULT_OPTIONS2 = {
   cartoSpatialTile: {
@@ -775,280 +775,12 @@ var H3TileLayer = _H3TileLayer;
   _H3TileLayer.defaultProps = defaultProps2;
 })();
 
-// dist/layers/point-label-layer.js
-var import_core6 = require("@deck.gl/core");
-var import_layers = require("@deck.gl/layers");
-var [LEFT, TOP, RIGHT, BOTTOM] = [0, 1, 2, 3];
-var _EnhancedTextBackgroundLayer = class extends import_layers._TextBackgroundLayer {
-  getShaders() {
-    const shaders = super.getShaders();
-    let vs = shaders.vs;
-    vs = vs.replaceAll("padding.", "_padding.");
-    vs = vs.replace("void main(void) {", "void main(void) {\n  vec4 _padding = padding + instancePixelOffsets.xyxy * vec4(1.0, 1.0, -1.0, -1.0);");
-    return { ...shaders, vs };
-  }
-};
-var EnhancedTextBackgroundLayer = _EnhancedTextBackgroundLayer;
-(() => {
-  _EnhancedTextBackgroundLayer.layerName = "EnhancedTextBackgroundLayer";
-})();
-var _EnhancedTextLayer = class extends import_layers.TextLayer {
-  filterSubLayer({ layer, renderPass }) {
-    const background = layer.id.includes("primary-background");
-    if (renderPass === "collision") {
-      return background;
-    }
-    return !background;
-  }
-};
-var EnhancedTextLayer = _EnhancedTextLayer;
-(() => {
-  _EnhancedTextLayer.layerName = "EnhancedTextLayer";
-})();
-var defaultProps3 = {
-  ...import_layers.TextLayer.defaultProps,
-  getRadius: { type: "accessor", value: 1 },
-  radiusScale: { type: "number", min: 0, value: 1 }
-};
-var _PointLabelLayer = class extends import_core6.CompositeLayer {
-  calculatePixelOffset(secondary) {
-    const { getTextAnchor: anchor, getAlignmentBaseline: alignment, getRadius, getSecondaryText, radiusScale, secondarySizeScale, sizeScale } = this.props;
-    const xMult = anchor === "middle" ? 0 : anchor === "start" ? 1 : -1;
-    const yMult = alignment === "center" ? 0 : alignment === "bottom" ? 1 : -1;
-    const xPadding = sizeScale / 4;
-    const yPadding = sizeScale * (1 + 1 / 4);
-    const secondaryOffset = 0.6 * (1 - yMult) * sizeScale;
-    let yOffset = secondary ? secondaryOffset : 0;
-    if (anchor === "middle" && alignment === "top" && getSecondaryText) {
-      yOffset -= secondaryOffset;
-      yOffset -= secondarySizeScale;
-      yOffset += sizeScale;
-    }
-    const radiusPadding = 1 + 1 / 4;
-    return typeof getRadius === "function" ? (d, info) => {
-      const r = (info ? getRadius(d, info) : 1) * radiusScale * radiusPadding;
-      return [xMult * (r + xPadding), yMult * (r + yPadding) + yOffset];
-    } : [
-      xMult * (getRadius * radiusScale * radiusPadding + xPadding),
-      yMult * (getRadius * radiusScale * radiusPadding + yPadding) + yOffset
-    ];
-  }
-  calculateBackgroundPadding() {
-    const { getTextAnchor: anchor, getAlignmentBaseline: alignment, sizeScale } = this.props;
-    const paddingX = 12 * sizeScale;
-    const paddingY = 3 * sizeScale;
-    const backgroundPadding = [0, 0, 0, 0];
-    if (alignment === "top") {
-      backgroundPadding[TOP] = paddingY;
-    } else if (alignment === "bottom") {
-      backgroundPadding[BOTTOM] = paddingY;
-    } else {
-      backgroundPadding[TOP] = 0.5 * paddingY;
-      backgroundPadding[BOTTOM] = 0.5 * paddingY;
-    }
-    if (anchor === "start") {
-      backgroundPadding[LEFT] = paddingX;
-    } else if (anchor === "end") {
-      backgroundPadding[RIGHT] = paddingX;
-    } else {
-      backgroundPadding[LEFT] = 0.5 * paddingX;
-      backgroundPadding[RIGHT] = 0.5 * paddingX;
-    }
-    return backgroundPadding;
-  }
-  renderTextLayer(id4, { updateTriggers: updateTriggersOverride = {}, ...props }) {
-    const { data, characterSet, fontFamily, fontSettings, fontWeight, outlineColor, outlineWidth, sizeScale, radiusScale, getAlignmentBaseline, getColor, getPosition, getTextAnchor, updateTriggers } = this.props;
-    return new EnhancedTextLayer(this.getSubLayerProps({
-      id: id4,
-      data,
-      characterSet,
-      fontFamily,
-      fontSettings,
-      fontWeight,
-      outlineColor,
-      outlineWidth,
-      sizeScale,
-      getAlignmentBaseline,
-      getColor,
-      getPosition,
-      getTextAnchor,
-      updateTriggers: {
-        ...updateTriggers,
-        ...updateTriggersOverride,
-        getPixelOffset: [
-          updateTriggers.getRadius,
-          updateTriggers.getTextAnchor,
-          updateTriggers.getAlignmentBaseline,
-          radiusScale,
-          sizeScale
-        ]
-      }
-    }), {
-      getSize: 1,
-      _subLayerProps: { background: { type: EnhancedTextBackgroundLayer } }
-    }, props);
-  }
-  renderLayers() {
-    const { getText, getSecondaryColor, getSecondaryText, secondaryOutlineColor, secondarySizeScale, updateTriggers } = this.props;
-    const getPixelOffset = this.calculatePixelOffset(false);
-    const backgroundPadding = this.calculateBackgroundPadding();
-    const out = [
-      this.renderTextLayer(`${updateTriggers.getText}-primary`, {
-        backgroundPadding,
-        getText,
-        getPixelOffset,
-        background: true
-      }),
-      Boolean(getSecondaryText) && this.renderTextLayer(`${updateTriggers.getSecondaryText}-secondary`, {
-        getText: getSecondaryText,
-        getPixelOffset: this.calculatePixelOffset(true),
-        getAlignmentBaseline: "top",
-        ...getSecondaryColor && { getColor: getSecondaryColor },
-        ...secondarySizeScale && { sizeScale: secondarySizeScale },
-        ...secondaryOutlineColor && { outlineColor: secondaryOutlineColor }
-      })
-    ];
-    return out;
-  }
-};
-var PointLabelLayer = _PointLabelLayer;
-(() => {
-  _PointLabelLayer.layerName = "PointLabelLayer";
-})();
-(() => {
-  _PointLabelLayer.defaultProps = defaultProps3;
-})();
-
-// dist/layers/quadbin-tile-layer.js
-var import_core7 = require("@deck.gl/core");
-
-// dist/layers/quadbin-layer.js
-var import_geo_layers4 = require("@deck.gl/geo-layers");
-
-// dist/layers/quadbin-utils.js
-var import_web_mercator = require("@math.gl/web-mercator");
-var import_quadbin2 = require("quadbin");
-var TILE_SIZE = 512;
-function quadbinToOffset(quadbin) {
-  const { x, y, z } = (0, import_quadbin2.cellToTile)(quadbin);
-  const scale = TILE_SIZE / (1 << z);
-  return [x * scale, TILE_SIZE - y * scale, scale];
-}
-function quadbinToWorldBounds(quadbin, coverage) {
-  const [xOffset, yOffset, scale] = quadbinToOffset(quadbin);
-  return [
-    [xOffset, yOffset],
-    [xOffset + coverage * scale, yOffset - coverage * scale]
-  ];
-}
-function getQuadbinPolygon(quadbin, coverage = 1) {
-  const [topLeft, bottomRight] = quadbinToWorldBounds(quadbin, coverage);
-  const [w, n] = (0, import_web_mercator.worldToLngLat)(topLeft);
-  const [e, s] = (0, import_web_mercator.worldToLngLat)(bottomRight);
-  return [e, n, e, s, w, s, w, n, e, n];
-}
-
-// dist/layers/quadbin-layer.js
-var defaultProps4 = {
-  getQuadbin: { type: "accessor", value: (d) => d.quadbin }
-};
-var _QuadbinLayer = class extends import_geo_layers4._GeoCellLayer {
-  indexToBounds() {
-    const { data, extruded, getQuadbin } = this.props;
-    const coverage = extruded ? 0.99 : 1;
-    return {
-      data,
-      _normalize: false,
-      positionFormat: "XY",
-      getPolygon: (x, objectInfo) => getQuadbinPolygon(getQuadbin(x, objectInfo), coverage),
-      updateTriggers: { getPolygon: coverage }
-    };
-  }
-};
-var QuadbinLayer = _QuadbinLayer;
-(() => {
-  _QuadbinLayer.layerName = "QuadbinLayer";
-})();
-(() => {
-  _QuadbinLayer.defaultProps = defaultProps4;
-})();
-
-// dist/layers/quadbin-tileset-2d.js
-var import_geo_layers5 = require("@deck.gl/geo-layers");
-var import_quadbin3 = require("quadbin");
-var QuadbinTileset2D = class extends import_geo_layers5._Tileset2D {
-  getTileIndices(opts) {
-    return super.getTileIndices(opts).map(import_quadbin3.tileToCell).map((q) => ({ q, i: (0, import_quadbin3.bigIntToHex)(q) }));
-  }
-  getTileId({ q, i }) {
-    return i || (0, import_quadbin3.bigIntToHex)(q);
-  }
-  getTileMetadata({ q }) {
-    return super.getTileMetadata((0, import_quadbin3.cellToTile)(q));
-  }
-  getTileZoom({ q }) {
-    return Number((0, import_quadbin3.getResolution)(q));
-  }
-  getParentIndex({ q }) {
-    return { q: (0, import_quadbin3.cellToParent)(q) };
-  }
-};
-
-// dist/layers/quadbin-tile-layer.js
-var import_quadbin4 = require("quadbin");
-var renderSubLayers2 = (props) => {
-  const { data } = props;
-  if (!data || !data.length)
-    return null;
-  const isBigInt = typeof data[0].id === "bigint";
-  return new QuadbinLayer(props, {
-    getQuadbin: isBigInt ? (d) => d.id : (d) => (0, import_quadbin4.hexToBigInt)(d.id)
-  });
-};
-var defaultProps5 = {
-  data: TilejsonPropType,
-  tileSize: DEFAULT_TILE_SIZE
-};
-var _QuadbinTileLayer = class extends import_core7.CompositeLayer {
-  getLoadOptions() {
-    const loadOptions = super.getLoadOptions() || {};
-    const tileJSON = this.props.data;
-    injectAccessToken(loadOptions, tileJSON.accessToken);
-    loadOptions.cartoSpatialTile = { ...loadOptions.cartoSpatialTile, scheme: "quadbin" };
-    return loadOptions;
-  }
-  renderLayers() {
-    const tileJSON = this.props.data;
-    if (!tileJSON)
-      return null;
-    const { tiles: data, maxresolution: maxZoom } = tileJSON;
-    return [
-      new SpatialIndexTileLayer(this.props, {
-        id: `quadbin-tile-layer-${this.props.id}`,
-        data,
-        TilesetClass: QuadbinTileset2D,
-        renderSubLayers: renderSubLayers2,
-        maxZoom,
-        loadOptions: this.getLoadOptions()
-      })
-    ];
-  }
-};
-var QuadbinTileLayer = _QuadbinTileLayer;
-(() => {
-  _QuadbinTileLayer.layerName = "QuadbinTileLayer";
-})();
-(() => {
-  _QuadbinTileLayer.defaultProps = defaultProps5;
-})();
-
-// dist/layers/quadbin-heatmap-tile-layer.js
+// dist/layers/heatmap-tile-layer.js
 var import_quadbin5 = require("quadbin");
-var import_core9 = require("@deck.gl/core");
-var import_layers2 = require("@deck.gl/layers");
+var import_core8 = require("@deck.gl/core");
+var import_layers = require("@deck.gl/layers");
 
 // dist/layers/heatmap.js
-var import_shadertools = require("@luma.gl/shadertools");
 var fs = `uniform heatmapUniforms {
 vec2 delta;
 float radiusPixels;
@@ -1059,9 +791,9 @@ vec3 color3;
 vec3 color4;
 vec3 color5;
 vec3 color6;
+float intensity;
 float opacity;
 } heatmap;
-const float SUPPORT = 8.0;
 const vec4 STOPS = vec4(0.2, 0.4, 0.6, 0.8);
 vec3 colorGradient(float value) {
 vec3 c1;
@@ -1079,17 +811,16 @@ c1 = heatmap.color3; c2 = heatmap.color4;
 } else if (value < STOPS.w) {
 range = STOPS.zw;
 c1 = heatmap.color4; c2 = heatmap.color5;
-} else if (value < 1.0 ) {
+} else {
 range = vec2(STOPS.w, 1.0);
 c1 = heatmap.color5; c2 = heatmap.color6;
-} else {
-range = vec2(1.0, 10.0);
-c1 = heatmap.color6; c2 = vec3(255.0);
 }
-float f = (value - range.x) / (range.y - range.x);
+float f = (clamp(value, 0.0, 1.0) - range.x) / (range.y - range.x);
 return mix(c1, c2, f) / 255.0;
 }
 const vec3 SHIFT = vec3(1.0, 256.0, 256.0 * 256.0);
+const float MAX_VAL = SHIFT.z * 255.0;
+const float SCALE = MAX_VAL / 8.0;
 vec4 pack(float value) {
 return vec4(mod(vec3(value, floor(value / SHIFT.yz)), 256.0), 255.0) / 255.0;
 }
@@ -1099,12 +830,12 @@ return 255.0 * dot(color, SHIFT);
 vec4 heatmap_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) {
 bool firstPass = (heatmap.delta.y < 0.5);
 float accumulator = 0.0;
-float offset = 0.5 * random(vec3(12.9898, 78.233, 151.7182), 0.0);
-const float sigma = SUPPORT / 3.0;
-const float a = -0.5 / (sigma * sigma);
-const float w0 = 0.3989422804014327 / sigma;
+float SUPPORT = clamp(heatmap.radiusPixels / 2.0, 8.0, 32.0);
+float sigma = SUPPORT / 3.0;
+float a = -0.5 / (sigma * sigma);
+float w0 = 0.3989422804014327 / sigma;
 for (float t = -SUPPORT; t <= SUPPORT; t++) {
-vec2 percent = (t * heatmap.delta + offset - 0.5) / SUPPORT;
+vec2 percent = (t * heatmap.delta - 0.5) / SUPPORT;
 vec2 delta = percent * heatmap.radiusPixels / texSize;
 vec4 offsetColor = texture(source, texCoord + delta);
 float value = unpack(offsetColor.rgb);
@@ -1114,7 +845,9 @@ accumulator += value * weight;
 if (firstPass) {
 return pack(accumulator);
 }
-float f = (accumulator - heatmap.colorDomain[0]) / (heatmap.colorDomain[1] - heatmap.colorDomain[0]);
+float density = 10.0 * heatmap.intensity * accumulator / SCALE;
+vec2 domain = heatmap.colorDomain;
+float f = (density - domain[0]) / (domain[1] - domain[0]);
 vec4 color = vec4(0.0);
 color.rgb = colorGradient(f);
 color.a = smoothstep(0.0, 0.1, f);
@@ -1143,6 +876,7 @@ var heatmap = {
     color4: { value: [0, 0, 0] },
     color5: { value: [0, 0, 0] },
     color6: { value: [0, 0, 0] },
+    intensity: { value: 1, min: 0.1, max: 10 },
     opacity: { value: 1, min: 0, max: 1 }
   },
   uniformTypes: {
@@ -1155,10 +889,11 @@ var heatmap = {
     color4: "vec3<f32>",
     color5: "vec3<f32>",
     color6: "vec3<f32>",
+    intensity: "f32",
     opacity: "f32"
   },
   getUniforms: (opts) => {
-    const { delta = [1, 0], colorRange = defaultColorRange, radiusPixels = 20, colorDomain = [0, 1], opacity = 1 } = 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;
     return {
       delta,
@@ -1170,10 +905,10 @@ var heatmap = {
       color6,
       radiusPixels,
       colorDomain,
+      intensity,
       opacity
     };
   },
-  dependencies: [import_shadertools.random],
   fs,
   passes: [
     { sampler: true, uniforms: { delta: [1, 0] } },
@@ -1182,7 +917,7 @@ var heatmap = {
 };
 
 // dist/layers/post-process-utils.js
-var import_core8 = require("@deck.gl/core");
+var import_core6 = require("@deck.gl/core");
 var TEXTURE_PROPS = {
   format: "rgba8unorm",
   mipmaps: false,
@@ -1199,7 +934,7 @@ function getPostProcessLayer(layer) {
   }
   return layer;
 }
-var _DrawCallbackLayer = class extends import_core8.Layer {
+var _DrawCallbackLayer = class extends import_core6.Layer {
   initializeState() {
     this.id = `draw-callback-${getPostProcessLayer(this).props.id}`;
   }
@@ -1209,125 +944,261 @@ var _DrawCallbackLayer = class extends import_core8.Layer {
 };
 var DrawCallbackLayer = _DrawCallbackLayer;
 (() => {
-  _DrawCallbackLayer.layerName = "DrawCallbackLayer";
+  _DrawCallbackLayer.layerName = "DrawCallbackLayer";
+})();
+function RTTModifier(BaseLayer) {
+  var _a;
+  return _a = class extends BaseLayer {
+    draw(opts) {
+      const { moduleParameters } = opts;
+      const { picking } = moduleParameters;
+      const postProcessLayer = getPostProcessLayer(this);
+      if (!picking.isActive) {
+        postProcessLayer.enableRTT(opts);
+      }
+      super.draw(opts);
+      if (!picking.isActive) {
+        postProcessLayer.disableRTT();
+      }
+    }
+  }, (() => {
+    _a.layerName = `RTT-${BaseLayer.layerName}`;
+  })(), _a;
+}
+function PostProcessModifier(BaseLayer, effect) {
+  var _a;
+  return _a = class extends BaseLayer {
+    initializeState(context) {
+      super.initializeState(context);
+      this._createTextures();
+      this.internalState.postProcess = new import_core6.PostProcessEffect(effect, this.props);
+      this.internalState.postProcess.setup(context);
+    }
+    updateState(params) {
+      super.updateState(params);
+      this.internalState.postProcess.setProps(this.props);
+    }
+    renderLayers() {
+      let subLayers = super.renderLayers();
+      if (!subLayers) {
+        return null;
+      }
+      subLayers = Array.isArray(subLayers) ? subLayers : [subLayers];
+      return [...subLayers, new DrawCallbackLayer()];
+    }
+    _createTextures() {
+      const { device } = this.context;
+      this.internalState.renderBuffers = [0, 1].map((i) => {
+        return device.createFramebuffer({
+          id: `layer-fbo-${i}`,
+          colorAttachments: [device.createTexture(TEXTURE_PROPS)],
+          depthStencilAttachment: "depth16unorm"
+        });
+      });
+    }
+    _resizeBuffers(opts) {
+      const { moduleParameters } = opts;
+      const { viewport } = this.context;
+      const width = moduleParameters.devicePixelRatio * viewport.width;
+      const height = moduleParameters.devicePixelRatio * viewport.height;
+      this.internalState.renderBuffers.forEach((fbo) => fbo.resize({ width, height }));
+    }
+    enableRTT(opts) {
+      this._resizeBuffers(opts);
+      this.internalState.originalRenderPass = this.context.renderPass;
+      const [framebuffer] = this.internalState.renderBuffers;
+      this.internalState.internalRenderPass = this.context.device.beginRenderPass({
+        framebuffer,
+        parameters: { viewport: [0, 0, framebuffer.width, framebuffer.height] },
+        clearColor: this.internalState.renderInProgress ? false : [0, 0, 0, 0]
+      });
+      this.internalState.renderInProgress = true;
+      this.context.renderPass = this.internalState.internalRenderPass;
+    }
+    disableRTT() {
+      this.internalState.internalRenderPass.end();
+      this.context.renderPass = this.internalState.originalRenderPass;
+    }
+    applyPostProcess() {
+      if (!this.internalState.renderInProgress) {
+        return;
+      }
+      const [inputBuffer, swapBuffer] = this.internalState.renderBuffers;
+      const { framebuffer: target } = this.context.renderPass.props;
+      this.internalState.postProcess.postRender({
+        inputBuffer,
+        swapBuffer,
+        target
+      });
+      this.internalState.renderInProgress = false;
+    }
+  }, (() => {
+    _a.layerName = `PostProcess${BaseLayer.layerName}`;
+  })(), _a;
+}
+
+// dist/layers/quadbin-tile-layer.js
+var import_core7 = require("@deck.gl/core");
+
+// dist/layers/quadbin-layer.js
+var import_geo_layers4 = require("@deck.gl/geo-layers");
+
+// dist/layers/quadbin-utils.js
+var import_web_mercator = require("@math.gl/web-mercator");
+var import_quadbin2 = require("quadbin");
+var TILE_SIZE = 512;
+function quadbinToOffset(quadbin) {
+  const { x, y, z } = (0, import_quadbin2.cellToTile)(quadbin);
+  const scale = TILE_SIZE / (1 << z);
+  return [x * scale, TILE_SIZE - y * scale, scale];
+}
+function quadbinToWorldBounds(quadbin, coverage) {
+  const [xOffset, yOffset, scale] = quadbinToOffset(quadbin);
+  return [
+    [xOffset, yOffset],
+    [xOffset + coverage * scale, yOffset - coverage * scale]
+  ];
+}
+function getQuadbinPolygon(quadbin, coverage = 1) {
+  const [topLeft, bottomRight] = quadbinToWorldBounds(quadbin, coverage);
+  const [w, n] = (0, import_web_mercator.worldToLngLat)(topLeft);
+  const [e, s] = (0, import_web_mercator.worldToLngLat)(bottomRight);
+  return [e, n, e, s, w, s, w, n, e, n];
+}
+
+// dist/layers/quadbin-layer.js
+var defaultProps3 = {
+  getQuadbin: { type: "accessor", value: (d) => d.quadbin }
+};
+var _QuadbinLayer = class extends import_geo_layers4._GeoCellLayer {
+  indexToBounds() {
+    const { data, extruded, getQuadbin } = this.props;
+    const coverage = extruded ? 0.99 : 1;
+    return {
+      data,
+      _normalize: false,
+      positionFormat: "XY",
+      getPolygon: (x, objectInfo) => getQuadbinPolygon(getQuadbin(x, objectInfo), coverage),
+      updateTriggers: { getPolygon: coverage }
+    };
+  }
+};
+var QuadbinLayer = _QuadbinLayer;
+(() => {
+  _QuadbinLayer.layerName = "QuadbinLayer";
+})();
+(() => {
+  _QuadbinLayer.defaultProps = defaultProps3;
+})();
+
+// dist/layers/quadbin-tileset-2d.js
+var import_geo_layers5 = require("@deck.gl/geo-layers");
+var import_quadbin3 = require("quadbin");
+var QuadbinTileset2D = class extends import_geo_layers5._Tileset2D {
+  getTileIndices(opts) {
+    return super.getTileIndices(opts).map(import_quadbin3.tileToCell).map((q) => ({ q, i: (0, import_quadbin3.bigIntToHex)(q) }));
+  }
+  getTileId({ q, i }) {
+    return i || (0, import_quadbin3.bigIntToHex)(q);
+  }
+  getTileMetadata({ q }) {
+    return super.getTileMetadata((0, import_quadbin3.cellToTile)(q));
+  }
+  getTileZoom({ q }) {
+    return Number((0, import_quadbin3.getResolution)(q));
+  }
+  getParentIndex({ q }) {
+    return { q: (0, import_quadbin3.cellToParent)(q) };
+  }
+};
+
+// dist/layers/quadbin-tile-layer.js
+var import_quadbin4 = require("quadbin");
+var renderSubLayers2 = (props) => {
+  const { data } = props;
+  if (!data || !data.length)
+    return null;
+  const isBigInt = typeof data[0].id === "bigint";
+  return new QuadbinLayer(props, {
+    getQuadbin: isBigInt ? (d) => d.id : (d) => (0, import_quadbin4.hexToBigInt)(d.id)
+  });
+};
+var defaultProps4 = {
+  data: TilejsonPropType,
+  tileSize: DEFAULT_TILE_SIZE
+};
+var _QuadbinTileLayer = class extends import_core7.CompositeLayer {
+  getLoadOptions() {
+    const loadOptions = super.getLoadOptions() || {};
+    const tileJSON = this.props.data;
+    injectAccessToken(loadOptions, tileJSON.accessToken);
+    loadOptions.cartoSpatialTile = { ...loadOptions.cartoSpatialTile, scheme: "quadbin" };
+    return loadOptions;
+  }
+  renderLayers() {
+    const tileJSON = this.props.data;
+    if (!tileJSON)
+      return null;
+    const { tiles: data, maxresolution: maxZoom } = tileJSON;
+    return [
+      new SpatialIndexTileLayer(this.props, {
+        id: `quadbin-tile-layer-${this.props.id}`,
+        data,
+        TilesetClass: QuadbinTileset2D,
+        renderSubLayers: renderSubLayers2,
+        maxZoom,
+        loadOptions: this.getLoadOptions()
+      })
+    ];
+  }
+};
+var QuadbinTileLayer = _QuadbinTileLayer;
+(() => {
+  _QuadbinTileLayer.layerName = "QuadbinTileLayer";
+})();
+(() => {
+  _QuadbinTileLayer.defaultProps = defaultProps4;
 })();
-function RTTModifier(BaseLayer) {
-  var _a;
-  return _a = class extends BaseLayer {
-    draw(opts) {
-      const { moduleParameters } = opts;
-      const { picking } = moduleParameters;
-      const postProcessLayer = getPostProcessLayer(this);
-      if (!picking.isActive) {
-        postProcessLayer.enableRTT(opts);
-      }
-      super.draw(opts);
-      if (!picking.isActive) {
-        postProcessLayer.disableRTT();
-      }
-    }
-  }, (() => {
-    _a.layerName = `RTT-${BaseLayer.layerName}`;
-  })(), _a;
-}
-function PostProcessModifier(BaseLayer, effect) {
-  var _a;
-  return _a = class extends BaseLayer {
-    initializeState(context) {
-      super.initializeState(context);
-      this._createTextures();
-      this.internalState.postProcess = new import_core8.PostProcessEffect(effect, this.props);
-      this.internalState.postProcess.setup(context);
-    }
-    updateState(params) {
-      super.updateState(params);
-      this.internalState.postProcess.setProps(this.props);
-    }
-    renderLayers() {
-      let subLayers = super.renderLayers();
-      if (!subLayers) {
-        return null;
-      }
-      subLayers = Array.isArray(subLayers) ? subLayers : [subLayers];
-      return [...subLayers, new DrawCallbackLayer()];
-    }
-    _createTextures() {
-      const { device } = this.context;
-      this.internalState.renderBuffers = [0, 1].map((i) => {
-        return device.createFramebuffer({
-          id: `layer-fbo-${i}`,
-          colorAttachments: [device.createTexture(TEXTURE_PROPS)],
-          depthStencilAttachment: "depth16unorm"
-        });
-      });
-    }
-    _resizeBuffers(opts) {
-      const { moduleParameters } = opts;
-      const { viewport } = this.context;
-      const width = moduleParameters.devicePixelRatio * viewport.width;
-      const height = moduleParameters.devicePixelRatio * viewport.height;
-      this.internalState.renderBuffers.forEach((fbo) => fbo.resize({ width, height }));
-    }
-    enableRTT(opts) {
-      this._resizeBuffers(opts);
-      this.internalState.originalRenderPass = this.context.renderPass;
-      const [framebuffer] = this.internalState.renderBuffers;
-      this.internalState.internalRenderPass = this.context.device.beginRenderPass({
-        framebuffer,
-        parameters: { viewport: [0, 0, framebuffer.width, framebuffer.height] },
-        clearColor: this.internalState.renderInProgress ? false : [0, 0, 0, 0]
-      });
-      this.internalState.renderInProgress = true;
-      this.context.renderPass = this.internalState.internalRenderPass;
-    }
-    disableRTT() {
-      this.internalState.internalRenderPass.end();
-      this.context.renderPass = this.internalState.originalRenderPass;
-    }
-    applyPostProcess() {
-      if (!this.internalState.renderInProgress) {
-        return;
-      }
-      const [inputBuffer, swapBuffer] = this.internalState.renderBuffers;
-      const { framebuffer: target } = this.context.renderPass.props;
-      this.internalState.postProcess.postRender({
-        inputBuffer,
-        swapBuffer,
-        target
-      });
-      this.internalState.renderInProgress = false;
-    }
-  }, (() => {
-    _a.layerName = `PostProcess${BaseLayer.layerName}`;
-  })(), _a;
-}
 
-// dist/layers/quadbin-heatmap-tile-layer.js
-var _RTTSolidPolygonLayer = class extends RTTModifier(import_layers2.SolidPolygonLayer) {
+// dist/layers/heatmap-tile-layer.js
+function unitDensityForCell(cell) {
+  const cellResolution = Number((0, import_quadbin5.getResolution)(cell));
+  return Math.pow(4, cellResolution);
+}
+var _RTTSolidPolygonLayer = class extends RTTModifier(import_layers.SolidPolygonLayer) {
   getShaders(type) {
     const shaders = super.getShaders(type);
     shaders.inject = {
-      "vs:#decl": "uniform float cellResolution;",
-      "vs:DECKGL_FILTER_COLOR": `
-  const vec3 SHIFT = vec3(1.0, 256.0, 256.0 * 256.0);
-  float value = 255.0 * dot(SHIFT, color.rgb);
+      "vs:#decl": `
+uniform float densityFactor;
+`,
+      "vs:#main-end": `
+      // Value from getWeight accessor
+  float weight = elevations;
 
   // Keep "power" delivered to screen constant when tiles update
-  float relativeZoom = log2(project_uScale) - cellResolution + 3.5; // range 0-1
-  float relativeArea = pow(2.0, -2.0 * relativeZoom); // range 0.25-1
-  value *= relativeArea;
+  // by outputting normalized density 
+  weight *= densityFactor;
 
   // Pack float into 3 channels to pass to heatmap shader
-  color = vec4(mod(vec3(value, floor(value / SHIFT.yz)), 256.0), 255.0) / 255.0;
-      `
+  // SCALE value important, as we don't want to saturate
+  // but also want enough definition to avoid banding
+  const vec3 SHIFT = vec3(1.0, 256.0, 256.0 * 256.0);
+  const float MAX_VAL = SHIFT.z * 255.0;
+  const float SCALE = MAX_VAL / 8.0;
+  weight *= SCALE;
+  weight = clamp(weight, 0.0, MAX_VAL);
+  vColor = vec4(mod(vec3(weight, floor(weight / SHIFT.yz)), 256.0), 255.0) / 255.0;
+`
     };
     return shaders;
   }
   draw(opts) {
-    const cell0 = this.props.data[0];
-    const cellResolution = Number((0, import_quadbin5.getResolution)(cell0.id));
+    const cell = this.props.data[0];
+    const maxDensity = this.props.elevationScale;
+    const densityFactor = unitDensityForCell(cell.id) / maxDensity;
     for (const model of this.state.models) {
-      model.setUniforms({ cellResolution });
+      model.setUniforms({ densityFactor });
     }
     super.draw(opts);
   }
@@ -1337,17 +1208,30 @@ var RTTSolidPolygonLayer = _RTTSolidPolygonLayer;
   _RTTSolidPolygonLayer.layerName = "RTTSolidPolygonLayer";
 })();
 var PostProcessQuadbinTileLayer = PostProcessModifier(QuadbinTileLayer, heatmap);
-function encodeWeight(w) {
-  return [w % 256, Math.floor(w / 256), Math.floor(w / (256 * 256))];
-}
-var defaultProps6 = {
+var defaultProps5 = {
   data: TilejsonPropType,
-  getWeight: { type: "accessor", value: 1 }
+  getWeight: { type: "accessor", value: 1 },
+  onMaxDensityChange: { type: "function", optional: true, value: null },
+  colorDomain: { type: "array", value: [0, 1] },
+  intensity: { type: "number", value: 1 },
+  radiusPixels: { type: "number", min: 0, max: 100, value: 20 }
 };
-var _QuadbinHeatmapTileLayer = class extends import_core9.CompositeLayer {
+var _HeatmapTileLayer = class extends import_core8.CompositeLayer {
+  initializeState() {
+    this.state = {
+      isLoaded: false,
+      tiles: /* @__PURE__ */ new Set(),
+      viewportChanged: false
+    };
+  }
+  shouldUpdateState({ changeFlags }) {
+    const { viewportChanged } = changeFlags;
+    this.setState({ viewportChanged });
+    return changeFlags.somethingChanged;
+  }
   renderLayers() {
     var _a, _b, _c;
-    const { data, getWeight, colorDomain, colorRange, radiusPixels, _subLayerProps, updateTriggers, ...tileLayerProps } = this.props;
+    const { data, getWeight, colorDomain, colorRange, intensity, radiusPixels, _subLayerProps, updateTriggers, onMaxDensityChange, onViewportLoad, onTileLoad, onTileUnload, ...tileLayerProps } = this.props;
     const subLayerProps = {
       ..._subLayerProps,
       cell: {
@@ -1361,29 +1245,221 @@ var _QuadbinHeatmapTileLayer = class extends import_core9.CompositeLayer {
         }
       }
     };
-    const getFillColor = typeof getWeight === "function" ? (d, info) => encodeWeight(getWeight(d, info)) : encodeWeight(getWeight);
+    let tileZ = 0;
+    let maxDensity = 0;
+    const tiles = [...this.state.tiles].filter((t) => t.isVisible && t.data);
+    for (const tile of tiles) {
+      const cell = tile.data[0];
+      const unitDensity = unitDensityForCell(cell.id);
+      maxDensity = Math.max(tile.userData.maxWeight * unitDensity, maxDensity);
+      tileZ = Math.max(tile.zoom, tileZ);
+    }
+    const overzoom = this.context.viewport.zoom - tileZ;
+    const estimatedMaxDensity = maxDensity * Math.pow(2, overzoom);
+    maxDensity = estimatedMaxDensity;
+    if (typeof onMaxDensityChange === "function") {
+      onMaxDensityChange(maxDensity);
+    }
     return new PostProcessQuadbinTileLayer(tileLayerProps, this.getSubLayerProps({
       id: "heatmap",
       data,
-      getFillColor,
+      getFillColor: 0,
+      getElevation: getWeight,
+      elevationScale: maxDensity,
       colorDomain,
       colorRange,
       radiusPixels,
+      intensity,
       _subLayerProps: subLayerProps,
+      refinementStrategy: "no-overlap",
+      extruded: false,
+      stroked: false,
       updateTriggers: {
-        getPosition: updateTriggers.getWeight
-      }
+        getElevation: updateTriggers.getWeight
+      },
+      onViewportLoad: (tiles2) => {
+        this.setState({ isLoaded: true });
+        if (typeof onViewportLoad === "function") {
+          onViewportLoad(tiles2);
+        }
+      },
+      onTileLoad: (tile) => {
+        let maxWeight = -Infinity;
+        if (typeof getWeight !== "function") {
+          maxWeight = getWeight;
+        } else if (tile.content) {
+          for (const d of tile.content) {
+            maxWeight = Math.max(getWeight(d, {}), maxWeight);
+          }
+        }
+        tile.userData = { maxWeight };
+        this.state.tiles.add(tile);
+        if (typeof onTileLoad === "function") {
+          onTileLoad(tile);
+        }
+      },
+      onTileUnload: (tile) => {
+        this.state.tiles.delete(tile);
+        if (typeof onTileUnload === "function") {
+          onTileUnload(tile);
+        }
+      },
+      transitions: { elevationScale: { type: "spring", stiffness: 0.3, damping: 0.5 } }
     }));
   }
 };
-var QuadbinHeatmapTileLayer = _QuadbinHeatmapTileLayer;
+var HeatmapTileLayer = _HeatmapTileLayer;
+(() => {
+  _HeatmapTileLayer.layerName = "HeatmapTileLayer";
+})();
+(() => {
+  _HeatmapTileLayer.defaultProps = defaultProps5;
+})();
+var heatmap_tile_layer_default = HeatmapTileLayer;
+
+// dist/layers/point-label-layer.js
+var import_core9 = require("@deck.gl/core");
+var import_layers2 = require("@deck.gl/layers");
+var [LEFT, TOP, RIGHT, BOTTOM] = [0, 1, 2, 3];
+var _EnhancedTextBackgroundLayer = class extends import_layers2._TextBackgroundLayer {
+  getShaders() {
+    const shaders = super.getShaders();
+    let vs = shaders.vs;
+    vs = vs.replaceAll("padding.", "_padding.");
+    vs = vs.replace("void main(void) {", "void main(void) {\n  vec4 _padding = padding + instancePixelOffsets.xyxy * vec4(1.0, 1.0, -1.0, -1.0);");
+    return { ...shaders, vs };
+  }
+};
+var EnhancedTextBackgroundLayer = _EnhancedTextBackgroundLayer;
+(() => {
+  _EnhancedTextBackgroundLayer.layerName = "EnhancedTextBackgroundLayer";
+})();
+var _EnhancedTextLayer = class extends import_layers2.TextLayer {
+  filterSubLayer({ layer, renderPass }) {
+    const background = layer.id.includes("primary-background");
+    if (renderPass === "collision") {
+      return background;
+    }
+    return !background;
+  }
+};
+var EnhancedTextLayer = _EnhancedTextLayer;
+(() => {
+  _EnhancedTextLayer.layerName = "EnhancedTextLayer";
+})();
+var defaultProps6 = {
+  ...import_layers2.TextLayer.defaultProps,
+  getRadius: { type: "accessor", value: 1 },
+  radiusScale: { type: "number", min: 0, value: 1 }
+};
+var _PointLabelLayer = class extends import_core9.CompositeLayer {
+  calculatePixelOffset(secondary) {
+    const { getTextAnchor: anchor, getAlignmentBaseline: alignment, getRadius, getSecondaryText, radiusScale, secondarySizeScale, sizeScale } = this.props;
+    const xMult = anchor === "middle" ? 0 : anchor === "start" ? 1 : -1;
+    const yMult = alignment === "center" ? 0 : alignment === "bottom" ? 1 : -1;
+    const xPadding = sizeScale / 4;
+    const yPadding = sizeScale * (1 + 1 / 4);
+    const secondaryOffset = 0.6 * (1 - yMult) * sizeScale;
+    let yOffset = secondary ? secondaryOffset : 0;
+    if (anchor === "middle" && alignment === "top" && getSecondaryText) {
+      yOffset -= secondaryOffset;
+      yOffset -= secondarySizeScale;
+      yOffset += sizeScale;
+    }
+    const radiusPadding = 1 + 1 / 4;
+    return typeof getRadius === "function" ? (d, info) => {
+      const r = (info ? getRadius(d, info) : 1) * radiusScale * radiusPadding;
+      return [xMult * (r + xPadding), yMult * (r + yPadding) + yOffset];
+    } : [
+      xMult * (getRadius * radiusScale * radiusPadding + xPadding),
+      yMult * (getRadius * radiusScale * radiusPadding + yPadding) + yOffset
+    ];
+  }
+  calculateBackgroundPadding() {
+    const { getTextAnchor: anchor, getAlignmentBaseline: alignment, sizeScale } = this.props;
+    const paddingX = 12 * sizeScale;
+    const paddingY = 3 * sizeScale;
+    const backgroundPadding = [0, 0, 0, 0];
+    if (alignment === "top") {
+      backgroundPadding[TOP] = paddingY;
+    } else if (alignment === "bottom") {
+      backgroundPadding[BOTTOM] = paddingY;
+    } else {
+      backgroundPadding[TOP] = 0.5 * paddingY;
+      backgroundPadding[BOTTOM] = 0.5 * paddingY;
+    }
+    if (anchor === "start") {
+      backgroundPadding[LEFT] = paddingX;
+    } else if (anchor === "end") {
+      backgroundPadding[RIGHT] = paddingX;
+    } else {
+      backgroundPadding[LEFT] = 0.5 * paddingX;
+      backgroundPadding[RIGHT] = 0.5 * paddingX;
+    }
+    return backgroundPadding;
+  }
+  renderTextLayer(id4, { updateTriggers: updateTriggersOverride = {}, ...props }) {
+    const { data, characterSet, fontFamily, fontSettings, fontWeight, outlineColor, outlineWidth, sizeScale, radiusScale, getAlignmentBaseline, getColor, getPosition, getTextAnchor, updateTriggers } = this.props;
+    return new EnhancedTextLayer(this.getSubLayerProps({
+      id: id4,
+      data,
+      characterSet,
+      fontFamily,
+      fontSettings,
+      fontWeight,
+      outlineColor,
+      outlineWidth,
+      sizeScale,
+      getAlignmentBaseline,
+      getColor,
+      getPosition,
+      getTextAnchor,
+      updateTriggers: {
+        ...updateTriggers,
+        ...updateTriggersOverride,
+        getPixelOffset: [
+          updateTriggers.getRadius,
+          updateTriggers.getTextAnchor,
+          updateTriggers.getAlignmentBaseline,
+          radiusScale,
+          sizeScale
+        ]
+      }
+    }), {
+      getSize: 1,
+      _subLayerProps: { background: { type: EnhancedTextBackgroundLayer } }
+    }, props);
+  }
+  renderLayers() {
+    const { getText, getSecondaryColor, getSecondaryText, secondaryOutlineColor, secondarySizeScale, updateTriggers } = this.props;
+    const getPixelOffset = this.calculatePixelOffset(false);
+    const backgroundPadding = this.calculateBackgroundPadding();
+    const out = [
+      this.renderTextLayer(`${updateTriggers.getText}-primary`, {
+        backgroundPadding,
+        getText,
+        getPixelOffset,
+        background: true
+      }),
+      Boolean(getSecondaryText) && this.renderTextLayer(`${updateTriggers.getSecondaryText}-secondary`, {
+        getText: getSecondaryText,
+        getPixelOffset: this.calculatePixelOffset(true),
+        getAlignmentBaseline: "top",
+        ...getSecondaryColor && { getColor: getSecondaryColor },
+        ...secondarySizeScale && { sizeScale: secondarySizeScale },
+        ...secondaryOutlineColor && { outlineColor: secondaryOutlineColor }
+      })
+    ];
+    return out;
+  }
+};
+var PointLabelLayer = _PointLabelLayer;
 (() => {
-  _QuadbinHeatmapTileLayer.layerName = "QuadbinHeatmapTileLayer";
+  _PointLabelLayer.layerName = "PointLabelLayer";
 })();
 (() => {
-  _QuadbinHeatmapTileLayer.defaultProps = defaultProps6;
+  _PointLabelLayer.defaultProps = defaultProps6;
 })();
-var quadbin_heatmap_tile_layer_default = QuadbinHeatmapTileLayer;
 
 // dist/layers/raster-tile-layer.js
 var import_core11 = require("@deck.gl/core");
@@ -1639,7 +1715,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.17" : "latest";
+var VERSION3 = true ? "9.0.18" : "latest";
 var id3 = "cartoVectorTile";
 var DEFAULT_OPTIONS3 = {
   cartoVectorTile: {
@@ -1699,7 +1775,6 @@ var carto_vector_tile_loader_default = CartoVectorTileLoader;
 var import_extensions = require("@deck.gl/extensions");
 var import_geo_layers6 = require("@deck.gl/geo-layers");
 var import_layers4 = require("@deck.gl/layers");
-var import_gis = require("@loaders.gl/gis");
 (0, import_core12.registerLoaders)([carto_properties_tile_loader_default, carto_vector_tile_loader_default]);
 var defaultProps9 = {
   ...import_geo_layers6.MVTLayer.defaultProps,
@@ -1778,15 +1853,10 @@ var _VectorTileLayer = class extends import_geo_layers6.MVTLayer {
     const subLayer = new import_layers4.GeoJsonLayer(subLayerProps);
     return subLayer;
   }
-  getPickingInfo(params) {
-    const info = super.getPickingInfo(params);
-    if (this.state.binary && info.index !== -1) {
-      const { data } = params.sourceLayer.props;
-      info.object = (0, import_gis.binaryToGeojson)(data, {
-        globalFeatureId: info.index
-      });
-    }
-    return info;
+  _isWGS84() {
+    if (this.state.mvt)
+      return super._isWGS84();
+    return true;
   }
 };
 var VectorTileLayer = _VectorTileLayer;
@@ -3229,9 +3299,9 @@ var query = async function(options) {
 // dist/index.js
 var CARTO_LAYERS = {
   H3TileLayer,
+  HeatmapTileLayer: heatmap_tile_layer_default,
   _PointLabelLayer: PointLabelLayer,
   QuadbinTileLayer,
-  QuadbinHeatmapTileLayer: quadbin_heatmap_tile_layer_default,
   RasterTileLayer,
   VectorTileLayer
 };