3.8 Metro Web – Use jQuery to dynamically display route info

We now have a fully functional maproom that displays every route that Metro offers. Awesome. However, when you click on a route, there is no indication of what route you are displaying. This is not good UI, and not user friendly. Let’s make sure that we display the name of the route that has been clicked.

To do so, let’s created a H2 container to put the name of our route in. From the side panel, let’s add the following H2 with id routeinfo, and wedge it between the H1 title tag and the stoplist DIV.

Since we want to update the “routeinfo” H2 tag when somebody selects a route, we want to do this in the “mapBusStops” function. We will have to make another call to the Metro API to get the name of the route, which is fed through the “busnum” parameter. For example, if you requested route “20”, the call to the Metro API would be:

http://api.metro.net/agencies/lametro/routes/20/

This returns the following familiar parameters:

  • display_name
  • id

What we want to do is have the “display_name” to show up in the H2 tag we created. In the code below, lines 15-20 show the new getJSON request for the specified route, and the jQuery call using the .html function to add the “display_name”.

(sample code)

Leave a Reply