<html>
<head>
<title>GlobWeb example</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="GlobWeb.css">
<script type="text/javascript" src="../build/generated/GlobWeb.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function webGLStart()
{
// Create the globe
var globe = new GlobWeb.Globe( {canvas :"GlobWebCanvas"} );
// Add stats
var stats = new GlobWeb.Stats( globe, {element: 'fps', verbose: false} );
// Add mouse navigation
var nav = new GlobWeb.Navigation(globe);
// Set background layers
var bmLayer = new GlobWeb.WMSLayer({ baseUrl: "http://demonstrator.telespazio.com/wmspub",
layers: "BlueMarble,esat" } );
globe.setBaseImagery( bmLayer );
var elevationLayer = new GlobWeb.WCSElevationLayer({ baseUrl:"http://demonstrator.telespazio.com/wcspub", coverage: "GTOPO", version: "1.0.0"});
globe.setBaseElevation( elevationLayer );
// Add some vector layer
$.ajax({
url: "europe.json",
success: function(data)
{
var vectorLayer = new GlobWeb.VectorLayer();
vectorLayer.addFeatureCollection( data );
globe.addLayer( vectorLayer );
}
});
}
</script>
</head>
<body onload="webGLStart();">
<h1>Glob Web</h1>
<canvas id="GlobWebCanvas" style="border: none;" width="1400" height="1050"></canvas>
<br/>
<div id="fps"><span style="font-weight:bold">FPS : 0</span></div>
</body>
</html>