@deck.gl/aggregation-layers 9.0.0-beta.1 → 9.0.0-beta.3

package/dist/grid-layer/grid-layer.js

@@ -0,0 +1,63 @@
+import { CompositeLayer } from '@deck.gl/core';
+import GPUGridAggregator from "../utils/gpu-grid-aggregation/gpu-grid-aggregator.js";
+import GPUGridLayer from "../gpu-grid-layer/gpu-grid-layer.js";
+import CPUGridLayer from "../cpu-grid-layer/cpu-grid-layer.js";
+const defaultProps = {
+    ...GPUGridLayer.defaultProps,
+    ...CPUGridLayer.defaultProps,
+    gpuAggregation: false
+};
+/** Aggregate data into a grid-based heatmap. The color and height of a cell are determined based on the objects it contains. */
+export default class GridLayer extends CompositeLayer {
+    static { this.layerName = 'GridLayer'; }
+    static { this.defaultProps = defaultProps; }
+    initializeState() {
+        this.state = {
+            useGPUAggregation: false // TODO(v9): Re-enable GPU aggregation.
+        };
+    }
+    updateState({ props }) {
+        this.setState({
+            // TODO(v9): Re-enable GPU aggregation.
+            // useGPUAggregation: this.canUseGPUAggregation(props)
+            useGPUAggregation: false
+        });
+    }
+    renderLayers() {
+        const { data, updateTriggers } = this.props;
+        const id = this.state.useGPUAggregation ? 'GPU' : 'CPU';
+        const LayerType = this.state.useGPUAggregation
+            ? this.getSubLayerClass('GPU', GPUGridLayer)
+            : this.getSubLayerClass('CPU', CPUGridLayer);
+        return new LayerType(this.props, this.getSubLayerProps({
+            id,
+            updateTriggers
+        }), {
+            data
+        });
+    }
+    // Private methods
+    canUseGPUAggregation(props) {
+        const { gpuAggregation, lowerPercentile, upperPercentile, getColorValue, getElevationValue, colorScaleType } = props;
+        if (!gpuAggregation) {
+            // cpu aggregation is requested
+            return false;
+        }
+        if (!GPUGridAggregator.isSupported(this.context.device)) {
+            return false;
+        }
+        if (lowerPercentile !== 0 || upperPercentile !== 100) {
+            // percentile calculations requires sorting not supported on GPU
+            return false;
+        }
+        if (getColorValue !== null || getElevationValue !== null) {
+            // accessor for custom color or elevation calculation is specified
+            return false;
+        }
+        if (colorScaleType === 'quantile' || colorScaleType === 'ordinal') {
+            // quantile and ordinal scales are not supported on GPU
+            return false;
+        }
+        return true;
+    }
+}

package/{typed → dist}/heatmap-layer/heatmap-layer-utils.d.ts

@@ -1,15 +1,6 @@
-import { Device } from '@luma.gl/core';
-import { GL } from '@luma.gl/constants';
 export declare function getBounds(points: number[][]): number[];
 export declare function boundsContain(currentBounds: number[], targetBounds: number[]): boolean;
 export declare function packVertices(points: number[][], dimensions?: number): Float32Array;
 export declare function scaleToAspectRatio(boundingBox: number[], width: number, height: number): number[];
 export declare function getTextureCoordinates(point: number[], bounds: number[]): number[];
-export declare function getTextureParams({ device, floatTargetSupport }: {
-    device: Device;
-    floatTargetSupport?: boolean;
-}): {
-    format: GL;
-    type: GL;
-};
 //# sourceMappingURL=heatmap-layer-utils.d.ts.map

package/dist/heatmap-layer/heatmap-layer-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heatmap-layer-utils.d.ts","sourceRoot":"","sources":["../../src/heatmap-layer/heatmap-layer-utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,GAAG,MAAM,EAAE,CAWtD;AAGD,wBAAgB,aAAa,CAAC,aAAa,EAAE,MAAM,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,GAAG,OAAO,CAUtF;AAKD,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,UAAU,GAAE,MAAU,GAAG,YAAY,CAQrF;AAGD,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CA6BjG;AAGD,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,YAGtE"}

package/dist/heatmap-layer/heatmap-layer-utils.js

@@ -0,0 +1,63 @@
+export function getBounds(points) {
+    // Now build bounding box in world space (aligned to world coordiante system)
+    const x = points.map(p => p[0]);
+    const y = points.map(p => p[1]);
+    const xMin = Math.min.apply(null, x);
+    const xMax = Math.max.apply(null, x);
+    const yMin = Math.min.apply(null, y);
+    const yMax = Math.max.apply(null, y);
+    return [xMin, yMin, xMax, yMax];
+}
+// true if currentBounds contains targetBounds, false otherwise
+export function boundsContain(currentBounds, targetBounds) {
+    if (targetBounds[0] >= currentBounds[0] &&
+        targetBounds[2] <= currentBounds[2] &&
+        targetBounds[1] >= currentBounds[1] &&
+        targetBounds[3] <= currentBounds[3]) {
+        return true;
+    }
+    return false;
+}
+const scratchArray = new Float32Array(12);
+// For given rectangle bounds generates two triangles vertices that coverit completely
+export function packVertices(points, dimensions = 2) {
+    let index = 0;
+    for (const point of points) {
+        for (let i = 0; i < dimensions; i++) {
+            scratchArray[index++] = point[i] || 0;
+        }
+    }
+    return scratchArray;
+}
+// Expands boundingBox:[xMin, yMin, xMax, yMax] to match aspect ratio of given width and height
+export function scaleToAspectRatio(boundingBox, width, height) {
+    const [xMin, yMin, xMax, yMax] = boundingBox;
+    const currentWidth = xMax - xMin;
+    const currentHeight = yMax - yMin;
+    let newWidth = currentWidth;
+    let newHeight = currentHeight;
+    if (currentWidth / currentHeight < width / height) {
+        // expand bounding box width
+        newWidth = (width / height) * currentHeight;
+    }
+    else {
+        newHeight = (height / width) * currentWidth;
+    }
+    if (newWidth < width) {
+        newWidth = width;
+        newHeight = height;
+    }
+    const xCenter = (xMax + xMin) / 2;
+    const yCenter = (yMax + yMin) / 2;
+    return [
+        xCenter - newWidth / 2,
+        yCenter - newHeight / 2,
+        xCenter + newWidth / 2,
+        yCenter + newHeight / 2
+    ];
+}
+// Get texture coordiante of point inside a bounding box
+export function getTextureCoordinates(point, bounds) {
+    const [xMin, yMin, xMax, yMax] = bounds;
+    return [(point[0] - xMin) / (xMax - xMin), (point[1] - yMin) / (yMax - yMin)];
+}

package/{typed → dist}/heatmap-layer/heatmap-layer.d.ts

@@ -1,5 +1,4 @@
 import { Buffer, Texture, TextureFormat } from '@luma.gl/core';
-import { GL } from '@luma.gl/constants';
 import { TextureTransform } from '@luma.gl/engine';
 import { Accessor, AccessorFunction, AttributeManager, ChangeFlags, Color, Layer, LayerContext, LayersList, Position, UpdateParameters, DefaultProps } from '@deck.gl/core';
 import AggregationLayer, { AggregationLayerProps } from '../aggregation-layer';
@@ -91,7 +90,6 @@ export default class HeatmapLayer<DataT = any, ExtraPropsT extends {} = {}> exte
         maxWeightTransform?: TextureTransform;
         textureSize: number;
         format: TextureFormat;
-        type: GL;
         weightsScale: number;
         visibleWorldBounds: number[];
         viewportCorners: number[][];
@@ -110,8 +108,10 @@ export default class HeatmapLayer<DataT = any, ExtraPropsT extends {} = {}> exte
     _createTextures(): void;
     _setupAttributes(): void;
     _setupTextureParams(): void;
-    getShaders(type: any): any;
-    _createWeightsTransform(shaders?: {}): void;
+    _createWeightsTransform(shaders: {
+        vs: string;
+        fs?: string;
+    }): void;
     _setupResources(): void;
     updateShaders(shaderOptions: any): void;
     _updateMaxWeightValue(): void;

package/dist/heatmap-layer/heatmap-layer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heatmap-layer.d.ts","sourceRoot":"","sources":["../../src/heatmap-layer/heatmap-layer.ts"],"names":[],"mappings":"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"}

package/dist/heatmap-layer/heatmap-layer.js

@@ -0,0 +1,471 @@
+// Copyright (c) 2015 - 2019 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+/* global setTimeout clearTimeout */
+import { getBounds, boundsContain, packVertices, scaleToAspectRatio, getTextureCoordinates } from "./heatmap-layer-utils.js";
+import { GL } from '@luma.gl/constants';
+import { TextureTransform } from '@luma.gl/engine';
+import { AttributeManager, COORDINATE_SYSTEM, log } from '@deck.gl/core';
+import TriangleLayer from "./triangle-layer.js";
+import AggregationLayer from "../aggregation-layer.js";
+import { defaultColorRange, colorRangeToFlatArray } from "../utils/color-utils.js";
+import weightsVs from "./weights-vs.glsl.js";
+import weightsFs from "./weights-fs.glsl.js";
+import maxVs from "./max-vs.glsl.js";
+import maxFs from "./max-fs.glsl.js";
+const RESOLUTION = 2; // (number of common space pixels) / (number texels)
+const TEXTURE_PROPS = {
+    format: 'rgba8unorm',
+    mipmaps: false,
+    sampler: {
+        minFilter: 'linear',
+        magFilter: 'linear',
+        addressModeU: 'clamp-to-edge',
+        addressModeV: 'clamp-to-edge'
+    }
+};
+const DEFAULT_COLOR_DOMAIN = [0, 0];
+const AGGREGATION_MODE = {
+    SUM: 0,
+    MEAN: 1
+};
+const defaultProps = {
+    getPosition: { type: 'accessor', value: (x) => x.position },
+    getWeight: { type: 'accessor', value: 1 },
+    intensity: { type: 'number', min: 0, value: 1 },
+    radiusPixels: { type: 'number', min: 1, max: 100, value: 50 },
+    colorRange: defaultColorRange,
+    threshold: { type: 'number', min: 0, max: 1, value: 0.05 },
+    colorDomain: { type: 'array', value: null, optional: true },
+    // 'SUM' or 'MEAN'
+    aggregation: 'SUM',
+    weightsTextureSize: { type: 'number', min: 128, max: 2048, value: 2048 },
+    debounceTimeout: { type: 'number', min: 0, max: 1000, value: 500 }
+};
+const REQUIRED_FEATURES = [
+    'blend-minmax-webgl1', // max weight calculation
+    'texture-formats-float32-webgl1' // weight-map as texture
+];
+const FLOAT_TARGET_FEATURES = [
+    'texture-renderable-float32-webgl', // ability to render to float texture
+    'texture-blend-float-webgl1' // ability to blend when rendering to float texture
+];
+const DIMENSIONS = {
+    data: {
+        props: ['radiusPixels']
+    }
+};
+/** Visualizes the spatial distribution of data. */
+export default class HeatmapLayer extends AggregationLayer {
+    static { this.layerName = 'HeatmapLayer'; }
+    static { this.defaultProps = defaultProps; }
+    initializeState() {
+        if (!REQUIRED_FEATURES.every(feature => this.context.device.features.has(feature))) {
+            this.setState({ supported: false });
+            log.error(`HeatmapLayer: ${this.id} is not supported on this browser`)();
+            return;
+        }
+        super.initializeAggregationLayer(DIMENSIONS);
+        this.setState({ supported: true, colorDomain: DEFAULT_COLOR_DOMAIN });
+        this._setupTextureParams();
+        this._setupAttributes();
+        this._setupResources();
+    }
+    shouldUpdateState({ changeFlags }) {
+        // Need to be updated when viewport changes
+        return changeFlags.somethingChanged;
+    }
+    /* eslint-disable max-statements,complexity */
+    updateState(opts) {
+        if (!this.state.supported) {
+            return;
+        }
+        super.updateState(opts);
+        this._updateHeatmapState(opts);
+    }
+    _updateHeatmapState(opts) {
+        const { props, oldProps } = opts;
+        const changeFlags = this._getChangeFlags(opts);
+        if (changeFlags.dataChanged || changeFlags.viewportChanged) {
+            // if data is changed, do not debounce and immediately update the weight map
+            changeFlags.boundsChanged = this._updateBounds(changeFlags.dataChanged);
+            this._updateTextureRenderingBounds();
+        }
+        if (changeFlags.dataChanged || changeFlags.boundsChanged) {
+            // Update weight map immediately
+            clearTimeout(this.state.updateTimer);
+            this.setState({ isWeightMapDirty: true });
+        }
+        else if (changeFlags.viewportZoomChanged) {
+            // Update weight map when zoom stops
+            this._debouncedUpdateWeightmap();
+        }
+        if (props.colorRange !== oldProps.colorRange) {
+            this._updateColorTexture(opts);
+        }
+        if (this.state.isWeightMapDirty) {
+            this._updateWeightmap();
+        }
+        this.setState({ zoom: opts.context.viewport.zoom });
+    }
+    renderLayers() {
+        if (!this.state.supported) {
+            return [];
+        }
+        const { weightsTexture, triPositionBuffer, triTexCoordBuffer, maxWeightsTexture, colorTexture, colorDomain } = this.state;
+        const { updateTriggers, intensity, threshold, aggregation } = this.props;
+        const TriangleLayerClass = this.getSubLayerClass('triangle', TriangleLayer);
+        return new TriangleLayerClass(this.getSubLayerProps({
+            id: 'triangle-layer',
+            updateTriggers
+        }), {
+            // position buffer is filled with world coordinates generated from viewport.unproject
+            // i.e. LNGLAT if geospatial, CARTESIAN otherwise
+            coordinateSystem: COORDINATE_SYSTEM.DEFAULT,
+            data: {
+                attributes: {
+                    positions: triPositionBuffer,
+                    texCoords: triTexCoordBuffer
+                }
+            },
+            vertexCount: 4,
+            maxTexture: maxWeightsTexture,
+            colorTexture,
+            aggregationMode: AGGREGATION_MODE[aggregation] || 0,
+            weightsTexture,
+            intensity,
+            threshold,
+            colorDomain
+        });
+    }
+    finalizeState(context) {
+        super.finalizeState(context);
+        const { weightsTransform, weightsTexture, maxWeightTransform, maxWeightsTexture, triPositionBuffer, triTexCoordBuffer, colorTexture, updateTimer } = this.state;
+        weightsTransform?.destroy();
+        weightsTexture?.destroy();
+        maxWeightTransform?.destroy();
+        maxWeightsTexture?.destroy();
+        triPositionBuffer?.destroy();
+        triTexCoordBuffer?.destroy();
+        colorTexture?.destroy();
+        if (updateTimer) {
+            clearTimeout(updateTimer);
+        }
+    }
+    // PRIVATE
+    // override Composite layer private method to create AttributeManager instance
+    _getAttributeManager() {
+        return new AttributeManager(this.context.device, {
+            id: this.props.id,
+            stats: this.context.stats
+        });
+    }
+    _getChangeFlags(opts) {
+        const changeFlags = {};
+        const { dimensions } = this.state;
+        changeFlags.dataChanged =
+            (this.isAttributeChanged() && 'attribute changed') || // if any attribute is changed
+                (this.isAggregationDirty(opts, {
+                    compareAll: true,
+                    dimension: dimensions.data
+                }) &&
+                    'aggregation is dirty');
+        changeFlags.viewportChanged = opts.changeFlags.viewportChanged;
+        const { zoom } = this.state;
+        if (!opts.context.viewport || opts.context.viewport.zoom !== zoom) {
+            changeFlags.viewportZoomChanged = true;
+        }
+        return changeFlags;
+    }
+    _createTextures() {
+        const { textureSize, format } = this.state;
+        this.setState({
+            weightsTexture: this.context.device.createTexture({
+                ...TEXTURE_PROPS,
+                width: textureSize,
+                height: textureSize,
+                format
+            }),
+            maxWeightsTexture: this.context.device.createTexture({
+                ...TEXTURE_PROPS,
+                width: 1,
+                height: 1,
+                format
+            })
+        });
+    }
+    _setupAttributes() {
+        const attributeManager = this.getAttributeManager();
+        attributeManager.add({
+            positions: { size: 3, type: GL.DOUBLE, accessor: 'getPosition' },
+            weights: { size: 1, accessor: 'getWeight' }
+        });
+        this.setState({ positionAttributeName: 'positions' });
+    }
+    _setupTextureParams() {
+        const { device } = this.context;
+        const { weightsTextureSize } = this.props;
+        const textureSize = Math.min(weightsTextureSize, device.limits.maxTextureDimension2D);
+        const floatTargetSupport = FLOAT_TARGET_FEATURES.every(feature => device.features.has(feature));
+        const format = floatTargetSupport ? 'rgba32float' : 'rgba8unorm';
+        const weightsScale = floatTargetSupport ? 1 : 1 / 255;
+        this.setState({ textureSize, format, weightsScale });
+        if (!floatTargetSupport) {
+            log.warn(`HeatmapLayer: ${this.id} rendering to float texture not supported, falling back to low precision format`)();
+        }
+    }
+    _createWeightsTransform(shaders) {
+        let { weightsTransform } = this.state;
+        const { weightsTexture } = this.state;
+        const attributeManager = this.getAttributeManager();
+        weightsTransform?.destroy();
+        weightsTransform = new TextureTransform(this.context.device, {
+            id: `${this.id}-weights-transform`,
+            bufferLayout: attributeManager.getBufferLayouts(),
+            vertexCount: 1,
+            targetTexture: weightsTexture,
+            parameters: {
+                depthWriteEnabled: false,
+                blendColorOperation: 'add',
+                blendColorSrcFactor: 'one',
+                blendColorDstFactor: 'one',
+                blendAlphaSrcFactor: 'one',
+                blendAlphaDstFactor: 'one'
+            },
+            topology: 'point-list',
+            ...shaders
+        });
+        this.setState({ weightsTransform });
+    }
+    _setupResources() {
+        this._createTextures();
+        const { device } = this.context;
+        const { textureSize, weightsTexture, maxWeightsTexture } = this.state;
+        const weightsTransformShaders = this.getShaders({
+            vs: weightsVs,
+            fs: weightsFs
+        });
+        this._createWeightsTransform(weightsTransformShaders);
+        const maxWeightsTransformShaders = this.getShaders({ vs: maxVs, fs: maxFs });
+        const maxWeightTransform = new TextureTransform(device, {
+            id: `${this.id}-max-weights-transform`,
+            bindings: { inTexture: weightsTexture },
+            uniforms: { textureSize },
+            targetTexture: maxWeightsTexture,
+            ...maxWeightsTransformShaders,
+            vertexCount: textureSize * textureSize,
+            topology: 'point-list',
+            parameters: {
+                depthWriteEnabled: false,
+                blendColorOperation: 'max',
+                blendAlphaOperation: 'max',
+                blendColorSrcFactor: 'one',
+                blendColorDstFactor: 'one',
+                blendAlphaSrcFactor: 'one',
+                blendAlphaDstFactor: 'one'
+            }
+        });
+        this.setState({
+            weightsTexture,
+            maxWeightsTexture,
+            maxWeightTransform,
+            zoom: null,
+            triPositionBuffer: device.createBuffer({ byteLength: 48 }),
+            triTexCoordBuffer: device.createBuffer({ byteLength: 48 })
+        });
+    }
+    // overwrite super class method to update transform model
+    updateShaders(shaderOptions) {
+        // shader params (modules, injects) changed, update model object
+        this._createWeightsTransform({
+            vs: weightsVs,
+            fs: weightsFs,
+            ...shaderOptions
+        });
+    }
+    _updateMaxWeightValue() {
+        const { maxWeightTransform, textureSize } = this.state;
+        maxWeightTransform.run({
+            parameters: { viewport: [0, 0, 1, 1] },
+            clearColor: [0, 0, 0, 0]
+        });
+    }
+    // Computes world bounds area that needs to be processed for generate heatmap
+    _updateBounds(forceUpdate = false) {
+        const { viewport } = this.context;
+        // Unproject all 4 corners of the current screen coordinates into world coordinates (lng/lat)
+        // Takes care of viewport has non zero bearing/pitch (i.e axis not aligned with world coordiante system)
+        const viewportCorners = [
+            viewport.unproject([0, 0]),
+            viewport.unproject([viewport.width, 0]),
+            viewport.unproject([viewport.width, viewport.height]),
+            viewport.unproject([0, viewport.height])
+        ].map(p => p.map(Math.fround));
+        // #1: get world bounds for current viewport extends
+        const visibleWorldBounds = getBounds(viewportCorners); // TODO: Change to visible bounds
+        const newState = { visibleWorldBounds, viewportCorners };
+        let boundsChanged = false;
+        if (forceUpdate ||
+            !this.state.worldBounds ||
+            !boundsContain(this.state.worldBounds, visibleWorldBounds)) {
+            // #2 : convert world bounds to common (Flat) bounds
+            // #3 : extend common bounds to match aspect ratio with viewport
+            const scaledCommonBounds = this._worldToCommonBounds(visibleWorldBounds);
+            // #4 :convert aligned common bounds to world bounds
+            const worldBounds = this._commonToWorldBounds(scaledCommonBounds);
+            // Clip webmercator projection limits
+            if (this.props.coordinateSystem === COORDINATE_SYSTEM.LNGLAT) {
+                worldBounds[1] = Math.max(worldBounds[1], -85.051129);
+                worldBounds[3] = Math.min(worldBounds[3], 85.051129);
+                worldBounds[0] = Math.max(worldBounds[0], -360);
+                worldBounds[2] = Math.min(worldBounds[2], 360);
+            }
+            // #5: now convert world bounds to common using Layer's coordiante system and origin
+            const normalizedCommonBounds = this._worldToCommonBounds(worldBounds);
+            newState.worldBounds = worldBounds;
+            newState.normalizedCommonBounds = normalizedCommonBounds;
+            boundsChanged = true;
+        }
+        this.setState(newState);
+        return boundsChanged;
+    }
+    _updateTextureRenderingBounds() {
+        // Just render visible portion of the texture
+        const { triPositionBuffer, triTexCoordBuffer, normalizedCommonBounds, viewportCorners } = this.state;
+        const { viewport } = this.context;
+        triPositionBuffer.write(packVertices(viewportCorners, 3));
+        const textureBounds = viewportCorners.map(p => getTextureCoordinates(viewport.projectPosition(p), normalizedCommonBounds));
+        triTexCoordBuffer.write(packVertices(textureBounds, 2));
+    }
+    _updateColorTexture(opts) {
+        const { colorRange } = opts.props;
+        let { colorTexture } = this.state;
+        const colors = colorRangeToFlatArray(colorRange, false, Uint8Array);
+        if (colorTexture && colorTexture?.width === colorRange.length) {
+            // TODO(v9): Unclear whether `setSubImageData` is a public API, or what to use if not.
+            colorTexture.setSubImageData({ data: colors });
+        }
+        else {
+            colorTexture?.destroy();
+            colorTexture = this.context.device.createTexture({
+                ...TEXTURE_PROPS,
+                data: colors,
+                width: colorRange.length,
+                height: 1
+            });
+        }
+        this.setState({ colorTexture });
+    }
+    _updateWeightmap() {
+        const { radiusPixels, colorDomain, aggregation } = this.props;
+        const { worldBounds, textureSize, weightsScale } = this.state;
+        const weightsTransform = this.state.weightsTransform;
+        this.state.isWeightMapDirty = false;
+        // convert world bounds to common using Layer's coordiante system and origin
+        const commonBounds = this._worldToCommonBounds(worldBounds, {
+            useLayerCoordinateSystem: true
+        });
+        if (colorDomain && aggregation === 'SUM') {
+            // scale color domain to weight per pixel
+            const { viewport } = this.context;
+            const metersPerPixel = (viewport.distanceScales.metersPerUnit[2] * (commonBounds[2] - commonBounds[0])) /
+                textureSize;
+            this.state.colorDomain = colorDomain.map(x => x * metersPerPixel * weightsScale);
+        }
+        else {
+            this.state.colorDomain = colorDomain || DEFAULT_COLOR_DOMAIN;
+        }
+        const attributeManager = this.getAttributeManager();
+        const attributes = attributeManager.getAttributes();
+        const moduleSettings = this.getModuleSettings();
+        const positions = attributes.positions.buffer;
+        const uniforms = { radiusPixels, commonBounds, textureWidth: textureSize, weightsScale };
+        const weights = attributes.weights.buffer;
+        weightsTransform.model.setAttributes({ positions, weights });
+        weightsTransform.model.setVertexCount(this.getNumInstances());
+        weightsTransform.model.setUniforms(uniforms);
+        weightsTransform.model.updateModuleSettings(moduleSettings);
+        weightsTransform.run({
+            parameters: { viewport: [0, 0, textureSize, textureSize] },
+            clearColor: [0, 0, 0, 0]
+        });
+        this._updateMaxWeightValue();
+    }
+    _debouncedUpdateWeightmap(fromTimer = false) {
+        let { updateTimer } = this.state;
+        const { debounceTimeout } = this.props;
+        if (fromTimer) {
+            updateTimer = null;
+            // update
+            this._updateBounds(true);
+            this._updateTextureRenderingBounds();
+            this.setState({ isWeightMapDirty: true });
+        }
+        else {
+            this.setState({ isWeightMapDirty: false });
+            clearTimeout(updateTimer);
+            updateTimer = setTimeout(this._debouncedUpdateWeightmap.bind(this, true), debounceTimeout);
+        }
+        this.setState({ updateTimer });
+    }
+    // input: worldBounds: [minLong, minLat, maxLong, maxLat]
+    // input: opts.useLayerCoordinateSystem : layers coordiante system is used
+    // optput: commonBounds: [minX, minY, maxX, maxY] scaled to fit the current texture
+    _worldToCommonBounds(worldBounds, opts = {}) {
+        const { useLayerCoordinateSystem = false } = opts;
+        const [minLong, minLat, maxLong, maxLat] = worldBounds;
+        const { viewport } = this.context;
+        const { textureSize } = this.state;
+        const { coordinateSystem } = this.props;
+        const offsetMode = useLayerCoordinateSystem &&
+            (coordinateSystem === COORDINATE_SYSTEM.LNGLAT_OFFSETS ||
+                coordinateSystem === COORDINATE_SYSTEM.METER_OFFSETS);
+        const offsetOriginCommon = offsetMode
+            ? viewport.projectPosition(this.props.coordinateOrigin)
+            : [0, 0];
+        const size = (textureSize * RESOLUTION) / viewport.scale;
+        let bottomLeftCommon;
+        let topRightCommon;
+        // Y-axis is flipped between World and Common bounds
+        if (useLayerCoordinateSystem && !offsetMode) {
+            bottomLeftCommon = this.projectPosition([minLong, minLat, 0]);
+            topRightCommon = this.projectPosition([maxLong, maxLat, 0]);
+        }
+        else {
+            bottomLeftCommon = viewport.projectPosition([minLong, minLat, 0]);
+            topRightCommon = viewport.projectPosition([maxLong, maxLat, 0]);
+        }
+        // Ignore z component
+        return scaleToAspectRatio([
+            bottomLeftCommon[0] - offsetOriginCommon[0],
+            bottomLeftCommon[1] - offsetOriginCommon[1],
+            topRightCommon[0] - offsetOriginCommon[0],
+            topRightCommon[1] - offsetOriginCommon[1]
+        ], size, size);
+    }
+    // input commonBounds: [xMin, yMin, xMax, yMax]
+    // output worldBounds: [minLong, minLat, maxLong, maxLat]
+    _commonToWorldBounds(commonBounds) {
+        const [xMin, yMin, xMax, yMax] = commonBounds;
+        const { viewport } = this.context;
+        const bottomLeftWorld = viewport.unprojectPosition([xMin, yMin]);
+        const topRightWorld = viewport.unprojectPosition([xMax, yMax]);
+        return bottomLeftWorld.slice(0, 2).concat(topRightWorld.slice(0, 2));
+    }
+}

package/dist/{esm/heatmap-layer → heatmap-layer}/max-fs.glsl.js

@@ -7,4 +7,3 @@ void main() {
   fragColor.g = outTexture.r / max(1.0, outTexture.a);
 }
 `;
-//# sourceMappingURL=max-fs.glsl.js.map

package/dist/heatmap-layer/max-vs.glsl.d.ts

@@ -0,0 +1,3 @@
+declare const _default: "#version 300 es\nuniform sampler2D inTexture;\nuniform float textureSize;\nout vec4 outTexture;\n\nvoid main()\n{\n  // Sample every pixel in texture\n  int yIndex = gl_VertexID / int(textureSize);\n  int xIndex = gl_VertexID - (yIndex * int(textureSize));\n  vec2 uv = (0.5 + vec2(float(xIndex), float(yIndex))) / textureSize;\n  outTexture = texture(inTexture, uv);\n\n  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n  // Enforce default value for ANGLE issue (https://bugs.chromium.org/p/angleproject/issues/detail?id=3941)\n  gl_PointSize = 1.0;\n}\n";
+export default _default;
+//# sourceMappingURL=max-vs.glsl.d.ts.map

package/{typed → dist}/heatmap-layer/max-vs.glsl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"max-vs.glsl.d.ts","sourceRoot":"","sources":["../../src/heatmap-layer/max-vs.glsl.ts"],"names":[],"mappings":";AAAA,wBAYE"}
+{"version":3,"file":"max-vs.glsl.d.ts","sourceRoot":"","sources":["../../src/heatmap-layer/max-vs.glsl.ts"],"names":[],"mappings":";AAAA,wBAkBE"}