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 below sea-level. |
---|
11 |
|
---|
12 |
Added timespan to glider track |
---|
13 |
Added other layers: |
---|
14 |
- 6km hourly HFR vectors -- subsampled for region to draw more quickly |
---|
15 |
- 6km 25 hour avg HFR vectors -- subsampled for region to draw more quickly |
---|
16 |
- NDBC Marine Obs |
---|
17 |
Tidied up with a table |
---|
18 |
|
---|
19 |
You are free to copy and use this sample in accordance with the terms of the |
---|
20 |
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html) |
---|
21 |
--> |
---|
22 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
---|
23 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
---|
24 |
<head> |
---|
25 |
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> |
---|
26 |
<!-- Refresh the page every 1800 seconds (30 minutes) --> |
---|
27 |
<meta http-equiv="Refresh" content="1800; url=http://dockserver.marine.unc.edu/realtime/tracks/" /> |
---|
28 |
<!-- CSS --> |
---|
29 |
<link rel="stylesheet" type="text/css" href="./css/styles.css"></link> |
---|
30 |
<title>Glider Tracks</title> |
---|
31 |
<script type="text/javascript" src="kml_href_array.js?W"></script> |
---|
32 |
<script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIAAAA747JuuldtzBnLspWkFFDeBSgCKDHVpFgZ1Nng_oNKKqex1JsFBSi5tYx5nsf6PGk-9RU9O4N-cyitw"> </script> |
---|
33 |
<script type="text/javascript"> |
---|
34 |
function addLayerButton(caption, clickHandler) { |
---|
35 |
var btn = document.createElement('input'); |
---|
36 |
btn.type = 'button'; |
---|
37 |
btn.value = caption; |
---|
38 |
|
---|
39 |
if (btn.attachEvent) |
---|
40 |
btn.attachEvent('onclick', clickHandler); |
---|
41 |
else |
---|
42 |
btn.addEventListener('click', clickHandler, false); |
---|
43 |
|
---|
44 |
|
---|
45 |
document.getElementById('layer-ui').appendChild(btn); |
---|
46 |
} |
---|
47 |
|
---|
48 |
function addLayerUIHtml(html) { |
---|
49 |
document.getElementById('layer-ui').innerHTML += html; |
---|
50 |
} |
---|
51 |
</script> |
---|
52 |
<script type="text/javascript"> |
---|
53 |
var ge; |
---|
54 |
|
---|
55 |
|
---|
56 |
|
---|
57 |
google.load("earth", "1"); |
---|
58 |
|
---|
59 |
function init() { |
---|
60 |
google.earth.createInstance('map3d', initCallback, failureCallback); |
---|
61 |
|
---|
62 |
addLayerUIHtml( |
---|
63 |
'<input type="checkbox" id="kml-ramses-check" onclick="toggleKml(\'ramses\');"/><label for="kml-ramses-check">Ramses </label><br/>' + |
---|
64 |
'<input type="checkbox" id="kml-pelagia-check" onclick="toggleKml(\'pelagia\');"/><label for="kml-pelagia-check">Pelagia </label><br/>' + |
---|
65 |
'<input type="checkbox" id="kml-hfrhr-check" onclick="toggleKml(\'hfrhr\');"/><label for="kml-hfrhr-check">HFR 6km, Hourly </label><br/>' + |
---|
66 |
'<input type="checkbox" id="kml-hfr25hr-check" onclick="toggleKml(\'hfr25hr\');"/><label for="kml-hfr25hr-check">HFR 6km, 25 Hour Avg </label><br/>' + |
---|
67 |
'<input type="checkbox" id="kml-ndbc-check" onclick="toggleKml(\'ndbc\');"/><label for="kml-ndbc-check">NDBC </label><br/>' |
---|
68 |
); |
---|
69 |
} |
---|
70 |
|
---|
71 |
function initCallback(instance) { |
---|
72 |
ge = instance; |
---|
73 |
ge.getWindow().setVisibility(true); |
---|
74 |
|
---|
75 |
ge.getOptions().setStatusBarVisibility(true); |
---|
76 |
ge.getOptions().setScaleLegendVisibility(true); |
---|
77 |
ge.getOptions().setUnitsFeetMiles(false); |
---|
78 |
|
---|
79 |
|
---|
80 |
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO); |
---|
81 |
|
---|
82 |
|
---|
83 |
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true); |
---|
84 |
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true); |
---|
85 |
|
---|
86 |
|
---|
87 |
ge.getOptions().setFlyToSpeed(ge.SPEED_TELEPORT); |
---|
88 |
|
---|
89 |
|
---|
90 |
var lb = ge.createLookAt(''); |
---|
91 |
lb.set(33.12, -78.3, |
---|
92 |
0, |
---|
93 |
ge.ALTITUDE_ABSOLUTE, |
---|
94 |
0, |
---|
95 |
0, |
---|
96 |
200000 |
---|
97 |
); |
---|
98 |
|
---|
99 |
|
---|
100 |
var r2 = ge.createLookAt(''); |
---|
101 |
r2.set(31.375, -80.567, |
---|
102 |
0, |
---|
103 |
ge.ALTITUDE_ABSOLUTE, |
---|
104 |
0, |
---|
105 |
0, |
---|
106 |
100000 |
---|
107 |
); |
---|
108 |
|
---|
109 |
ge.getView().setAbstractView(r2); |
---|
110 |
|
---|
111 |
|
---|
112 |
|
---|
113 |
if (document.getElementById('kml-ramses-check').checked) |
---|
114 |
loadKml('ramses'); |
---|
115 |
if (document.getElementById('kml-pelagia-check').checked) |
---|
116 |
loadKml('pelagia'); |
---|
117 |
if (document.getElementById('kml-ndbc-check').checked) |
---|
118 |
loadKml('ndbc'); |
---|
119 |
|
---|
120 |
|
---|
121 |
|
---|
122 |
|
---|
123 |
|
---|
124 |
document.getElementById('installed-plugin-version').innerHTML = |
---|
125 |
ge.getPluginVersion().toString(); |
---|
126 |
} |
---|
127 |
|
---|
128 |
function failureCallback(errorCode) { |
---|
129 |
} |
---|
130 |
|
---|
131 |
function toggleKml(name) { |
---|
132 |
|
---|
133 |
|
---|
134 |
if (currentKmlObjects[name]) { |
---|
135 |
ge.getFeatures().removeChild(currentKmlObjects[name]); |
---|
136 |
currentKmlObject = null; |
---|
137 |
} |
---|
138 |
|
---|
139 |
|
---|
140 |
var kmlCheckbox = document.getElementById('kml-' + name + '-check'); |
---|
141 |
if (kmlCheckbox.checked) |
---|
142 |
loadKml(name); |
---|
143 |
} |
---|
144 |
|
---|
145 |
function loadKml(name) { |
---|
146 |
var kmlUrl = kmlArray[name][1]; |
---|
147 |
|
---|
148 |
|
---|
149 |
google.earth.fetchKml(ge, kmlUrl, function(kmlObject) { |
---|
150 |
|
---|
151 |
|
---|
152 |
if (kmlObject) { |
---|
153 |
|
---|
154 |
currentKmlObjects[name] = kmlObject; |
---|
155 |
ge.getFeatures().appendChild(kmlObject); |
---|
156 |
if (kmlObject.getAbstractView()) |
---|
157 |
ge.getView().setAbstractView(kmlObject.getAbstractView()); |
---|
158 |
|
---|
159 |
} else { |
---|
160 |
|
---|
161 |
currentKmlObjects[name] = null; |
---|
162 |
|
---|
163 |
|
---|
164 |
|
---|
165 |
setTimeout(function() { |
---|
166 |
alert('No KML found for layer name ' + name + ' at '+ kmlUrl); |
---|
167 |
}, 0); |
---|
168 |
|
---|
169 |
|
---|
170 |
document.getElementById('kml-' + name + '-check').checked = ''; |
---|
171 |
} |
---|
172 |
}); |
---|
173 |
|
---|
174 |
|
---|
175 |
google.earth.addEventListener(ge.getWindow(), 'click', function(event) { |
---|
176 |
if (event.getTarget().getType() == 'KmlPlacemark' && |
---|
177 |
event.getTarget().getGeometry().getType() == 'KmlPoint') { |
---|
178 |
|
---|
179 |
event.preventDefault(); |
---|
180 |
|
---|
181 |
|
---|
182 |
var text = event.getTarget().getDescription(); |
---|
183 |
showInContentWindow(text); |
---|
184 |
} |
---|
185 |
|
---|
186 |
|
---|
187 |
|
---|
188 |
|
---|
189 |
|
---|
190 |
|
---|
191 |
|
---|
192 |
}); |
---|
193 |
|
---|
194 |
function showInContentWindow(text) { |
---|
195 |
var sidediv = document.getElementById('content_window'); |
---|
196 |
sidediv.innerHTML = text; |
---|
197 |
|
---|
198 |
} |
---|
199 |
|
---|
200 |
} |
---|
201 |
|
---|
202 |
</script> |
---|
203 |
</head> |
---|
204 |
<body onload="init()" style="font-family: arial, sans-serif; font-size: 13px; border: 0;"> |
---|
205 |
<h3>Glider Tracks:</h3> |
---|
206 |
<div style="clear: both;"></div> |
---|
207 |
|
---|
208 |
<div id="ui"> |
---|
209 |
<table> |
---|
210 |
<tr> |
---|
211 |
<td id="layer-ui" style="text-align:left;vertical-align:top;width:180px;"></td> |
---|
212 |
<td id="map3d" style="height: 750px; width: 700px;"></td> |
---|
213 |
<td id="content_window" style="vertical-align:top;"> </td> |
---|
214 |
<!-- <td id="content_window" style="position: absolute; left: 820px; top: 0;"> </td> --> |
---|
215 |
</tr> |
---|
216 |
</table> |
---|
217 |
</div> |
---|
218 |
<dl><dt>Installed Plugin Version:</dt><dd id="installed-plugin-version">...</dd></dl> |
---|
219 |
|
---|
220 |
</body> |
---|
221 |
</html> |
---|