---
title: "Bucket | JavaScript maps SDK"
description: "Documentation for MapTiler SDK"
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Interface Bucket

#### Hidden[](#hidden)

The `Bucket` interface is the single point of knowledge about turning vector tiles into WebGL buffers.

`Bucket` is an abstract interface. An implementation exists for each style layer type. Create a bucket via the `StyleLayer.createBucket` method.

The concrete bucket types, using layout options from the style layer, transform feature geometries into vertex and index data for use by the vertex shader. They also (via `ProgramConfiguration`) use feature properties and the zoom level to populate the attributes needed for data-driven styling.

Buckets are designed to be built on a worker thread and then serialized and transferred back to the main thread for rendering. On the worker side, a bucket's vertex, index, and attribute data is stored in `bucket.arrays: ArrayGroup`. When a bucket's data is serialized and sent back to the main thread, is gets deserialized (using `new Bucket(serializedBucketData)`, with the array data now stored in `bucket.buffers: BufferGroup`. BufferGroups hold the same data as ArrayGroups, but are tuned for consumption by WebGL.

interface Bucket {  
    [hasDependencies](#hasdependencies): boolean;  
    [layerIds](#layerids): string\[\];  
    [layers](#layers): any\[\];  
    [stateDependentLayerIds](#statedependentlayerids): string\[\];  
    [stateDependentLayers](#statedependentlayers): any\[\];  
    [destroy](#destroy-1)(): void;  
    [isEmpty](#isempty-1)(): boolean;  
    [populate](#populate-1)(  
        features: [IndexedFeature](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.IndexedFeature/)\[\],  
        options: [PopulateParameters](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.PopulateParameters/),  
        canonical: [CanonicalTileID](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CanonicalTileID/),  
    ): void;  
    [update](#update-1)(  
        states: [FeatureStates](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.FeatureStates/),  
        vtLayer: [VectorTileLayerLike](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.VectorTileLayerLike/),  
        imagePositions: { \[\_: string\]: [ImagePosition](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ImagePosition/) },  
        dashPositions: [Record](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Record/)<string, [DashEntry](https://docs.maptiler.com/sdk-js/api-reference/types/DashEntry/)\>,  
    ): void;  
    [upload](#upload-1)(context: [Context](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Context/)): void;  
    [uploadPending](#uploadpending-1)(): boolean;  
}

#### Implemented by

-   [CircleBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/)
-   [FillBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.FillBucket/)
-   [FillExtrusionBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.FillExtrusionBucket/)
-   [LineBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LineBucket/)
-   [SymbolBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolBucket/)

##### Index

### Properties[](#properties)

[hasDependencies](#hasdependencies) [layerIds](#layerids) [layers](#layers) [stateDependentLayerIds](#statedependentlayerids) [stateDependentLayers](#statedependentlayers)

### Methods[](#methods)

[destroy](#destroy) [isEmpty](#isempty) [populate](#populate) [update](#update) [upload](#upload) [uploadPending](#uploadpending)

## Properties[](#properties-1)

### hasDependencies[](#hasdependencies)

hasDependencies: boolean

### layerIds[](#layerids)

layerIds: string\[\]

### `Readonly`layers[](#layers)

layers: any\[\]

### `Readonly`stateDependentLayerIds[](#statedependentlayerids)

stateDependentLayerIds: string\[\]

### `Readonly`stateDependentLayers[](#statedependentlayers)

stateDependentLayers: any\[\]

## Methods[](#methods-1)

### destroy[](#destroy)

-   destroy(): void[](#destroy-1)
    
    Release the WebGL resources associated with the buffers. Note that because buckets are shared between layers having the same layout properties, they must be destroyed in groups (all buckets for a tile, or all symbol buckets).
    
    #### Returns void
    

### isEmpty[](#isempty)

-   isEmpty(): boolean[](#isempty-1)
    
    #### Returns boolean
    

### populate[](#populate)

-   populate(  
        features: [IndexedFeature](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.IndexedFeature/)\[\],  
        options: [PopulateParameters](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.PopulateParameters/),  
        canonical: [CanonicalTileID](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CanonicalTileID/),  
    ): void[](#populate-1)
    
    #### Parameters
    
    -   features: [IndexedFeature](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.IndexedFeature/)\[\]
    -   options: [PopulateParameters](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.PopulateParameters/)
    -   canonical: [CanonicalTileID](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CanonicalTileID/)
    
    #### Returns void
    

### update[](#update)

-   update(  
        states: [FeatureStates](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.FeatureStates/),  
        vtLayer: [VectorTileLayerLike](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.VectorTileLayerLike/),  
        imagePositions: { \[\_: string\]: [ImagePosition](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ImagePosition/) },  
        dashPositions: [Record](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Record/)<string, [DashEntry](https://docs.maptiler.com/sdk-js/api-reference/types/DashEntry/)\>,  
    ): void[](#update-1)
    
    #### Parameters
    
    -   states: [FeatureStates](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.FeatureStates/)
    -   vtLayer: [VectorTileLayerLike](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.VectorTileLayerLike/)
    -   imagePositions: { \[\_: string\]: [ImagePosition](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ImagePosition/) }
    -   dashPositions: [Record](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Record/)<string, [DashEntry](https://docs.maptiler.com/sdk-js/api-reference/types/DashEntry/)\>
    
    #### Returns void
    

### upload[](#upload)

-   upload(context: [Context](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Context/)): void[](#upload-1)
    
    #### Parameters
    
    -   context: [Context](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Context/)
    
    #### Returns void
    

### uploadPending[](#uploadpending)

-   uploadPending(): boolean[](#uploadpending-1)
    
    #### Returns boolean