---
title: "LineBucket | 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 LineBucket

#### 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)

[distance](#distance) [e1](#e1) [e2](#e2) [gradients](#gradients) [hasDependencies](#hasdependencies) [index](#index) [indexArray](#indexarray) [indexBuffer](#indexbuffer) [layerIds](#layerids) [layers](#layers) [layoutVertexArray](#layoutvertexarray) [layoutVertexArray2](#layoutvertexarray2) [layoutVertexBuffer](#layoutvertexbuffer) [layoutVertexBuffer2](#layoutvertexbuffer2) [lineClips?](#lineclips) [lineClipsArray](#lineclipsarray) [maxLineLength](#maxlinelength) [overscaling](#overscaling) [patternFeatures](#patternfeatures) [programConfigurations](#programconfigurations) [scaledDistance](#scaleddistance) [segments](#segments) [stateDependentLayerIds](#statedependentlayerids) [stateDependentLayers](#statedependentlayers) [totalDistance](#totaldistance) [uploaded](#uploaded) [zoom](#zoom)

### Methods[](#methods)

[addCurrentVertex](#addcurrentvertex) [addFeature](#addfeature) [addFeatures](#addfeatures) [addHalfVertex](#addhalfvertex) [addLine](#addline) [destroy](#destroy) [isEmpty](#isempty) [lineFeatureClips](#linefeatureclips) [populate](#populate) [update](#update) [updateDistance](#updatedistance) [updateScaledDistance](#updatescaleddistance) [upload](#upload) [uploadPending](#uploadpending)

## Constructors[](#constructors-1)

### constructor[](#constructor)

-   new LineBucket(options: [BucketParameters](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.BucketParameters/)<[LineStyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LineStyleLayer/)\>): LineBucket[](#constructorlinebucket)
    
    #### Parameters
    
    -   options: [BucketParameters](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.BucketParameters/)<[LineStyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LineStyleLayer/)\>
    
    #### Returns LineBucket
    

## Properties[](#properties-1)

### distance[](#distance)

distance: number

### e1[](#e1)

e1: number

### e2[](#e2)

e2: number

### gradients[](#gradients)

gradients: { \[x: string\]: [GradientTexture](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.GradientTexture/) }

### 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/)

### indexBuffer[](#indexbuffer)

indexBuffer: [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: [LineStyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LineStyleLayer/)\[\]

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: [LineLayoutArray](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LineLayoutArray/)

### layoutVertexArray2[](#layoutvertexarray2)

layoutVertexArray2: [LineExtLayoutArray](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LineExtLayoutArray/)

### layoutVertexBuffer[](#layoutvertexbuffer)

layoutVertexBuffer: [VertexBuffer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.VertexBuffer/)

### layoutVertexBuffer2[](#layoutvertexbuffer2)

layoutVertexBuffer2: [VertexBuffer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.VertexBuffer/)

### `Optional`lineClips[](#lineclips)

lineClips?: [LineClips](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.LineClips/)

### lineClipsArray[](#lineclipsarray)

lineClipsArray: [LineClips](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.LineClips/)\[\]

### maxLineLength[](#maxlinelength)

maxLineLength: number

### 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/)<[LineStyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LineStyleLayer/)\>

### scaledDistance[](#scaleddistance)

scaledDistance: number

### segments[](#segments)

segments: [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: any\[\]

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)

### totalDistance[](#totaldistance)

totalDistance: number

### uploaded[](#uploaded)

uploaded: boolean

### zoom[](#zoom)

zoom: number

## Methods[](#methods-1)

### addCurrentVertex[](#addcurrentvertex)

-   addCurrentVertex(  
        p: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/),  
        normal: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/),  
        endLeft: number,  
        endRight: number,  
        segment: [Segment](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Segment/),  
        round?: boolean,  
    ): void[](#addcurrentvertex-1)
    
    Add two vertices to the buffers.
    
    #### Parameters
    
    -   p: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)
        
        the line vertex to add buffer vertices for
        
    -   normal: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)
        
        vertex normal
        
    -   endLeft: number
        
        extrude to shift the left vertex along the line
        
    -   endRight: number
        
        extrude to shift the left vertex along the line
        
    -   segment: [Segment](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Segment/)
        
        the segment object to add the vertex to
        
    -   `Optional`round: boolean
        
        whether this is a round cap
        
    
    #### Returns void
    

### 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/) },  
        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/)\>,  
        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/) }
    -   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/)\>
    -   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/) },  
        dashPositions?: { \[\_: string\]: [DashEntry](https://docs.maptiler.com/sdk-js/api-reference/types/DashEntry/) },  
    ): 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/) }
    -   `Optional`dashPositions: { \[\_: string\]: [DashEntry](https://docs.maptiler.com/sdk-js/api-reference/types/DashEntry/) }
    
    #### Returns void
    

### addHalfVertex[](#addhalfvertex)

-   addHalfVertex(  
        \_\_namedParameters: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/),  
        extrudeX: number,  
        extrudeY: number,  
        round: boolean,  
        up: boolean,  
        dir: number,  
        segment: [Segment](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Segment/),  
    ): void[](#addhalfvertex-1)
    
    #### Parameters
    
    -   \_\_namedParameters: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)
    -   extrudeX: number
    -   extrudeY: number
    -   round: boolean
    -   up: boolean
    -   dir: number
    -   segment: [Segment](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Segment/)
    
    #### Returns void
    

### addLine[](#addline)

-   addLine(  
        vertices: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)\[\],  
        feature: [BucketFeature](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.BucketFeature/),  
        join: string,  
        cap: string,  
        miterLimit: number,  
        roundLimit: number,  
        canonical: [CanonicalTileID](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CanonicalTileID/) | undefined,  
        subdivisionGranularity: [SubdivisionGranularitySetting](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SubdivisionGranularitySetting/),  
    ): void[](#addline-1)
    
    #### Parameters
    
    -   vertices: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)\[\]
    -   feature: [BucketFeature](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.BucketFeature/)
    -   join: string
    -   cap: string
    -   miterLimit: number
    -   roundLimit: number
    -   canonical: [CanonicalTileID](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CanonicalTileID/) | undefined
    -   subdivisionGranularity: [SubdivisionGranularitySetting](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SubdivisionGranularitySetting/)
    
    #### 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)
    

### lineFeatureClips[](#linefeatureclips)

-   lineFeatureClips(feature: [BucketFeature](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.BucketFeature/)): [LineClips](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.LineClips/) | undefined[](#linefeatureclips-1)
    
    #### Parameters
    
    -   feature: [BucketFeature](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.BucketFeature/)
    
    #### Returns [LineClips](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.LineClips/) | undefined
    

### 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/) },  
        dashPositions: { \[\_: 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: { \[\_: string\]: [DashEntry](https://docs.maptiler.com/sdk-js/api-reference/types/DashEntry/) }
    
    #### 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)
    

### updateDistance[](#updatedistance)

-   updateDistance(prev: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/), next: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)): void[](#updatedistance-1)
    
    #### Parameters
    
    -   prev: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)
    -   next: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)
    
    #### Returns void
    

### updateScaledDistance[](#updatescaleddistance)

-   updateScaledDistance(): void[](#updatescaleddistance-1)
    
    #### 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
    
    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)