Add TE4W Tools

In this section:

• Adding a tool
• More examples

TerraExplorer for Web (TE4W) capabilities can be customized and expanded with JavaScript tools that are added to TE4W’s sidebar, and activated, like any other TE4W tool, by clicking the sidebar tool entry. The tool can directly execute a custom code, or first open a customized dialog box. Skyline provides a TE4W API, which can be used together with its underlying Cesium API, or any other script. It is recommended to use the examples located under .\TerraExplorerWeb\userTools as a template for your new tool. These examples also appear below.

To add a tool:

1. Create a new JavaScript (JS) file that includes methods for setting the following:
   • Tool ID
   • Menu entry for the tool
   • Tool functionality. The tool functionality can range from very basic (e.g., activating an alert dialog box) to more complex (e.g., activating a dialog box and/or implementing some of the TE4W API methods). More about: Defining a Tool’s Functionality >
     

     var ActivateAlertTool = function () {
     
     //SET TOOL ID 
      this.getId = function () {
      return 'ActivateAlertTool';
      },
      
      //SET MENU ENTRY FOR THE TOOL
      this.getMenuEntry = function () {
      return TerraExplorer.tools.MenuEntry.addToSidebar(this, "My Alert Tool", "./userTools/myToolIcon.png", 1, TerraExplorer.tools.MenuEntry.MenuEntryAnalysis(), "My Tools");
      },
     
     //SET CODE TO EXECUTE WHEN TOOL IS CLICKED IN SIDEBAR
      this.open = function () {
      alert("Alert: Hello TE4W");
      return true;
      }
     };

2. Save your JS tool file in the following location: .\TerraExplorerWeb\userTools.
3. Register your tool by updating .\TerraExplorerWeb\js\userTools.js with the name of your JS tool file.
   

   E.g.

   TerraExplorer.tools.userTools = [
   'ActivateAlertTool',
   'MyToolWithDialog',
   'MyViewshedTool'
   ]; 

More Examples

Below are three sample tools, all with the same tool skeleton but with different tool functionality:

• Example 1: Creating a Basic Tool that Activates an Alert
• Example 2: Creating a Tool with a Tool Dialog that Uses a Div Element
• Example 3: Creating a Tool that Flies to Oxford and Creates a Viewshed Object

Note: The three examples above are automatically added when TerraExplorer for Web is installed. To apply them, uncomment the code in the tool's registration file, saved in: .\SG\TerraExplorerWeb\js\userTools.js. See screenshot below.