--- title: "SymbolBucket | 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 SymbolBucket #### 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) [allowVerticalPlacement](#allowverticalplacement) [bucketInstanceId](#bucketinstanceid) [canOverlap](#canoverlap) [collisionArrays](#collisionarrays) [collisionBoxArray](#collisionboxarray) [collisionCircleArray](#collisioncirclearray) [compareText](#comparetext) [fadeStartTime](#fadestarttime) [features](#features) [featureSortOrder](#featuresortorder) [glyphOffsetArray](#glyphoffsetarray) [hasDependencies](#hasdependencies) [hasRTLText](#hasrtltext) [icon](#icon) [iconCollisionBox](#iconcollisionbox) [iconsInText](#iconsintext) [iconSizeData](#iconsizedata) [iconsNeedLinear](#iconsneedlinear) [index](#index) [justReloaded](#justreloaded) [layerIds](#layerids) [layers](#layers) [lineVertexArray](#linevertexarray) [overscaling](#overscaling) [pixelRatio](#pixelratio) [sdfIcons](#sdficons) [sortedAngle](#sortedangle) [sortFeaturesByKey](#sortfeaturesbykey) [sortFeaturesByY](#sortfeaturesbyy) [sortKeyRanges](#sortkeyranges) [sourceID](#sourceid) [sourceLayerIndex](#sourcelayerindex) [stateDependentLayerIds](#statedependentlayerids) [stateDependentLayers](#statedependentlayers) [symbolInstanceIndexes](#symbolinstanceindexes) [symbolInstances](#symbolinstances) [text](#text) [textAnchorOffsets](#textanchoroffsets) [textCollisionBox](#textcollisionbox) [textSizeData](#textsizedata) [tilePixelRatio](#tilepixelratio) [uploaded](#uploaded) [writingModes](#writingmodes) [zoom](#zoom) [addDynamicAttributes](#adddynamicattributes) [MAX\_GLYPHS](#max_glyphs) ### Methods[](#methods) [addCollisionDebugVertices](#addcollisiondebugvertices) [addDebugCollisionBoxes](#adddebugcollisionboxes) [addIndicesForPlacedSymbol](#addindicesforplacedsymbol) [addSymbols](#addsymbols) [addToLineVertexArray](#addtolinevertexarray) [addToSortKeyRanges](#addtosortkeyranges) [createArrays](#createarrays) [deserializeCollisionBoxes](#deserializecollisionboxes) [destroy](#destroy) [destroyDebugData](#destroydebugdata) [generateCollisionDebugBuffers](#generatecollisiondebugbuffers) [getSortedSymbolIndexes](#getsortedsymbolindexes) [hasDebugData](#hasdebugdata) [hasIconCollisionBoxData](#hasiconcollisionboxdata) [hasIconData](#hasicondata) [hasTextCollisionBoxData](#hastextcollisionboxdata) [hasTextData](#hastextdata) [isEmpty](#isempty) [populate](#populate) [sortFeatures](#sortfeatures) [update](#update) [upload](#upload) [uploadPending](#uploadpending) ## Constructors[](#constructors-1) ### constructor[](#constructor) - new SymbolBucket(options: [BucketParameters](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.BucketParameters/)<[SymbolStyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolStyleLayer/)\>): SymbolBucket[](#constructorsymbolbucket) #### Parameters - options: [BucketParameters](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.BucketParameters/)<[SymbolStyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolStyleLayer/)\> #### Returns SymbolBucket ## Properties[](#properties-1) ### allowVerticalPlacement[](#allowverticalplacement) allowVerticalPlacement: boolean ### bucketInstanceId[](#bucketinstanceid) bucketInstanceId: number ### canOverlap[](#canoverlap) canOverlap: boolean ### collisionArrays[](#collisionarrays) collisionArrays: [CollisionArrays](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CollisionArrays/)\[\] ### collisionBoxArray[](#collisionboxarray) collisionBoxArray: [CollisionBoxArray](https://docs.maptiler.com/sdk-js/api-reference/classes/CollisionBoxArray/) ### collisionCircleArray[](#collisioncirclearray) collisionCircleArray: number\[\] ### compareText[](#comparetext) compareText: { \[\_: string\]: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)\[\] } ### fadeStartTime[](#fadestarttime) fadeStartTime: number ### features[](#features) features: [SymbolFeature](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.SymbolFeature/)\[\] ### featureSortOrder[](#featuresortorder) featureSortOrder: number\[\] ### glyphOffsetArray[](#glyphoffsetarray) glyphOffsetArray: [GlyphOffsetArray](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.GlyphOffsetArray/) ### 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) ### hasRTLText[](#hasrtltext) hasRTLText: boolean ### icon[](#icon) icon: [SymbolBuffers](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolBuffers/) ### iconCollisionBox[](#iconcollisionbox) iconCollisionBox: [CollisionBuffers](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CollisionBuffers/) ### iconsInText[](#iconsintext) iconsInText: boolean ### iconSizeData[](#iconsizedata) iconSizeData: [SizeData](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.SizeData/) ### iconsNeedLinear[](#iconsneedlinear) iconsNeedLinear: boolean ### index[](#index) index: number ### justReloaded[](#justreloaded) justReloaded: boolean ### 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: [SymbolStyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolStyleLayer/)\[\] 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) ### lineVertexArray[](#linevertexarray) lineVertexArray: [SymbolLineVertexArray](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolLineVertexArray/) ### overscaling[](#overscaling) overscaling: number ### pixelRatio[](#pixelratio) pixelRatio: number ### sdfIcons[](#sdficons) sdfIcons: boolean ### sortedAngle[](#sortedangle) sortedAngle: number ### sortFeaturesByKey[](#sortfeaturesbykey) sortFeaturesByKey: boolean ### sortFeaturesByY[](#sortfeaturesbyy) sortFeaturesByY: boolean ### sortKeyRanges[](#sortkeyranges) sortKeyRanges: [SortKeyRange](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.SortKeyRange/)\[\] ### sourceID[](#sourceid) sourceID: string ### sourceLayerIndex[](#sourcelayerindex) sourceLayerIndex: number ### 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: [SymbolStyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolStyleLayer/)\[\] 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) ### symbolInstanceIndexes[](#symbolinstanceindexes) symbolInstanceIndexes: number\[\] ### symbolInstances[](#symbolinstances) symbolInstances: [SymbolInstanceArray](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolInstanceArray/) ### text[](#text) text: [SymbolBuffers](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolBuffers/) ### textAnchorOffsets[](#textanchoroffsets) textAnchorOffsets: [TextAnchorOffsetArray](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.TextAnchorOffsetArray/) ### textCollisionBox[](#textcollisionbox) textCollisionBox: [CollisionBuffers](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CollisionBuffers/) ### textSizeData[](#textsizedata) textSizeData: [SizeData](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.SizeData/) ### tilePixelRatio[](#tilepixelratio) tilePixelRatio: number ### uploaded[](#uploaded) uploaded: boolean ### writingModes[](#writingmodes) writingModes: [WritingMode](https://docs.maptiler.com/sdk-js/api-reference/enums/Externals.WritingMode/)\[\] ### zoom[](#zoom) zoom: number ### `Static`addDynamicAttributes[](#adddynamicattributes) addDynamicAttributes: (     dynamicLayoutVertexArray: [StructArray](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.StructArray/),     p: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/),     angle: number, ) \=> void ### `Static`MAX\_GLYPHS[](#max_glyphs) MAX\_GLYPHS: number ## Methods[](#methods-1) ### addCollisionDebugVertices[](#addcollisiondebugvertices) - addCollisionDebugVertices(     x1: number,     y1: number,     x2: number,     y2: number,     arrays: [CollisionBuffers](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CollisionBuffers/),     boxAnchorPoint: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/),     symbolInstance: [SymbolInstanceStruct](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolInstanceStruct/), ): void[](#addcollisiondebugvertices-1) #### Parameters - x1: number - y1: number - x2: number - y2: number - arrays: [CollisionBuffers](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CollisionBuffers/) - boxAnchorPoint: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/) - symbolInstance: [SymbolInstanceStruct](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolInstanceStruct/) #### Returns void ### addDebugCollisionBoxes[](#adddebugcollisionboxes) - addDebugCollisionBoxes(     startIndex: number,     endIndex: number,     symbolInstance: [SymbolInstanceStruct](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolInstanceStruct/),     isText: boolean, ): void[](#adddebugcollisionboxes-1) #### Parameters - startIndex: number - endIndex: number - symbolInstance: [SymbolInstanceStruct](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolInstanceStruct/) - isText: boolean #### Returns void ### addIndicesForPlacedSymbol[](#addindicesforplacedsymbol) - addIndicesForPlacedSymbol(     iconOrText: [SymbolBuffers](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolBuffers/),     placedSymbolIndex: number, ): void[](#addindicesforplacedsymbol-1) #### Parameters - iconOrText: [SymbolBuffers](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolBuffers/) - placedSymbolIndex: number #### Returns void ### addSymbols[](#addsymbols) - addSymbols(     arrays: [SymbolBuffers](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolBuffers/),     quads: [SymbolQuad](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.SymbolQuad/)\[\],     sizeVertex: any,     lineOffset: \[number, number\],     alongLine: boolean,     feature: [SymbolFeature](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.SymbolFeature/),     writingMode: [WritingMode](https://docs.maptiler.com/sdk-js/api-reference/enums/Externals.WritingMode/),     labelAnchor: [Anchor](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Anchor/),     lineStartIndex: number,     lineLength: number,     associatedIconIndex: number,     canonical: [CanonicalTileID](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CanonicalTileID/), ): void[](#addsymbols-1) #### Parameters - arrays: [SymbolBuffers](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolBuffers/) - quads: [SymbolQuad](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.SymbolQuad/)\[\] - sizeVertex: any - lineOffset: \[number, number\] - alongLine: boolean - feature: [SymbolFeature](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.SymbolFeature/) - writingMode: [WritingMode](https://docs.maptiler.com/sdk-js/api-reference/enums/Externals.WritingMode/) - labelAnchor: [Anchor](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Anchor/) - lineStartIndex: number - lineLength: number - associatedIconIndex: number - canonical: [CanonicalTileID](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CanonicalTileID/) #### Returns void ### addToLineVertexArray[](#addtolinevertexarray) - addToLineVertexArray(     anchor: [Anchor](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Anchor/),     line: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)\[\], ): { lineLength: number; lineStartIndex: number }[](#addtolinevertexarray-1) #### Parameters - anchor: [Anchor](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Anchor/) - line: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)\[\] #### Returns { lineLength: number; lineStartIndex: number } ### addToSortKeyRanges[](#addtosortkeyranges) - addToSortKeyRanges(symbolInstanceIndex: number, sortKey: number): void[](#addtosortkeyranges-1) #### Parameters - symbolInstanceIndex: number - sortKey: number #### Returns void ### createArrays[](#createarrays) - createArrays(): void[](#createarrays-1) #### Returns void ### deserializeCollisionBoxes[](#deserializecollisionboxes) - deserializeCollisionBoxes(collisionBoxArray: [CollisionBoxArray](https://docs.maptiler.com/sdk-js/api-reference/classes/CollisionBoxArray/)): void[](#deserializecollisionboxes-1) #### Parameters - collisionBoxArray: [CollisionBoxArray](https://docs.maptiler.com/sdk-js/api-reference/classes/CollisionBoxArray/) #### 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) ### destroyDebugData[](#destroydebugdata) - destroyDebugData(): void[](#destroydebugdata-1) #### Returns void ### generateCollisionDebugBuffers[](#generatecollisiondebugbuffers) - generateCollisionDebugBuffers(): void[](#generatecollisiondebugbuffers-1) #### Returns void ### getSortedSymbolIndexes[](#getsortedsymbolindexes) - getSortedSymbolIndexes(angle: number): any\[\][](#getsortedsymbolindexes-1) #### Parameters - angle: number #### Returns any\[\] ### hasDebugData[](#hasdebugdata) - hasDebugData(): [CollisionBuffers](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CollisionBuffers/)[](#hasdebugdata-1) #### Returns [CollisionBuffers](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CollisionBuffers/) ### hasIconCollisionBoxData[](#hasiconcollisionboxdata) - hasIconCollisionBoxData(): boolean[](#hasiconcollisionboxdata-1) #### Returns boolean ### hasIconData[](#hasicondata) - hasIconData(): boolean[](#hasicondata-1) #### Returns boolean ### hasTextCollisionBoxData[](#hastextcollisionboxdata) - hasTextCollisionBoxData(): boolean[](#hastextcollisionboxdata-1) #### Returns boolean ### hasTextData[](#hastextdata) - hasTextData(): boolean[](#hastextdata-1) #### Returns boolean ### 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) ### sortFeatures[](#sortfeatures) - sortFeatures(angle: number): void[](#sortfeatures-1) #### Parameters - angle: number #### 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/) }, ): 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)