Live map of Portland buses and trains with 18 lines of JavaScript

Live map of Portland buses and trains with 18 lines of #JavaScript

#AngularJS  #BigData

  • The Satori platform makes it ridiculously easy to publish and subscribe to live streaming data.
  • To demonstrate just how easy we’re going to build a real time map of Portland Transit activity using the TriMet Portland GTFS live data channel and just 18 lines of JavaScript code.
  • We’re going to use Leaflet for the map, Angular and the excellent Angular Leaflet library to handle the data binding, and of course, Satori will provide the data.
  • All told, we will need to include the following JavaScript references:

    Tip: You could take a similar approach with Google Maps using the Angular Google Maps library.

Satori makes it easy to build apps that take advantage of live data. How easy? How about this app created by guest developer Phil Lanier that uses just 18 lines of JavaScript.

@wiwer77: Live map of Portland buses and trains with 18 lines of #JavaScript

#AngularJS #BigData

The Satori platform makes it ridiculously easy to publish and subscribe to live streaming data. To demonstrate just how easy we’re going to build a real time map of Portland Transit activity using the TriMet Portland GTFS live data channel and just 18 lines of JavaScript code.

We’re going to use Leaflet for the map, Angular and the excellent Angular Leaflet library to handle the data binding, and of course, Satori will provide the data. All told, we will need to include the following JavaScript references:

And one stylesheet:

Tip: You could take a similar approach with Google Maps using the Angular Google Maps library.

The HTML structure we need for this is extremely simple:

That’s it. If you’re at all familiar with Angular, this is pretty straightforward. We’re just referencing a controller, and

is a directive defined by the Angular Leaflet library.

The Angular controller is just as simple:

All we’re doing here is adding a dependency to ui-leaflet (Angular Leaflet), and then defining the two scope variables referenced by the directive.

$scope.pdx

specifies the map’s initial latitude, longitude, and zoom level, while

$scope.vehicles

is the data bound object that will hold all of our map markers.

Finally, a couple lines of CSS allows the map to fill the browser window:

At this point, we should see a map of Portland with nothing on it.

For the last step, we’ll let Satori do the hard work of streaming live data to us, and we’ll use the data to update our

vehicles

object. To subscribe to the live data feed, we can copy the JavaScript code right out of the TriMet Portland channel  on Satori:

The page on Satori does a great job explaining what this all means, but to summarize:

First we specify the Satori Endpoint and Channel for our feed, along with an Appkey. Satori provides a public Appkey for each channel that’s good for 7 days, but you can sign up to get a permanent Appkey for free.

Next we create the subscription and start listening for new messages.

to turn on the Satori data stream.

Since we’re counting lines of code, we’ll simplify a bit. But we can pretty much drop this right into our controller method. If we run it at this point, we should see bus and train updates streaming into the browser console:

Now, we just need to populate our

vehicles

object with markers using the Satori data. We’ll replace the forEach loop in the code above with the following:

Angular Leaflet expects each marker to be a key/value pair, where the key is a unique identifier (we’ll use the id of the vehicle) and the value defines attributes of the marker. In this case, we will specify latitude, longitude, message (popup text), and a custom marker style. The last line, 

$scope.$apply()

, triggers Angular to re-render the map after each message batch is received.

Last, but not least, we’ll style our custom map markers:

The Portland Transit map is just one example of how Satori makes it easy to use live data to create new apps. Just 18 lines of code that has near infinite scalability built-in with ultra low latency. So you can add in not just more bus data, but all kinds of disparate data – millions of messages from billions of endpoints. Create apps that leverage live data like never before. And best of all it’s free! And, if you’ve got some streaming live data to republish, get on it, you could win $500,000! Just go to Satori.com, create an account and get started.

Connect with us on Twitter, Facebook, and LinkedIn. And remember, we’re hiring!

Live map of Portland buses and trains with 18 lines of JavaScript

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.