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

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

#### Hierarchy ([View Summary](https://docs.maptiler.com/sdk-js/api-reference/hierarchy/#Externals.HeatmapBucket))

-   [CircleBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/)<[HeatmapStyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.HeatmapStyleLayer/)\>
    -   HeatmapBucket

##### Index

### Constructors[](#constructors)

[constructor](#constructor)

### Properties[](#properties)

[hasDependencies](#hasdependencies) [index](#index) [indexArray](#indexarray) [indexBuffer](#indexbuffer) [layerIds](#layerids) [layers](#layers) [layoutVertexArray](#layoutvertexarray) [layoutVertexBuffer](#layoutvertexbuffer) [overscaling](#overscaling) [programConfigurations](#programconfigurations) [segments](#segments) [stateDependentLayerIds](#statedependentlayerids) [stateDependentLayers](#statedependentlayers) [uploaded](#uploaded) [zoom](#zoom)

### Methods[](#methods)

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

## Constructors[](#constructors-1)

### constructor[](#constructor)

-   new HeatmapBucket(options: [BucketParameters](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.BucketParameters/)<[HeatmapStyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.HeatmapStyleLayer/)\>): HeatmapBucket[](#constructorheatmapbucket)
    
    #### Parameters
    
    -   options: [BucketParameters](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.BucketParameters/)<[HeatmapStyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.HeatmapStyleLayer/)\>
    
    #### Returns HeatmapBucket
    
    Inherited from [CircleBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/).[constructor](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/#constructor)
    

## Properties[](#properties-1)

### hasDependencies[](#hasdependencies)

hasDependencies: boolean

Inherited from [CircleBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/).[hasDependencies](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/#hasdependencies)

### index[](#index)

index: number

Inherited from [CircleBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/).[index](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/#index)

### indexArray[](#indexarray)

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

Inherited from [CircleBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/).[indexArray](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/#indexarray)

### indexBuffer[](#indexbuffer)

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

Inherited from [CircleBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/).[indexBuffer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/#indexbuffer)

### layerIds[](#layerids)

layerIds: string\[\]

Inherited from [CircleBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/).[layerIds](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/#layerids)

### layers[](#layers)

layers: [HeatmapStyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.HeatmapStyleLayer/)\[\]

Overrides [CircleBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/).[layers](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/#layers)

### layoutVertexArray[](#layoutvertexarray)

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

Inherited from [CircleBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/).[layoutVertexArray](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/#layoutvertexarray)

### layoutVertexBuffer[](#layoutvertexbuffer)

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

Inherited from [CircleBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/).[layoutVertexBuffer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/#layoutvertexbuffer)

### overscaling[](#overscaling)

overscaling: number

Inherited from [CircleBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/).[overscaling](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/#overscaling)

### programConfigurations[](#programconfigurations)

programConfigurations: [ProgramConfigurationSet](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ProgramConfigurationSet/)<[HeatmapStyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.HeatmapStyleLayer/)\>

Inherited from [CircleBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/).[programConfigurations](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/#programconfigurations)

### segments[](#segments)

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

Inherited from [CircleBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/).[segments](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/#segments)

### stateDependentLayerIds[](#statedependentlayerids)

stateDependentLayerIds: string\[\]

Inherited from [CircleBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/).[stateDependentLayerIds](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/#statedependentlayerids)

### stateDependentLayers[](#statedependentlayers)

stateDependentLayers: [HeatmapStyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.HeatmapStyleLayer/)\[\]

Inherited from [CircleBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/).[stateDependentLayers](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/#statedependentlayers)

### uploaded[](#uploaded)

uploaded: boolean

Inherited from [CircleBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/).[uploaded](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/#uploaded)

### zoom[](#zoom)

zoom: number

Inherited from [CircleBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/).[zoom](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/#zoom)

## 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/),  
        granularity?: [CircleGranularity](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CircleGranularity/),  
    ): 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/)
    -   `Optional`granularity: [CircleGranularity](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CircleGranularity/)
    
    #### Returns void
    
    Inherited from [CircleBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/).[addFeature](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/#addfeature)
    

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

### isEmpty[](#isempty)

-   isEmpty(): boolean[](#isempty-1)
    
    #### Returns boolean
    
    Inherited from [CircleBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/).[isEmpty](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/#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
    
    Inherited from [CircleBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/).[populate](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/#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
    
    Inherited from [CircleBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/).[update](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/#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
    
    Inherited from [CircleBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/).[upload](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/#upload)
    

### uploadPending[](#uploadpending)

-   uploadPending(): boolean[](#uploadpending-1)
    
    #### Returns boolean
    
    Inherited from [CircleBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/).[uploadPending](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleBucket/#uploadpending)