Recent Changes

This is documentation of an archived release.
For documentation on the current version, please check Knowledge Base.

Getting started Javascript SDK

This page describes how to initialize the Javascript SDK in a web environment.

Loading the library

By downloading and using the Orbit 3DM Viewer SDK, you agree with the terms of use on the development and usage of Orbit GT's 3DM Viewer SDK:
https://orbitgt.com/legal/developer-terms-of-use/.

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 to use SDK version 20.9.0 : https://cdn.3dmapping.cloud/20.9.0/javascript/orbitgt_3dm_sdk.js

Usage in a document context

Using the library on a browser document is straightforward.

Add Script Tag

Add the following script tag to your application.

Example for SDK version 20.9.0

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

Create Viewer instance

Before we can start using the library, you must 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 Restoring 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>

Last modified:: 2022/04/15 06:19