NCCOOS Trac Projects: Top | Web | Platforms | Processing | Viz | Sprints | Sandbox | (Wind)

root/tracks/trunk/tracks/tracks_GE_v2.html

Revision 82 (checked in by haines, 12 years ago)

Initial commit

Line 
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         // add the button to the Layer UI
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     // var currentKmlObjects is initialied in js_kml_arrary.js source
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       // add a navigation control
80       ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
81    
82       // add some layers
83       ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
84       ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);
85    
86         // fly instantly to position
87         ge.getOptions().setFlyToSpeed(ge.SPEED_TELEPORT); 
88
89         // fly to Long Bay, NC
90         var lb = ge.createLookAt('');
91         lb.set(33.12, -78.3,
92         0, // altitude
93         ge.ALTITUDE_ABSOLUTE,
94         0, // heading
95         0, // straight-down tilt
96         200000 // range (inverse of zoom)
97         );
98
99         // fly to Tower R2 SKIO, GA
100         var r2 = ge.createLookAt('');
101         r2.set(31.375, -80.567,
102         0, // altitude
103         ge.ALTITUDE_ABSOLUTE,
104         0, // heading
105         0, // straight-down tilt
106         100000 // range (inverse of zoom)
107         );
108
109         ge.getView().setAbstractView(r2);
110
111       // if the page loaded with checkboxes checked, load the appropriate
112       // KML files
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       //if layers other than routes are checked, uncheck them
121       // if (document.getElementById('kml-pelagia-check').checked)
122       //   document.getElementById('kml-pelagia-check').checked = false;
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       // remove the old KML object if it exists
134       if (currentKmlObjects[name]) {
135         ge.getFeatures().removeChild(currentKmlObjects[name]);
136         currentKmlObject = null;
137       }
138    
139       // if the checkbox is checked, fetch the KML and show it on Earth
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       // fetch the KML
149       google.earth.fetchKml(ge, kmlUrl, function(kmlObject) {
150         // NOTE: we still have access to the 'file' variable (via JS closures)
151     
152         if (kmlObject) {
153           // show it on Earth
154           currentKmlObjects[name] = kmlObject;
155           ge.getFeatures().appendChild(kmlObject);
156           if (kmlObject.getAbstractView())
157               ge.getView().setAbstractView(kmlObject.getAbstractView());
158
159         } else {
160           // bad KML
161           currentKmlObjects[name] = null;
162    
163           // wrap alerts in API callbacks and event handlers
164           // in a setTimeout to prevent deadlock in some browsers
165           setTimeout(function() {
166             alert('No KML found for layer name ' + name + ' at '+ kmlUrl);
167           }, 0);
168    
169           // uncheck the box
170           document.getElementById('kml-' + name + '-check').checked = '';
171         }
172       });
173
174      // listen for click on the window (look specifically for point placemarks)
175      google.earth.addEventListener(ge.getWindow(), 'click', function(event) {
176        if (event.getTarget().getType() == 'KmlPlacemark' &&
177            event.getTarget().getGeometry().getType() == 'KmlPoint') {
178          // prevent default ballon
179          event.preventDefault();
180
181          // var text = 'cliked on an ICon Placemkarker';
182          var text = event.getTarget().getDescription();
183          showInContentWindow(text);
184       }
185
186      // wrap alerts in API callbacks and event handlers
187      // in a setTimeout to prevent deadlock in some browsers
188      // setTimeout(function() {
189      //  alert(text);
190      // }, 0);
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>
Note: See TracBrowser for help on using the browser.