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.
HTML
<script src="https://api.catenda.com/js/v1/viewer2d"></script>
<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.
HTML
<div id="viewer-2d"></div>
<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.
JS
bimsync.setOnViewer2dLoadCallback(onViewer2dLoad);
bimsync.loadViewer2d();
bimsync.setOnViewer2dLoadCallback(onViewer2dLoad);
bimsync.loadViewer2d();
﻿
4. Create a 2D Viewer instance
Provide the div element and an options object to the constructor method.
JS
const viewer2dElement = document.getElementById("viewer-2d");
const viewer2dOptions = {
  hoverSpaces: true,
  showViewpoint: false,
  selectColor: "#ff0000",
};
const viewer2d = new bimsync.viewer2d.Viewer2D(viewer2dElement, viewer2dOptions);
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.
JS
viewer2d.loadUrl(tokenUrl).then(() => {
  const storeys = viewer2d.getStoreys();
  if (storeys.length > 0) {
    viewer2d.showStorey(storeys[0].id);
  }
});
viewer2d.loadUrl(tokenUrl).then(() => {
  const storeys = viewer2d.getStoreys();
  if (storeys.length > 0) {
    viewer2d.showStorey(storeys[0].id);
  }
});
﻿
Usage
HTML
<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>
<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
﻿
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
Updated 25 Mar 2024
Did this page help you?
2D Viewer SDK
getBuildings