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

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/heatmap-layer/weights-fs.glsl.js

@@ -0,0 +1,17 @@
+export default `\
+#version 300 es
+in vec4 weightsTexture;
+out vec4 fragColor;
+float gaussianKDE(float u){
+return pow(2.71828, -u*u/0.05555)/(1.77245385*0.166666);
+}
+void main()
+{
+float dist = length(gl_PointCoord - vec2(0.5, 0.5));
+if (dist > 0.5) {
+discard;
+}
+fragColor = weightsTexture * gaussianKDE(2. * dist);
+DECKGL_FILTER_COLOR(fragColor, geometry);
+}
+`;

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

@@ -0,0 +1,3 @@
+declare const _default: "#version 300 es\nin vec3 positions;\nin vec3 positions64Low;\nin float weights;\nout vec4 weightsTexture;\nuniform float radiusPixels;\nuniform float textureWidth;\nuniform vec4 commonBounds;\nuniform float weightsScale;\n\nvoid main()\n{\n  weightsTexture = vec4(weights * weightsScale, 0., 0., 1.);\n\n  float radiusTexels = project_pixel_size(radiusPixels) * textureWidth / (commonBounds.z - commonBounds.x);\n  gl_PointSize = radiusTexels * 2.;\n\n  vec3 commonPosition = project_position(positions, positions64Low);\n\n  // // map xy from commonBounds to [-1, 1]\n  gl_Position.xy = (commonPosition.xy - commonBounds.xy) / (commonBounds.zw - commonBounds.xy) ;\n  gl_Position.xy = (gl_Position.xy * 2.) - (1.);\n  gl_Position.w = 1.0;\n}\n";
+export default _default;
+//# sourceMappingURL=weights-vs.glsl.d.ts.map

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

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

package/dist/heatmap-layer/weights-vs.glsl.js

@@ -0,0 +1,21 @@
+export default `\
+#version 300 es
+in vec3 positions;
+in vec3 positions64Low;
+in float weights;
+out vec4 weightsTexture;
+uniform float radiusPixels;
+uniform float textureWidth;
+uniform vec4 commonBounds;
+uniform float weightsScale;
+void main()
+{
+weightsTexture = vec4(weights * weightsScale, 0., 0., 1.);
+float radiusTexels = project_pixel_size(radiusPixels) * textureWidth / (commonBounds.z - commonBounds.x);
+gl_PointSize = radiusTexels * 2.;
+vec3 commonPosition = project_position(positions, positions64Low);
+gl_Position.xy = (commonPosition.xy - commonBounds.xy) / (commonBounds.zw - commonBounds.xy) ;
+gl_Position.xy = (gl_Position.xy * 2.) - (1.);
+gl_Position.w = 1.0;
+}
+`;

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/{typed → dist}/hexagon-layer/hexagon-layer.d.ts

@@ -1,8 +1,8 @@
 import { Accessor, AccessorFunction, Color, Position, Material, UpdateParameters, DefaultProps } from '@deck.gl/core';
 import { ColumnLayer } from '@deck.gl/layers';
-import CPUAggregator from '../utils/cpu-aggregator';
-import AggregationLayer, { AggregationLayerProps } from '../aggregation-layer';
-import { AggregateAccessor } from '../types';
+import CPUAggregator from "../utils/cpu-aggregator.js";
+import AggregationLayer, { AggregationLayerProps } from "../aggregation-layer.js";
+import { AggregateAccessor } from "../types.js";
 /** All properties supported by by HexagonLayer. */
 export type HexagonLayerProps<DataT = unknown> = _HexagonLayerProps<DataT> & AggregationLayerProps<DataT>;
 /** Properties added by HexagonLayer. */
@@ -144,7 +144,7 @@ type _HexagonLayerProps<DataT = unknown> = {
     _filterData: null | ((d: DataT) => boolean);
 };
 /** 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<DataT, ExtraPropsT extends {} = {}> extends AggregationLayer<DataT, ExtraPropsT & Required<_HexagonLayerProps>> {
+export default class HexagonLayer<DataT, ExtraPropsT extends {} = {}> extends AggregationLayer<DataT, ExtraPropsT & Required<_HexagonLayerProps<DataT>>> {
     static layerName: string;
     static defaultProps: DefaultProps<HexagonLayerProps<unknown>>;
     state: AggregationLayer<DataT>['state'] & {

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

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

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

@@ -0,0 +1,173 @@
+// 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 { 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: 'float64', 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
+        });
+    }
+}