1 |
<!-- tracks3d.html |
---|
2 |
Modified from Google Earth API Examples for Multiple Glider Tracks |
---|
3 |
http://earth-api-samples.googlecode.com/svn/trunk/examples/kml-fetch-checkboxes.html |
---|
4 |
|
---|
5 |
loads kml generated by parsing localuser mail for current surface fix, glider mission and |
---|
6 |
other info wanted to display on google earth |
---|
7 |
|
---|
8 |
Used Goggle Earth so we can add other layers and data via kml files |
---|
9 |
Can scale icons in Google Earth and not in Google Maps. |
---|
10 |
Can use time and ocean views. |
---|
11 |
|
---|
12 |
You are free to copy and use this sample in accordance with the terms of the |
---|
13 |
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html) |
---|
14 |
--> |
---|
15 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
---|
16 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
---|
17 |
<head> |
---|
18 |
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> |
---|
19 |
<!-- Refresh the page every 1800 seconds (30 minutes) --> |
---|
20 |
<meta http-equiv="Refresh" content="1800; url=http://dockserver.marine.unc.edu/realtime/tracks/" /> |
---|
21 |
<!-- CSS --> |
---|
22 |
<link rel="stylesheet" type="text/css" href="./css/styles.css"></link> |
---|
23 |
<title>Glider Tracks</title> |
---|
24 |
<script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIAAAA747JuuldtzBnLspWkFFDeBSgCKDHVpFgZ1Nng_oNKKqex1JsFBSi5tYx5nsf6PGk-9RU9O4N-cyitw"> </script> |
---|
25 |
<script type="text/javascript"> |
---|
26 |
function addSampleButton(caption, clickHandler) { |
---|
27 |
var btn = document.createElement('input'); |
---|
28 |
btn.type = 'button'; |
---|
29 |
btn.value = caption; |
---|
30 |
|
---|
31 |
if (btn.attachEvent) |
---|
32 |
btn.attachEvent('onclick', clickHandler); |
---|
33 |
else |
---|
34 |
btn.addEventListener('click', clickHandler, false); |
---|
35 |
|
---|
36 |
// add the button to the Sample UI |
---|
37 |
document.getElementById('sample-ui').appendChild(btn); |
---|
38 |
} |
---|
39 |
|
---|
40 |
function addSampleUIHtml(html) { |
---|
41 |
document.getElementById('sample-ui').innerHTML += html; |
---|
42 |
} |
---|
43 |
</script> |
---|
44 |
<script type="text/javascript"> |
---|
45 |
var ge; |
---|
46 |
|
---|
47 |
// store the object loaded for the given file... initially none of the objects |
---|
48 |
// are loaded, so initialize these to null |
---|
49 |
var currentKmlObjects = { |
---|
50 |
'ramses': null, |
---|
51 |
'pelagia': null |
---|
52 |
}; |
---|
53 |
|
---|
54 |
google.load("earth", "1"); |
---|
55 |
|
---|
56 |
function init() { |
---|
57 |
google.earth.createInstance('map3d', initCallback, failureCallback); |
---|
58 |
|
---|
59 |
addSampleUIHtml( |
---|
60 |
'<input type="checkbox" id="kml-ramses-check" onclick="toggleKml(\'ramses\');"/><label for="kml-ramses-check">Ramses </label><br/>' + |
---|
61 |
'<input type="checkbox" id="kml-pelagia-check" onclick="toggleKml(\'pelagia\');"/><label for="kml-pelagia-check">Pelagia </label><br/>' |
---|
62 |
); |
---|
63 |
} |
---|
64 |
|
---|
65 |
function initCallback(instance) { |
---|
66 |
ge = instance; |
---|
67 |
ge.getWindow().setVisibility(true); |
---|
68 |
|
---|
69 |
// add a navigation control |
---|
70 |
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO); |
---|
71 |
|
---|
72 |
// add some layers |
---|
73 |
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true); |
---|
74 |
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true); |
---|
75 |
|
---|
76 |
// fly instantly to position |
---|
77 |
ge.getOptions().setFlyToSpeed(ge.SPEED_TELEPORT); |
---|
78 |
|
---|
79 |
// fly to Long Bay, NC |
---|
80 |
var lb = ge.createLookAt(''); |
---|
81 |
lb.set(33.12, -78.3, |
---|
82 |
0, // altitude |
---|
83 |
ge.ALTITUDE_ABSOLUTE, |
---|
84 |
0, // heading |
---|
85 |
0, // straight-down tilt |
---|
86 |
200000 // range (inverse of zoom) |
---|
87 |
); |
---|
88 |
|
---|
89 |
// fly to Tower R2 SKIO, GA |
---|
90 |
var r2 = ge.createLookAt(''); |
---|
91 |
r2.set(31.375, -80.567, |
---|
92 |
0, // altitude |
---|
93 |
ge.ALTITUDE_ABSOLUTE, |
---|
94 |
0, // heading |
---|
95 |
0, // straight-down tilt |
---|
96 |
50000 // range (inverse of zoom) |
---|
97 |
); |
---|
98 |
|
---|
99 |
ge.getView().setAbstractView(r2); |
---|
100 |
|
---|
101 |
// if the page loaded with checkboxes checked, load the appropriate |
---|
102 |
// KML files |
---|
103 |
if (document.getElementById('kml-ramses-check').checked) |
---|
104 |
loadKml('ramses'); |
---|
105 |
|
---|
106 |
if (document.getElementById('kml-pelagia-check').checked) |
---|
107 |
loadKml('pelagia'); |
---|
108 |
|
---|
109 |
document.getElementById('installed-plugin-version').innerHTML = |
---|
110 |
ge.getPluginVersion().toString(); |
---|
111 |
} |
---|
112 |
|
---|
113 |
function failureCallback(errorCode) { |
---|
114 |
} |
---|
115 |
|
---|
116 |
function toggleKml(file) { |
---|
117 |
// remove the old KML object if it exists |
---|
118 |
if (currentKmlObjects[file]) { |
---|
119 |
ge.getFeatures().removeChild(currentKmlObjects[file]); |
---|
120 |
currentKmlObject = null; |
---|
121 |
} |
---|
122 |
|
---|
123 |
// if the checkbox is checked, fetch the KML and show it on Earth |
---|
124 |
var kmlCheckbox = document.getElementById('kml-' + file + '-check'); |
---|
125 |
if (kmlCheckbox.checked) |
---|
126 |
loadKml(file); |
---|
127 |
} |
---|
128 |
|
---|
129 |
function loadKml(file) { |
---|
130 |
var kmlUrl = 'http://dockserver.marine.unc.edu/realtime/tracks/' + |
---|
131 |
file + '_track.kml'; |
---|
132 |
|
---|
133 |
// fetch the KML |
---|
134 |
google.earth.fetchKml(ge, kmlUrl, function(kmlObject) { |
---|
135 |
// NOTE: we still have access to the 'file' variable (via JS closures) |
---|
136 |
|
---|
137 |
if (kmlObject) { |
---|
138 |
// show it on Earth |
---|
139 |
currentKmlObjects[file] = kmlObject; |
---|
140 |
ge.getFeatures().appendChild(kmlObject); |
---|
141 |
if (kmlObject.getAbstractView()) |
---|
142 |
ge.getView().setAbstractView(kmlObject.getAbstractView()); |
---|
143 |
|
---|
144 |
} else { |
---|
145 |
// bad KML |
---|
146 |
currentKmlObjects[file] = null; |
---|
147 |
|
---|
148 |
// wrap alerts in API callbacks and event handlers |
---|
149 |
// in a setTimeout to prevent deadlock in some browsers |
---|
150 |
setTimeout(function() { |
---|
151 |
alert('Bad or null KML.'); |
---|
152 |
}, 0); |
---|
153 |
|
---|
154 |
// uncheck the box |
---|
155 |
document.getElementById('kml-' + file + '-check').checked = ''; |
---|
156 |
} |
---|
157 |
}); |
---|
158 |
|
---|
159 |
// listen for click on the window (look specifically for point placemarks) |
---|
160 |
google.earth.addEventListener(ge.getWindow(), 'click', function(event) { |
---|
161 |
if (event.getTarget().getType() == 'KmlPlacemark' && |
---|
162 |
event.getTarget().getGeometry().getType() == 'KmlPoint') { |
---|
163 |
// prevent default ballon |
---|
164 |
event.preventDefault(); |
---|
165 |
|
---|
166 |
// var text = 'cliked on an ICon Placemkarker'; |
---|
167 |
var text = event.getTarget().getDescription(); |
---|
168 |
showInContentWindow(text); |
---|
169 |
} |
---|
170 |
|
---|
171 |
// wrap alerts in API callbacks and event handlers |
---|
172 |
// in a setTimeout to prevent deadlock in some browsers |
---|
173 |
// setTimeout(function() { |
---|
174 |
// alert(text); |
---|
175 |
// }, 0); |
---|
176 |
|
---|
177 |
}); |
---|
178 |
|
---|
179 |
function showInContentWindow(text) { |
---|
180 |
var sidediv = document.getElementById('content_window'); |
---|
181 |
sidediv.innerHTML = text; |
---|
182 |
|
---|
183 |
} |
---|
184 |
|
---|
185 |
} |
---|
186 |
|
---|
187 |
</script> |
---|
188 |
</head> |
---|
189 |
<body onload="init()" style="font-family: arial, sans-serif; font-size: 13px; border: 0;"> |
---|
190 |
<h3>Glider Tracks:</h3> |
---|
191 |
<div style="clear: both;"></div> |
---|
192 |
|
---|
193 |
<div id="ui" style="position: relative;"> |
---|
194 |
<div id="sample-ui"></div> |
---|
195 |
<div id="map3d" style="height: 750px; width: 700px; float:left"></div> |
---|
196 |
<div id="content_window" style="position: absolute; left: 720px; top: 0;"> |
---|
197 |
<h3>Surface Report:</h3> |
---|
198 |
</div> |
---|
199 |
</div> |
---|
200 |
<dl><dt>Installed Plugin Version:</dt><dd id="installed-plugin-version">...</dd></dl> |
---|
201 |
|
---|
202 |
</body> |
---|
203 |
</html> |
---|