/
indexEarth.html
118 lines (83 loc) · 3.15 KB
/
indexEarth.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
<html>
<!--
(c) 2005-2015 Copyright, Real-Time Innovations. All rights reserved.
No duplications, whole or partial, manual or electronic, may be made
without express written permission. Any such copies, or revisions thereof,
must display this notice unaltered.
This code contains trade secrets of Real-Time Innovations, Inc.
-->
<head>
<title>placemark_example.html</title>
<script src="/socket.io/socket.io.js"></script>
<script src="http://www.google.com/jsapi?key=ABQIAAAA5El50zA4PeDTEMlv-sXFfRSsTL4WIgxhMZ0ZK_kHjwHeQuOD4xTdBhxbkZWuzyYTVeclkwYHpb17ZQ"></script>
</head>
<body>
<p id="lat"></p>
<p id="lon"></p>
<script type="text/javascript">
var ge;
var singlePM;
google.load("earth", "1", {"other_params":"sensor=false"});
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);
singlePM = ge.createPlacemark('');
singlePM.setName("shape");
moveCamera( 37.7544 ,-122.4337);
}
function setPM(lat, lon) {
// Create the placemark.
var placemark = singlePM;
// Set the placemark's location.
var point = ge.createPoint('');
point.setLatitude(lat);
point.setLongitude(lon);
placemark.setGeometry(point);
// Create a style map.
var styleMap = ge.createStyleMap('');
// Create normal style for style map.
var normalStyle = ge.createStyle('');
var normalIcon = ge.createIcon('');
normalIcon.setHref('http://maps.google.com/mapfiles/kml/paddle/red-circle.png');
normalStyle.getIconStyle().setIcon(normalIcon);
// Create highlight style for style map.
var highlightStyle = ge.createStyle('');
var highlightIcon = ge.createIcon('');
highlightIcon.setHref('http://google-maps-icons.googlecode.com/files/girlfriend.png');
highlightStyle.getIconStyle().setIcon(highlightIcon);
highlightStyle.getIconStyle().setScale(5.0);
styleMap.setNormalStyle(normalStyle);
styleMap.setHighlightStyle(highlightStyle);
// Apply stylemap to a placemark.
placemark.setStyleSelector(styleMap);
// Add the placemark to Earth.
ge.getFeatures().appendChild(placemark);
}
function moveCamera(lat, lon) {
var la = ge.createLookAt('');
la.set(lat, lon, 0, ge.ALTITUDE_RELATIVE_TO_GROUND, -8.541, 66.213, 20000);
ge.getView().setAbstractView(la);
}
function failureCB(errorCode) {
}
google.setOnLoadCallback(init);
var socket = io.connect('http://127.0.0.1:7400');
var lat = document.getElementById('lat');
var lon = document.getElementById('lon');
socket.on('shape', function (data) {
console.log('Got udpate from the server');
console.log('There are ' + data.x + ' users');
var latToSet = 37.7544 + data.y/2000;
var lonToSet = -122.4337 + data.x/2000;
lat.innerHTML = latToSet;
lon.innerHTML = lonToSet;
setPM( latToSet,lonToSet);
});
</script>
<div id="map3d" style="height:400px; width:600px;"></div>
</body>
</html>