Monday, January 31, 2011

Google Maps and Dynamic Canvas Markers

London Cycle Hire Map

This Google Map shows the number of bikes available at each of the docking stations in the London Cycle Hire scheme.

Probably the most impressive thins about this map is the HTML5 canvas map markers. The markers on the map are custom overlays drawn using the canvas element. Drawing the markers rather than using static images allows the markers to visually represent the number of cycles available.

As well as indicating the location of a cycle station, each marker visually represents the station capacity (volume of the marker) and available cycles (amount of marker filled with red). The markers are redrawn every minute to show in near real-time the number of bikes available.

Hat-tip: Street View Funny


No comments: