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 a template for your new tool.
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. More about: Startup Scripts >.
Option A: Add a Button to the Analysis or Navigation Tools Panels
Use the following TerraExplorer Fusion API calls in your script to add a button for your tool to the analysis or navigation Tools panels and define where the custom tool should open:
analysis.addAnalysisTool ({id, name, title, icon, action})
navigate.addNavigateTool ({id, name, title, icon, action})Where:
- id: Define unique ID for the tool.
- name: Name of the tool as appears in Tools dialog box.
- title: Tool's tooltip.
- icon: Path to icon to display for tool in Tools panel. The icon must be saved in the same domain as the one from which you are running TerraExplorer Fusion.
- action: Add tool:
- Add tool to TEF's Analysis Tools that will open in TEF's Analysis panel - analysis.openAnalysisToolURL('[path to HTML tool]','[Name of tool]',[Boolean that determines whether a back button is displayed])
- Add tool to TEF's Analysis Tools that will open in popup window - application.openPopupDialogURL('[path to HTML tool]','[Name of tool]',[X,Y screen coordinates of popup window], [pass -1 to keep tool open])
Note that popup tools are going to be discontinued in the next version of TerraExplorer Fusion. - Add tool to TEF's Navigation Tools that will open in TEF's Navigation panel - navigate.openNavigateToolURL('[path to HTML tool]','[Name of tool]')
- Add tool to TEF's Navigation Tools that will open in popup window - application.openPopupDialogURL('[path to HTML tool]','[Name of tool]',[X,Y screen coordinates of popup window], [pass -1 to keep tool open])
Note that popup tools are going to be discontinued in the next version of TerraExplorer Fusion.
Option B: Directly Add a Custom Tool Button to the Sidebar
For direct integration of a custom tool into the TerraExplorer Fusion sidebar:
$("#toolbox").append(`<div class="toolbox-button" onclick="analysis.openAnalysisToolURL('[path to HTML tool]','[Name of tool]',[Back button Boolean])" id="[Unique Button ID]" title="[Button Tooltip]"><img class="toolbox-icon" src="[Path to Icon]"></div>`);
Where:
-
-
- id: A unique identifier for the custom tool.
- title: Tool's tooltip.
- icon: Path to icon to display for tool button on sidebar. The icon must be saved in the same domain as the one from which you are running TerraExplorer Fusion.
- onclick action: The action to be executed when the button is clicked (e.g., analysis.openAnalysisToolURL('./custom/tools/MyAnalysisTool/MyTool.html','My tool',true). This specific example opens your custom HTML tool in the TerraExplorer Fusion Analysis panel, with an option to display a back button as indicated by the true parameter.
-
3. Save the startup script file. More about: TerraExplorer Fusion API >
Examples
Add tool to TEF's Analysis Tools that will open in TEF's Analysis panel:
analysis.addAnalysisTool ({id:'[tool ID]',name:'[tool heading]',title:['tools tooltip'],icon:'[path to icon to display for tool in Tools panel',action:`analysis.openAnalysisToolURL('[path to HTML tool]','[Name of tool]',[Back button Boolean])`});
E.g.,
analysis.addAnalysisTool ({id:'myToolBtnID1',name:'My Tool',title:'My analysis tool',icon:'./custom/tools/MyAnalysisTool/myTool.png',action:`analysis.openAnalysisToolURL('./custom/tools/MyAnalysisTool/MyTool.html','My tool',true)`});
Add tool to TEF's Navigation Tools that will open in popup window:
analysis.addNavigateTool ({id:'',name:'[tool heading]',title:'[tool's tooltip]',icon:'[path to icon to display for tool in Tools panel',action:`application.openPopupDialogURL('[path to HTML tool]','[Name of tool]',[X,Y screen coordinates of popup window], [pass -1 to keep tool open])`});
E.g.,
navigate.addNavigateTool ({id:'myToolBtnID3',name:'My Tool',title:'My navigate tool',icon:'./custom/tools/MyNavigateTool/myTool.png',action:`application.openPopupDialogURL('./custom/tools/MyNavigateTool/MyTool.html','My tool',500,500,-1);`});