Displaying Live Location Data with JS and Mapbox API

Introduction

Have you ever been stuck in bumper to bumper traffic while driving home from work? You’re obviously not alone in this transportation debacle.

The question is what are people doing to make transportation better?

Here is one example where Uber is partnering with Boston to try to solve traffic congestion. If you were on that team, how would you collect and display the necessary data in real time? You would need a network like PubNub, plus a

, as well as a map toolkit.

Project Overview

All the source code for the project is available here for download. In our previous part, we got started with broadcasting geolocation data using HTML5 location services. We recommend checking that out too!

This article will focus on receiving and displaying geolocation real-time data. The Mapbox API drives this specific implementation, which is similar to how city public transportation could broadcast their locations.

In other words this is how a transportation solution could be built without creating a need to manage communicated data between devices connected to the Internet of Things (IoT). You will also learn how to show a marker with a trailing polyline.

Though this entry focuses on an HTML5 implementation there are solutions that convert your web applications into mobile applications. Are you ready to connect the world, with a scope from maps to the Internet of Things? Let’s Go!

Dependencies

This blog entry assume that you have Node and a web server like python -m SimpleHTTPServer.

These are the dependencies for a solution in Mapbox.

PubNub is used for real-time data streaming
Mapbox is used for its geolocation API.
Bootstrap is used for simple styling.

Default Location

Set a default location for the app. You will accomplish this by using HTML5 Geolocation.

First declare variables that have to be used elsewhere in the app.

Next you need to test that the browser has the ability to find the location.

Inside this “if” statement create a function that retrieves the position.

If you’ve gotten this far you need to congratulate yourself! Getting a basic “hello world” apps is no easy task the first few times.

Initializing PubNub

Next you need to initialize PubNub so you can listen for coordinates. Wrap it in a method.

Inside the method, initialize PubNub with your publish/subscribe keys and subscribe to the “mymaps” channel.

To get your unique pub/sub keys, you’ll first need to sign up for a PubNub account. Once you sign up, you can get your unique PubNub keys in the PubNub Developer Dashboard. Our free Sandbox tier should give you all the bandwidth you need to build and test your messaging app with the web messaging API.

The subscribe method will also change the lat and lng variables with each received message.

Use the broadcast geolocation data example from our previous tutorial to send messages over PubNub.

Then make sure you’re listening to the PubNub channel by using the PubNub Developer’s Console.

Using the Mapbox API

Mapbox has made its API fairly easy to use. Take a look at the API here.

First wrap everything in a “main” method. Then instantiate your token.

Instantiate a map and use the map provided in your account.

Then set the map to the latitude and longitude received via messages.

This gives you a default map with no markers.

Add a marker onto the map with this snippet:

Now that you have the marker you want the map and the marker to move with each message. This is so the map centers on the marker with each tick. Do this by setting the marker and map positions with each message.

Next you need to draw a line to be able to track where the marker has been. Mapbox has made this easy.

Instantiate “map_line” outside of the “main” method. This is so the “pubs” method can see it.

Inside the “main” method set mapline to a polyline and add it to the map.

Polyline comes with some cool methods. If you pass coordinates to Polyline, it will automatically push these to an array. It continually uses that array. To draw the line add this piece of code into the PubNub “message” portion of “pubs”.

This concludes our small tour of the Mapbox API. In our next part tomorrow, we’ll do this, only using the Google Maps API!