---
title: viewer2d.viewpoint
slug: viewer-2d/events/viewpoint
docTags: 
createdAt: 2024-02-21T17:17:42.342Z
---

Invoked when the user moves the **Viewpoint**.

:::hint{type="info"}
The **Viewpoint** is an optional visual indicator that includes an arrow icon. The **Viewpoint** accepts mouse and touch events so that users can move it within the 2D viewer. The **Viewpoint** is typically used in conjunction with the 3D viewer to show the location and orientation of the 3D viewer camera within the 2D viewer.
:::

## Example

::codepen{url="https://codepen.io/Catenda/embed/MWMBgeJ"}

## Usage

:::CodeblockTabs
```javascript
const onViewpointChange = function (event) {
  const { viewpoint } = event;
  console.log("viewer2d.viewpoint", "viewpoint:", viewpoint);
};

viewer2d.addEventListener("viewer2d.viewpoint", onViewpointChange);
```

jQuery

```javascript
const onViewpointChange = function (event, viewpoint) {
  console.log("viewer2d.viewpoint", "viewpoint:", viewpoint);
};

$("#viewer-2d").on("viewer2d.viewpoint", onViewpointChange);
```
:::

## Parameters

### onViewpointChange

:::::Tabs
::::Tab{title="JS"}
Function called when the user moves the **Viewpoint**.

| **Type**                  |
| ------------------------- |
| `(event: Object) => Void` |

**event**

| **Name**    | **Type** | **Description**       |
| ----------- | -------- | --------------------- |
| `viewpoint` | Object   | The current viewpoint |

**viewpoint**

Current direction, location and rotation of the **Viewpoint**.

:::hint{type="info"}
The location height is the height of the last shown storey in meters.
:::

| **Name**    | **Type**                                | **Description**                          |
| ----------- | --------------------------------------- | ---------------------------------------- |
| `direction` | [Vector3](docId\:gQdK6kHl9IuzRieGxVDD0) | Orientation of the **Viewpoint**         |
| `location`  | [Vector3](docId\:gQdK6kHl9IuzRieGxVDD0) | Position of the **Viewpoint**            |
| `rotation`  | Number                                  | Rotation of the **Viewpoint** in degrees |

**Example**

```javascript
{
  direction: {
    x: 1,
    y: 1,
  },
  location: {
    x: -1.0,
    y: 50,
    z: -1.0
  },
  rotation: -90,
}
```
::::

::::Tab{title="jQuery"}
Function called when the user moves the **Viewpoint**.

| **Type**                                     |
| -------------------------------------------- |
| `(event: Object, viewpoint: Object) => Void` |

**event**

[jQuery.Event](https://api.jquery.com/category/events/event-object/)

**viewpoint**

Current direction, location and rotation of the **Viewpoint**.

:::hint{type="info"}
The location height is the height of the last shown storey in meters.
:::

| **Name**    | **Type**                                | **Description**                          |
| ----------- | --------------------------------------- | ---------------------------------------- |
| `direction` | [Vector3](docId\:gQdK6kHl9IuzRieGxVDD0) | Orientation of the **Viewpoint**         |
| `location`  | [Vector3](docId\:gQdK6kHl9IuzRieGxVDD0) | Position of the **Viewpoint**            |
| `rotation`  | Number                                  | Rotation of the **Viewpoint** in degrees |

**Example**

```javascript
{
  direction: {
    x: 1,
    y: 1,
  },
  location: {
    x: -1.0,
    y: 50,
    z: -1.0
  },
  rotation: -90,
}
```
::::
:::::