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

root/tracks/trunk/tracks/tracks_GE_v1.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.
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>
Note: See TracBrowser for help on using the browser.