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 >
- Create an HTML file.
- Add an SGWorld74 object tag:
<object id="SGWorld" classid="CLSID:3A4F919F-65A8-11D5-85C1-0001023952C1" style="visibility:hidden;height:0 "></object>
The object tag creates an SGWorld74 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. - 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> -
Add the TerraExplorer API code into the 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);
} - The full code:
<html>
<head>
<title>Create Polygons</title>
<object id="SGWorld" classid="CLSID:3A4F919F-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> - 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...
- 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.
You can expand your HTML tool and add it as an add-on to the TerraExplorer application. More about: Creating and distributing add-ons >