--- title: "FillBucket | 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. # Class FillBucket #### 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. #### Implements - [Bucket](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Bucket/) ##### Index ### Constructors[](#constructors) [constructor](#constructor) ### Properties[](#properties) [hasDependencies](#hasdependencies) [index](#index) [indexArray](#indexarray) [indexArray2](#indexarray2) [indexBuffer](#indexbuffer) [indexBuffer2](#indexbuffer2) [layerIds](#layerids) [layers](#layers) [layoutVertexArray](#layoutvertexarray) [layoutVertexBuffer](#layoutvertexbuffer) [overscaling](#overscaling) [patternFeatures](#patternfeatures) [programConfigurations](#programconfigurations) [segments](#segments) [segments2](#segments2) [stateDependentLayerIds](#statedependentlayerids) [stateDependentLayers](#statedependentlayers) [uploaded](#uploaded) [zoom](#zoom) ### Methods[](#methods) [addFeature](#addfeature) [addFeatures](#addfeatures) [destroy](#destroy) [isEmpty](#isempty) [populate](#populate) [update](#update) [upload](#upload) [uploadPending](#uploadpending) ## Constructors[](#constructors-1) ### constructor[](#constructor) - new FillBucket(options: [BucketParameters](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.BucketParameters/)<[FillStyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.FillStyleLayer/)\>): FillBucket[](#constructorfillbucket) #### Parameters - options: [BucketParameters](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.BucketParameters/)<[FillStyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.FillStyleLayer/)\> #### Returns FillBucket ## Properties[](#properties-1) ### hasDependencies[](#hasdependencies) hasDependencies: boolean Implementation of [Bucket](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Bucket/).[hasDependencies](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Bucket/#hasdependencies) ### index[](#index) index: number ### indexArray[](#indexarray) indexArray: [TriangleIndexArray](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.TriangleIndexArray/) ### indexArray2[](#indexarray2) indexArray2: [LineIndexArray](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LineIndexArray/) ### indexBuffer[](#indexbuffer) indexBuffer: [IndexBuffer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.IndexBuffer/) ### indexBuffer2[](#indexbuffer2) indexBuffer2: [IndexBuffer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.IndexBuffer/) ### layerIds[](#layerids) layerIds: string\[\] Implementation of [Bucket](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Bucket/).[layerIds](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Bucket/#layerids) ### layers[](#layers) layers: [FillStyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.FillStyleLayer/)\[\] Implementation of [Bucket](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Bucket/).[layers](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Bucket/#layers) ### layoutVertexArray[](#layoutvertexarray) layoutVertexArray: [FillLayoutArray](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.FillLayoutArray/) ### layoutVertexBuffer[](#layoutvertexbuffer) layoutVertexBuffer: [VertexBuffer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.VertexBuffer/) ### overscaling[](#overscaling) overscaling: number ### patternFeatures[](#patternfeatures) patternFeatures: [BucketFeature](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.BucketFeature/)\[\] ### programConfigurations[](#programconfigurations) programConfigurations: [ProgramConfigurationSet](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ProgramConfigurationSet/)<[FillStyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.FillStyleLayer/)\> ### segments[](#segments) segments: [SegmentVector](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SegmentVector/) ### segments2[](#segments2) segments2: [SegmentVector](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SegmentVector/) ### stateDependentLayerIds[](#statedependentlayerids) stateDependentLayerIds: string\[\] Implementation of [Bucket](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Bucket/).[stateDependentLayerIds](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Bucket/#statedependentlayerids) ### stateDependentLayers[](#statedependentlayers) stateDependentLayers: [FillStyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.FillStyleLayer/)\[\] Implementation of [Bucket](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Bucket/).[stateDependentLayers](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Bucket/#statedependentlayers) ### uploaded[](#uploaded) uploaded: boolean ### zoom[](#zoom) zoom: number ## Methods[](#methods-1) ### addFeature[](#addfeature) - addFeature(     feature: [BucketFeature](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.BucketFeature/),     geometry: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)\[\]\[\],     index: number,     canonical: [CanonicalTileID](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CanonicalTileID/),     imagePositions: { \[\_: string\]: [ImagePosition](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ImagePosition/) },     subdivisionGranularity: [SubdivisionGranularitySetting](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SubdivisionGranularitySetting/), ): void[](#addfeature-1) #### Parameters - feature: [BucketFeature](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.BucketFeature/) - geometry: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)\[\]\[\] - index: number - canonical: [CanonicalTileID](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CanonicalTileID/) - imagePositions: { \[\_: string\]: [ImagePosition](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ImagePosition/) } - subdivisionGranularity: [SubdivisionGranularitySetting](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SubdivisionGranularitySetting/) #### Returns void ### addFeatures[](#addfeatures) - addFeatures(     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/),     imagePositions: { \[\_: string\]: [ImagePosition](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ImagePosition/) }, ): void[](#addfeatures-1) #### Parameters - 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/) - imagePositions: { \[\_: string\]: [ImagePosition](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ImagePosition/) } #### Returns void ### 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 Implementation of [Bucket](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Bucket/).[destroy](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Bucket/#destroy) ### isEmpty[](#isempty) - isEmpty(): boolean[](#isempty-1) #### Returns boolean Implementation of [Bucket](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Bucket/).[isEmpty](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Bucket/#isempty) ### 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 Implementation of [Bucket](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Bucket/).[populate](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Bucket/#populate) ### 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/) }, ): 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/) } #### Returns void Implementation of [Bucket](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Bucket/).[update](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Bucket/#update) ### 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 Implementation of [Bucket](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Bucket/).[upload](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Bucket/#upload) ### uploadPending[](#uploadpending) - uploadPending(): boolean[](#uploadpending-1) #### Returns boolean Implementation of [Bucket](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Bucket/).[uploadPending](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Bucket/#uploadpending)