Build

Location Coordinates in Real-time from a Broadcaster

3 min read Michael Carroll on Apr 1, 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 build an end-user application for receiving location coordinates in real time being streamed from a broadcaster application.

Animated D3 Map Projection Subscription with AngularJS and PubNub

In our previous entry, we created the broadcaster (publisher), that enables users to pin point specific locations on a map and stream (publish) the location data. In this tutorial, we’ll build the receiver (subscriber), the end-user application that receives the location data from the broadcaster and publishes it in real time.

You’ll want to have the html for d3_orthographic_send.html open in the browser. This will allow you to transmit coordinates over PubNub.

Live Working Demo

Want to see it in action? Open the broadcaster and a couple subscribers. As you turn the globe on the broadcaster side, watch as the location is reflected in real time on the subscriber side!

So, onto the tutorial!

AngularJS and PubNub

You need to modify the code from d3_orthographic_send.html so that PubNub subscribes and receives the coordinates. You also need an easy way to update the DOM with every event. You should use AngularJS in this case.

PubNub has a flavor that integrates with Angular. We have a guide for getting started with AngularJS and PubNub that can be found here. If you’re interested and want to check out other cool projects that use Angular and PubNub, then follow this link.

At the bottom of the in-line script you need to declare the Angular module.

The pubnub.angular.service is a custom Angular service within the pubnub-angular package. Next declare the controller. Here it is named ‘orthoCtrl’.

$rootScope has been injected to manually update the DOM with every message event. This is so the globe does not miss a beat.

Set the payload’s message as an object in the scope by using

The console.log is useful so you can see the coordinates coming in and being applied to the $scope. This is very similar to the sender code.

Receive_coords

The reason you use $scope.coords is because you will be showing the coordinates using html. Next you need to to cut and paste the portion of the code that was originally encapsulated by svg.on

With this entire piece, the code will hear the message and apply each change to the DOM. In the “body” tag the Angular app has been declared.

The html to place the coords is after the in-line script html so that the coords appear at the bottom of the globe.

Running the App

Now make sure to have the sender open in one browser tab. Have the receiver open in another. Every time you move the globe in the sender tab, the receiver tab should hear the events and move its globe to the proper position.

Receive

As you can see the Current Coordinates area displays the received coordinates. Open the console for the receiver in order to see the messages being received and applied to the $scope.

Now imagine being able to use a tool like this in order to pinpoint live map updates. For example being able to show live logistics data in real time. On the other hand maybe you would like to create a real-time version of Carmen Sandiego. The possibilities are powerful and real!

We also recently released another broadcast demo, where we built a sportcast app that streams sports statistics. Or check out our webpage editor, if Ember.js is more your style, check it out!

More from PubNub

NPP and HIPAA: Notice of Privacy Practices Definition
Healthcare CategoryJan 6, 20235 min read

NPP and HIPAA: Notice of Privacy Practices Definition

A Notice of Privacy Practices (NPP) is one of the requirements of HIPAA and helps patients understand their personal data rights.

Michael Carroll

Michael Carroll

HIPAA Violation Examples
Healthcare CategoryJan 5, 20236 min read

HIPAA Violation Examples

HIPAA violations can be financially expensive and devastating to a brand. Examine some examples of HIPAA violations, and learn...

Michael Carroll

Michael Carroll

HIPAA Technical Safeguards: How To Protect Sensitive Data
Healthcare CategoryJan 5, 20236 min read

HIPAA Technical Safeguards: How To Protect Sensitive Data

HIPAA covered entities must follow the five technical safeguards to achieve HIPAA compliance and prevent data corruption.

Michael Carroll

Michael Carroll