-
Notifications
You must be signed in to change notification settings - Fork 12
/
googleMaps.html
91 lines (79 loc) · 4.35 KB
/
googleMaps.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
<!DOCTYPE html>
<html>
<head>
<head>
<title>User Aircraft Position</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
// Returns a rotated image. Used for displaying plane icon pointing to correct heading
function drawRotated(canvas, image, degrees){
var ctx = canvas.getContext('2d');
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.save();
ctx.translate(canvas.width/2,canvas.height/2);
ctx.rotate(degrees*Math.PI/180);
ctx.drawImage(image,-image.width/2,-image.width/2);
ctx.restore();
return canvas.toDataURL("image/png");
}
var map;
var marker;
var airplaneIcons = new Array();
function initialize() {
var img = new Image();
img.onload = function(){
var canvas = document.getElementById('icon');
//ar ctx = can.getContext('2d');
airplaneIcons[0] = img;
airplaneIcons[360] = img;
for (var i=1; i < 360; i++) {
airplaneIcons[i] = drawRotated(canvas, img, i);
}
var mapOptions = {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(40.676344124391761, -74.178839612106174)
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
marker = new google.maps.Marker({
position: new google.maps.LatLng(40.676344124391761, -74.178839612106174),
map: map,
title: 'FSX',
icon: airplaneIcons[0]
});
}
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGYAAABmCAMAAAAOARRQAAAAh1BMVEX///8vLy86Ojo0NDQtLS0+Pj4pKSlAQEA5OTkxMTE1NTVFRUVCQkJHR0dKSkonJyciIiL4+PgdHR3u7u7Ly8sZGRmAgIBQUFDn5+fAwMCfn5/R0dH19fXd3d25ublhYWGRkZEAAACrq6uIiIhvb297e3uVlZVZWVlpaWnh4eEODg66urqwsLAcwruXAAAE+ElEQVRoge3a6W6rOhAA4AK2wSTBZt+XELI27/981zZLIG3PksNUulLnx5GqNOfreLA9dvL29hM/8RPwUVbVuw+vxPvbPnKBleLiEUK8Cpg5hQQhxCxYJbkhpGkaCltQJuKaClZDVqd0EFWBtgEg0xJq2CIMSjI4xT8S21Jhkw5u7uQbaum6jnXdonEJxlTM1rEpAgsHrDhuhCxsbkWY2GLvUIwfG7pQNhvpoBPUI+0TCwtltxMOpscCiMm5SEYo0jHtGoppiajMbuc4wjGtGOqJjigWyTgiBKPrUMzFfjBbTKAYxzJnDE+AGE1fMFcghswZk+UwSoHwnCFAq81VMBt4Jte+JZtAG7PZQTIpHbP5LmYDyNx7pl86txjqgV4wJhjTKmbzfYwsDdhik0lGOv0uDcmYMwaogxqZjRwzUzQDEE56cCyMH4xuofi+LuGWDePIsPS+OGrMdMvW+GXF+hRBxDwkenQdq2ZwYgzKtXalPdR9j5CHNEpta2Bk12li4RjiAMLrdo1GKq2pR8QBTSSjGHPGiHQ0xMn5/o/9ZxHEN06QUkbGXDIaIjwkTfK65KeXUCKTMjGmYkYHESag/LWx89uOewOiFJmMOnVszYkRzgjZx+rvM0pOMRmQSemTGQIP6QyOgDxa/9Xx2r821n4crh4ZlKWj9/koSGXEb7c/LJJbptk5DBkZh2tA1FlwzuA+HWuCkEyJhCRKf9v05lkUc5EHmTJ5Uian/0HmM09IjR3rfj1lgw4zbzC+QJbZSEYlZEhoqBEhnDnRV5B/onuPPYwZIpWReYrRWWZEuLfv8k+KVFS722hMiTxS+UrpnbFCfUZDSh6PgmeoiAhfJqIymRDJfEGNzkcotA7LbqGIOZtX5JHJ7P2avV1C4hVrHFJrHLmpRgJiXG8WzJ6RZ6O/mdEM0znX3SGrxFqS0llGOj53dX2OHSzeMf+D5hmJtSGdOcdwVnb1m+LJtONLdGqr4DrOgwSNQyjCrvM33y/LoGqb7mwRZdkfoLCbFajcef1clFdYYsXdXaI2yMvkaTW0ZgyNphfdpMyrQ015fz21cPjioqq8sP5BI2Z3Sv2i+HTJqI0Z83TR5RZFnnVYG5anAeKbpwmU3LOsvX/2sD+iQdYU+PMrm6QSQ2giVWqRC36lnW/JpNjO163tNZXlirfxpXmp/w34xBjnX7ca/rUsry9uqUk4TSZav/Q//FH4ZJy0NjoCMrrsb2w5PUgDyDh0XB8gL26Ls6YWIvEPX7l9XjAXNDGAt93ukfRrnkE9uOvhN/fA+rWV0hDqlksyJz4xkJ9HZV6/ilMthLpPlXH/HqaamBugUnTsO7K5h8MOq2kcbhVI2biTi30Rp79/w0tx19nQ/Mjtl2GQzySTC2dj+6PaCcaPq3/k4ab0caiSjCabo126LpQ04sA8MEOojhwd1rweylXz+5ERh5l4vSch5bKPnxr5QVGOOMtkKw1cYCllyQxdv2yT15lBfud9okzpiL5/lR0uV3WRfS95yqZniLdKL1Xdhj+a6tiYHGLbqB9L8coaTHpTFYibKs8zbXDY5T3NIlMdVhlbgxGDxkMnU3v/9UyGEVM/Bo0hII7XYIoDP48H/eLYf12AnPt9wL0e6J6vv7hlXJ21+QH2KyOVoRgP9isWb0ms5g+H2mzGaG5MrmSAzWAfp9iJO8jvcQzhAvab/5f4D/12aHTgWZ7DAAAAAElFTkSuQmCC';
}
google.maps.event.addDomListener(window, 'load', initialize);
var ajaxGet = new XMLHttpRequest();
var updater = setInterval(function() {
ajaxGet.open('GET', '/getall', false);
ajaxGet.send();
if (ajaxGet.readyState==4 && ajaxGet.status==200) {
var simData = JSON.parse(ajaxGet.responseText);
var planePos = new google.maps.LatLng(simData.Plane_Latitude, simData.Plane_Longitude);
if (marker) {
marker.setPosition(planePos);
//map.setCenter(planePos);
var heading = Math.round(simData.Plane_Heading_Degrees_True);
marker.setIcon(airplaneIcons[heading]);
marker.setTitle('HDG=' + heading + '\nALT=' + Math.round(simData.Plane_Altitude) + '\nSPD=' + Math.round(simData.Airspeed_Indicated));
}
}
}, 1000);
</script>
</head>
<body>
<div id="map-canvas"></div>
<canvas id="icon"></canvas>
</body>
</html>