Recent Changes

Getting started Javascript SDK

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

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

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/viewer_sdk_javascript.js

Note: Before version 23.7.0, the name of the javascript file was orbitgt_3dm_sdk.js.

Versions

Replace <version> by the actual version you want to use.
For example, to use SDK version 23.7.0 : https://cdn.3dmapping.cloud/23.7.0/javascript/viewer_sdk_javascript.js

The following dynamic versions are available :

stable - The last released version
beta - The version currently in development

It is strongly advised to keep the referenced version of the Viewer SDK within your Plugin up to date.
Forward compatibility (using an older version of the 3DM Viewer SDK to connect with a newer backed Publisher or Cloud) is not guaranteed.

In the proof-of-concept Orbit 3DM Viewer Plugin for ArcGIS Online, you can see the 3DM Viewer SDK in use:
../widgets/Orbit 3D Mapping Widget/Orbit3DM.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.

Current stable release

<html>
 <head>
   <script type="text/javascript" src="https://cdn.3dmapping.cloud/stable/javascript/viewer_sdk_javascript"></script>
 </head>
</html>

Specific named version, e.g. 23.7.0

<html>
 <head>
   <script type="text/javascript" src="https://cdn.3dmapping.cloud/23.7.0/javascript/viewer_sdk_javascript"></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/stable/javascript/viewer_sdk_javascript.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:: 2024/07/24 20:40