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.
HTML
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<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>
<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>
<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.
JS
bimsync.setOnViewer2dLoadCallback(onViewer2dLoad);
bimsync.loadViewer2d();
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.
JS
var viewer2dOptions = {
  hoverSpaces: false,
  showViewpoint: false,
  selectColor: "#ff0000",
};
$("#viewer-2d").viewer2d(viewer2dOptions);
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.
JS
$("#viewer-2d")
  .viewer2d("loadUrlPromise", tokenUrl)
  .then(() => {
    var storeys = viewer2d.viewer2d("getStoreys");
    if (storeys.length > 0) {
      $("#viewer-2d").viewer2d("showStorey", storeys[0].id);
    }
  });
$("#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>
<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.
JS
$("#viewer-2d").viewer2d("methodName", arg1, arg2, ...)
$("#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
JS
var options = {
  width: 1024,
  height: 768,
};
function onScreenshot(imageData) {
  console.log("imageData: ", imageData);
}

$("#viewer-2d").viewer2d("screenshot", options, onScreenshot);
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
JS
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);
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.
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
Method	Deprecated Names
getStoreyByElevation	storeyByElevation
getStoreys	storeys
hideStoreys	hidestoreys
moveTo	moveto
showStorey	showstorey
transformModel	setTransformation
Type
(imageData: String) => Void
Updated 07 Jun 2024
Did this page help you?
Release Channels