Creating a Custom TE4W Application
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. See “Defining a Tool/Application’s Functionality” in this chapter for information.
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” folder:
<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. See “Creating Additional Customized Configurations” in the “SkylineGlobe Server Settings” chapter for information.
§ 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="startAreaTool()">Start Area Tool</button>
<button onclick="startLoadLayersTool()">Start Load Layers Tool</button>
</div>
<script>
function startDistanceTool() {
TerraExplorer.analysis.distance.startTool();
}
function startAreaTool() {
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>