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

An `EdgeInset` object represents screen space padding applied to the edges of the viewport. This shifts the apparent center or the vanishing point of the map. This is useful for adding floating UI elements on top of the map and having the vanishing point shift as UI elements resize.

##### Index

### Constructors[](#constructors)

[constructor](#constructor)

### Properties[](#properties)

[bottom](#bottom) [left](#left) [right](#right) [top](#top)

### Methods[](#methods)

[clone](#clone) [equals](#equals) [getCenter](#getcenter) [interpolate](#interpolate) [toJSON](#tojson)

## Constructors[](#constructors-1)

### constructor[](#constructor)

-   new EdgeInsets(  
        top?: number,  
        bottom?: number,  
        left?: number,  
        right?: number,  
    ): EdgeInsets[](#constructoredgeinsets)
    
    #### Parameters
    
    -   `Optional`top: number
    -   `Optional`bottom: number
    -   `Optional`left: number
    -   `Optional`right: number
    
    #### Returns EdgeInsets
    

## Properties[](#properties-1)

### bottom[](#bottom)

bottom: number

#### Default Value[](#default-value)

```typescript
0
```

### left[](#left)

left: number

#### Default Value[](#default-value-1)

```typescript
0
```

### right[](#right)

right: number

#### Default Value[](#default-value-2)

```typescript
0
```

### top[](#top)

top: number

#### Default Value[](#default-value-3)

```typescript
0
```

## Methods[](#methods-1)

### clone[](#clone)

-   clone(): EdgeInsets[](#clone-1)
    
    #### Returns EdgeInsets
    

### equals[](#equals)

-   equals(other: [PaddingOptions](https://docs.maptiler.com/sdk-js/api-reference/types/PaddingOptions/)): boolean[](#equals-1)
    
    #### Parameters
    
    -   other: [PaddingOptions](https://docs.maptiler.com/sdk-js/api-reference/types/PaddingOptions/)
    
    #### Returns boolean
    

### getCenter[](#getcenter)

-   getCenter(width: number, height: number): [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)[](#getcenter-1)
    
    Utility method that computes the new apparent center or vanishing point after applying insets. This is in pixels and with the top left being (0.0) and +y being downwards.
    
    #### Parameters
    
    -   width: number
        
        the width
        
    -   height: number
        
        the height
        
    
    #### Returns [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)
    
    the point
    

### interpolate[](#interpolate)

-   interpolate(  
        start: EdgeInsets | [PaddingOptions](https://docs.maptiler.com/sdk-js/api-reference/types/PaddingOptions/),  
        target: [PaddingOptions](https://docs.maptiler.com/sdk-js/api-reference/types/PaddingOptions/),  
        t: number,  
    ): this[](#interpolate-1)
    
    Interpolates the inset in-place. This maintains the current inset value for any inset not present in `target`.
    
    #### Parameters
    
    -   start: EdgeInsets | [PaddingOptions](https://docs.maptiler.com/sdk-js/api-reference/types/PaddingOptions/)
        
        interpolation start
        
    -   target: [PaddingOptions](https://docs.maptiler.com/sdk-js/api-reference/types/PaddingOptions/)
        
        interpolation target
        
    -   t: number
        
        interpolation step/weight
        
    
    #### Returns this
    
    the insets
    

### toJSON[](#tojson)

-   toJSON(): [Complete](https://docs.maptiler.com/sdk-js/api-reference/types/Complete/)<[PaddingOptions](https://docs.maptiler.com/sdk-js/api-reference/types/PaddingOptions/)\>[](#tojson-1)
    
    Returns the current state as json, useful when you want to have a read-only representation of the inset.
    
    #### Returns [Complete](https://docs.maptiler.com/sdk-js/api-reference/types/Complete/)<[PaddingOptions](https://docs.maptiler.com/sdk-js/api-reference/types/PaddingOptions/)\>
    
    state as json