-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
116 lines (98 loc) · 4.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
114
115
116
<!doctype html>
<html>
<head>
<title>E-Shuttle Tracker</title>
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.19.0.min.js"></script>
<link rel="stylesheet" href="map.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="bg"></div>
<div class="bg-others">
<div class="container">
<h1 >E-Shuttle Tracker</h1>
<center><hr style="height:2px; border:none; color:#ffffff; background-color:#ffffff; width:35%; margin: 0 auto 0 auto;"></center>
<p>by Team Stride : We Rock</p>
<center><button class="btn btn-success col-sm-3" id="action">Start Tracking</button></center><br>
<center><div id="map-canvas"></div></center>
</div>
</div>
<script>
window.lat =19.133659;
window.lng = 72.911845;
window.lat2 = 19.132987;
window.lng2 = 72.913835;
var map;
var mark;
var mark2;
var lineCoords = [];
var initialize = function() {
var iconBase ='https://developers.google.com/maps/documentation/javascript/examples/full/images/';
// var icons = {
// parking: {
// icon: iconBase + 'parking_lot_maps.png'
// },
// library: {
// icon: iconBase + 'library_maps.png'
// },
// info: {
// icon: iconBase + 'info-i_maps.png'
// }
map = new google.maps.Map(document.getElementById('map-canvas'), {center:{lat:lat,lng:lng},zoom:17});
mark = new google.maps.Marker({position:{lat:lat, lng:lng}, map:map, label: 'E1' });
mark2 = new google.maps.Marker({position:{lat:lat2, lng:lng2}, map:map, draggable : false, label : "E2"});
// mark.getElementsByTagName('')
};
window.initialize = initialize;
var redraw = function(payload) {
if(payload.message.lat){
lat = payload.message.lat;
lng = payload.message.lng;
console.log(lat)
map.setCenter({lat:lat, lng:lng, alt:0});
mark.setPosition({lat:lat, lng:lng, alt:0});
lineCoords.push(new google.maps.LatLng(lat, lng));
var lineCoordinatesPath = new google.maps.Polyline({
path: lineCoords,
geodesic: true,
strokeColor: '#2E10FF'
});
lineCoordinatesPath.setMap(map);}
};
var pnChannel = "raspi-tracker";
var pubnub = new PubNub({
publishKey: 'pub-c-88519531-5c86-40ba-a87e-87d67fc1f056',
subscribeKey: 'sub-c-a4e55bfc-297b-11ea-a5fd-f6d34a0dd71d'
});
document.querySelector('#action').addEventListener('click', function(){
var text = document.getElementById("action").textContent;
if(text == "Start Tracking"){
pubnub.subscribe({channels: [pnChannel]});
pubnub.addListener({message:redraw});
document.getElementById("action").classList.add('btn-danger');
document.getElementById("action").classList.remove('btn-success');
document.getElementById("action").textContent = 'Stop Tracking';
}
else{
pubnub.unsubscribe( {channels: [pnChannel] });
document.getElementById("action").classList.remove('btn-danger');
document.getElementById("action").classList.add('btn-success');
document.getElementById("action").textContent = 'Start Tracking';
}
});
</script>
<!-- <script>
function newPoint(time) {
var radius = 0.01;
var x = Math.random() * radius;
var y = Math.random() * radius;
return {lat:window.lat + y, lng:window.lng + x};
}
setInterval(function() {
pubnub.publish({channel:pnChannel, message:newPoint()});
}, 500);
</script> -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyAm8e1qPhnAp0GPjAEdedZFV20lg6TuBTY&callback=initialize"></script>
</body>
</html>