Tracking and Streaming Real-time Vehicle Location on a Map

2 min read PubNub Staff on Sep 4, 2015
Try PubNub Today

Free up to 1MM monthly messages. No credit card required.

Subscribe to our newsletter

By submitting this form, you are agreeing to our Terms and Conditions and Privacy Policy.

How to track and stream real-time vehicle location on a live-updating map using EON, JavaScript, and the Mapbox API.

With any connected car, navigation, or tracking and dispatch application, the real-time monitoring of vehicle location is key. You want to see where that vehicle is, and want to see that vehicle move across a map as it is in real life.

The real-time vehicle tracking and movement is possible because of real-time data streams. Connected applications are streaming location data in JSON, and that JSON message is parsed and displayed on the map. For the most accurate tracking applications, new location data is sent every second, creating a smooth movement on the map.

In this blog post, we’ll look at how to stream and visualize real-time vehicle location data on a live-updating map using the EON JavaScript framework and the Mapbox API.

Dealing with maps can be a pain, especially when you add animations and real-time data. But using EON and Mapbox, this tutorial will provide an easy to use, animated, real-time solution for tracking connected devices and users on a map.

Click here for the full EON GitHub repository.

Streaming Real-time

PubNub Project EON Maps

EON Maps is a standalone library that includes the Mapbox assets. You supply an array of geolocation lat/longs and the map renders markers in those locations.

When you publish a new set of lat/longs, the map animates the transition from the last location to the new location. The library is time sensitive, meaning speed is accurately animated between keyframes.

Quick Start

Here’s a short example of animating a single marker across the United States.

Streaming Realtime

Here’s what the code looks like:

<script type="text/javascript" src=""></script>
<link type="text/css" rel="stylesheet" href="" />
  L.mapbox.accessToken = 'pk.eyJ1IjoiaWFuamVubmluZ3MiLCJhIjoiZExwb0p5WSJ9.XLi48h-NOyJOCJuu1-h-Jg';
  var map ='map', 'ianjennings.l896mh2e');
  var channel = 'pubnub-mapbox';
  var tacos = new pubnub_mapbox({
    map: map,
    channel: channel,
    init: init
  function init() {
    var point = {
      latlng: [37.370375, -97.756138]
    var pn = PUBNUB.init({
      publish_key: 'demo'
      var new_point = JSON.parse(JSON.stringify(point));
      new_point.latlng = [
        new_point.latlng[0] + (Math.floor(Math.random()) * 0.1),
        new_point.latlng[1] + (Math.floor(Math.random()) * 0.2)
        channel: channel,
        message: [new_point]
    }, 500);

The EON Map library support multiple positions, custom marker styles, and even the ability to follow a designated marker as it animates.

That’s all for this quick tutorial on building real-time vehicle tracking maps. For more in depth guide to EON, check out the video below, or read more on the EON project overview page.

More from PubNub

Building a Core Product Strategy that Meets a Market Need
News Jun 1, 20221 min read

Building a Core Product Strategy that Meets a Market Need

Patrick Ng, Innovation Director at Spark Launchpad, joins Casey Clegg, COO at PubNub, to discuss effective ideation and the...

PubNub Staff

PubNub Staff

Can Empathy Exist in the Metaverse
News May 16, 20221 min read

Can Empathy Exist in the Metaverse

A roundtable discussion led by PubNub’s COO, Casey Clegg, exploring the topics of what it means to be human in a virtual world.

PubNub Staff

PubNub Staff

How to Advance Telehealth and Virtual Care Technologies
News May 2, 20221 min read

How to Advance Telehealth and Virtual Care Technologies

Dr. Joe Kvedar, Chair of the Board for the American Telemedicine Association, joins our COO, Casey Clegg, to discuss why...

PubNub Staff

PubNub Staff