Category Archives: What The Bus

The “livemap” tag for WhatTheBus completes the work that I seeded in the last commit.

In the last update, we had finished a page that used jQuery AJAX updates to get the latest bus location from the cache. Using the simulator to provide updates, the AJAX updates shows that we could get location updates as latitude and longitudes. By watching the dev web server, I also saw that these requests were super light (0ms DB, 0ms view).

In this update, I took the same basic code and added Google maps (v3) interaction. Using Google and jQuery together maps is refreshingly easy.

The first step was to render the map when the page loads. This required adding the Google javascript library and pointing the page’s onload event to initMap. The initMap function creates a new map object centered on the bus’ location, creates a bus marker at the center, and then replaces the page’s live_map div with the map.

The second step was to add the AJAX call on a timer. After adding the update function timer registration, the updates simply extended the existing AJAX request. This existing request already had the bus’ position so the work centered on interacting with the map.

To keep things friendly, we turn the last marker into a bullet point and change the bus name to the last time. Then we create a new marker based on that latest position and center the map on that position too. To prevent reduce server load for non-reporting buses, we move off the map page if there is no position data.