Albuquerque Live Bus Data as JSON

27 Jan

In my last post on the City of Albuquerque live bus data I showed how to parse the KML straight from the server in JavaScript. In this example, I will show you how to create your own REST endpoint for Route 766.

Classic ASP

Using classic ASP, because why not, I made a request to the server and read in the KML file.

url = “http://data.cabq.gov/transit/realtime/route/route766.kml”
set xmlhttp = CreateObject(“MSXML2.ServerXMLHTTP”)
Set xml = Server.CreateObject(“Microsoft.XMLDOM”)
xmlhttp.open “GET”, url, false
xmlhttp.send “”
xmlDoc=xmlhttp.responseText

The xmlhttp.responseText will hand back the KML file (KML is just XML) as text formatted as XML.

<?xml version=”1.0″ encoding=”UTF-8″?>
<kml xmlns=”http://www.opengis.net/kml/2.2″&gt;
<Document>
<Name>Route 766</Name>
<Style id=”NoDir”>

To parse it by nodes, we need to convert it to XML (though you could parse it using split() or a combination of other methods.

xml.async = False
xml.loadXML(xmlDoc)

To make the service return JSON, we will need to loop through all the Placemark/Point nodes and pull out the coordinates. We grab the node then setup our counters.

Set nodes = xml.SelectNodes(“//Placemark/Point”)
count=0
total=nodes.length-1

Before entering the loop, we need to setup our JSON string

Response.ContentType = “application/json”
response.write(“[“)

Finally, we can loop through and print each coordinate value in {}. Then we close the JSON string and empty out our variables.

For Each node In nodes
response.write “{”
For Each child in node.ChildNodes
Response.Write “”””& child.nodeName & “””: “”” & child.Text & “”””
Next
if count=total Then
response.write “}”
else
response.write”},”
count=count+1
End if
Next
response.write(“]”)
Set nodes = Nothing
set xmlhttp = nothing

Here is what the service returns

[{“coordinates”: “-106.65785,35.08641”},{“coordinates”: “-106.58566,35.07783”},{“coordinates”: “-106.56848,35.07648”},{“coordinates”: “-106.64804,35.0838”},{“coordinates”: “-106.69363,35.08368”},{“coordinates”: “-106.70488,35.0813”},{“coordinates”: “-106.57089,35.10303”}]

The KML is still ugly – mostly because the <description> node has a table as a child node and getting each value out of the table is annoying. Please, City of Albuquerque, please change the KML to not have tables but nodes for <Vehicle Number>, <Speed., <Msg Time> and <Next Stop>.

Client Side Consumption of the REST Service

With the service up and running, we can query it using AJAX on the client side and draw a map. In the client side JavaScript, we can take httpresponseText and parse it to JSON. Iterating through the length, we grap the coordinates and split them on the “,”. Then add them to the map. We could improve our JSON service to split the coordinates for us and write out an X and Y attribute.

var url = “http://dmdview/paul/xml.asp&#8221;;
http=new XMLHttpRequest();
http.open(“GET”, url, true);
http.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
console.log(http.responseText);
var result= JSON.parse(http.responseText);
for(x=0;x<Object.keys(result).length;x++){
xy=result[x].coordinates;
coords=xy.split(“,”);
markers.addLayer(L.marker([coords[1],coords[0]]))
}//end for
markers.addTo(map);}}
http.send();

Now you have a JSON service that can be replicated for each bus route.

Advertisements

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: