forked from cedricpinson/globe
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
113 lines (92 loc) · 3.16 KB
/
index.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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html>
<head>
<style>
body {
overflow:hidden;
margin:0;
padding:0;
background: rgb(44,44,44);
overflow:hidden;
padding:0;
margin:0;
color: white;
}
.vignette {
-moz-box-shadow: inset 0px 0px 88px rgba(0,0,0,1.0);
-webkit-box-shadow: inset 0px 0px 88px rgba(0,0,0,1.0);
box-shadow: inset 0px 0px 88px rgba(0,0,0,1.0);
}
a:link {text-decoration: none; color: black;}
a:visited {text-decoration: none; color: black;}
a:active {text-decoration: none; color: black;}
a:hover {text-decoration: underline; color: black;}
</style>
<title>Globe</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="js/osg-debug.js"></script>
<script type="text/javascript" src="js/globe.js"></script>
<script type="text/javascript" src="js/world.js"></script>
<script type="text/javascript" src="js/height.js"></script>
<script type="text/javascript" src="js/country.js"></script>
<script type="text/javascript" src="js/coast.js"></script>
<script type="text/javascript">
window.addEventListener("load", function() {
var options = {
//globeBackColor: "#73514F55",
globeBackColor: "#396A92aa",
globeFrontColor: "#9AB4CBbb",
globeLinesColor: "#00000044",
// width:1920,
// height:996,
rotationIdleSpeedFactor: 10.0,
rotationSpeedFactor: 1.5,
wave: false
};
var globe = new Globe(document.getElementById("3DView"),options);
var img = new Image();
var items = [];
img.onload = function() {
// basic test usage
globe.addImage(48.8566667, 2.3509871, img);
globe.addImage(48.8566667, 2.3509871, img);
globe.addImage(48.8566667, 2.3509871, img);
globe.addImage(48.8566667, 2.3509871, img);
globe.addImage(48.8566667, 2.3509871, img);
globe.addImage(48.8566667, 2.3509871, img);
globe.addImage(48.8566667, 2.3509871, img);
// check it's in the tree
if (globe.items.children.length !== 7) {
alert("Should be 7, and is " + globe.items.children.length);
}
globe.dispose();
if (globe.items.children.length !== 0) {
alert("Should be 0, and is " + globe.items.children.length);
}
items.push(globe.addImage(48.8566667, 2.3509871, img));
// check it's in the tree
if (globe.items.children.length !== 1) {
alert("Should be 1, and is " + globe.items.children.length);
}
items[0].dispose();
// check it's not in the tree
if (globe.items.children.length !== 0) {
alert("Should be 0, and is " + globe.items.children.length);
}
};
img.src = "item.png";
window.setInterval(function() {
globe.addImage(48.8566667, 2.3509871, img, { color: [ 1.0, 0.2, 1.0, 0.4] }, function() { osg.log("Hit itemID " + this.itemID ); } );
}, 5000);
},true);
</script>
</head>
<body class="vignette">
<div id="ViewContainer">
<canvas id="3DView"></canvas>
</div>
<canvas id="HeightMap1" width="128" height="64" style="display: none;"> </canvas>
<canvas id="HeightMap2" width="128" height="64" style="display: none;"> </canvas>
</div>
</body>
</html>