Getting Started

Use the 2D Viewer API to embed the 2D Viewer in your web applications.

Using jQuery? More information on using jQuery with the 2D Viewer here.

Installation

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

2. Provide a container for the 2D Viewer

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

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

3. 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();

4. Create a 2D Viewer instance

Provide the div element and an options object to the constructor method.

const viewer2dElement = document.getElementById("viewer-2d");
const viewer2dOptions = {
  hoverSpaces: true,
  showViewpoint: false,
  selectColor: "#ff0000"
};
const viewer2d = new bimsync.viewer2d.Viewer2D(viewer2dElement, viewer2dOptions);

5. Interact with the 2D Viewer

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

viewer2d.loadUrl(tokenUrl).then(() => {
  const storeys = viewer2d.getStoreys();
  if (storeys.length > 0) {
    viewer2d.showStorey(storeys[0].id);
  }
});

Usage

<html>
  <head>
    <script src="https://api.catenda.com/js/v1/viewer2d"></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() {
        const projectId = "YOUR_CATENDA_PROJECT_ID";
        const token = "YOUR_2D_VIEWER_TOKEN";

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

        const viewer2dElement = document.getElementById("viewer-2d");
        const viewer2dOptions = {
          hoverSpaces: true,
          showViewpoint: false,
          selectColor: "#ff0000"
        };

        const viewer2d = new bimsync.viewer2d.Viewer2D(viewer2dElement, viewer2dOptions);
        viewer2d.loadUrl(tokenUrl).then(() => {
          const storeys = viewer2d.getStoreys();
          if (storeys.length > 0) {
            viewer2d.showStorey(storeys[0].id);
          }
        });
      }
    </script>
  </body>
</html>

Options

Adjust the default behavior of the 2D Viewer by providing an options object when creating a 2D Viewer instance.

Properties

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