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">
eon.map({
  id: 'map',
  mb_token: 'mapbox api token',
  mb_id: 'mapbox map id',
  subscribe_key: 'subscribe_key_here',
  channel: 'my map channel'
});
</script>

2.js

var channel = 'pubnub-mapbox';

eon.map({
  id: 'map',
  mb_token: 'pk.eyJ1IjoiaWFuamVubmluZ3MiLCJhIjoiZExwb0p5WSJ9.XLi48h-NOyJOCJuu1-h-Jg',
  mb_id: 'ianjennings.l896mh2e',
  channel: channel,
  connect: connect
});

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 pn = PUBNUB.init({
  publish_key: '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)
  ];

  pn.publish({
    channel: channel,
    message: [new_point] // even a single point should be an array
  });

}, 500);

};

5.js

var map = eon.map({
  id: 'map',
  mb_id: 'ianjennings.l896mh2e',
  //...
  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  = PUBNUB({ subscribe_key : 'YOUR_SUBKEY_HERE', ssl : true });
  var channel = 'my-map';
  eon.map({
    pubnub   : pubnub,  // < - - - here < - - - //
    channel  : channel,
    id       : 'map',
    mb_id    : 'mapbox.streets',
    mb_token : 'pk.ey31IjoiaWRtc3giLCJhIjoiZZ1zMGI2ZjBlNTMxZjk5YTEwNjM5WNJlOWI4MmJiZGIifQ.U1jMQo2QVeuUtt85oD7hkQ'
  });
</script>