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

##### Index

### Constructors[](#constructors)

[constructor](#constructor)

### Properties[](#properties)

[collisionBoxArrays](#collisionboxarrays) [collisionCircleArrays](#collisioncirclearrays) [collisionGroups](#collisiongroups) [collisionIndex](#collisionindex) [commitTime](#committime) [fadeDuration](#fadeduration) [lastPlacementChangeTime](#lastplacementchangetime) [opacities](#opacities) [placedOrientations](#placedorientations) [placements](#placements) [prevPlacement](#prevplacement) [prevZoomAdjustment](#prevzoomadjustment) [retainedQueryData](#retainedquerydata) [stale](#stale) [terrain](#terrain) [transform](#transform) [variableOffsets](#variableoffsets) [zoomAtLastRecencyCheck](#zoomatlastrecencycheck)

### Methods[](#methods)

[attemptAnchorPlacement](#attemptanchorplacement) [commit](#commit) [getBucketParts](#getbucketparts) [hasTransitions](#hastransitions) [markUsedJustification](#markusedjustification) [markUsedOrientation](#markusedorientation) [placeLayerBucketPart](#placelayerbucketpart) [setStale](#setstale) [stillRecent](#stillrecent) [storeCollisionData](#storecollisiondata) [symbolFadeChange](#symbolfadechange) [updateBucketOpacities](#updatebucketopacities) [updateLayerOpacities](#updatelayeropacities) [zoomAdjustment](#zoomadjustment)

## Constructors[](#constructors-1)

### constructor[](#constructor)

-   new Placement(  
        transform: [ITransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ITransform/),  
        terrain: [Terrain](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Terrain/),  
        fadeDuration: number,  
        crossSourceCollisions: boolean,  
        prevPlacement?: Placement,  
    ): Placement[](#constructorplacement)
    
    #### Parameters
    
    -   transform: [ITransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ITransform/)
    -   terrain: [Terrain](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Terrain/)
    -   fadeDuration: number
    -   crossSourceCollisions: boolean
    -   `Optional`prevPlacement: Placement
    
    #### Returns Placement
    

## Properties[](#properties-1)

### collisionBoxArrays[](#collisionboxarrays)

collisionBoxArrays: Map<number, Map<number, { icon: number\[\]; text: number\[\] }\>\>

### collisionCircleArrays[](#collisioncirclearrays)

collisionCircleArrays: {  
    \[key: string\]: number\[\];  
    \[key: number\]: number\[\];  
    \[key: symbol\]: number\[\];  
}

### collisionGroups[](#collisiongroups)

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

### collisionIndex[](#collisionindex)

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

### commitTime[](#committime)

commitTime: number

### fadeDuration[](#fadeduration)

fadeDuration: number

### lastPlacementChangeTime[](#lastplacementchangetime)

lastPlacementChangeTime: number

### opacities[](#opacities)

opacities: {  
    \[key: string\]: [JointOpacityState](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.JointOpacityState/);  
    \[key: number\]: [JointOpacityState](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.JointOpacityState/);  
}

### placedOrientations[](#placedorientations)

placedOrientations: { \[key: string\]: number; \[key: number\]: number }

### placements[](#placements)

placements: { \[key: string\]: [JointPlacement](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.JointPlacement/); \[key: number\]: [JointPlacement](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.JointPlacement/) }

### prevPlacement[](#prevplacement)

prevPlacement: Placement

### prevZoomAdjustment[](#prevzoomadjustment)

prevZoomAdjustment: number

### retainedQueryData[](#retainedquerydata)

retainedQueryData: { \[\_: number\]: [RetainedQueryData](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.RetainedQueryData/) }

### stale[](#stale)

stale: boolean

### terrain[](#terrain)

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

### transform[](#transform)

transform: [IReadonlyTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.IReadonlyTransform/)

### variableOffsets[](#variableoffsets)

variableOffsets: {  
    \[key: string\]: [VariableOffset](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.VariableOffset/);  
    \[key: number\]: [VariableOffset](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.VariableOffset/);  
}

### zoomAtLastRecencyCheck[](#zoomatlastrecencycheck)

zoomAtLastRecencyCheck: number

## Methods[](#methods-1)

### attemptAnchorPlacement[](#attemptanchorplacement)

-   attemptAnchorPlacement(  
        textAnchorOffset: [TextAnchorOffsetStruct](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.TextAnchorOffsetStruct/),  
        textBox: [SingleCollisionBox](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.SingleCollisionBox/),  
        width: number,  
        height: number,  
        textBoxScale: number,  
        rotateWithMap: boolean,  
        pitchWithMap: boolean,  
        textPixelRatio: number,  
        tileID: [OverscaledTileID](https://docs.maptiler.com/sdk-js/api-reference/classes/OverscaledTileID/),  
        unwrappedTileID: any,  
        collisionGroup: [CollisionGroup](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CollisionGroup/),  
        textOverlapMode: [OverlapMode](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.OverlapMode/),  
        symbolInstance: [SymbolInstanceStruct](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolInstanceStruct/),  
        bucket: [SymbolBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolBucket/),  
        orientation: number,  
        translationText: \[number, number\],  
        translationIcon: \[number, number\],  
        iconBox?: [SingleCollisionBox](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.SingleCollisionBox/) | null,  
        getElevation?: (x: number, y: number) \=> number,  
        simpleProjectionMatrix?: [mat4](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.mat4/),  
    ): { placedGlyphBoxes: [PlacedBox](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.PlacedBox/); shift: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/) }[](#attemptanchorplacement-1)
    
    #### Parameters
    
    -   textAnchorOffset: [TextAnchorOffsetStruct](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.TextAnchorOffsetStruct/)
    -   textBox: [SingleCollisionBox](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.SingleCollisionBox/)
    -   width: number
    -   height: number
    -   textBoxScale: number
    -   rotateWithMap: boolean
    -   pitchWithMap: boolean
    -   textPixelRatio: number
    -   tileID: [OverscaledTileID](https://docs.maptiler.com/sdk-js/api-reference/classes/OverscaledTileID/)
    -   unwrappedTileID: any
    -   collisionGroup: [CollisionGroup](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CollisionGroup/)
    -   textOverlapMode: [OverlapMode](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.OverlapMode/)
    -   symbolInstance: [SymbolInstanceStruct](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolInstanceStruct/)
    -   bucket: [SymbolBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolBucket/)
    -   orientation: number
    -   translationText: \[number, number\]
    -   translationIcon: \[number, number\]
    -   `Optional`iconBox: [SingleCollisionBox](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.SingleCollisionBox/) | null
    -   `Optional`getElevation: (x: number, y: number) \=> number
    -   `Optional`simpleProjectionMatrix: [mat4](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.mat4/)
    
    #### Returns { placedGlyphBoxes: [PlacedBox](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.PlacedBox/); shift: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/) }
    

### commit[](#commit)

-   commit(now: number): void[](#commit-1)
    
    #### Parameters
    
    -   now: number
    
    #### Returns void
    

### getBucketParts[](#getbucketparts)

-   getBucketParts(  
        results: [BucketPart](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.BucketPart/)\[\],  
        styleLayer: [StyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/StyleLayer/),  
        tile: [Tile](https://docs.maptiler.com/sdk-js/api-reference/classes/Tile/),  
        sortAcrossTiles: boolean,  
    ): void[](#getbucketparts-1)
    
    #### Parameters
    
    -   results: [BucketPart](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.BucketPart/)\[\]
    -   styleLayer: [StyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/StyleLayer/)
    -   tile: [Tile](https://docs.maptiler.com/sdk-js/api-reference/classes/Tile/)
    -   sortAcrossTiles: boolean
    
    #### Returns void
    

### hasTransitions[](#hastransitions)

-   hasTransitions(now: number): boolean[](#hastransitions-1)
    
    #### Parameters
    
    -   now: number
    
    #### Returns boolean
    

### markUsedJustification[](#markusedjustification)

-   markUsedJustification(  
        bucket: [SymbolBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolBucket/),  
        placedAnchor:  
            | "top"  
            | "bottom"  
            | "right"  
            | "left"  
            | "top-left"  
            | "top-right"  
            | "bottom-left"  
            | "bottom-right"  
            | "center",  
        symbolInstance: [SymbolInstanceStruct](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolInstanceStruct/),  
        orientation: number,  
    ): void[](#markusedjustification-1)
    
    #### Parameters
    
    -   bucket: [SymbolBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolBucket/)
    -   placedAnchor:  
            | "top"  
            | "bottom"  
            | "right"  
            | "left"  
            | "top-left"  
            | "top-right"  
            | "bottom-left"  
            | "bottom-right"  
            | "center"
    -   symbolInstance: [SymbolInstanceStruct](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolInstanceStruct/)
    -   orientation: number
    
    #### Returns void
    

### markUsedOrientation[](#markusedorientation)

-   markUsedOrientation(  
        bucket: [SymbolBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolBucket/),  
        orientation: number,  
        symbolInstance: [SymbolInstanceStruct](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolInstanceStruct/),  
    ): void[](#markusedorientation-1)
    
    #### Parameters
    
    -   bucket: [SymbolBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolBucket/)
    -   orientation: number
    -   symbolInstance: [SymbolInstanceStruct](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolInstanceStruct/)
    
    #### Returns void
    

### placeLayerBucketPart[](#placelayerbucketpart)

-   placeLayerBucketPart(  
        bucketPart: [BucketPart](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.BucketPart/),  
        seenCrossTileIDs: { \[key: string\]: boolean; \[key: number\]: boolean },  
        showCollisionBoxes: boolean,  
    ): void[](#placelayerbucketpart-1)
    
    #### Parameters
    
    -   bucketPart: [BucketPart](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.BucketPart/)
    -   seenCrossTileIDs: { \[key: string\]: boolean; \[key: number\]: boolean }
    -   showCollisionBoxes: boolean
    
    #### Returns void
    

### setStale[](#setstale)

-   setStale(): void[](#setstale-1)
    
    #### Returns void
    

### stillRecent[](#stillrecent)

-   stillRecent(now: number, zoom: number): boolean[](#stillrecent-1)
    
    #### Parameters
    
    -   now: number
    -   zoom: number
    
    #### Returns boolean
    

### storeCollisionData[](#storecollisiondata)

-   storeCollisionData(  
        bucketInstanceId: number,  
        symbolIndex: number,  
        collisionArrays: [CollisionArrays](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CollisionArrays/),  
        placedGlyphBoxes: [PlacedBox](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.PlacedBox/),  
        placedIconBoxes: [PlacedBox](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.PlacedBox/),  
        placedGlyphCircles: [PlacedCircles](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.PlacedCircles/),  
    ): void[](#storecollisiondata-1)
    
    #### Parameters
    
    -   bucketInstanceId: number
    -   symbolIndex: number
    -   collisionArrays: [CollisionArrays](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CollisionArrays/)
    -   placedGlyphBoxes: [PlacedBox](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.PlacedBox/)
    -   placedIconBoxes: [PlacedBox](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.PlacedBox/)
    -   placedGlyphCircles: [PlacedCircles](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.PlacedCircles/)
    
    #### Returns void
    

### symbolFadeChange[](#symbolfadechange)

-   symbolFadeChange(now: number): number[](#symbolfadechange-1)
    
    #### Parameters
    
    -   now: number
    
    #### Returns number
    

### updateBucketOpacities[](#updatebucketopacities)

-   updateBucketOpacities(  
        bucket: [SymbolBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolBucket/),  
        tileID: [OverscaledTileID](https://docs.maptiler.com/sdk-js/api-reference/classes/OverscaledTileID/),  
        seenCrossTileIDs: { \[key: string\]: boolean; \[key: number\]: boolean },  
        collisionBoxArray?: [CollisionBoxArray](https://docs.maptiler.com/sdk-js/api-reference/classes/CollisionBoxArray/) | null,  
    ): void[](#updatebucketopacities-1)
    
    #### Parameters
    
    -   bucket: [SymbolBucket](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolBucket/)
    -   tileID: [OverscaledTileID](https://docs.maptiler.com/sdk-js/api-reference/classes/OverscaledTileID/)
    -   seenCrossTileIDs: { \[key: string\]: boolean; \[key: number\]: boolean }
    -   `Optional`collisionBoxArray: [CollisionBoxArray](https://docs.maptiler.com/sdk-js/api-reference/classes/CollisionBoxArray/) | null
    
    #### Returns void
    

### updateLayerOpacities[](#updatelayeropacities)

-   updateLayerOpacities(styleLayer: [StyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/StyleLayer/), tiles: [Tile](https://docs.maptiler.com/sdk-js/api-reference/classes/Tile/)\[\]): void[](#updatelayeropacities-1)
    
    #### Parameters
    
    -   styleLayer: [StyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/StyleLayer/)
    -   tiles: [Tile](https://docs.maptiler.com/sdk-js/api-reference/classes/Tile/)\[\]
    
    #### Returns void
    

### zoomAdjustment[](#zoomadjustment)

-   zoomAdjustment(zoom: number): number[](#zoomadjustment-1)
    
    #### Parameters
    
    -   zoom: number
    
    #### Returns number