WebGL Earth - Curtin Presence
Uses Web GL Earth to show Curtin world wide locations.
HTML
<script src="http://www.webglearth.com/v2/api.js"></script>
<!-- Business Web Technology (ISYS3004) -->
<!-- School of Information Systems -->
<!-- Curtin University -->
<!-- See External Resources for WebGL Earth api -->
<!-- http://www.webglearth.com/v2/api.js -->
<h2> Curtin World Wide Presence </h2>
<div id="webgl_map"></div>
CSS
#webgl_map {
width: 400px;
height: 400px;
background-color: black;
}
JavaScript
function loadWebGLEarth(table) {
var options = {atmosphere: false, center: [0, 0], zoom: 2};
earth = new WE.map('webgl_map', options);
WE.tileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg', {
subdomains: '1234',
attribution: 'Tiles Courtesy of MapQuest'
}).addTo(earth);
for (var i in table) {
// Get the next valid row in the table
var row = table[i];
// Get the data
var info = formatHTML(row['campus'], row['address'], row['country'], row['url']);
var lat = row['latitude'];
var long= row['longitude'];
// Add the marker and bind the information window
var marker = WE.marker([lat, long]).addTo(earth);
marker.bindPopup(info, {maxWidth:200, closeButton: true});
}
// Pan to Perth taking default duration
earth.panTo([-32.003850, 115.894818], {});
}
// Format HTML for the pop-up window when markers are clicked
function formatHTML(campus, address, country, url) {
var html = "";
html += "<b>" + campus + "</b></br>";
html += address + "</br>";
html += country + "</br>";
html += "<a href='" + url + "' >" + url + "</a>";
return (html);
}
// The following could come from a database as JSON text
var table = {
city: [
{
campus: "Curtin University, Bentley Campus",
address: "Kent Street, Bentley WA 6102",
country: "Australia",
latitude: "-32.003850",
longitude: "115.894818",
url: "http://www.curtin.edu.au"
},
{
campus: "Curtin University, Sydney",
address: "39 Regent Street, Sydney NSW 2008",
country: "Australia",
latitude: "-33.884929",
longitude: "151.202595",
url: "http://sydney.curtin.edu.au/"
},
{
campus: "Curtin Sarawak",
...