-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathopposite.html
62 lines (58 loc) · 2.87 KB
/
opposite.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE HTML>
<html>
<head>
<script src="http://www.webglearth.com/v2/api.js"></script>
<script>
var earth1;
var earth2;
var zoom = 2;
var center = [45.0, 6.0];
function antipode(coord) {
return [-1 * coord[0], coord[1] - 180];
}
function update() {
if (center[0] == earth1.getCenter()[0] && center[1] == earth1.getCenter()[1]) {
center = antipode(earth2.getCenter());
earth1.setView([center[0], center[1]]);
} else {
center = earth1.getCenter();
var antip = antipode(earth1.getCenter());
earth2.setView([antip[0], antip[1]]);
}
if (earth1.getZoom() != zoom) {
zoom = earth1.getZoom();
earth2.setZoom(zoom);
} else {
zoom = earth2.getZoom();
earth1.setZoom(zoom);
}
}
function initialize() {
var proxyUrl = 'http://data.webglearth.com/cgi-bin/corsproxy.fcgi?url=';
earth1 = new WebGLEarth('earth_div1', {zoom: zoom, center: center, proxyHost: proxyUrl});
earth2 = new WebGLEarth('earth_div2', {zoom: zoom, center: antipode(center), proxyHost: proxyUrl});
// Recalculate positions whenever any of the two globes moves
setInterval('update()', 50);
}
</script>
<style type="text/css">
.cross {
width:17px; height:17px; position:absolute; top:50%; left:50%; margin:-8px auto auto -8px; z-index:1024;
background-repeat: no-repeat;
background-position: center center;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEhSURBVDiNrZQxTsNAEEXfLDSWRYjBBTSkSEOZgnCASBQ03IvrUKTiBKaClpIUKHJsIhRHKfCniBdMJCcKyZemmZ3/NNrdGZNEXWbmgAvgBDhN0/Q2juMhMKliJKmsew5XABHQB1o+FwRBDLSr6AKXZpZI+vA1rgboAoM6oEEtYFDV/0KqDnqAbQDUfb3KhzOzA+B6C4CXAX0zc/4Sj7YEeLWAjmP5Crso2gvExuPxfRiG500VQRCczefz96bzoigyA26A46ai2Wx2F4bhw5pOcsfyF+6ibG+QEfD5T8AUeHOSvoAE0AbDqkrgSVLpACTlwMsWoBJ49kP4M8WSXs1sAlyxfginQCJp6hN/VoGkzMwegQ4QAe3FYpECOZDRsE++AWYTYG33oiq+AAAAAElFTkSuQmCC);
}
#earth_div1, #earth_div2{position:absolute !important; top: 0; right: 0; bottom: 0; left: 0; background-color: #fff;}
#earth_div1{right: 50%;}
#earth_div2{left: 50%;}
</style>
<title>WebGL Earth API: Opposite Side of the World</title>
</head>
<body onload="initialize()">
<p><a href="../">Examples</a> > Opposite Side of the World</p>
<h1>WebGL Earth API: Opposite Side of the World</h1>
<p>Displays antipode of a point on the Earth. The two points which are antipodal to one another are considered to be connected by a straight line or tunnel through the centre of the Earth.</p>
<div id="earth_div1"><div class="cross"></div></div>
<div id="earth_div2"><div class="cross"></div></div>
</body>
</html>