Recent Changes

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

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 first constructor argument is the document node the viewer will be inserted in (required).
The second constructor argument is an options object (optional).

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

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() {
        // 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>

Example

Last modified:: 2019/03/25 11:36