Realtime Location Tracking on a Map using JavaScript

1.html

<script type="text/javascript" src="http://pubnub.github.io/eon/lib/eon-map.js"></script>
<link type="text/css" rel="stylesheet" href="http://pubnub.github.io/eon/lib/eon.css" />
<div id='map'></div>
<script type="text/javascript">
 var pubnub = new PubNub({
  publishKey: 'demo',
  subscribeKey: 'demo'
});
eon.map({
    pubnub: pubnub,
    channels: ['eon-map'],
    id: 'html-id',
    mbToken: 'mapbox api token',
    mbId: 'mapbox map id'
});
</script>

2.js

var channel = 'pubnub-mapbox';
eon.map({
  pubnub: pubnub,
  channels: [channel],
  id: 'html-id',
  mbToken: 'mapbox api token',
  mbId: 'mapbox map id'
});

3.js

var torchys = [
  { latlng: [30.370375, -97.756138] },
  { latlng: [30.323118, -97.739144] },
  { latlng: [30.302816, -97.699490] },
  { latlng: [30.293479, -97.742405] },
  { latlng: [30.250337, -97.754593] },
  { latlng: [30.236689, -97.762730] }
];

4.js

function connect() {

var point = {
  latlng: [37.370375, -97.756138]
};

var pubnub = new PubNub({
  publishKey: 'demo',
  subscribeKey: 'demo'
});

setInterval(function(){

  var new_point = JSON.parse(JSON.stringify(point));

  new_point.latlng = [
    new_point.latlng[0] + (getNonZeroRandomNumber() * 0.1),
    new_point.latlng[1] + (getNonZeroRandomNumber() * 0.2)
  ];
  
  pubnub.publish({
      channel: channel,
      message:[new_point]
    });
  }, 500);
};

5.js

var map = eon.map({
  id: 'map',
  mbId: 'YOUR_MAPBOX_ID',
  mbToken: 'YOUR_MAPBOX_TOKEN',
  channels: ['eon-map-multiple'],
  pubnub: pubnub,
  message: function (data) {
    map.setView(data[3].latlng, 13);
  }
});

6.html

<div id='map'></div>
<script>
  L.RotatedMarker = L.Marker.extend({
    options: { angle: 0 },
    _setPos: function(pos) {
      L.Marker.prototype._setPos.call(this, pos);
      if (L.DomUtil.TRANSFORM) {
        // use the CSS transform rule if available
        this._icon.style[L.DomUtil.TRANSFORM] += ' rotate(' + this.options.angle + 'deg)';
      } else if (L.Browser.ie) {
        // fallback for IE6, IE7, IE8
        var rad = this.options.angle * L.LatLng.DEG_TO_RAD,
        costheta = Math.cos(rad),
        sintheta = Math.sin(rad);
        this._icon.style.filter += ' progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\', M11=' +
          costheta + ', M12=' + (-sintheta) + ', M21=' + sintheta + ', M22=' + costheta + ')';
      }
    }
  });

  var map = eon.map({
    id: 'map',
    mb_id: 'ianjennings.lec77m70',
    mb_token: 'pk.eyJ1IjoiaWFuamVubmluZ3MiLCJhIjoiZExwb0p5WSJ9.XLi48h-NOyJOCJuu1-h-Jg',
    channel: 'rutgers-bus-data',
    rotate: true,
    history: true,
    marker: function (latlng, data) {

      var marker = new L.RotatedMarker(latlng, {
        icon: L.icon({
          iconUrl: 'http://i.imgur.com/2fmFQfN.png',
          iconSize: [9, 32]
        })
      });

      marker.bindPopup('Route ' + data.routeTag.toUpperCase());

      return marker;

    }
  });
</script>

7.html

<div id="map"></div>
<script>
  var pubnub = new PubNub({
    subscribeKey: "mySubscribeKey",
    publishKey: "myPublishKey",
    ssl: true
})    
  var map = eon.map({
    id: 'map',
    mbId: 'YOUR_MAPBOX_ID',
    mbToken: 'YOUR_MAPBOX_TOKEN',
    channels: ['eon-map-multiple'],
    pubnub: pubnub,
    message: function (data) {
      map.setView(data[3].latlng, 13);
    }
  });
</script>