Albuquerque Live Bus Tracker

26 Jan

The City of Albuquerque has put out a lot of good data and they have done so in several different formats. There is one data set that I love and despise at the same time – the Real Time Bus data. I love it because I think it is an excellent example of open data. It is extremely useful as it is updated every minute. I despise it because it is in KML. I will give the City the benefit of the doubt and assume they have done this because their software for tracking the buses uses KML by default so it was an easy choice – just spit out what we already have.

As a developer, KML is worthless to me. I want a stream of data in JSON or CSV. I have struggled with what to do for some time now – ignore the bus data or figure out a way to build something with it? In 2013, I wrote a post using the real time bus data that required me to use some tools that I don’t usually pull out – OpenLayers and PHP. OpenLayers allows for the importing of a KML, however, it only did so via a local file. I had to find a way to get the file from the City Website to my server. PHP came to the rescue and the app downloaded the data then rendered it in an OpenLayers map. A fairly large amount of overhead for what should be a simple task – read bus data.

Two years later, almost to the day, I have revisited the bus data. This time I think I have defeated the dreaded KML. In this post, I will show you how to conquer KML files using JavaScript.

Route 766 Live in Leaflet.js

Route 766 Live in Leaflet.js

The Solution

The solution that came to mind was to use AJAX to read the KML file off the City webpage. The first thing I did was to write an AJAX request using the city URL and inspected the response.

XMLHttpRequest cannot load http://domain1 Origin http://domain2 is not allowed by Access-Control-Allow-Origin.

Already off to a great start. I was about ready to wait another two years before looking at the City Bus Data again. I looked in to Chrome and found that you can launch it without web security. I created a shortcut for it on my Desktop:

C:\Program Files(x86)\Google\Chrome\Application\chrome.exe” –args –disable-web-security

When I ran the code again, I got back a bunch of XML. Bingo! that is exactly what I wanted. Now I had to figure out how to parse it. Enter the JavaScript DOMParser().

var xmlDoc = new DOMParser().parseFromString(http.responseText,’text/xml’);

That is all it took to get the KML in to a parsable format. To add the buses to the map I grabbed the coordinates using

var coords = xmlDoc.getElementsByTagName(“coordinates”);

Grabbing the length of the coords object, I looped through mapping the coordinates.

for(i=0;i<Object.keys(coords).length-1;i++){
var xy=coords[i].childNodes[0].nodeValue.split(“,”);
markers.addLayer(L.marker([xy[1],xy[0]]));}

The coordinates are (Long,Lat) in KML and Leaflet.js expects (Lat,Long) so the indexes are switched. Also, the markers are added to a FeatureGroup so that I can easily clear them all and redraw them every 62 seconds.

The application is wrapped in a function getBus() and executed using

 window.setInterval(getBus,62000);

Now every 62 seconds the map will refresh and the buses will have moved.

More Information

There is more data in the KML: Vehicle Number, Speed, Msg Time and Next Stop. The KML file has unfortunately put these values in a table. You cannot grab them by Tag Name easily – they all have the same tag. You can see them all using:

var vehicleNumber=xmlDoc.getElementsByTagName(“td”);
for(i=0;i<Object.keys(vehicleNumber).length-1;i++)
{console.log(vehicleNumber[i].childNodes[0].nodeValue);}

This is where I really wish the data were cleaner – or in JSON. A little data wrangling is good for us, so that will be my next move.

Advertisements

2 Responses to “Albuquerque Live Bus Tracker”

  1. kampar February 5, 2015 at 3:45 am #

    Reblogged this on Dosen GIS and commented:
    semoga cepat menular ke kota-kota di Indonesia …

Trackbacks/Pingbacks

  1. Historic Bus Location Data | Architecture and Planning - March 27, 2015

    […] Pi. One thing I came up with was a data logger. But what to log? Then I thought about a previous post on the Albuquerque Realtime Bus Data. Hmmm. What if I wanted to show the bus locations using a time […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: