Table of Contents

Getting started with the Javascript SDK

This page describes how the Javascript SDK can be initialized in a web environment.

Loading the library

The library is compiled as a UMD (universal module definition) library and can as such be used in different javascript environments.

It can be referenced by using this URL : https://cdn.3dmapping.cloud/<version>/javascript/orbitgt_3dm_sdk.js

Replace <version> by the actual version you want to use.
For example: if the current version is “18.1.4”, then use this URL : https://cdn.3dmapping.cloud/18.1.4/javascript/orbitgt_3dm_sdk.js

Usage in a document context

Using the library on a browser document is very straightforward.
The first step is adding the following script tag to your application.
Replace <version> with the version of the SDK you want to use (for example: 18.1.4). 

<html>
 <head>
   <script type="text/javascript" src="https://cdn.3dmapping.cloud/<version>/javascript/orbitgt_3dm_sdk.js"></script>
 </head>
</html>

Create viewer instance

Before we can start using the library, we must first wait for the browser document to be fully loaded. The code below is the most basic way of doing that by waiting for the DOMContentLoaded event.

Once the library is ready, we can instantiate the SDKViewer class.

The initial state of the viewer can be tweaked by providing startup options defined by the Constants class. You can use startup options to restore viewer state or set the communication CRS.

After creating the viewer, wait for the isReady promise to resolve. 

<html>
  <head>
    <script type="text/javascript" src="https://cdn.3dmapping.cloud/<version>/javascript/orbitgt_3dm_sdk.js"></script>
  </head>
  <body>
    <div id="app">
    <script type="text/javascript">
      var viewer;
 
      /**
      * Called when the viewer component is ready for interaction.
      */
      function handleReady() {
        // Set initial size 
        viewer.setSize(600,400);
      }
 
      /**
      * Called when the page is full loaded.
      */
      function handleDOMReady() {
        // Choose an application name that best suits your plugin
        var applicationName = "Orbit 3D Mapping Web AppBuilder Widget";
        // Create viewer
        var appElement = document.getElementById("m3dviewer");
        viewer = new orbitgt.mapping3d.sdk.viewer.SDKViewer(applicationName,appElement);
        viewer.isReady.then(handleReady);
      }
 
      // Wait for page to load
      document.addEventListener("DOMContentLoaded", handleDOMReady);
    </script>
    <div id="m3dviewer"/>
  </body>
</html>