Mystery Incorporated


Programming, photography, news, culture, and cartoons

home | rss | atom

Add to Google

Mapping Citi Bikes


August 3rd, 2013 [programming]

The Citi Bike Mapper application shows all of the new bikesharing stations in New York City. Like the official Citi Bike station map, my version plots markers across a map of the city. But to make it easier to gauge how full or empty a station is, I write the totals across each marker.

Whether you care more about avoiding empty stations or full stations depends on whether you’re planning to check in or out. So, to de-clutter the screen, you can select to show only the number of bikes or docks at each station. You can also show this as a percentage of total slots. Use the “wordy” check box to shorten the markers to just numbers. Or, another option lets you display just the name of each station.

The color or each bubble will always indicate how full or empty the station is, ranging from blue for empty to red for full. Shades of purple are used for proportions in-between.

The color key on the top banner also tells you the total number of stations that are completely empty or full. Click on the number for a list of the stations.

The data is refreshed every minute.

When you hover over a marker, you’ll see the name of that station and also a log showing the number of bikes and docks. Whenever the totals change the log is appended, with no more than the five most-recent changes displayed.

The input field on top lets you navigate to a part of the city.

If you want the page to start at a specific location, append the coordinates to the URL, like:

mvjantzen.com/tools/citibike.html?home=40.741,-73.988

You can use a tool like Spot Picker to get the latitude and longitude, or just move the home icon to a new spot, and the new coordinates will be reflected in the URL.

Another URL parameter lets you pre-select how markers are labeled. This example shows available bikes near Madison Square Park:

mvjantzen.com/tools/citibike.html?home=40.741,-73.988&show=bikes

Other values for “show”: mixed, docks, full, empty, name.

Another parameter controls the default setting of the “wordy” check box:

mvjantzen.com/tools/citibike.html?wordy=false

Each parameter is optional. The wordy setting defaults to false if your screen resolution if 640 pixels or less, such as most smart phones, if held vertically.

Citi Bike Open Data

I was happy to see that Citi Bike started off with sharing some of their data. The main page is citibikenyc.com/system-data. They have a nice doohickey that lets you flip through 8 different bar charts, and each chart has a link to the raw data. And they have a live JSON feed that shows the status and location of each station, at citibikenyc.com/stations/json.

But what they’re completely missing is trip history data. Look at what Capital Bikeshare provides on the Trip History Data page. Each file shows every trip made during a three-month period.

Without similar point-to-point data, I can’t include NYC’s Citi Bike in my Trip Visualizer.

Coding the Mapper

The program was written in JavaScript, using the Google Maps Javascript API.

The markers needed to be created dynamically, with custom colors and text. I used the StyledMarker utility library for Google Maps, my first experience with this solution. You’ll notice a lag as each marker is created, and then, once a minute, as markers are updated with new text and colors. The reason for the delay is that each marker’s icon is made via a call to the Google Chart API. With 330 bikeshare stations, it takes a few seconds to finish creating each round of icons, sadly.

While investigating the Citi Bike data, I came across an undocumented JSON feed similar to the “official” up-to-the-minute station list I mentioned above. This seems to be the one that is used for the official Citi Bike App. I used this one because it has a parameter you can use to switch off the more-static information, such as each station’s name and coordinates. It reduces the JSON size from 127 KB to only 25 KB. These unofficial feeds are:

appservices.citibikenyc.com/data2/stations.php
appservices.citibikenyc.com/data2/stations.php?updateOnly=true

Thanks to dantheman for discovering this.

Their data feeds are unnecessarily complicated by not allowing cross-domain AJAX calls. They need to change their servers’ “Access-Control-Allow-Origin” settings to allow this. Until then, the only way I can access their data is to create a proxy script on my own server. I wrote a super-simple PHP program that just reads in the Citi Bike data feed and writes it back out. This is the entire program:

<?php
if (isset($_GET["update"]))
  echo file_get_contents("http://appservices.citibikenyc.com/data2/stations.php?updateOnly=true");
else
  echo file_get_contents("http://appservices.citibikenyc.com/data2/stations.php");
?>

The program is a bit different than the CaBi Mapper I made last year. Instead of recycling that code, I started with the Bike Shop Mapper.

Try out my Citi Bike Mapper app and leave your comments and suggestions below.

Tags:

One Response to “Mapping Citi Bikes”

  • olen says:

    Nice work! I find the colors confusing and not meaning anything. Why not green for full, yellow for balanced, red for empty? I know that it’s counterintuitive to need to ‘go’ to a RED when looking to return a bike, but in our minds we would know red means empty.

  • Leave a reply



Site by M.V. Jantzen
mvs202 "at" gmail.com
twitter.com/mvs202