Skip to main content

Create HTML Tools

Yaniv Navon
  • Updated

A client application that utilizes TerraExplorer COM capabilities can be developed using scripting languages in an HTML page. This article demonstrates how to initialize SGWorld and create a basic HTML with JavaScript that interacts with the TerraExplorer COM.

Note: TerraExplorer must be installed to use the API. Download and install TerraExplorer > 

  1. Create an HTML file.
  2. Add an SGWorld71 object tag:
     
    <object id="SGWorld" classid="CLSID:3a4f9199-65a8-11d5-85c1-0001023952c1" style="visibility:hidden;height:0 "></object>
    The object tag creates an SGWorld71 object that exposes the script to all the SGWorld interfaces (e.g., SGWorld.Analysis).
    Note: Steps 1 & 2 are the basic steps required when building any HTML tool. 
  3. Create a button and a script tag, and create the CreatePolygons function:  
    <button class="button" onclick = "CreatePolygons();" style = "position: absolute;top: 10%; left:22.5%">Create Polygons</button>
    <script type="text/javascript">
    function CreatePolygons()
    {
    //Place your code here.
    }
    </script>

  4. Add the TerraExplorer API code into the Init function:

    function CreatePolygons()
    {
    var pointsUtah = SGWorld.Creator.GeometryCreator.CreateGeometryFromWKT("POLYGON((-114.03822 41.99547,-111.04795 41.99626,-111.05028 40.99663,-109.04763 40.99847,-109.04782 36.99664,-114.04313 36.99656,-114.03822 41.99547))");
    // 2 in AltitudeTypeCode means on terrain, "" means add to root 
    var polyUtah = SGWorld.Creator.CreatePolygon(pointsUtah, "#ff0000", SGWorld.Creator.CreateColor(0, 255, 255, 40), 2, "", "Utah"); //
    polyUtah.LineStyle.Width = 5000; // 5000m (5km)
    var pointsWyoming = SGWorld.Creator.GeometryCreator.CreateGeometryFromWKT("POLYGON((-111.05265 44.99576,-104.05934 44.99734,-104.05120 41.00322,-111.05028 40.99663,-111.05265 44.99576))");
    // 2 in AltitudeTypeCode means on terrain, "" means add to root 
    var polyWyoming = SGWorld.Creator.CreatePolygon(pointsWyoming, SGWorld.Creator.CreateColor(255, 255, 0, 10), null,2,"", "Wyoming");
    polyWyoming.LineStyle.Width = 20000; // 20000m (20km)
    polyWyoming.Position.Distance = 1600000;
    SGWorld.Navigate.FlyTo(polyWyoming);
    }
  5. The full code:
     
    <html>
    <head>
    <title>Create Polygons</title>
    <object id="SGWorld" classid="CLSID:3a4f9199-65a8-11d5-85c1-0001023952c1" style="visibility:hidden;height:0 "></object>
    <!-- <input type="Button" onclick = "ClickMe()" value="Click Me"/> -->
    <script type="text/javascript">
    function CreatePolygons()
    {
    //check which browser in use
    var isIE = /*@cc_on!@*/false || !!document.documentMode;
    if (!isIE) {
    alert("This page can only run in IE.")
    return;
    }

    var pointsUtah = SGWorld.Creator.GeometryCreator.CreateGeometryFromWKT("POLYGON((-114.03822 41.99547,-111.04795 41.99626,-111.05028 40.99663,-109.04763 40.99847,-109.04782 36.99664,-114.04313 36.99656,-114.03822 41.99547))");
    // 2 in AltitudeTypeCode means on terrain, "" means add to root 
    var polyUtah = SGWorld.Creator.CreatePolygon(pointsUtah, "#ff0000", SGWorld.Creator.CreateColor(0, 255, 255, 40), 2, "", "Utah"); //
    polyUtah.LineStyle.Width = 5000; // 5000m (5km)
    var pointsWyoming = SGWorld.Creator.GeometryCreator.CreateGeometryFromWKT("POLYGON((-111.05265 44.99576,-104.05934 44.99734,-104.05120 41.00322,-111.05028 40.99663,-111.05265 44.99576))");
    // 2 in AltitudeTypeCode means on terrain, "" means add to root 
    var polyWyoming = SGWorld.Creator.CreatePolygon(pointsWyoming, SGWorld.Creator.CreateColor(255, 255, 0, 10), null,2,"", "Wyoming");
    polyWyoming.LineStyle.Width = 20000; // 20000m (20km)
    polyWyoming.Position.Distance = 1600000;
    SGWorld.Navigate.FlyTo(polyWyoming);
    }

    </script>
    </head>
    <body>
    <div class="wrapper">
    <button class="button" onclick = "CreatePolygons();" style = "position: absolute;top: 10%; left:22.5%">Create Polygons</button>
    </div>
    </body>
    </html>
  6. To launch the tool in a container, inside TerraExplorer:
    • Launch TerraExplorer and open a project (e.g., skylineglobe.tbp@www.skylineglobe.com$/sg).
    • Project Settings (F8) > Layout > Container Settings > Add...
  7. You can also launch the tool in Internet Explorer (IE), while TerraExplorer Pro is running:
    • Launch TerraExplorer and open a project (i.e., skylineglobe.tbp@www.skylineglobe.com$/sg).
    • Run IE and paste the HTML path in the URL field.

Download this HTML file > 

You can expand your HTML tool and add it as an add-on to the TerraExplorer application. More about: Creating and distributing add-ons > 

Related articles