---
title: "DOMRect | 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.

# Interface DOMRect

A **`DOMRect`** describes the size and position of a rectangle.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRect)

interface DOMRect {  
    [bottom](#bottom): number;  
    [height](#height): number;  
    [left](#left): number;  
    [right](#right): number;  
    [top](#top): number;  
    [width](#width): number;  
    [x](#x): number;  
    [y](#y): number;  
    [toJSON](#tojson-1)(): any;  
}

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

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

##### Index

### Properties[](#properties)

[bottom](#bottom) [height](#height) [left](#left) [right](#right) [top](#top) [width](#width) [x](#x) [y](#y)

### Methods[](#methods)

[toJSON](#tojson)

## Properties[](#properties-1)

### `Readonly`bottom[](#bottom)

bottom: number

The **`bottom`** read-only property of the DOMRectReadOnly interface returns the bottom coordinate value of the DOMRect. (Has the same value as y + height, or y if height is negative.)

[MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/bottom)

Inherited from [DOMRectReadOnly](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMRectReadOnly/).[bottom](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMRectReadOnly/#bottom)

### height[](#height)

height: number

The **`height`** property of the DOMRect interface represents the height of the rectangle. The value can be negative.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRect/height)

Overrides [DOMRectReadOnly](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMRectReadOnly/).[height](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMRectReadOnly/#height)

### `Readonly`left[](#left)

left: number

The **`left`** read-only property of the DOMRectReadOnly interface returns the left coordinate value of the DOMRect. (Has the same value as x, or x + width if width is negative.)

[MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/left)

Inherited from [DOMRectReadOnly](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMRectReadOnly/).[left](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMRectReadOnly/#left)

### `Readonly`right[](#right)

right: number

The **`right`** read-only property of the DOMRectReadOnly interface returns the right coordinate value of the DOMRect. (Has the same value as x + width, or x if width is negative.)

[MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/right)

Inherited from [DOMRectReadOnly](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMRectReadOnly/).[right](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMRectReadOnly/#right)

### `Readonly`top[](#top)

top: number

The **`top`** read-only property of the DOMRectReadOnly interface returns the top coordinate value of the DOMRect. (Has the same value as y, or y + height if height is negative.)

[MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/top)

Inherited from [DOMRectReadOnly](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMRectReadOnly/).[top](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMRectReadOnly/#top)

### width[](#width)

width: number

The **`width`** property of the DOMRect interface represents the width of the rectangle. The value can be negative.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRect/width)

Overrides [DOMRectReadOnly](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMRectReadOnly/).[width](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMRectReadOnly/#width)

### x[](#x)

x: number

The **`x`** property of the DOMRect interface represents the x-coordinate of the rectangle, which is the horizontal distance between the viewport's left edge and the rectangle's origin.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRect/x)

Overrides [DOMRectReadOnly](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMRectReadOnly/).[x](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMRectReadOnly/#x)

### y[](#y)

y: number

The **`y`** property of the DOMRect interface represents the y-coordinate of the rectangle, which is the vertical distance between the viewport's top edge and the rectangle's origin.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRect/y)

Overrides [DOMRectReadOnly](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMRectReadOnly/).[y](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMRectReadOnly/#y)

## Methods[](#methods-1)

### toJSON[](#tojson)

-   toJSON(): any[](#tojson-1)
    
    The DOMRectReadOnly method **`toJSON()`** returns a JSON representation of the DOMRectReadOnly object.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/toJSON)
    
    #### Returns any
    
    Inherited from [DOMRectReadOnly](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMRectReadOnly/).[toJSON](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMRectReadOnly/#tojson)