GPSTracking/site.html at main · taha-benothmen/GPSTracking · GitHub

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
<!doctype html>
<html>
  <head>
    <title>Realtime Ambulance 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://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyDLj8PD8WIZ4pSH897dOzh5BxIwHyTfM5Y&callback=initialize">

    </script>

  </head>
  <body>
      <div class="bg"></div>
     <div class="bg-others">
    <div class="container">
      <h1 >Realtime Ambulance Tracker with Raspberry PI</h1>
        <center><hr style="height:2px; border:none; color:#ffffff; background-color:#ffffff; width:35%; margin: 0 auto 0 auto;"></center>
        <p>by Taha Ben Othmen IoT2B</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 = 33.886917;
    window.lng = 9.537499;

    var map;
    var mark;
    var lineCoords = [];

    var initialize = function() {
      map  = new google.maps.Map(document.getElementById('map-canvas'), {center:{lat:lat,lng:lng},zoom:12});
      mark = new google.maps.Marker({position:{lat:lat, lng:lng}, map:map});
    };

    window.initialize = initialize;

    var redraw = function(payload) {
      if(payload.message.lat){
      lat = payload.message.lat;
      lng = payload.message.lng;

      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-2337cf63-f5ef-4971-9a74-5f50c003801d',
      subscribeKey: 'sub-c-e7c77320-2513-4ed3-85c0-0117681dfa1f'
    });

    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';
        }
        });
        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=AIzaSyDLj8PD8WIZ4pSH897dOzh5BxIwHyTfM5Y&callback=initialize"></script>
  </body>
</html>