London Cycle Hire 3D Visualisation in Google Earth

I’ve used my¬†Boris Bikes API which serves live data about bike and docking station availability and Google Earth to create a 3D visualisation that shows the current bike availability across London.

Movie by Andrew Hudson-Smith, Digital Urban/UCL CASA

Boris Bikes API Google Earth 3D Visualisation - 4

Boris Bikes API Google Earth 3D Visualisation - 2

To use it:

  1. Install Google Earth on your computer if you don’t already have it. It’s a desktop application, not a website.
  2. Go to the Boris Bikes API and click the View live in Google Earth link. This will download a file called london-cycle-hire.kml to your computer.
  3. Double-click to open the KML file in Google Earth.
  4. You should see the visualisation in the 3D viewer and London Cycle Hire Bike Availability in your Places sidebar.
  5. Move around the view with your mouse. It’s more interesting if you tilt the angle of view and fly between the “buildings” rather than just view it from above. Do this using the four-arrow cluster in the top-right hand of the 3D view.
  6. Once a minute it’ll automatically fetch fresh live data from the API showing where bikes are available. If you open up the disclosure triangles in the Places sidebar you can see the network link icon change from green to orange and start moving when it’s fetching fresh data.
  7. Right-click on London Cycle Hire Bike Availability in your Places sidebar and choose Save to My Places. This moves it out of your Temporary Places so it’ll be available the next time you open Google Earth.
  8. Be kind to my server by unticking the box for this visualisation in your Places sidebar so it’s not constantly loading live data when you’re not looking at it.

Boris Bikes API Google Earth 3D Visualisation - 3

Boris Bikes API Google Earth 3D Visualisation - 5

Boris Bikes API Google Earth 3D Visualisation - 6

How it Works

The Boris Bikes API is written in the Ruby language using the Sinatra web application framework. You can get the code here on Github.

The 3D Google Earth visualisation is essentially a geographical bar chart generator that updates itself live from the web using a feature called a network link in Google Earth.

Google Earth uses a file format called KML which is its own vocabulary of XML tags. My Ruby application uses the Ruby Builder gem to generate its XML.

The “buildings” that make up the bar chart are Polygons in KML that are placed at an altitude above the surface of the Earth according to the number of bikes currently available at that docking station. I generate a rectangular Polygon starting at the coordinates of the docking station and work clockwise using pre-set offsets of latitudes and longitudes to create the four vertices (corners) of the rectangle, like this:

Vertex Latitude Longitude
1 – top-left lat lng
2 – top-right lat + lat_offset lng
3 – bottom-right lat + lat_offset lng + lng_offset
4 – bottom-left lat lng + lng_offset
5 – top-left (again) lat lng

The last vertex must be the same as the first to close the loop.

Each vertex is also given an altitude which is the number of bikes currently available multiplied by a constant. This gives us a rectangle floating above the ground which we then specify must be extruded down to the ground to give a solid column.

Google Earth/KML doesn’t let us label Polygons so we also add a Point feature at the same location with the description of the docking station and the number of bikes available written as text. We place this on the top of the extruded Polygon but use a style to effectively remove the Point’s icon so it’s invisible. This gives us a labelled column.

Network links work by downloading a KML file into Google Earth (the “source file”) which then pulls another KML file containing the actual place data according to certain conditions. It can do this periodically (as we do here), when the user changes their view, or when the user moves to a certain region on the Earth.

If you look at the source code for app.rb, the KML source file is generated by this section:

get '/london-cycle-hire.kml' do
  headers "Content-Disposition" => "inline",
    "Content-Type" => "application/"

  xml = :indent => 2 )
  xml.kml :xmlns => "" do
    xml.Document do "London Cycle Hire Bike Availability"
      xml.NetworkLink do
        xml.description "London Cycle Hire Bike Availability"
        xml.Link do
          xml.href "http://" + hostname + "/stations.kml"
          xml.refreshMode "onInterval"
          xml.refreshInterval "60"

This tells Google Earth to pull the file every 60 seconds.

Currently this visualisation only shows available bikes not available docks. It could easily be modified to generate the docks instead or perhaps they could be displayed as a second “building” alongside the first in a different colour.

This geographical bar chart visualisation could be applied in countless situations, e.g. showing world cities and their populations.

Tags: , , , , , ,


  1. This is a really good idea! One way to improve it might be to work out the variability of the different nodes (how stable their numbers of bikes are, and if they have different times of day when there are more or less), then use that and your distance from the node to work out the probability of there being a bike spare when you get there!

    Might make a difference in a rushed day. I’ve been pondering whether this would cause the nodes with slightly more bikes to get overused, but I think it will probably self-compensate, automatically de-emphasising nodes it has suddenly made more popular. And at any rate, people will presumably trade off distance vs probability in a personal way, leading to enough variation to stop overuse of previously reliable nodes.

  2. Congratulations – this is fantastic.

    The joy is that if you search on Google maps mobile (at least on the Blackberry – so I assume on pretty much all smartphones) for that kml link, it shows all the sites and availabilities on your mobile too. Making it really easy to find them on the move.

    Well, I say all – it actually only seems to get a subset, starting from the west end. ;-(. But that’s an issue with Google maps mobile on the Blackberry, I suspect.

    Remembering and entering urls on a mobile is always a pain, so it helps to simplify the url (I’ve set up

    Many, many, thanks for this wonderful content!

    - Charles