Preview this course
Building a Transit Map Web App
Already a subscriber?
Building a Transit Map Web App

Building a Transit Map Web App

85 min
Credit: AICP CM

This course is approved for 1.5 AICP CM credit

This course examines the entire process of building an interactive, web-based mapping application. It previews various technologies commonly used in building web-based visualization applications around municipal data. The course will use the Los Angeles Metro API to map every bus route currently run by the agency, map each bus stop, and conclude by displaying realtime locations of buses on any given route.

Although no prior programming experience is required, the course is specifically designed to bring out the "coder" in the "non-coder," and will teach the basics of internet programming languages. Different web technologies will be explored, including HTML, CSS, Javascript, jQuery, Google Maps API, and Leaflet.

In This Course

  1. Yoh Kawano introduces the course.
  2. Find Me on GitHub
    Learn where to download course files.
  3. Setting Up Your Coding Environment
    To create our web map, we need to make sure we are working in the right coding environment. Learn where to get the free software you need and how to set up your folder structure.
  4. jQuery, Bootstap, and Leaflet
    Now, we are going to bring jQuery into our project. jQuery is a javascript library that allows us to do more with less. jQuery gives us access to code snippets that do a lot of the heavy lifting for us with just a few lines of code, including for example, grabbing data from external sites and parsing it with ease.
  5. Developer Tools
    The developer tools are an integral part of any coding project. It allows a developer to debug and identify where errors are happening.
  6. My First Map
    You now have your application ready for some real development action. Your folder structure is set, your html, stylesheet, and javascript files are ready to go, and the jQuery and Bootstrap libraries have been included. Now all we need is an interactive map!
  7. Connecting to the Metro API
    Now we are ready to use jQuery function calls to grab data from Metro.
  8. Mapping the Stops
    Learn how to make each route in the side panel into a hyperlink that, when clicked, displays the bus stop locations for that route on the map. Also create a function called “mapBusStops()” that will complete this task based on the route ID you feed it.
  9. Zooming to Route
    Now that you have mapped the locations of a given bus route, you may have noticed that the map window did not automatically zoom to display all of the bus stop locations. Fortunately, there is a nice leaflet function that allows you to zoom to the extent of a given "bounds."
  10. Using My Icon
    While the nifty blue leaflet icon may serve its purpose well, many times we want to use a different graphic or icon to represent what we are displaying on our map.
  11. Click and Map
    You have successfully created a series of functions that map every single bus stop of a given bus route. Now you want to use the route list in your side panel to dynamically generate their routes when you click on them.
  12. Removing Routes
    You will notice, however, that every time you click on a new route, more and more icons keep piling up on your map. Soon, your entire map is covered with icons, and everything has gotten very sluggish. To avoid that complication, we need to remove previous routes before we add a new route.
  13. Real Time Buses
    The real value of having our map being fed with data coming directly from a transportation agency is in the ability to get "real time" data.
  14. Changing Your Basemap
    At this point, you may be wondering if you can change the basemap. Luckily, there are many free tile service providers that give many options to choose from.

Published 2017