Table of Contents

Initialize Javascript SDK

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

Import script library

The first step is adding the following script tag to your application.
Replace <version> with the version of the SDK you want to use. 

<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 library to be fully loaded. The code below is the most basic way of doing that by waiting for the DOMContentLoaded event, but other libraries may have different ways of achieving the same thing.

Once the library is ready, we can instantiate a orbitgt.mapping3d.sdk.viewer.SDKViewer instance.

The options object can be used to restore application state or set the crs. All available options are described here.

After creating the viewer, you must 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() {
        // Create viewer
        var appElement = document.getElementById("m3dviewer");
        viewer = new orbitgt.mapping3d.sdk.viewer.SDKViewer(appElement);
        viewer.isReady.then(handleReady);
      }
 
      // Wait for page to load
      document.addEventListener("DOMContentLoaded", handleDOMReady);
    </script>
    <div id="m3dviewer"/>
  </body>
</html>

Example