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

package/dist/heatmap-layer/triangle-layer-vertex.glsl.js

@@ -0,0 +1,52 @@
+// Copyright (c) 2015 - 2017 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.
+// Inspired by screen-grid-layer vertex shader in deck.gl
+export default `\
+#version 300 es
+#define SHADER_NAME heatp-map-layer-vertex-shader
+
+uniform sampler2D maxTexture;
+uniform float intensity;
+uniform vec2 colorDomain;
+uniform float threshold;
+uniform float aggregationMode;
+
+in vec3 positions;
+in vec2 texCoords;
+
+out vec2 vTexCoords;
+out float vIntensityMin;
+out float vIntensityMax;
+
+void main(void) {
+  gl_Position = project_position_to_clipspace(positions, vec3(0.0), vec3(0.0));
+  vTexCoords = texCoords;
+  vec4 maxTexture = texture(maxTexture, vec2(0.5));
+  float maxValue = aggregationMode < 0.5 ? maxTexture.r : maxTexture.g;
+  float minValue = maxValue * threshold;
+  if (colorDomain[1] > 0.) {
+    // if user specified custom domain use it.
+    maxValue = colorDomain[1];
+    minValue = colorDomain[0];
+  }
+  vIntensityMax = intensity / maxValue;
+  vIntensityMin = intensity / minValue;
+}
+`;

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

@@ -0,0 +1,59 @@
+// 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.
+import { Model } from '@luma.gl/engine';
+import { Layer, project32 } from '@deck.gl/core';
+import vs from "./triangle-layer-vertex.glsl.js";
+import fs from "./triangle-layer-fragment.glsl.js";
+export default class TriangleLayer extends Layer {
+    static { this.layerName = 'TriangleLayer'; }
+    getShaders() {
+        return { vs, fs, modules: [project32] };
+    }
+    initializeState({ device }) {
+        this.setState({ model: this._getModel(device) });
+    }
+    _getModel(device) {
+        const { vertexCount, data, weightsTexture, maxTexture, colorTexture } = this.props;
+        return new Model(device, {
+            ...this.getShaders(),
+            id: this.props.id,
+            bindings: { weightsTexture, maxTexture, colorTexture },
+            attributes: data.attributes,
+            bufferLayout: [
+                { name: 'positions', format: 'float32x3' },
+                { name: 'texCoords', format: 'float32x2' }
+            ],
+            topology: 'triangle-fan-webgl',
+            vertexCount
+        });
+    }
+    draw({ uniforms }) {
+        const { model } = this.state;
+        const { intensity, threshold, aggregationMode, colorDomain } = this.props;
+        model.setUniforms({
+            ...uniforms,
+            intensity,
+            threshold,
+            aggregationMode,
+            colorDomain
+        });
+        model.draw(this.context.renderPass);
+    }
+}

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

@@ -19,4 +19,3 @@ void main()
   DECKGL_FILTER_COLOR(fragColor, geometry);
 }
 `;
-//# sourceMappingURL=weights-fs.glsl.js.map

package/dist/{esm/heatmap-layer → heatmap-layer}/weights-vs.glsl.js

@@ -24,4 +24,3 @@ void main()
   gl_Position.w = 1.0;
 }
 `;
-//# sourceMappingURL=weights-vs.glsl.js.map

package/dist/hexagon-layer/hexagon-aggregator.js

@@ -0,0 +1,112 @@
+// Copyright (c) 2015 - 2017 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.
+import { hexbin } from 'd3-hexbin';
+import { createIterable, log } from '@deck.gl/core';
+/**
+ * Use d3-hexbin to performs hexagonal binning from geo points to hexagons
+ * @param {Iterable} data - array of points
+ * @param {Number} radius - hexagon radius in meter
+ * @param {function} getPosition - get points lon lat
+ * @param {Object} viewport - current viewport object
+
+ * @return {Object} - hexagons and countRange
+ */
+export function pointToHexbin(props, aggregationParams) {
+    const { data, radius } = props;
+    const { viewport, attributes } = aggregationParams;
+    // get hexagon radius in mercator world unit
+    const centerLngLat = data.length ? getPointsCenter(data, aggregationParams) : null;
+    const radiusCommon = getRadiusInCommon(radius, viewport, centerLngLat);
+    // add world space coordinates to points
+    const screenPoints = [];
+    const { iterable, objectInfo } = createIterable(data);
+    const positions = attributes.positions.value;
+    const { size } = attributes.positions.getAccessor();
+    for (const object of iterable) {
+        objectInfo.index++;
+        const posIndex = objectInfo.index * size;
+        const position = [positions[posIndex], positions[posIndex + 1]];
+        const arrayIsFinite = Number.isFinite(position[0]) && Number.isFinite(position[1]);
+        if (arrayIsFinite) {
+            screenPoints.push({
+                screenCoord: viewport.projectFlat(position),
+                source: object,
+                index: objectInfo.index
+            });
+        }
+        else {
+            log.warn('HexagonLayer: invalid position')();
+        }
+    }
+    const newHexbin = hexbin()
+        .radius(radiusCommon)
+        .x(d => d.screenCoord[0])
+        .y(d => d.screenCoord[1]);
+    const hexagonBins = newHexbin(screenPoints);
+    return {
+        hexagons: hexagonBins.map((hex, index) => ({
+            position: viewport.unprojectFlat([hex.x, hex.y]),
+            points: hex,
+            index
+        })),
+        radiusCommon
+    };
+}
+/**
+ * Get the bounding box of all data points
+ */
+export function getPointsCenter(data, aggregationParams) {
+    const { attributes } = aggregationParams;
+    const positions = attributes.positions.value;
+    const { size } = attributes.positions.getAccessor();
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    let i;
+    for (i = 0; i < size * data.length; i += size) {
+        const x = positions[i];
+        const y = positions[i + 1];
+        const arrayIsFinite = Number.isFinite(x) && Number.isFinite(y);
+        if (arrayIsFinite) {
+            minX = Math.min(x, minX);
+            maxX = Math.max(x, maxX);
+            minY = Math.min(y, minY);
+            maxY = Math.max(y, maxY);
+        }
+    }
+    // return center
+    return [minX, minY, maxX, maxY].every(Number.isFinite)
+        ? [(minX + maxX) / 2, (minY + maxY) / 2]
+        : null;
+}
+/**
+ * Get radius in mercator world space coordinates from meter
+ * @param {Number} radius - in meter
+ * @param {Object} viewport - current viewport object
+ * @param {Array<Number>} center - data center
+
+ * @return {Number} radius in mercator world spcae coordinates
+ */
+export function getRadiusInCommon(radius, viewport, center) {
+    const { unitsPerMeter } = viewport.getDistanceScales(center);
+    // x, y distance should be the same
+    return radius * unitsPerMeter[0];
+}

package/dist/hexagon-layer/hexagon-layer.js

@@ -0,0 +1,174 @@
+// Copyright (c) 2015 - 2017 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.
+import { log } from '@deck.gl/core';
+import { ColumnLayer } from '@deck.gl/layers';
+import { GL } from '@luma.gl/constants';
+import { defaultColorRange } from "../utils/color-utils.js";
+import { pointToHexbin } from "./hexagon-aggregator.js";
+import CPUAggregator from "../utils/cpu-aggregator.js";
+import AggregationLayer from "../aggregation-layer.js";
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+function nop() { }
+const defaultProps = {
+    // color
+    colorDomain: null,
+    colorRange: defaultColorRange,
+    getColorValue: { type: 'accessor', value: null }, // default value is calcuated from `getColorWeight` and `colorAggregation`
+    getColorWeight: { type: 'accessor', value: 1 },
+    colorAggregation: 'SUM',
+    lowerPercentile: { type: 'number', value: 0, min: 0, max: 100 },
+    upperPercentile: { type: 'number', value: 100, min: 0, max: 100 },
+    colorScaleType: 'quantize',
+    onSetColorDomain: nop,
+    // elevation
+    elevationDomain: null,
+    elevationRange: [0, 1000],
+    getElevationValue: { type: 'accessor', value: null }, // default value is calcuated from `getElevationWeight` and `elevationAggregation`
+    getElevationWeight: { type: 'accessor', value: 1 },
+    elevationAggregation: 'SUM',
+    elevationLowerPercentile: { type: 'number', value: 0, min: 0, max: 100 },
+    elevationUpperPercentile: { type: 'number', value: 100, min: 0, max: 100 },
+    elevationScale: { type: 'number', min: 0, value: 1 },
+    elevationScaleType: 'linear',
+    onSetElevationDomain: nop,
+    radius: { type: 'number', value: 1000, min: 1 },
+    coverage: { type: 'number', min: 0, max: 1, value: 1 },
+    extruded: false,
+    hexagonAggregator: pointToHexbin,
+    getPosition: { type: 'accessor', value: (x) => x.position },
+    // Optional material for 'lighting' shader module
+    material: true,
+    // data filter
+    _filterData: { type: 'function', value: null, optional: true }
+};
+/** Aggregates data into a hexagon-based heatmap. The color and height of a hexagon are determined based on the objects it contains. */
+export default class HexagonLayer extends AggregationLayer {
+    static { this.layerName = 'HexagonLayer'; }
+    static { this.defaultProps = defaultProps; }
+    initializeState() {
+        const cpuAggregator = new CPUAggregator({
+            getAggregator: props => props.hexagonAggregator,
+            getCellSize: props => props.radius
+        });
+        this.state = {
+            cpuAggregator,
+            aggregatorState: cpuAggregator.state,
+            vertices: null
+        };
+        const attributeManager = this.getAttributeManager();
+        attributeManager.add({
+            positions: { size: 3, type: GL.DOUBLE, accessor: 'getPosition' }
+        });
+        // color and elevation attributes can't be added as attributes
+        // they are calculated using 'getValue' accessor that takes an array of pints.
+    }
+    updateState(opts) {
+        super.updateState(opts);
+        if (opts.changeFlags.propsOrDataChanged) {
+            const aggregatorState = this.state.cpuAggregator.updateState(opts, {
+                viewport: this.context.viewport,
+                attributes: this.getAttributes()
+            });
+            if (this.state.aggregatorState.layerData !== aggregatorState.layerData) {
+                // if user provided custom aggregator and returns hexagonVertices,
+                // Need to recalculate radius and angle based on vertices
+                // @ts-expect-error
+                const { hexagonVertices } = aggregatorState.layerData || {};
+                this.setState({
+                    vertices: hexagonVertices && this.convertLatLngToMeterOffset(hexagonVertices)
+                });
+            }
+            this.setState({
+                // make a copy of the internal state of cpuAggregator for testing
+                aggregatorState
+            });
+        }
+    }
+    convertLatLngToMeterOffset(hexagonVertices) {
+        const { viewport } = this.context;
+        if (Array.isArray(hexagonVertices) && hexagonVertices.length === 6) {
+            // get centroid of hexagons
+            const vertex0 = hexagonVertices[0];
+            const vertex3 = hexagonVertices[3];
+            const centroid = [(vertex0[0] + vertex3[0]) / 2, (vertex0[1] + vertex3[1]) / 2];
+            const centroidFlat = viewport.projectFlat(centroid);
+            const { metersPerUnit } = viewport.getDistanceScales(centroid);
+            // offset all points by centroid to meter offset
+            const vertices = hexagonVertices.map(vt => {
+                const vtFlat = viewport.projectFlat(vt);
+                return [
+                    (vtFlat[0] - centroidFlat[0]) * metersPerUnit[0],
+                    (vtFlat[1] - centroidFlat[1]) * metersPerUnit[1]
+                ];
+            });
+            return vertices;
+        }
+        log.error('HexagonLayer: hexagonVertices needs to be an array of 6 points')();
+        return null;
+    }
+    getPickingInfo({ info }) {
+        return this.state.cpuAggregator.getPickingInfo({ info });
+    }
+    // create a method for testing
+    _onGetSublayerColor(cell) {
+        return this.state.cpuAggregator.getAccessor('fillColor')(cell);
+    }
+    // create a method for testing
+    _onGetSublayerElevation(cell) {
+        return this.state.cpuAggregator.getAccessor('elevation')(cell);
+    }
+    _getSublayerUpdateTriggers() {
+        return this.state.cpuAggregator.getUpdateTriggers(this.props);
+    }
+    renderLayers() {
+        const { elevationScale, extruded, coverage, material, transitions } = this.props;
+        const { aggregatorState, vertices } = this.state;
+        const SubLayerClass = this.getSubLayerClass('hexagon-cell', ColumnLayer);
+        const updateTriggers = this._getSublayerUpdateTriggers();
+        const geometry = vertices
+            ? { vertices, radius: 1 }
+            : {
+                // default geometry
+                // @ts-expect-error TODO - undefined property?
+                radius: aggregatorState.layerData.radiusCommon || 1,
+                radiusUnits: 'common',
+                angle: 90
+            };
+        return new SubLayerClass({
+            ...geometry,
+            diskResolution: 6,
+            elevationScale,
+            extruded,
+            coverage,
+            material,
+            getFillColor: this._onGetSublayerColor.bind(this),
+            getElevation: this._onGetSublayerElevation.bind(this),
+            transitions: transitions && {
+                getFillColor: transitions.getColorValue || transitions.getColorWeight,
+                getElevation: transitions.getElevationValue || transitions.getElevationWeight
+            }
+        }, this.getSubLayerProps({
+            id: 'hexagon-cell',
+            updateTriggers
+        }), {
+            data: aggregatorState.layerData.data
+        });
+    }
+}