forked from webglearth/webglearth2
-
Notifications
You must be signed in to change notification settings - Fork 0
/
api.html
126 lines (108 loc) · 6.17 KB
/
api.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
114
115
116
117
118
119
120
121
122
123
124
125
126
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, all" />
<title>WebGL Earth API - Demo</title>
<script src="api.js"></script>
<script>
var app;
var mapB, mapM;
var customTMS;
function startWE() {
app = new WebGLEarth('webglearthdiv', {
atmosphere: true,
position: [47.2, 8.5],
altitude: 7000000,
panning: true,
tilting: true,
zooming: true,
proxyHost: 'http://srtm.webglearth.com/cgi-bin/corsproxy.fcgi?url='
});
app.showMiniGlobe('../deploy/world512.jpg', 128);
// Get your own key from: https://www.bingmapsportal.com/
var bingKey = 'AuCVBGPx1VQORSzUMGplLr3JTilLi3lUA3WnqT5SbKcUP5H2s9mh9XsHfy_VKmdG';
mapB = app.initMap(WebGLEarth.Maps.BING, ['AerialWithLabels', bingKey]);
mapM = app.initMap(WebGLEarth.Maps.MAPQUEST);
app.setBaseMap(mapM);
mapBo = app.initMap(WebGLEarth.Maps.BING, ['AerialWithLabels', bingKey]);
mapMo = app.initMap(WebGLEarth.Maps.MAPQUEST);
customTMS = app.initMap(WebGLEarth.Maps.CUSTOM, ['TMS','http://webglearth.googlecode.com/svn/resources/tms/{z}/{x}/{y}.jpg',1,5,256,true]);
//make the overlays transparent
mapBo.setOpacity(0.5);
mapMo.setOpacity(0.5);
setInterval(function() {
document.getElementById('infodiv').innerHTML = app.getHeading() + ', ' + app.getTilt();
}, 100);
//Print coordinates of the mouse
var printCoords = function(e) {
document.getElementById('coordsbox').innerHTML =
(e.latitude + ', ' + e.longitude) + ' at ' +
(e.offsetX + ', ' + e.offsetY);
};
app.on('mousemove', printCoords);
//Show coordinates on click, then unregister the listener
var listenKey;
var alertCoords = function(e) {
//alert(e.latitude + ', ' + e.longitude);
app.off(listenKey);
};
listenKey = app.on('click', alertCoords);
}
function addSomeMarkers() {
var londonM = app.initMarker(51.507222, -0.1275);
var denverM = app.initMarker(39.739167, -104.984722);
var cairoM = app.initMarker(30.058056, 31.228889);
londonM.bindPopup('<h2>London</h2>This marker is already opened.', 250).openPopup();
denverM.bindPopup('<h2>Denver</h2>You can\'t see this marker without rotating the Earth.');
cairoM.bindPopup('<h2>Cairo</h2>Click on me to close London\'s marker.').openPopup();
var closeLondon = function(e) {
//alert(e.latitude + ', ' + e.longitude);
londonM.closePopup();
};
cairoM.on('click', closeLondon);
document.getElementById("addmarkers").disabled = true;
}
</script>
</head>
<body onload="javascript:startWE()">
<div id="webglearthdiv" style="width:600px;height:400px;"></div>
<div id="infodiv" style="height:20px;width:900px;"></div>
<div id="coordsbox" style="height:20px;width:900px;"></div>
<input type="button" value="Zoom to level 9.1" onclick="javascript:app.setZoom(9.1);"/>
<input type="button" value="What's current zoom level?" onclick="javascript:alert(app.getZoom());"/>
<input type="button" value="Set altitude to 5000km" onclick="javascript:app.setAltitude(5000000);"/>
<input type="button" value="What's current altitude?" onclick="javascript:alert(app.getAltitude());"/>
<br />
<input type="button" value="Set position to Mount Everest" onclick="javascript:app.setPosition(27.988056, 86.925278);"/>
<input type="button" value="What's current position?" onclick="javascript:alert(app.getPosition());"/>
<input type="button" value="What's current target?" onclick="javascript:alert(app.getTarget());"/>
<br />
<input type="button" value="Heading 45 degrees" onclick="javascript:app.setHeading(45);"/>
<input type="button" value="Tilt 20 degrees" onclick="javascript:app.setTilt(20);"/>
<br />
<input type="button" value="Make the app bigger!" onclick="javascript:document.getElementById('webglearthdiv').style.width='800px';app.handleResize();this.disabled=true;"/>
<input type="button" value="Download as PNG" onclick="javascript:app.saveScreenshot('screenshot.png')"/>
<input type="button" value="Display screenshot below" onclick="javascript:app.getScreenshot(function(url) {document.getElementById('screenshot').src = url;});"/>
<br />
<input type="button" value="Switch to MapQuest" onclick="javascript:app.setBaseMap(mapM)"/>
<input type="button" value="Switch to Bing" onclick="javascript:app.setBaseMap(mapB)"/>
<input type="button" value="Switch to Custom TMS" onclick="javascript:app.setBaseMap(customTMS)"/>
<input type="button" value="Switch Overlay to MapQuest" onclick="javascript:app.setOverlayMap(mapMo)"/>
<input type="button" value="Switch Overlay to Bing" onclick="javascript:app.setOverlayMap(mapBo)"/>
<input type="button" value="Disable overlay" onclick="javascript:app.setOverlayMap(null)"/>
<br />
<input type="button" value="Fly to Japan bounds" onclick="javascript:app.flyToFitBounds(22,48,122,154)" />
<input type="button" value="Fly to Iceland @ 1000km" onclick="javascript:app.flyTo(65,-19,1000000)" />
<input type="button" value="Fly to Japan @ unchanged" onclick="javascript:app.flyTo(35,138)" />
<input type="button" value="Fly to the Statue of Liberty @ 500m with tilt and heading" onclick="javascript:app.flyTo(40.6894, -74.0446, 500, 20, 45, true)" />
<input type="button" value="Jump to the Statue of Liberty @ 500m with tilt and heading" onclick="javascript:app.setPosition(40.6894, -74.0446, null, 500, 20, 45, true)"/>
<br />
<input type="button" value="Add some markers" id="addmarkers" onclick="javascript:addSomeMarkers()" />
Pick color for position <input type="text" id="colorlat" value="32.65" size="8" />,<input type="text" id="colorlng" value="-16.9166" size="8" /> <input type="button" value="Query color" onclick="javascript:queryColor()" disabled/><div id="colorbox" style="display:inline-block;width:150px;text-align:center;text-shadow:0 0 3px #fff;"></div>
<br />
<img id="screenshot" />
</body>
</html>