@deck.gl/carto 9.1.0-beta.1 → 9.1.0-beta.3

package/package.json

@@ -3,7 +3,7 @@
   "description": "CARTO official integration with Deck.gl. Build geospatial applications using CARTO and Deck.gl.",
   "license": "MIT",
   "type": "module",
-  "version": "9.1.0-beta.1",
+  "version": "9.1.0-beta.3",
   "publishConfig": {
     "access": "public"
   },
@@ -42,14 +42,14 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env=dev"
   },
   "dependencies": {
-    "@carto/api-client": "^0.4.0-alpha.4",
+    "@carto/api-client": "^0.4.4",
     "@loaders.gl/gis": "^4.2.0",
     "@loaders.gl/loader-utils": "^4.2.0",
     "@loaders.gl/mvt": "^4.2.0",
     "@loaders.gl/schema": "^4.2.0",
     "@loaders.gl/tiles": "^4.2.0",
-    "@luma.gl/core": "^9.1.0-beta.11",
-    "@luma.gl/shadertools": "^9.1.0-beta.11",
+    "@luma.gl/core": "^9.1.0-beta.16",
+    "@luma.gl/shadertools": "^9.1.0-beta.16",
     "@math.gl/web-mercator": "^4.1.0",
     "@types/d3-array": "^3.0.2",
     "@types/d3-color": "^1.4.2",
@@ -66,13 +66,13 @@
     "quadbin": "^0.2.0"
   },
   "peerDependencies": {
-    "@deck.gl/aggregation-layers": "9.0.0-alpha.0",
-    "@deck.gl/core": "9.0.0-alpha.0",
-    "@deck.gl/extensions": "9.0.0-alpha.0",
-    "@deck.gl/geo-layers": "9.0.0-alpha.0",
-    "@deck.gl/layers": "9.0.0-alpha.0",
+    "@deck.gl/aggregation-layers": "^9.1.0-beta",
+    "@deck.gl/core": "^9.1.0-beta",
+    "@deck.gl/extensions": "^9.1.0-beta",
+    "@deck.gl/geo-layers": "^9.1.0-beta",
+    "@deck.gl/layers": "^9.1.0-beta",
     "@loaders.gl/core": "^4.2.0",
-    "@luma.gl/core": "^9.1.0-beta.11"
+    "@luma.gl/core": "^9.1.0-beta"
   },
-  "gitHead": "a86fb154cf323eacc3f56ef087f636fb9f6c30b6"
+  "gitHead": "6625885881202cb753b64c6f2b8ee6f323092075"
 }

package/src/api/fetch-map.ts

@@ -3,7 +3,7 @@
 // Copyright (c) vis.gl contributors
 
 import {
-  SOURCE_DEFAULTS,
+  DEFAULT_API_BASE_URL,
   APIErrorContext,
   CartoAPIError,
   GeojsonResult,
@@ -12,6 +12,7 @@ import {
   Format,
   MapType,
   QueryParameters,
+  SourceOptions,
   buildPublicMapUrl,
   buildStatsUrl,
   h3QuerySource,
@@ -45,14 +46,7 @@ type Dataset = {
 
 /* global clearInterval, setInterval, URL */
 /* eslint-disable complexity, max-statements, max-params */
-async function _fetchMapDataset(
-  dataset: Dataset,
-  accessToken: string,
-  apiBaseUrl: string,
-  clientId?: string,
-  headers?: Record<string, string>,
-  maxLengthURL = SOURCE_DEFAULTS.maxLengthURL
-) {
+async function _fetchMapDataset(dataset: Dataset, context: _FetchMapContext) {
   const {
     aggregationExp,
     aggregationResLevel,
@@ -66,16 +60,12 @@ async function _fetchMapDataset(
   } = dataset;
 
   const cache: {value?: number} = {};
-  const globalOptions: any = {
-    accessToken,
-    apiBaseUrl,
+  const globalOptions = {
+    ...context,
     cache,
-    clientId,
     connectionName,
-    format,
-    headers,
-    maxLengthURL
-  };
+    format
+  } as SourceOptions;
 
   if (type === 'tileset') {
     // TODO do we want a generic tilesetSource?
@@ -120,14 +110,9 @@ async function _fetchMapDataset(
   return cacheChanged;
 }
 
-async function _fetchTilestats(
-  attribute: string,
-  dataset: Dataset,
-  accessToken: string,
-  apiBaseUrl: string,
-  maxLengthURL = SOURCE_DEFAULTS.maxLengthURL
-) {
+async function _fetchTilestats(attribute: string, dataset: Dataset, context: _FetchMapContext) {
   const {connectionName, data, id, source, type, queryParameters} = dataset;
+  const {apiBaseUrl} = context;
   const errorContext: APIErrorContext = {
     requestType: 'Tile stats',
     connection: connectionName,
@@ -140,7 +125,7 @@ async function _fetchTilestats(
 
   const baseUrl = buildStatsUrl({attribute, apiBaseUrl, ...dataset});
   const client = new URLSearchParams(data.tiles[0]).get('client');
-  const headers = {Authorization: `Bearer ${accessToken}`};
+  const headers = {Authorization: `Bearer ${context.accessToken}`};
   const parameters: Record<string, string> = {};
   if (client) {
     parameters.client = client;
@@ -156,7 +141,7 @@ async function _fetchTilestats(
     headers,
     parameters,
     errorContext,
-    maxLengthURL
+    maxLengthURL: context.maxLengthURL
   });
 
   // Replace tilestats for attribute with value from API
@@ -166,23 +151,14 @@ async function _fetchTilestats(
   return true;
 }
 
-async function fillInMapDatasets(
-  {datasets, token}: {datasets: Dataset[]; token: string},
-  clientId: string,
-  apiBaseUrl: string,
-  headers?: Record<string, string>,
-  maxLengthURL = SOURCE_DEFAULTS.maxLengthURL
-) {
-  const promises = datasets.map(dataset =>
-    _fetchMapDataset(dataset, token, apiBaseUrl, clientId, headers, maxLengthURL)
-  );
+async function fillInMapDatasets({datasets}: {datasets: Dataset[]}, context: _FetchMapContext) {
+  const promises = datasets.map(dataset => _fetchMapDataset(dataset, context));
   return await Promise.all(promises);
 }
 
 async function fillInTileStats(
-  {datasets, keplerMapConfig, token}: {datasets: Dataset[]; keplerMapConfig: any; token: string},
-  apiBaseUrl: string,
-  maxLengthURL = SOURCE_DEFAULTS.maxLengthURL
+  {datasets, keplerMapConfig}: {datasets: Dataset[]; keplerMapConfig: any},
+  context: _FetchMapContext
 ) {
   const attributes: {attribute: string; dataset: any}[] = [];
   const {layers} = keplerMapConfig.config.visState;
@@ -211,7 +187,7 @@ async function fillInTileStats(
   }
 
   const promises = filteredAttributes.map(({attribute, dataset}) =>
-    _fetchTilestats(attribute, dataset, token, apiBaseUrl, maxLengthURL)
+    _fetchTilestats(attribute, dataset, context)
   );
   return await Promise.all(promises);
 }
@@ -260,6 +236,14 @@ export type FetchMapOptions = {
   maxLengthURL?: number;
 };
 
+/**
+ * Context reused while fetching and updating a map with fetchMap().
+ */
+type _FetchMapContext = {apiBaseUrl: string} & Pick<
+  FetchMapOptions,
+  'accessToken' | 'clientId' | 'headers' | 'maxLengthURL'
+>;
+
 export type FetchMapResult = ParseMapResult & {
   /**
    * Basemap properties.
@@ -271,16 +255,15 @@ export type FetchMapResult = ParseMapResult & {
 /* eslint-disable max-statements */
 export async function fetchMap({
   accessToken,
-  apiBaseUrl = SOURCE_DEFAULTS.apiBaseUrl,
+  apiBaseUrl = DEFAULT_API_BASE_URL,
   cartoMapId,
-  clientId = SOURCE_DEFAULTS.clientId,
-  headers = {},
+  clientId,
+  headers,
   autoRefresh,
   onNewData,
-  maxLengthURL = SOURCE_DEFAULTS.maxLengthURL
+  maxLengthURL
 }: FetchMapOptions): Promise<FetchMapResult> {
   assert(cartoMapId, 'Must define CARTO map id: fetchMap({cartoMapId: "XXXX-XXXX-XXXX"})');
-  assert(apiBaseUrl, 'Must define apiBaseUrl');
 
   if (accessToken) {
     headers = {Authorization: `Bearer ${accessToken}`, ...headers};
@@ -298,6 +281,13 @@ export async function fetchMap({
   const baseUrl = buildPublicMapUrl({apiBaseUrl, cartoMapId});
   const errorContext: APIErrorContext = {requestType: 'Public map', mapId: cartoMapId};
   const map = await requestWithParameters({baseUrl, headers, errorContext, maxLengthURL});
+  const context: _FetchMapContext = {
+    accessToken: map.token || accessToken,
+    apiBaseUrl,
+    clientId,
+    headers,
+    maxLengthURL
+  };
 
   // Periodically check if the data has changed. Note that this
   // will not update when a map is published.
@@ -305,16 +295,13 @@ export async function fetchMap({
   if (autoRefresh) {
     // eslint-disable-next-line @typescript-eslint/no-misused-promises
     const intervalId = setInterval(async () => {
-      const changed = await fillInMapDatasets(
-        map,
-        clientId,
-        apiBaseUrl,
-        {
+      const changed = await fillInMapDatasets(map, {
+        ...context,
+        headers: {
           ...headers,
           'If-Modified-Since': new Date().toUTCString()
-        },
-        maxLengthURL
-      );
+        }
+      });
       if (onNewData && changed.some(v => v === true)) {
         onNewData(parseMap(map));
       }
@@ -343,11 +330,11 @@ export async function fetchMap({
     fetchBasemapProps({config: map.keplerMapConfig.config, errorContext}),
 
     // Mutates map.datasets so that dataset.data contains data
-    fillInMapDatasets(map, clientId, apiBaseUrl, headers, maxLengthURL)
+    fillInMapDatasets(map, context)
   ]);
 
   // Mutates attributes in visualChannels to contain tile stats
-  await fillInTileStats(map, apiBaseUrl, maxLengthURL);
+  await fillInTileStats(map, context);
 
   const out = {...parseMap(map), basemap, ...{stopAutoRefresh}};
 

package/src/api/layer-map.ts

@@ -197,7 +197,7 @@ export function getLayer(
       Layer: GeoJsonLayer,
       propMap: {
         columns: {
-          altitude: x => ({parameters: {depthTest: Boolean(x)}})
+          altitude: x => ({parameters: {depthWriteEnabled: Boolean(x)}})
         },
         visConfig: {outline: 'stroked'}
       }

package/src/index.ts

@@ -6,7 +6,7 @@
 import {default as ClusterTileLayer} from './layers/cluster-tile-layer';
 import {default as H3TileLayer} from './layers/h3-tile-layer';
 import {default as HeatmapTileLayer} from './layers/heatmap-tile-layer';
-import {default as _PointLabelLayer} from './layers/point-label-layer';
+import {default as PointLabelLayer} from './layers/point-label-layer';
 import {default as QuadbinTileLayer} from './layers/quadbin-tile-layer';
 import {default as RasterTileLayer} from './layers/raster-tile-layer';
 import {default as VectorTileLayer} from './layers/vector-tile-layer';
@@ -16,7 +16,7 @@ const CARTO_LAYERS = {
   ClusterTileLayer,
   H3TileLayer,
   HeatmapTileLayer,
-  _PointLabelLayer,
+  PointLabelLayer,
   QuadbinTileLayer,
   RasterTileLayer,
   VectorTileLayer
@@ -26,7 +26,7 @@ export {
   ClusterTileLayer,
   H3TileLayer,
   HeatmapTileLayer,
-  _PointLabelLayer,
+  PointLabelLayer,
   QuadbinTileLayer,
   RasterTileLayer,
   VectorTileLayer
@@ -71,6 +71,8 @@ export type {
   GoogleBasemap as _GoogleBasemap
 } from './api/index';
 
+// TODO(v10): Consider removing re-exports from '@carto/api-client' below.
+
 import {
   boundaryQuerySource,
   boundaryTableSource,
@@ -83,11 +85,10 @@ import {
   quadbinTilesetSource,
   vectorQuerySource,
   vectorTableSource,
-  vectorTilesetSource,
-  SOURCE_DEFAULTS
+  vectorTilesetSource
 } from '@carto/api-client';
 
-const CARTO_SOURCES = {
+export const CARTO_SOURCES = {
   boundaryQuerySource,
   boundaryTableSource,
   h3QuerySource,
@@ -115,9 +116,10 @@ export {
   vectorQuerySource,
   vectorTableSource,
   vectorTilesetSource,
-  CARTO_SOURCES,
+  query,
+  CartoAPIError,
   SOURCE_DEFAULTS
-};
+} from '@carto/api-client';
 
 export type {
   GeojsonResult,
@@ -138,5 +140,6 @@ export type {
   QuadbinTilesetSourceOptions,
   VectorQuerySourceOptions,
   VectorTableSourceOptions,
-  VectorTilesetSourceOptions
+  VectorTilesetSourceOptions,
+  QueryParameters
 } from '@carto/api-client';

package/src/layers/post-process-utils.ts

@@ -3,7 +3,9 @@
 // Copyright (c) vis.gl contributors
 
 import {Framebuffer, TextureProps} from '@luma.gl/core';
+import type {ShaderPass} from '@luma.gl/shadertools';
 import {
+  _ConstructorOf,
   CompositeLayer,
   Layer,
   LayerContext,
@@ -63,8 +65,10 @@ class DrawCallbackLayer extends Layer {
  * Resulting layer must be used as a sublayer of a layer created
  * with `PostProcessModifier`
  */
-export function RTTModifier(BaseLayer) {
+export function RTTModifier<T extends _ConstructorOf<Layer>>(BaseLayer: T): T {
+  // @ts-expect-error initializeState is abstract
   return class RTTLayer extends BaseLayer {
+    // @ts-expect-error typescript doesn't see static property
     static layerName = `RTT-${BaseLayer.layerName}`;
 
     draw(this: RTTLayer, opts: any) {
@@ -181,5 +185,30 @@ export function PostProcessModifier<T extends Constructor<DrawableCompositeLayer
 
       this.internalState.renderInProgress = false;
     }
+
+    _finalize(): void {
+      this.internalState.renderBuffers.forEach((fbo: Framebuffer) => {
+        fbo.destroy();
+      });
+      this.internalState.renderBuffers = null;
+      this.internalState.postProcess.cleanup();
+    }
   };
 }
+
+const fs = /* glsl */ `\
+vec4 copy_filterColor_ext(vec4 color, vec2 texSize, vec2 texCoord) {
+  return color;
+}
+`;
+
+/**
+ * Copy
+ * Simple module that just copies input color to output
+ */
+export const copy = {
+  name: 'copy',
+  fs,
+  getUniforms: () => ({}),
+  passes: [{filter: true}]
+} as const satisfies ShaderPass<{}>;

package/src/layers/raster-layer-vertex.glsl.ts

@@ -23,12 +23,14 @@ out vec4 position_commonspace;
 
 void main(void) {
   // Rather than positioning using attribute, layout pixel grid using gl_InstanceID
-  vec2 common_position = column.offset.xy;
+  vec2 tileOrigin = column.offset.xy;
   float scale = column.widthScale; // Re-use widthScale prop to pass cell scale
 
   int yIndex = - (gl_InstanceID / BLOCK_WIDTH);
   int xIndex = gl_InstanceID + (yIndex * BLOCK_WIDTH);
-  common_position += scale * vec2(float(xIndex), float(yIndex - 1));
+
+  // Avoid precision issues by applying 0.5 offset here, rather than when laying out vertices
+  vec2 cellCenter = scale * vec2(float(xIndex) + 0.5, float(yIndex) - 0.5);
 
   vec4 color = column.isStroke ? instanceLineColors : instanceFillColors;
 
@@ -39,7 +41,7 @@ void main(void) {
   // Get position directly from quadbin, rather than projecting
   // Important to set geometry.position before using project_ methods below
   // as geometry.worldPosition is not set (we don't know our lat/long)
-  geometry.position = vec4(common_position, 0.0, 1.0);
+  geometry.position = vec4(tileOrigin + cellCenter, 0.0, 1.0);
   if (project.projectionMode == PROJECTION_MODE_WEB_MERCATOR_AUTO_OFFSET) {
     geometry.position.xyz -= project.commonOrigin;
   }
@@ -63,12 +65,12 @@ void main(void) {
 
   geometry.pickingColor = instancePickingColors;
 
-  // project center of column
-  vec2 offset = (vec2(0.5) + positions.xy * strokeOffsetRatio) * cellWidth * shouldRender;
-  vec3 pos = vec3(offset, project_size(elevation));
-  DECKGL_FILTER_SIZE(pos, geometry);
+  // Cell coordinates centered on origin
+  vec2 base = positions.xy * scale * strokeOffsetRatio * column.coverage * shouldRender;
+  vec3 cell = vec3(base, project_size(elevation));
+  DECKGL_FILTER_SIZE(cell, geometry);
 
-  geometry.position.xyz += pos;
+  geometry.position.xyz += cell;
   gl_Position = project_common_position_to_clipspace(geometry.position);
 
   geometry.normal = project_normal(normals);

package/src/layers/raster-layer.ts

@@ -16,6 +16,7 @@ import {quadbinToOffset} from './quadbin-utils';
 import {Raster} from './schema/carto-raster-tile-loader';
 import vs from './raster-layer-vertex.glsl';
 import {createBinaryProxy} from '../utils';
+import {RTTModifier} from './post-process-utils';
 
 const defaultProps: DefaultProps<RasterLayerProps> = {
   ...ColumnLayer.defaultProps,
@@ -30,7 +31,8 @@ const defaultProps: DefaultProps<RasterLayerProps> = {
 };
 
 // Modified ColumnLayer with custom vertex shader
-class RasterColumnLayer extends ColumnLayer {
+// Use RTT to avoid inter-tile seams
+class RasterColumnLayer extends RTTModifier(ColumnLayer) {
   static layerName = 'RasterColumnLayer';
 
   getShaders() {
@@ -143,7 +145,18 @@ export default class RasterLayer<DataT = any, ExtraProps = {}> extends Composite
         offset,
         lineWidthScale, // Re-use widthScale prop to pass cell scale,
         highlightedObjectIndex,
-        highlightColor
+        highlightColor,
+
+        // RTT requires blending otherwise opacity < 1 blends with black
+        // render target
+        parameters: {
+          blendColorSrcFactor: 'one',
+          blendAlphaSrcFactor: 'one',
+          blendColorDstFactor: 'zero',
+          blendAlphaDstFactor: 'zero',
+          blendColorOperation: 'add',
+          blendAlphaOperation: 'add'
+        }
       }
     );
   }

package/src/layers/raster-tile-layer.ts

@@ -2,13 +2,21 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {CompositeLayer, CompositeLayerProps, DefaultProps, Layer, LayersList} from '@deck.gl/core';
+import {
+  CompositeLayer,
+  CompositeLayerProps,
+  DefaultProps,
+  FilterContext,
+  Layer,
+  LayersList
+} from '@deck.gl/core';
 import RasterLayer, {RasterLayerProps} from './raster-layer';
 import QuadbinTileset2D from './quadbin-tileset-2d';
 import type {TilejsonResult} from '@carto/api-client';
 import {injectAccessToken, TilejsonPropType} from './utils';
 import {DEFAULT_TILE_SIZE} from '../constants';
 import {TileLayer, TileLayerProps} from '@deck.gl/geo-layers';
+import {copy, PostProcessModifier} from './post-process-utils';
 
 export const renderSubLayers = props => {
   const tileIndex = props.tile?.index?.q;
@@ -18,6 +26,7 @@ export const renderSubLayers = props => {
 
 const defaultProps: DefaultProps<RasterTileLayerProps> = {
   data: TilejsonPropType,
+  refinementStrategy: 'no-overlap',
   tileSize: DEFAULT_TILE_SIZE
 };
 
@@ -31,6 +40,16 @@ type _RasterTileLayerProps<DataT> = Omit<RasterLayerProps<DataT>, 'data'> &
     data: null | TilejsonResult | Promise<TilejsonResult>;
   };
 
+class PostProcessTileLayer extends PostProcessModifier(TileLayer, copy) {
+  filterSubLayer(context: FilterContext) {
+    // Handle DrawCallbackLayer
+    const {tile} = (context.layer as Layer<{tile: any}>).props;
+    if (!tile) return true;
+
+    return super.filterSubLayer(context);
+  }
+}
+
 export default class RasterTileLayer<
   DataT = any,
   ExtraProps extends {} = {}
@@ -49,8 +68,8 @@ export default class RasterTileLayer<
     const tileJSON = this.props.data as TilejsonResult;
     if (!tileJSON) return null;
 
-    const {tiles: data, minzoom: minZoom, maxzoom: maxZoom} = tileJSON;
-    const SubLayerClass = this.getSubLayerClass('tile', TileLayer);
+    const {tiles: data, minzoom: minZoom, maxzoom: maxZoom, raster_metadata: metadata} = tileJSON;
+    const SubLayerClass = this.getSubLayerClass('tile', PostProcessTileLayer);
     return new SubLayerClass(this.props, {
       id: `raster-tile-layer-${this.props.id}`,
       data,
@@ -59,7 +78,10 @@ export default class RasterTileLayer<
       renderSubLayers,
       minZoom,
       maxZoom,
-      loadOptions: this.getLoadOptions()
+      loadOptions: {
+        cartoRasterTile: {metadata},
+        ...this.getLoadOptions()
+      }
     });
   }
 }

package/src/layers/schema/carto-properties-tile-loader.ts

@@ -15,7 +15,7 @@ const CartoPropertiesTileLoader: LoaderWithParser = {
   extensions: ['pbf'],
   mimeTypes: ['application/vnd.carto-properties-tile'],
   category: 'geometry',
-  worker: false,
+  worker: true,
   parse: async (arrayBuffer, options) => parseCartoPropertiesTile(arrayBuffer, options),
   parseSync: parseCartoPropertiesTile,
   options: {}

package/src/layers/schema/carto-raster-tile-loader.ts

@@ -3,6 +3,7 @@
 // Copyright (c) vis.gl contributors
 
 import {LoaderOptions, LoaderWithParser} from '@loaders.gl/loader-utils';
+import type {RasterMetadata} from '@carto/api-client';
 
 import {TileReader} from './carto-raster-tile';
 import {parsePbf} from './tile-loader-utils';
@@ -14,12 +15,14 @@ const id = 'cartoRasterTile';
 
 type CartoRasterTileLoaderOptions = LoaderOptions & {
   cartoRasterTile?: {
+    metadata: RasterMetadata | null;
     workerUrl: string;
   };
 };
 
 const DEFAULT_OPTIONS: CartoRasterTileLoaderOptions = {
   cartoRasterTile: {
+    metadata: null,
     workerUrl: getWorkerUrl(id, VERSION)
   }
 };
@@ -52,8 +55,12 @@ function parseCartoRasterTile(
   arrayBuffer: ArrayBuffer,
   options?: CartoRasterTileLoaderOptions
 ): Raster | null {
-  if (!arrayBuffer) return null;
-  const {bands, blockSize} = parsePbf(arrayBuffer, TileReader);
+  const metadata = options?.cartoRasterTile?.metadata;
+  if (!arrayBuffer || !metadata) return null;
+  // @ts-expect-error Upstream type needs to be updated
+  TileReader.compression = metadata.compression;
+  const out = parsePbf(arrayBuffer, TileReader);
+  const {bands, blockSize} = out;
 
   const numericProps = {};
   for (let i = 0; i < bands.length; i++) {

package/src/layers/schema/carto-raster-tile.ts

@@ -33,12 +33,14 @@ export class BandReader {
         throw Error(`Invalid data type: ${obj.type}`);
       }
       obj.data = {};
-      readPackedTypedArray(TypedArray, pbf, obj.data);
+      const {compression} = TileReader;
+      readPackedTypedArray(TypedArray, pbf, obj.data, {compression});
     }
   }
 }
 
 export class TileReader {
+  public static compression: null | 'gzip';
   static read(pbf, end) {
     return pbf.readFields(TileReader._readField, {blockSize: 0, bands: []}, end);
   }

package/src/layers/schema/fast-pbf.ts

@@ -2,10 +2,25 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
+import {GZipCompression} from '@loaders.gl/compression';
+
+type ReadPackedOptions = {
+  compression: null | 'gzip';
+};
+
 // Optimized (100X speed improvement) reading function for binary data
-export function readPackedTypedArray(TypedArray, pbf, obj) {
+export function readPackedTypedArray(TypedArray, pbf, obj, options?: ReadPackedOptions) {
   const end = pbf.type === 2 ? pbf.readVarint() + pbf.pos : pbf.pos + 1;
-  obj.value = new TypedArray(pbf.buf.buffer.slice(pbf.pos, end));
+  const data = pbf.buf.buffer.slice(pbf.pos, end);
+
+  if (options?.compression === 'gzip') {
+    const compression = new GZipCompression();
+    const decompressedData = compression.decompressSync(data);
+    obj.value = new TypedArray(decompressedData);
+  } else {
+    obj.value = new TypedArray(data);
+  }
+
   pbf.pos = end;
   return obj.value;
 }