Add Custom Tools to TerraExplorer Fusion – Skyline

TerraExplorer Fusion (TEF) capabilities can be customized and expanded with HTML tools that are added as new buttons on TEF's side toolbar or placed under the Analysis or Navigation tabs on the side toolbar and activated like any other TEF tool. The examples below can be used as templates for your new tool.

Custom tools implemented using the following TerraExplorer Fusion API methods are supported only when TerraExplorer Fusion is running under the Plus or Viewer license:

analysis.addAnalysisTool({id, name, title, icon, action})
navigate.addNavigateTool({id, name, title, icon, action})

More about: TerraExplorer API and TerraExplorer Fusion API.

Adding a Tool

Create a custom HTML tool.
Edit your startup script. This is the JavaScript code that runs automatically when a user opens TerraExplorer Fusion. See Startup Scripts .

Option A: Add a Button to the Analysis or Navigation Tools Panels

Use the following TerraExplorer Fusion API methods in your script to add a button for your tool to the Analysis Tools or Navigation Tools panel and define where the custom tool should open:
```
analysis.addAnalysisTool({
    id,
    name,
    title,
    icon,
    action
});

navigate.addNavigateTool({
    id,
    name,
    title,
    icon,
    action
});
```
Parameters:
- id: Unique ID for the tool.
- name: Name displayed for the tool in the Tools dialog box.
- title: Tooltip displayed for the tool.
- icon: Path to the icon displayed for the tool in the Tools panel. The icon must be saved in the same domain as the one from which TerraExplorer Fusion is running.
- action: Action performed when the tool button is clicked. Use one of the following methods:
  - Open a tool from TEF's Analysis Tools in the Analysis panel:
```
analysis.openAnalysisToolURL({
    url: '[path to HTML tool]',
    title: '[name of tool]'
});
```
  - Open a tool from TEF's Analysis Tools in a popup window:
```
application.openPopupDialogURL({
    URL: '[path to HTML tool]',
    name: '[name of tool]',
    width: '[popup window width]',
    length: '[popup window height]',
    timeout: -1
});
```
    Note: Popup tools will be discontinued in the next version of TerraExplorer Fusion.
  - Open a tool from TEF's Navigation Tools in the Navigation panel:
```
navigate.openNavigateToolURL({
    url: '[path to HTML tool]',
    title: '[name of tool]'
});
```
  - Open a tool from TEF's Navigation Tools in a popup window:
```
application.openPopupDialogURL({
    URL: '[path to HTML tool]',
    name: '[name of tool]',
    width: '[popup window width]',
    length: '[popup window height]',
    timeout: -1
});
```
    Note: Popup tools will be discontinued in the next version of TerraExplorer Fusion.
Option B: Add a Custom Tool Button Directly to the Sidebar

To add a custom tool button directly to the TerraExplorer Fusion sidebar, add the following code to the startup script:
```
$("#toolbox").append(
    `<div
        class="toolbox-button"
        onclick="analysis.openAnalysisToolURL({
            url: '[path to HTML tool]',
            title: '[name of tool]'
        })"
        id="[unique button ID]"
        title="[button tooltip]">
        <img
            class="toolbox-icon"
            src="[path to icon]"
        >
    </div>`
);
```
Parameters:
- id: Unique ID for the custom tool.
- title: Tooltip displayed for the tool.
- icon: Path to the icon displayed on the sidebar button. The icon must be saved in the same domain as the one from which TerraExplorer Fusion is running.
- onclick: Action performed when the button is clicked. In this example, the custom HTML tool opens in the TerraExplorer Fusion Analysis panel.
Save the startup script file. See TerraExplorer Fusion API .

Examples

Add a tool to TEF's Analysis Tools that opens in the Analysis panel:

analysis.addAnalysisTool({
    id: '[tool ID]',
    name: '[tool heading]',
    title: '[tool tooltip]',
    icon: '[path to icon displayed in the Tools panel]',
    action: `analysis.openAnalysisToolURL({
        url: '[path to HTML tool]',
        title: '[name of tool]'
    })`
});

For example:

analysis.addAnalysisTool({
    id: 'myToolBtnID1',
    name: 'My Tool',
    title: 'My analysis tool',
    icon: './custom/tools/MyAnalysisTool/myTool.png',
    action: `analysis.openAnalysisToolURL({
        url: './custom/tools/MyAnalysisTool/MyTool.html',
        title: 'My tool'
    })`
});

Add a tool to TEF's Navigation Tools that opens in a popup window:

navigate.addNavigateTool({
    id: '[tool ID]',
    name: '[tool heading]',
    title: '[tool tooltip]',
    icon: '[path to icon displayed in the Tools panel]',
    action: `application.openPopupDialogURL({
        URL: '[path to HTML tool]',
        name: '[name of tool]',
        width: '[popup window width]',
        length: '[popup window height]',
        timeout: -1
    })`
});

For example:

navigate.addNavigateTool({
    id: 'myToolBtnID3',
    name: 'My Tool',
    title: 'My navigation tool',
    icon: './custom/tools/MyNavigationTool/myTool.png',
    action: `application.openPopupDialogURL({
        URL: './custom/tools/MyNavigationTool/MyTool.html',
        name: 'My tool',
        width: 500,
        length: 500,
        timeout: -1
    })`
});

Adding a Tool

Examples

Related articles