Skip to main content

Create a Custom TE4W Application

Eylon Sirotkin
  • Updated
Upgrade your experience with TerraExplorer Fusion, our new and powerful web-based 3D geospatial viewer. TerraExplorer Fusion offers many advantages over TerraExplorer for Web including: faster application loading times, improved rendering of large-scale layers, and full compatibility with TerraExplorer Desktop layer styling, objects, and API. Learn more >

 

You can create a custom TE4W application by creating a custom HTML with the TE4W window embedded inside. The TE4W API, can then be used together with its underlying Cesium API, or any other script to customize your application. More about: Defining a Tool/Application’s Functionality >

To see a working example of a TE4W standalone application, explore this sample project.

mceclip1.png

To create a custom TE4W application:

  1. Copy the entire .\TerraExplorerWeb directory to your server and place your HTML file in it or place the HTML file under the “.\TerraExplorerWeb” folder.
  2. In your HTML file, add a reference to the TE4W.js file found under the “.\TerraExplorerWeb\js” 
    <script src="./js/TE4W.js"></script>
  3. Add a div element to the HTML <body>, with an ID, width and height. E.g., 
    <div id="mainContainer" style="width:1500px; height: 1000px;"></div>
  4. Call the startTerraExplorer4Web method with the following parameters:
    • Div ID – The ID of the div created above in step 3.
    • SGS URL
    • Reference to a callback function
    • Optional options object:
      • catalogid – TE4W project to load (identified by its SkylineGlobe Server ID or alias).
      • config – TE4W configuration to use (identified by the Configuration Name as it appears in TerraExplorer for Web Settings): This defines various elements of your TE4W including login information, your website subdomains, screen overlay logo, copyright text, and search provider. Customized configurations are created in the TerraExplorer for Web Settings section of the Settings page. More about: Creating Additional Customized Configurations >
      • showGUI – Boolean that determines whether the GUI is displayed. “GUI” refers to everything that is included with the standard TE4W other than the 3D Window itself, e.g., sidebar and navigation controls.

Note: A sample custom TE4W application file called DemoApp.html file is included in the application files of SGS under TE4W (.\TerraExplorerWeb\DemoApp.html). This demo initializes the TE4W and creates three new demo buttons.

<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>

<script src="./js/TE4W.js"></script>
</head>
 
<body oncontextmenu="return false;" bgcolor="black">
<div id="mainContainer" style="width:1500px; height: 1000px;"></div>
<div class="sampleButtons">
     <button onclick="startDistanceTool()">Start Distance Tool</button>
     <button onclick="startAreaeTool()">Start Area Tool</button>
     <button onclick="startLoadLayersTool()">Start Load Layers Tool</button>
    </div>
    <script>

function startDistanceTool() {
       TerraExplorer.analysis.distance.startTool();
      }

function startAreaeTool() {
        TerraExplorer.analysis.area.startTool();
      }

function startLoadLayersTool() {
        TerraExplorer.layers.loadLayer.startTool();
      }

startTerraExplorer4Web(
"mainContainer",
"http://skylineglobeUrl.skyline.com/sg",
undefined,
{
//catalogId: "skylineglobe.3452110", //ID or alias
//config: "exampleKml", //default is DefaultKML
//showGUI: true //false hides all GUI elements including Sidebar, and navigation controls
}
);

function callbackFunction() {
console.log("Loading Finished");
}
</script>
</body>
</html>

 

Related articles