Broadcasting Geolocation Data with HTML5 Location Services

Introduction to HTML5 Geolocation

In 2009, MIT detailed their collaboration with three universities in Singapore. The collaboration has the goal of making urban transportation more environmentally sustainable. The article states that at the core of the project there are, “analytical tools that harness real-time information and management systems, to design and evaluate new mobility solutions.” The article points to the heightened importance of real-time data for transportation. This is where a real-time data stream network helps developers overcome the challenge.

This blog post will walk you through how to broadcast geolocation data in real time using JavaScript and HTML5 location services. Then, in our next two blog posts, we'll show you how to use two map APIs, Mapbox and Google Maps, to display location information.

Are you ready to connect the world from maps to the Internet of Things? Let’s Go!

Setup

This entry assumes you have Node.js, NPM, and Python installed. If you don’t, then a quick Google search will get you in the right direction. All the source code for the project is available here for download.

It is an HTML file named index.html, which has a form and in-line JavaScript. There are a few dependencies which need to be explained if you haven’t seen them before. If you’re familiar with AngularJS, and the other dependencies listed in the HEAD, feel free to skip this part.

In the HEAD you load dependencies via the available CDNs.

• Angular is used for its two-way data binding and digest.
• PubNub is used for its real-time data stream network. This is what allows us to broadcast.
• PubNub-Angular is used for a PubNub dependency injection into your Angular module. This is so you can see and use PubNub when coding within your Angular app.
• Bootstrap is for style.

If you need more explanation take a look at the PubNub AngularJS overview.

After the break in the head, you need to name your app. Also name the main controller used for the app.

This allows you to call Angular directives from HTML. Next you focus on the in-line script.

Here you declare your app and you inject the PubNub service.

In continuation you add your main controller then give it $rootScope, $scope, and PubNub. $scope allows you to set the scope of objects to the controller. $scope is akin to “this”.

Initializing PubNub

Inside the controller you first initialize PubNub. 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.

Let’s have you test out a basic “Hello World”. Add this snippet within the controller and save.

Within the attached files, there is pubnub_debug_listen.js. In the command line type:

The terminal should appear to hang. This is because PubNub is listening for messages. In a new terminal window navigate to the working directory where you’re storing the HTML files. Type:

Open your browser. Go to localhost:8000. If you named the file “index.html”, the browser will automatically go there. Otherwise, select the file on which you’re working. If you have added nothing to the HTML other than the Angular app and the controller, then you should see a blank page. Look at your terminal where you called pubnub_debug_listen.js. You should see a message showing hello!

If you’re having trouble, look at the developer console in your browser. For example in Chrome View > Developer > JavaScript Console. This should point out any errors occurring on the page.

If you’ve completed this simple “Hello World” portion then congratulate yourself! Angular can be difficult the first time.

Broadcasting Geolocation Coordinates

Now that you’ve sent a message through PubNub’s real-time service you’re ready to send some coordinates. In this app there are variables that control the starting location, the increment added to latitude and longitude, the delay between messages, and the number of messages. The user can change the hard-coded values by using the form fields.

This is the magic of Angular’s two-way data binding!

You need to separate your broadcasting actions into three main methods. The first method, named “start”, sets the $scope coordinates to the user-defined values. It then creates a JSON with the form: { lat: lat, lng:lng, alt:alt } After this it calls pnCall and passes the coordinate object.

The “pnCall” method takes the coordinates and publishes them to the channel “mymaps”. This is where things get tricky. Because of Node’s asynchronous nature, there is no normal time.sleep like in Python or other languages. This means that when you need to delay an action you need to use a callback. In this case pnCall publishes the message, then it calls “setTimeout”. This is like sleep but it’s asynchronous. This then calls the “tracker” method.

The “tracker” method takes the coordinates. It sees if the total number of messages have been sent. If not it adds the increment to the longitude and latitude. Then it packs the new data into a coords JSON. Finally it passes those coords back to “pnCall”. This cycle between “pnCall” and “tracker” only ends when the app has sent the correct number of messages.

If you call the “start” method the cycle will run the specified number of times. You should be able to see these message collecting in the channel. Congratulate yourself once again!

The UI

The user interface was created using using Bootstrap 3. This allows you to get some nice, yet quick, styling. Set up the UI according to the attached files. The trickiest parts of the UI are the Angular parts. Every $scope.variable you specified in your script can be changed here. This is by using ng-model.

Call your start method by using ng-click.

Here you use ng-disabled because you want the full cycle to complete before the user can initiate another cycle by clicking the button. Now you’re ready to broadcast!

Your Geolocation

Your location is the equivalent of all the toppings on an ice cream sundae. HTML5 has turned something that used to be a proprietary service into a feature of the browser. Now anyone who knows a tiny amount of JavaScript can find locations based on IP addresses. Because you’re using Angular, web services built into the browser are less straight-forward.

You will need to make some modifications to your code.

The controller needs to have $window added to its arguments.

After PubNub is initialized you should add the geolocation code.

If the browser supports geolocation, then get the current position as variable “position”.

Next you take the latitude and longitude from the “position” object.

Next is the tricky part.

The main cycle of the app needs to be encapsulated in a function. This is so you run the app after the geolocator has completed its task. Once the geolocation has been found you perform a $scope.apply so that variables are updated for the DOM.

This code calls the wrapper:

In the beginning of mainFcn make sure to set the start lat and long to:

This sets your location as the default latitude and longitude.

This completes the tutorial on HTML5 location Services! In our next two blog posts, we'll use the Mapbox API and Google Maps API to stream location coordinates and data in real time, so stay tuned!