@deck.gl/carto 9.0.0-beta.1 → 9.0.0-beta.11

package/{typed → dist}/layers/h3-tileset-2d.d.ts

@@ -2,7 +2,10 @@ import { _Tileset2D as Tileset2D, GeoBoundingBox } from '@deck.gl/geo-layers';
 export type H3TileIndex = {
     i: string;
 };
-export declare function getHexagonResolution(viewport: any): number;
+export declare function getHexagonResolution(viewport: {
+    zoom: number;
+    latitude: number;
+}, tileSize: number): number;
 export default class H3Tileset2D extends Tileset2D {
     /**
      * Returns all tile indices in the current viewport. If the current zoom level is smaller

package/dist/layers/h3-tileset-2d.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"h3-tileset-2d.d.ts","sourceRoot":"","sources":["../../src/layers/h3-tileset-2d.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,IAAI,SAAS,EAAE,cAAc,EAAC,MAAM,qBAAqB,CAAC;AAa5E,MAAM,MAAM,WAAW,GAAG;IAAC,CAAC,EAAE,MAAM,CAAA;CAAC,CAAC;AA6EtC,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAC,EAC1C,QAAQ,EAAE,MAAM,GACf,MAAM,CASR;AAED,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,SAAS;IAChD;;;;OAIG;IAEH,cAAc,CAAC,EAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAC;;;;KAAA,GAAG,WAAW,EAAE;IA2B3D,SAAS,CAAC,EAAC,CAAC,EAAC,EAAE,WAAW,GAAG,MAAM;IAKnC,eAAe,CAAC,EAAC,CAAC,EAAC,EAAE,WAAW;;;IAKhC,WAAW,CAAC,EAAC,CAAC,EAAC,EAAE,WAAW,GAAG,MAAM;IAKrC,cAAc,CAAC,KAAK,EAAE,WAAW,GAAG,WAAW;CAKhD"}

package/dist/layers/h3-tileset-2d.js

@@ -0,0 +1,120 @@
+import { _Tileset2D as Tileset2D } from '@deck.gl/geo-layers';
+import { polygonToCells, latLngToCell, getResolution, cellToBoundary, cellToParent, gridDisk, edgeLength, UNITS, originToDirectedEdges } from 'h3-js';
+const MAX_LATITUDE = 85.051128;
+// `polygonToCells()` fills based on hexagon center, this function will
+// pad the bounds such that all cells that overlap the bounds will be included
+function padBoundingBox({ west, north, east, south }, resolution) {
+    const corners = [
+        [north, east],
+        [south, east],
+        [south, west],
+        [north, west]
+    ];
+    const cornerCells = corners.map(c => latLngToCell(c[0], c[1], resolution));
+    const cornerEdgeLengths = cornerCells.map(c => (Math.max(...originToDirectedEdges(c).map(e => edgeLength(e, UNITS.rads))) * 180) / Math.PI);
+    const bufferLat = Math.max(...cornerEdgeLengths);
+    const bufferLon = Math.min(180, bufferLat / Math.cos((((north + south) / 2) * Math.PI) / 180));
+    return {
+        north: Math.min(north + bufferLat, MAX_LATITUDE),
+        east: east + bufferLon,
+        south: Math.max(south - bufferLat, -MAX_LATITUDE),
+        west: west - bufferLon
+    };
+}
+function getHexagonsInBoundingBox({ west, north, east, south }, resolution) {
+    const longitudeSpan = Math.abs(east - west);
+    if (longitudeSpan > 180) {
+        // This is a known issue in h3-js: polygonToCells does not work correctly
+        // when longitude span is larger than 180 degrees.
+        const nSegments = Math.ceil(longitudeSpan / 180);
+        let h3Indices = [];
+        for (let s = 0; s < nSegments; s++) {
+            const segmentWest = west + s * 180;
+            const segmentEast = Math.min(segmentWest + 179.9999999, east);
+            h3Indices = h3Indices.concat(getHexagonsInBoundingBox({ west: segmentWest, north, east: segmentEast, south }, resolution));
+        }
+        return [...new Set(h3Indices)];
+    }
+    const polygon = [
+        [north, east],
+        [south, east],
+        [south, west],
+        [north, west],
+        [north, east]
+    ];
+    return polygonToCells(polygon, resolution);
+}
+function tileToBoundingBox(index) {
+    const coordinates = cellToBoundary(index);
+    const latitudes = coordinates.map(c => c[0]);
+    const longitudes = coordinates.map(c => c[1]);
+    const west = Math.min(...longitudes);
+    const south = Math.min(...latitudes);
+    const east = Math.max(...longitudes);
+    const north = Math.max(...latitudes);
+    return { west, south, east, north };
+}
+// Resolution conversion function. Takes a WebMercatorViewport and returns
+// a H3 resolution such that the screen space size of the hexagons is
+// similar
+// Relative scale factor (0 = no biasing, 2 = a few hexagons cover view)
+const BIAS = 2;
+export function getHexagonResolution(viewport, tileSize) {
+    // Difference in given tile size compared to deck's internal 512px tile size,
+    // expressed as an offset to the viewport zoom.
+    const zoomOffset = Math.log2(tileSize / 512);
+    const hexagonScaleFactor = (2 / 3) * (viewport.zoom - zoomOffset);
+    const latitudeScaleFactor = Math.log(1 / Math.cos((Math.PI * viewport.latitude) / 180));
+    // Clip and bias
+    return Math.max(0, Math.floor(hexagonScaleFactor + latitudeScaleFactor - BIAS));
+}
+export default class H3Tileset2D extends Tileset2D {
+    /**
+     * Returns all tile indices in the current viewport. If the current zoom level is smaller
+     * than minZoom, return an empty array. If the current zoom level is greater than maxZoom,
+     * return tiles that are on maxZoom.
+     */
+    // @ts-expect-error Tileset2D should be generic over TileIndex
+    getTileIndices({ viewport, minZoom, maxZoom }) {
+        if (viewport.latitude === undefined)
+            return [];
+        const [west, south, east, north] = viewport.getBounds();
+        const { tileSize } = this.opts;
+        let z = getHexagonResolution(viewport, tileSize);
+        let indices;
+        if (typeof minZoom === 'number' && Number.isFinite(minZoom) && z < minZoom) {
+            // TODO support `extent` prop
+            return [];
+        }
+        if (typeof maxZoom === 'number' && Number.isFinite(maxZoom) && z > maxZoom) {
+            z = maxZoom;
+            // Once we are at max zoom, getHexagonsInBoundingBox doesn't work, simply
+            // get a ring centered on the hexagon in the viewport center
+            const center = latLngToCell(viewport.latitude, viewport.longitude, maxZoom);
+            indices = gridDisk(center, 1);
+        }
+        else {
+            const paddedBounds = padBoundingBox({ west, north, east, south }, z);
+            indices = getHexagonsInBoundingBox(paddedBounds, z);
+        }
+        return indices.map(i => ({ i }));
+    }
+    // @ts-expect-error Tileset2D should be generic over TileIndex
+    getTileId({ i }) {
+        return i;
+    }
+    // @ts-expect-error Tileset2D should be generic over TileIndex
+    getTileMetadata({ i }) {
+        return { bbox: tileToBoundingBox(i) };
+    }
+    // @ts-expect-error Tileset2D should be generic over TileIndex
+    getTileZoom({ i }) {
+        return getResolution(i);
+    }
+    // @ts-expect-error Tileset2D should be generic over TileIndex
+    getParentIndex(index) {
+        const resolution = getResolution(index.i);
+        const i = cellToParent(index.i, resolution - 1);
+        return { i };
+    }
+}

package/dist/layers/point-label-layer.js

@@ -0,0 +1,150 @@
+import { CompositeLayer } from '@deck.gl/core';
+import { TextLayer, _TextBackgroundLayer as TextBackgroundLayer } from '@deck.gl/layers';
+const [LEFT, TOP, RIGHT, BOTTOM] = [0, 1, 2, 3];
+class EnhancedTextBackgroundLayer extends TextBackgroundLayer {
+    static { this.layerName = 'EnhancedTextBackgroundLayer'; }
+    getShaders() {
+        const shaders = super.getShaders();
+        let vs = shaders.vs;
+        // Modify shader so that the padding is offset by the pixel offset to ensure the padding
+        // always captures the anchor point. As padding is uniform we cannot pass it a per-label value
+        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 };
+    }
+}
+// TextLayer which includes modified text-background-layer-vertex shader and only renders the
+// primary background layer in the collision pass
+class EnhancedTextLayer extends TextLayer {
+    static { this.layerName = 'EnhancedTextLayer'; }
+    filterSubLayer({ layer, renderPass }) {
+        const background = layer.id.includes('primary-background');
+        if (renderPass === 'collision') {
+            return background; // Only draw primary background layer in collision pass
+        }
+        return !background; // Do not draw background layer in other passes
+    }
+}
+const defaultProps = {
+    ...TextLayer.defaultProps,
+    getRadius: { type: 'accessor', value: 1 },
+    radiusScale: { type: 'number', min: 0, value: 1 }
+};
+export default class PointLabelLayer extends CompositeLayer {
+    static { this.layerName = 'PointLabelLayer'; }
+    static { this.defaultProps = defaultProps; }
+    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;
+        // Padding based on font size (font size / 4)
+        const xPadding = sizeScale / 4;
+        const yPadding = sizeScale * (1 + 1 / 4);
+        // Place secondary label under main label (secondary label always 'top' baseline aligned)
+        const secondaryOffset = 0.6 * (1 - yMult) * sizeScale;
+        let yOffset = secondary ? secondaryOffset : 0;
+        // Special case, position relative to secondary label
+        if (anchor === 'middle' && alignment === 'top' && getSecondaryText) {
+            yOffset -= secondaryOffset;
+            yOffset -= secondarySizeScale;
+            yOffset += sizeScale;
+        }
+        // Padding based on point radius (radius/ 4)
+        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;
+        // Heuristics to avoid label overlap
+        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(id, { 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,
+            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 = [
+            // Text doesn't update via updateTrigger for some reason
+            this.renderTextLayer(`${updateTriggers.getText}-primary`, {
+                backgroundPadding,
+                getText,
+                getPixelOffset,
+                background: true // Only use background for primary label for faster collisions
+            }),
+            Boolean(getSecondaryText) &&
+                this.renderTextLayer(`${updateTriggers.getSecondaryText}-secondary`, {
+                    getText: getSecondaryText,
+                    getPixelOffset: this.calculatePixelOffset(true),
+                    getAlignmentBaseline: 'top',
+                    // updateTriggers: {getText: updateTriggers.getSecondaryText},
+                    // Optional overrides
+                    ...(getSecondaryColor && { getColor: getSecondaryColor }),
+                    ...(secondarySizeScale && { sizeScale: secondarySizeScale }),
+                    ...(secondaryOutlineColor && { outlineColor: secondaryOutlineColor })
+                })
+        ];
+        return out;
+    }
+}

package/dist/layers/quadbin-layer.js

@@ -0,0 +1,21 @@
+import { _GeoCellLayer as GeoCellLayer } from '@deck.gl/geo-layers';
+import { getQuadbinPolygon } from "./quadbin-utils.js";
+const defaultProps = {
+    getQuadbin: { type: 'accessor', value: (d) => d.quadbin }
+};
+export default class QuadbinLayer extends GeoCellLayer {
+    static { this.layerName = 'QuadbinLayer'; }
+    static { this.defaultProps = defaultProps; }
+    indexToBounds() {
+        const { data, extruded, getQuadbin } = this.props;
+        // To avoid z-fighting reduce polygon footprint when extruding
+        const coverage = extruded ? 0.99 : 1;
+        return {
+            data,
+            _normalize: false,
+            positionFormat: 'XY',
+            getPolygon: (x, objectInfo) => getQuadbinPolygon(getQuadbin(x, objectInfo), coverage),
+            updateTriggers: { getPolygon: coverage }
+        };
+    }
+}

package/{typed → dist}/layers/quadbin-tile-layer.d.ts

@@ -1,7 +1,7 @@
 import { CompositeLayer, CompositeLayerProps, Layer, LayersList, DefaultProps } from '@deck.gl/core';
-import QuadbinLayer, { QuadbinLayerProps } from './quadbin-layer';
-import { SpatialIndexTileLayerProps } from './spatial-index-tile-layer';
-import type { TilejsonResult } from '../sources/types';
+import QuadbinLayer, { QuadbinLayerProps } from "./quadbin-layer.js";
+import { SpatialIndexTileLayerProps } from "./spatial-index-tile-layer.js";
+import type { TilejsonResult } from "../sources/types.js";
 export declare const renderSubLayers: (props: any) => QuadbinLayer<any, {
     getQuadbin: (d: any) => any;
 }> | null;

package/dist/layers/quadbin-tile-layer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quadbin-tile-layer.d.ts","sourceRoot":"","sources":["../../src/layers/quadbin-tile-layer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAE,mBAAmB,EAAE,KAAK,EAAE,UAAU,EAAE,YAAY,EAAC,MAAM,eAAe,CAAC;AACnG,OAAO,YAAY,EAAE,EAAC,iBAAiB,EAAC,2BAAwB;AAEhE,OAA8B,EAAC,0BAA0B,EAAC,sCAAmC;AAE7F,OAAO,KAAK,EAAC,cAAc,EAAC,4BAAyB;AAIrD,eAAO,MAAM,eAAe;;SAO3B,CAAC;AAOF,oDAAoD;AACpD,MAAM,MAAM,qBAAqB,CAAC,KAAK,GAAG,OAAO,IAAI,sBAAsB,CAAC,KAAK,CAAC,GAChF,mBAAmB,CAAC;AAEtB,4CAA4C;AAC5C,KAAK,sBAAsB,CAAC,KAAK,IAAI,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,GACzE,IAAI,CAAC,0BAA0B,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,GAAG;IAChD,IAAI,EAAE,IAAI,GAAG,cAAc,GAAG,OAAO,CAAC,cAAc,CAAC,CAAC;CACvD,CAAC;AAEJ,MAAM,CAAC,OAAO,OAAO,gBAAgB,CACnC,KAAK,GAAG,GAAG,EACX,UAAU,SAAS,EAAE,GAAG,EAAE,CAC1B,SAAQ,cAAc,CAAC,UAAU,GAAG,QAAQ,CAAC,sBAAsB,CAAC,KAAK,CAAC,CAAC,CAAC;IAC5E,MAAM,CAAC,SAAS,SAAsB;IACtC,MAAM,CAAC,YAAY,+CAAgB;IAEnC,cAAc,IAAI,GAAG;IAQrB,YAAY,IAAI,KAAK,GAAG,IAAI,GAAG,UAAU;CAkB1C"}

package/dist/layers/quadbin-tile-layer.js

@@ -0,0 +1,49 @@
+import { CompositeLayer } from '@deck.gl/core';
+import QuadbinLayer from "./quadbin-layer.js";
+import QuadbinTileset2D from "./quadbin-tileset-2d.js";
+import SpatialIndexTileLayer from "./spatial-index-tile-layer.js";
+import { hexToBigInt } from 'quadbin';
+import { injectAccessToken, TilejsonPropType } from "./utils.js";
+import { DEFAULT_TILE_SIZE } from "../constants.js";
+export const renderSubLayers = 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 => hexToBigInt(d.id)
+    });
+};
+const defaultProps = {
+    data: TilejsonPropType,
+    tileSize: DEFAULT_TILE_SIZE
+};
+export default class QuadbinTileLayer extends CompositeLayer {
+    static { this.layerName = 'QuadbinTileLayer'; }
+    static { this.defaultProps = defaultProps; }
+    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 [
+            // @ts-ignore
+            new SpatialIndexTileLayer(this.props, {
+                id: `quadbin-tile-layer-${this.props.id}`,
+                data,
+                // TODO: Tileset2D should be generic over TileIndex type
+                TilesetClass: QuadbinTileset2D,
+                renderSubLayers,
+                maxZoom,
+                loadOptions: this.getLoadOptions()
+            })
+        ];
+    }
+}

package/dist/layers/quadbin-tileset-2d.js

@@ -0,0 +1,27 @@
+import { _Tileset2D as Tileset2D } from '@deck.gl/geo-layers';
+import { bigIntToHex, cellToParent, cellToTile, getResolution, tileToCell } from 'quadbin';
+export default class QuadbinTileset2D extends Tileset2D {
+    // @ts-expect-error for spatial indices, TileSet2d should be parametrized by TileIndexT
+    getTileIndices(opts) {
+        return super
+            .getTileIndices(opts)
+            .map(tileToCell)
+            .map(q => ({ q, i: bigIntToHex(q) }));
+    }
+    // @ts-expect-error TileIndex must be generic
+    getTileId({ q, i }) {
+        return i || bigIntToHex(q);
+    }
+    // @ts-expect-error TileIndex must be generic
+    getTileMetadata({ q }) {
+        return super.getTileMetadata(cellToTile(q));
+    }
+    // @ts-expect-error TileIndex must be generic
+    getTileZoom({ q }) {
+        return Number(getResolution(q));
+    }
+    // @ts-expect-error TileIndex must be generic
+    getParentIndex({ q }) {
+        return { q: cellToParent(q) };
+    }
+}

package/dist/layers/quadbin-utils.js

@@ -0,0 +1,21 @@
+import { worldToLngLat } from '@math.gl/web-mercator';
+import { cellToTile } from 'quadbin';
+const TILE_SIZE = 512;
+export function quadbinToOffset(quadbin) {
+    const { x, y, z } = cellToTile(quadbin);
+    const scale = TILE_SIZE / (1 << z);
+    return [x * scale, TILE_SIZE - y * scale, scale];
+}
+export function quadbinToWorldBounds(quadbin, coverage) {
+    const [xOffset, yOffset, scale] = quadbinToOffset(quadbin);
+    return [
+        [xOffset, yOffset],
+        [xOffset + coverage * scale, yOffset - coverage * scale]
+    ];
+}
+export function getQuadbinPolygon(quadbin, coverage = 1) {
+    const [topLeft, bottomRight] = quadbinToWorldBounds(quadbin, coverage);
+    const [w, n] = worldToLngLat(topLeft);
+    const [e, s] = worldToLngLat(bottomRight);
+    return [e, n, e, s, w, s, w, n, e, n];
+}

package/dist/layers/raster-layer-vertex.glsl.d.ts

@@ -0,0 +1,3 @@
+declare const _default: "#version 300 es\n#define SHADER_NAME raster-layer-vertex-shader\n\nin vec3 positions;\nin vec3 normals;\n\nin float instanceElevations;\nin vec4 instanceFillColors;\nin vec4 instanceLineColors;\n\nin vec3 instancePickingColors;\n\n// Custom uniforms\nuniform float opacity;\nuniform bool extruded;\nuniform bool stroked;\nuniform bool isStroke;\nuniform float coverage;\nuniform float elevationScale;\nuniform float widthScale;\nuniform vec3 offset;\n\n// Result\nout vec4 vColor;\n#ifdef FLAT_SHADING\nout vec4 position_commonspace;\n#endif\n\nvoid main(void) {\n  // Rather than positioning using attribute, layout pixel grid using gl_InstanceID\n  vec2 common_position = offset.xy;\n  float scale = offset.z;\n\n  int yIndex = - (gl_InstanceID / BLOCK_WIDTH);\n  int xIndex = gl_InstanceID + (yIndex * BLOCK_WIDTH);\n  common_position += scale * vec2(float(xIndex), float(yIndex));\n\n  vec4 color = isStroke ? instanceLineColors : instanceFillColors;\n\n  // if alpha == 0.0 or z < 0.0, do not render element\n  float shouldRender = float(color.a > 0.0 && instanceElevations >= 0.0);\n  float cellWidth = coverage * scale;\n\n  // Get position directly from quadbin, rather than projecting\n  // Important to set geometry.position before using project_ methods below\n  // as geometry.worldPosition is not set (we don't know our lat/long)\n  geometry.position = vec4(common_position, 0.0, 1.0);\n  if (project_uProjectionMode == PROJECTION_MODE_WEB_MERCATOR_AUTO_OFFSET) {\n    geometry.position.xyz -= project_uCommonOrigin;\n  }\n\n  // calculate elevation, if 3d not enabled set to 0\n  // cylindar geometry height are between -1.0 to 1.0, transform it to between 0, 1\n  float elevation = 0.0;\n  // calculate stroke offset\n  float strokeOffsetRatio = 1.0;\n\n  if (extruded) {\n    elevation = instanceElevations * (positions.z + 1.0) / 2.0 * elevationScale;\n  } else if (stroked) {\n    float halfOffset = project_pixel_size(widthScale) / cellWidth;\n    if (isStroke) {\n      strokeOffsetRatio -= sign(positions.z) * halfOffset;\n    } else {\n      strokeOffsetRatio -= halfOffset;\n    }\n  }\n\n  geometry.pickingColor = instancePickingColors;\n\n  // project center of column\n  vec2 offset = (vec2(0.5) + positions.xy * strokeOffsetRatio) * cellWidth * shouldRender;\n  vec3 pos = vec3(offset, project_size(elevation));\n  DECKGL_FILTER_SIZE(pos, geometry);\n\n  geometry.position.xyz += pos;\n  gl_Position = project_common_position_to_clipspace(geometry.position);\n\n  geometry.normal = project_normal(normals);\n  DECKGL_FILTER_GL_POSITION(gl_Position, geometry);\n\n  // Light calculations\n  if (extruded && !isStroke) {\n#ifdef FLAT_SHADING\n    position_commonspace = geometry.position;\n    vColor = vec4(color.rgb, color.a * opacity);\n#else\n    vec3 lightColor = lighting_getLightColor(color.rgb, project_uCameraPosition, geometry.position.xyz, geometry.normal);\n    vColor = vec4(lightColor, color.a * opacity);\n#endif\n  } else {\n    vColor = vec4(color.rgb, color.a * opacity);\n  }\n\n  DECKGL_FILTER_COLOR(vColor, geometry);\n}\n";
+export default _default;
+//# sourceMappingURL=raster-layer-vertex.glsl.d.ts.map

package/dist/layers/raster-layer-vertex.glsl.js

@@ -0,0 +1,68 @@
+export default `\
+#version 300 es
+#define SHADER_NAME raster-layer-vertex-shader
+in vec3 positions;
+in vec3 normals;
+in float instanceElevations;
+in vec4 instanceFillColors;
+in vec4 instanceLineColors;
+in vec3 instancePickingColors;
+uniform float opacity;
+uniform bool extruded;
+uniform bool stroked;
+uniform bool isStroke;
+uniform float coverage;
+uniform float elevationScale;
+uniform float widthScale;
+uniform vec3 offset;
+out vec4 vColor;
+#ifdef FLAT_SHADING
+out vec4 position_commonspace;
+#endif
+void main(void) {
+vec2 common_position = offset.xy;
+float scale = offset.z;
+int yIndex = - (gl_InstanceID / BLOCK_WIDTH);
+int xIndex = gl_InstanceID + (yIndex * BLOCK_WIDTH);
+common_position += scale * vec2(float(xIndex), float(yIndex));
+vec4 color = isStroke ? instanceLineColors : instanceFillColors;
+float shouldRender = float(color.a > 0.0 && instanceElevations >= 0.0);
+float cellWidth = coverage * scale;
+geometry.position = vec4(common_position, 0.0, 1.0);
+if (project_uProjectionMode == PROJECTION_MODE_WEB_MERCATOR_AUTO_OFFSET) {
+geometry.position.xyz -= project_uCommonOrigin;
+}
+float elevation = 0.0;
+float strokeOffsetRatio = 1.0;
+if (extruded) {
+elevation = instanceElevations * (positions.z + 1.0) / 2.0 * elevationScale;
+} else if (stroked) {
+float halfOffset = project_pixel_size(widthScale) / cellWidth;
+if (isStroke) {
+strokeOffsetRatio -= sign(positions.z) * halfOffset;
+} else {
+strokeOffsetRatio -= halfOffset;
+}
+}
+geometry.pickingColor = instancePickingColors;
+vec2 offset = (vec2(0.5) + positions.xy * strokeOffsetRatio) * cellWidth * shouldRender;
+vec3 pos = vec3(offset, project_size(elevation));
+DECKGL_FILTER_SIZE(pos, geometry);
+geometry.position.xyz += pos;
+gl_Position = project_common_position_to_clipspace(geometry.position);
+geometry.normal = project_normal(normals);
+DECKGL_FILTER_GL_POSITION(gl_Position, geometry);
+if (extruded && !isStroke) {
+#ifdef FLAT_SHADING
+position_commonspace = geometry.position;
+vColor = vec4(color.rgb, color.a * opacity);
+#else
+vec3 lightColor = lighting_getLightColor(color.rgb, project_uCameraPosition, geometry.position.xyz, geometry.normal);
+vColor = vec4(lightColor, color.a * opacity);
+#endif
+} else {
+vColor = vec4(color.rgb, color.a * opacity);
+}
+DECKGL_FILTER_COLOR(vColor, geometry);
+}
+`;

package/{typed → dist}/layers/raster-layer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"raster-layer.d.ts","sourceRoot":"","sources":["../../src/layers/raster-layer.ts"],"names":[],"mappings":"AACA,OAAO,EACL,QAAQ,EACR,cAAc,EACd,mBAAmB,EACnB,KAAK,EACL,UAAU,EACV,YAAY,EACb,MAAM,eAAe,CAAC;AACvB,OAAO,EAAc,gBAAgB,EAAC,MAAM,iBAAiB,CAAC;AAyD9D,+CAA+C;AAC/C,MAAM,MAAM,gBAAgB,CAAC,KAAK,GAAG,OAAO,IAAI,iBAAiB,GAC/D,gBAAgB,CAAC,KAAK,CAAC,GACvB,mBAAmB,CAAC;AAEtB,uCAAuC;AACvC,KAAK,iBAAiB,GAAG;IACvB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAGF,MAAM,CAAC,OAAO,OAAO,WAAW,CAAC,KAAK,GAAG,GAAG,EAAE,UAAU,GAAG,EAAE,CAAE,SAAQ,cAAc,CACnF,QAAQ,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,GAAG,UAAU,CAC/C;IACC,MAAM,CAAC,SAAS,SAAiB;IACjC,MAAM,CAAC,YAAY,0CAAgB;IAEnC,YAAY,IAAI,KAAK,GAAG,IAAI,GAAG,UAAU;IA6CzC,SAAS,CAAC,mBAAmB,CAAC,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,CAAC,EAAE,EAAE,GAAG,CAAC,GAAG,QAAQ,CAAC,EAAE,EAAE,GAAG,CAAC;CAcvF"}
+{"version":3,"file":"raster-layer.d.ts","sourceRoot":"","sources":["../../src/layers/raster-layer.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,cAAc,EACd,mBAAmB,EACnB,KAAK,EACL,UAAU,EACV,YAAY,EACb,MAAM,eAAe,CAAC;AACvB,OAAO,EAAc,gBAAgB,EAAC,MAAM,iBAAiB,CAAC;AAyD9D,+CAA+C;AAC/C,MAAM,MAAM,gBAAgB,CAAC,KAAK,GAAG,OAAO,IAAI,iBAAiB,GAC/D,gBAAgB,CAAC,KAAK,CAAC,GACvB,mBAAmB,CAAC;AAEtB,uCAAuC;AACvC,KAAK,iBAAiB,GAAG;IACvB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAGF,MAAM,CAAC,OAAO,OAAO,WAAW,CAAC,KAAK,GAAG,GAAG,EAAE,UAAU,GAAG,EAAE,CAAE,SAAQ,cAAc,CACnF,QAAQ,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,GAAG,UAAU,CAC/C;IACC,MAAM,CAAC,SAAS,SAAiB;IACjC,MAAM,CAAC,YAAY,0CAAgB;IAEnC,YAAY,IAAI,KAAK,GAAG,IAAI,GAAG,UAAU;IAwCzC,SAAS,CAAC,mBAAmB,CAAC,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,CAAC,EAAE,EAAE,GAAG,CAAC,GAAG,QAAQ,CAAC,EAAE,EAAE,GAAG,CAAC;CAcvF"}

package/dist/layers/raster-layer.js

@@ -0,0 +1,95 @@
+import { CompositeLayer } from '@deck.gl/core';
+import { ColumnLayer } from '@deck.gl/layers';
+import { quadbinToOffset } from "./quadbin-utils.js";
+import vs from "./raster-layer-vertex.glsl.js";
+import { createBinaryProxy } from "../utils.js";
+const defaultProps = {
+    ...ColumnLayer.defaultProps,
+    extruded: false,
+    diskResolution: 4,
+    vertices: [
+        [-0.5, -0.5],
+        [0.5, -0.5],
+        [0.5, 0.5],
+        [-0.5, 0.5]
+    ]
+};
+// Modified ColumnLayer with custom vertex shader
+class RasterColumnLayer extends ColumnLayer {
+    static { this.layerName = 'RasterColumnLayer'; }
+    getShaders() {
+        const shaders = super.getShaders();
+        const data = this.props.data;
+        const BLOCK_WIDTH = data.data.blockSize ?? Math.sqrt(data.length);
+        return { ...shaders, defines: { ...shaders.defines, BLOCK_WIDTH }, vs };
+    }
+    initializeState() {
+        // Only add attributes needed by shader
+        const attributeManager = this.getAttributeManager();
+        /* eslint-disable max-len */
+        attributeManager.addInstanced({
+            instanceElevations: {
+                size: 1,
+                transition: true,
+                accessor: 'getElevation'
+            },
+            instanceFillColors: {
+                size: this.props.colorFormat.length,
+                type: 'unorm8',
+                transition: true,
+                accessor: 'getFillColor',
+                defaultValue: [0, 0, 0, 255]
+            },
+            instanceLineColors: {
+                size: this.props.colorFormat.length,
+                type: 'unorm8',
+                transition: true,
+                accessor: 'getLineColor',
+                defaultValue: [255, 255, 255, 255]
+            }
+        });
+    }
+}
+// Adapter layer around RasterColumnLayer that converts data & accessors into correct format
+export default class RasterLayer extends CompositeLayer {
+    static { this.layerName = 'RasterLayer'; }
+    static { this.defaultProps = defaultProps; }
+    renderLayers() {
+        // Rendering props underlying layer
+        const { data, getElevation, getFillColor, getLineColor, getLineWidth, tileIndex, updateTriggers } = this.props;
+        if (!data || !tileIndex)
+            return null;
+        const blockSize = data.blockSize ?? 0;
+        const [xOffset, yOffset, scale] = quadbinToOffset(tileIndex);
+        const offset = [xOffset, yOffset, scale / blockSize];
+        // Filled Column Layer
+        const CellLayer = this.getSubLayerClass('column', RasterColumnLayer);
+        return new CellLayer(this.props, this.getSubLayerProps({
+            id: 'cell',
+            updateTriggers,
+            getElevation: this.getSubLayerAccessor(getElevation),
+            getFillColor: this.getSubLayerAccessor(getFillColor),
+            getLineColor: this.getSubLayerAccessor(getLineColor),
+            getLineWidth: this.getSubLayerAccessor(getLineWidth)
+        }), {
+            data: {
+                data, // Pass through data for getSubLayerAccessor()
+                length: blockSize * blockSize
+            },
+            offset
+        });
+    }
+    getSubLayerAccessor(accessor) {
+        if (typeof accessor !== 'function') {
+            return super.getSubLayerAccessor(accessor);
+        }
+        // Proxy values back in standard feature format
+        return (object, info) => {
+            const { data, index } = info;
+            const binaryData = data.data;
+            const proxy = createBinaryProxy(binaryData.cells, index);
+            // @ts-ignore (TS2349) accessor is always function
+            return accessor({ properties: proxy }, info);
+        };
+    }
+}

package/{typed → dist}/layers/raster-tile-layer.d.ts

@@ -1,7 +1,7 @@
 import { CompositeLayer, CompositeLayerProps, DefaultProps, Layer, LayersList } from '@deck.gl/core';
-import RasterLayer, { RasterLayerProps } from './raster-layer';
-import { SpatialIndexTileLayerProps } from './spatial-index-tile-layer';
-import type { TilejsonResult } from '../sources/types';
+import RasterLayer, { RasterLayerProps } from "./raster-layer.js";
+import { SpatialIndexTileLayerProps } from "./spatial-index-tile-layer.js";
+import type { TilejsonResult } from "../sources/types.js";
 export declare const renderSubLayers: (props: any) => RasterLayer<any, {
     tileIndex: any;
 }> | null;

package/dist/layers/raster-tile-layer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"raster-tile-layer.d.ts","sourceRoot":"","sources":["../../src/layers/raster-tile-layer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAE,mBAAmB,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,EAAC,MAAM,eAAe,CAAC;AACnG,OAAO,WAAW,EAAE,EAAC,gBAAgB,EAAC,0BAAuB;AAE7D,OAA8B,EAAC,0BAA0B,EAAC,sCAAmC;AAC7F,OAAO,KAAK,EAAC,cAAc,EAAC,4BAAyB;AAIrD,eAAO,MAAM,eAAe;;SAI3B,CAAC;AAOF,mDAAmD;AACnD,MAAM,MAAM,oBAAoB,CAAC,KAAK,GAAG,OAAO,IAAI,qBAAqB,CAAC,KAAK,CAAC,GAC9E,mBAAmB,CAAC;AAEtB,2CAA2C;AAC3C,KAAK,qBAAqB,CAAC,KAAK,IAAI,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,GACvE,IAAI,CAAC,0BAA0B,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,GAAG;IAChD,IAAI,EAAE,IAAI,GAAG,cAAc,GAAG,OAAO,CAAC,cAAc,CAAC,CAAC;CACvD,CAAC;AAEJ,MAAM,CAAC,OAAO,OAAO,eAAe,CAClC,KAAK,GAAG,GAAG,EACX,UAAU,SAAS,EAAE,GAAG,EAAE,CAC1B,SAAQ,cAAc,CAAC,UAAU,GAAG,QAAQ,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,CAAC;IAC3E,MAAM,CAAC,SAAS,SAAqB;IACrC,MAAM,CAAC,YAAY,8CAAgB;IAEnC,cAAc,IAAI,GAAG;IAOrB,YAAY,IAAI,KAAK,GAAG,IAAI,GAAG,UAAU;CAmB1C"}