---
title: Using jQuery
slug: viewer-2d/using-jquery
docTags: 
createdAt: 2024-02-21T14:31:38.565Z
---

Using jQuery is also supported when working with the 2D Viewer API.

For legacy reasons small differences exist in the way you interact with the 2D Viewer when using jQuery.

## Installation

### 1. Add jQuery to your project

Include jQuery in your HTML file using a script tag.

```html
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
```

### 2. Add the 2D Viewer to your project

Include the 2D Viewer in your HTML file using a script tag, this will add the global `bimsync` object to the `window` object.

```html
<script src="https://api.catenda.com/js/v1/viewer2d"></script>
```

### 3. Provide a container for the 2D Viewer

Create a `div` element for attaching a 2D Viewer instance to.

```html
<div id="viewer-2d"></div>
```

### 4. Initialize the 2D Viewer API

Set a callback function and then invoke the `loadViewer2d` method, the 2D Viewer is ready once callback invoked.

```javascript
bimsync.setOnViewer2dLoadCallback(onViewer2dLoad);
bimsync.loadViewer2d();
```

### 5. Create a 2D Viewer instance

Initialize the 2D Viewer by invoking the `viewer2d` method on the jQuery object for the `div` where you want to attach the 2D Viewer.

```javascript
var viewer2dOptions = {
  hoverSpaces: false,
  showViewpoint: false,
  selectColor: "#ff0000"
};
$("#viewer-2d").viewer2d(viewer2dOptions);
```

### 6. Interact with the 2D Viewer

Call methods on the 2D Viewer instance to interact with the 2D Viewer.

```javascript
$("#viewer-2d")
  .viewer2d("loadUrlPromise", tokenUrl)
  .then(() => {
    var storeys = viewer2d.viewer2d("getStoreys");
    if (storeys.length > 0) {
      $("#viewer-2d").viewer2d("showStorey", storeys[0].id);
    }
  });
```

## Usage

```html
<html>
  <head>
    <script src="https://api.catenda.com/js/v1/viewer2d"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
      #viewer-2d {
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="viewer-2d"></div>
    <script type="text/javascript">
      bimsync.setOnViewer2dLoadCallback(onViewer2dLoad);
      bimsync.loadViewer2d();

      function onViewer2dLoad() {
        var projectId = "YOUR_CATENDA_PROJECT_ID";
        var token = "YOUR_2D_VIEWER_TOKEN";

        var tokenUrl = `https://api.catenda.com/v2/projects/${projectId}/viewer2d/geometry?token=${token}`;

        var viewer2dOptions = {
          hoverSpaces: false,
          showViewpoint: false,
          selectColor: "#ff0000"
        };
        $("#viewer-2d").viewer2d(viewer2dOptions);
        $("#viewer-2d")
          .viewer2d("loadUrlPromise", tokenUrl)
          .then(() => {
            var storeys = $("#viewer-2d").viewer2d("getStoreys");
            if (storeys.length > 0) {
              $("#viewer-2d").viewer2d("showStorey", storeys[0].id);
            }
          });
      }
    </script>
  </body>
</html>
```

## Options

The options for the 2D Viewer are the same when using jQuery but the default value may differ.

### Properties

| **Name**        | **Type** | **Default** | **Description**                                       |
| --------------- | -------- | ----------- | ----------------------------------------------------- |
| `hoverSpaces`   | Boolean  | `true`      | Whether mouse hover highlights space below the cursor |
| `showViewpoint` | Boolean  | `true`      | Sets viewpoint visibility                             |
| `selectColor`   | String   | `#a7f555`   | Sets the CSS color of selected objects                |

## Methods

In general, the methods are the same when using jQuery but the way you call them is different.

```javascript
$("#viewer-2d").viewer2d("methodName", arg1, arg2, ...)
```

Some methods are also available under their deprecated names.

| **Method**             | **Deprecated Names** |
| ---------------------- | -------------------- |
| `getStoreyByElevation` | `storeyByElevation`  |
| `getStoreys`           | `storeys`            |
| `hideStoreys`          | `hidestoreys`        |
| `moveTo`               | `moveto`             |
| `showStorey`           | `showstorey`         |
| `transformModel`       | `setTransformation`  |

For legacy reasons some methods have different signatures when using jQuery.

### captureScreenshot

When using jQuery the name for this method is `screenshot`.

**Usage**

```javascript
var options = {
  width: 1024,
  height: 768
};
function onScreenshot(imageData) {
  console.log("imageData: ", imageData);
}

$("#viewer-2d").viewer2d("screenshot", options, onScreenshot);
```

**onScreenshot**

| **Type**                      |
| ----------------------------- |
| `(imageData: String) => Void` |

### loadUrl

When using jQuery the name for this method is `loadUrlPromise`.

**Usage**

```javascript
var options = {
  append: true,
  modelId: "my-model-id",
  modelName: "My Model Name"
};
var url = "https://api.catenda.com/v2/projects/{PROJECT_ID}/viewer2d/geometry?token=YOUR_TOKEN";

var modelInfosPromise = $("#viewer-2d").viewer2d("loadUrlPromise", url, options);
```

## Events

Callbacks for 2D Viewer events may have different signatures when using jQuery. Each event documentation page details any differences.