Using jQuery

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.

<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.

<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.

<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.

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.

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.

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

Usage

<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.

$("#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

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

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.