3.1 Metro Web – Setting up jQuery

The following “Metro Web” tutorials are all part of one big project to build a site that:

  • shows a list of all Metro LA bus lines
  • allows you to click on a bus line to display the location of every stop
  • allows you to see where the buses are on each route… in real time

Let’s start by having a look at the Metro LA API website.

After reading through the documentation, notice that they have real-time feeds in JSON-P format.  While not getting into too much detail, JSONP is a format that allows us to grab their data via javascript without any restrictions.  This is something that some API’s offer, and some don’t. For a good explanation of this, check out this article.  Let’s consider ourselves lucky for now, as we are dealing with an API that is easy to deal with via javascript.

Start with a simple Maproom

To start, let’s set up a simple maproom, and use the code from the tutorials in week 2.

The above code will display a map with no markers. The layout uses a side panel at 400 pixels wide. It also has the function for trace (to debug).  The side panel div is given an id of “toc“, and the header text (h1) is given an id of “title“.

Adding jQuery

Now, we are going to bring jQuery into our project. jQuery is a javascript library that allows us to do many (cool) things, including grabbing data from external sites and parsing it with ease.

Google allows us to use their Libraries API to link directly to jQuery.  Simply add the following to your code, right below the script that grabs the Google Maps API.

Leave a Reply