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

The **`VisualViewport`** interface of the CSSOM view API represents the visual viewport for a given window. For a page containing iframes, each iframe, as well as the containing page, will have a unique window object. Each window on a page will have a unique VisualViewport representing the properties associated with that window.

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

interface VisualViewport {  
    [height](#height): number;  
    [offsetLeft](#offsetleft): number;  
    [offsetTop](#offsettop): number;  
    [onresize](#onresize): ((this: VisualViewport, ev: Event) \=> any) | null;  
    [onscroll](#onscroll): ((this: VisualViewport, ev: Event) \=> any) | null;  
    [pageLeft](#pageleft): number;  
    [pageTop](#pagetop): number;  
    [scale](#scale): number;  
    [width](#width): number;  
    [addEventListener](#addeventlistener-1)<[K](#addeventlistenerk) extends keyof [VisualViewportEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.VisualViewportEventMap/)\>(  
        type: [K](#addeventlistenerk),  
        listener: (this: VisualViewport, ev: [VisualViewportEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.VisualViewportEventMap/)\[[K](#addeventlistenerk)\]) \=> any,  
        options?: boolean | AddEventListenerOptions,  
    ): void;  
    [addEventListener](#addeventlistener-2)(  
        type: string,  
        listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/),  
        options?: boolean | AddEventListenerOptions,  
    ): void;  
    [dispatchEvent](#dispatchevent-1)(event: Event): boolean;  
    [removeEventListener](#removeeventlistener-1)<[K](#removeeventlistenerk) extends keyof [VisualViewportEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.VisualViewportEventMap/)\>(  
        type: [K](#removeeventlistenerk),  
        listener: (this: VisualViewport, ev: [VisualViewportEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.VisualViewportEventMap/)\[[K](#removeeventlistenerk)\]) \=> any,  
        options?: boolean | EventListenerOptions,  
    ): void;  
    [removeEventListener](#removeeventlistener-2)(  
        type: string,  
        listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/),  
        options?: boolean | EventListenerOptions,  
    ): void;  
}

#### Hierarchy

-   EventTarget
    -   VisualViewport

##### Index

### Properties[](#properties)

[height](#height) [offsetLeft](#offsetleft) [offsetTop](#offsettop) [onresize](#onresize) [onscroll](#onscroll) [pageLeft](#pageleft) [pageTop](#pagetop) [scale](#scale) [width](#width)

### Methods[](#methods)

[addEventListener](#addeventlistener) [dispatchEvent](#dispatchevent) [removeEventListener](#removeeventlistener)

## Properties[](#properties-1)

### `Readonly`height[](#height)

height: number

The **`height`** read-only property of the VisualViewport interface returns the height of the visual viewport, in CSS pixels, or 0 if current document is not fully active.

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

### `Readonly`offsetLeft[](#offsetleft)

offsetLeft: number

The **`offsetLeft`** read-only property of the VisualViewport interface returns the offset of the left edge of the visual viewport from the left edge of the layout viewport in CSS pixels, or 0 if current document is not fully active.

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

### `Readonly`offsetTop[](#offsettop)

offsetTop: number

The **`offsetTop`** read-only property of the VisualViewport interface returns the offset of the top edge of the visual viewport from the top edge of the layout viewport in CSS pixels, or 0 if current document is not fully active.

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

### onresize[](#onresize)

onresize: ((this: VisualViewport, ev: Event) \=> any) | null

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

### onscroll[](#onscroll)

onscroll: ((this: VisualViewport, ev: Event) \=> any) | null

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

### `Readonly`pageLeft[](#pageleft)

pageLeft: number

The **`pageLeft`** read-only property of the VisualViewport interface returns the x coordinate of the left edge of the visual viewport relative to the initial containing block origin, in CSS pixels, or 0 if current document is not fully active.

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

### `Readonly`pageTop[](#pagetop)

pageTop: number

The **`pageTop`** read-only property of the VisualViewport interface returns the y coordinate of the top edge of the visual viewport relative to the initial containing block origin, in CSS pixels, or 0 if current document is not fully active.

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

### `Readonly`scale[](#scale)

scale: number

The **`scale`** read-only property of the VisualViewport interface returns the pinch-zoom scaling factor applied to the visual viewport, or 0 if current document is not fully active, or 1 if there is no output device.

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

### `Readonly`width[](#width)

width: number

The **`width`** read-only property of the VisualViewport interface returns the width of the visual viewport, in CSS pixels, or 0 if current document is not fully active.

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

## Methods[](#methods-1)

### addEventListener[](#addeventlistener)

-   addEventListener<[K](#addeventlistenerk) extends keyof [VisualViewportEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.VisualViewportEventMap/)\>(  
        type: [K](#addeventlistenerk),  
        listener: (this: VisualViewport, ev: [VisualViewportEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.VisualViewportEventMap/)\[[K](#addeventlistenerk)\]) \=> any,  
        options?: boolean | AddEventListenerOptions,  
    ): void[](#addeventlistener-1)
    
    The **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)
    
    #### Type Parameters
    
    -   K extends keyof [VisualViewportEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.VisualViewportEventMap/)
    
    #### Parameters
    
    -   type: [K](#addeventlistenerk)
    -   listener: (this: VisualViewport, ev: [VisualViewportEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.VisualViewportEventMap/)\[[K](#addeventlistenerk)\]) \=> any
    -   `Optional`options: boolean | AddEventListenerOptions
    
    #### Returns void
    
    Overrides EventTarget.addEventListener
    
-   addEventListener(  
        type: string,  
        listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/),  
        options?: boolean | AddEventListenerOptions,  
    ): void[](#addeventlistener-2)
    
    The **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)
    
    #### Parameters
    
    -   type: string
    -   listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/)
    -   `Optional`options: boolean | AddEventListenerOptions
    
    #### Returns void
    
    Overrides EventTarget.addEventListener
    

### dispatchEvent[](#dispatchevent)

-   dispatchEvent(event: Event): boolean[](#dispatchevent-1)
    
    The **`dispatchEvent()`** method of the EventTarget sends an Event to the object, (synchronously) invoking the affected event listeners in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) also apply to events dispatched manually with dispatchEvent().
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/dispatchEvent)
    
    #### Parameters
    
    -   event: Event
    
    #### Returns boolean
    
    Inherited from EventTarget.dispatchEvent
    

### removeEventListener[](#removeeventlistener)

-   removeEventListener<[K](#removeeventlistenerk) extends keyof [VisualViewportEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.VisualViewportEventMap/)\>(  
        type: [K](#removeeventlistenerk),  
        listener: (this: VisualViewport, ev: [VisualViewportEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.VisualViewportEventMap/)\[[K](#removeeventlistenerk)\]) \=> any,  
        options?: boolean | EventListenerOptions,  
    ): void[](#removeeventlistener-1)
    
    The **`removeEventListener()`** method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target. The event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process; see Matching event listeners for removal.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)
    
    #### Type Parameters
    
    -   K extends keyof [VisualViewportEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.VisualViewportEventMap/)
    
    #### Parameters
    
    -   type: [K](#removeeventlistenerk)
    -   listener: (this: VisualViewport, ev: [VisualViewportEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.VisualViewportEventMap/)\[[K](#removeeventlistenerk)\]) \=> any
    -   `Optional`options: boolean | EventListenerOptions
    
    #### Returns void
    
    Overrides EventTarget.removeEventListener
    
-   removeEventListener(  
        type: string,  
        listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/),  
        options?: boolean | EventListenerOptions,  
    ): void[](#removeeventlistener-2)
    
    The **`removeEventListener()`** method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target. The event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process; see Matching event listeners for removal.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)
    
    #### Parameters
    
    -   type: string
    -   listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/)
    -   `Optional`options: boolean | EventListenerOptions
    
    #### Returns void
    
    Overrides EventTarget.removeEventListener