Tuesday, April 19, 2011

Using Canvas with Google Maps

Canvas Bar Charts

In the last couple of weeks I've been experimenting with using the canvas element of HTML5 with Google Maps. The canvas element allows for dynamic, scriptable rendering of 2D shapes on a web page, so I thought it would be perfect for creating data visualisations with Google Maps.

This example map presents the populations of the American states by using the canvas element to draw a bar graph for each state. To view a state's population on the map just mouse-over the state on the map.

With the canvas element it is also possible to animate shapes. This example tweens between the different bar charts as you roll over the states. I didn't particularly like the effect so I gave up on it - hence it will only work for some of the eastern states.

Of course much more complex animations are possible. Tim Poon has created a great particle animation with canvas. When I saw his animation I thought it would look great with Google Sky as a background. And it does.

In my example I have used z-index to overlay the canvas element over the map canvas. The disadvantage of doing this is it makes the map inaccessible so you can't interact with the map. The answer is to add the canvas element as an overlay on the map.

The excellent Mapnificent does this to visualise travel distances on Google Maps. Adding the canvas element as an overlay on the map means that on Mapnificent you can still interact with the map.

Another great use of the canvas element is to create dynamic markers. Using the canvas element to draw the markers rather than using static images means that you can change the size of markers to reflect the size of something you wish to represent.

Monocubed did this with their map of the London Bike Hire scheme. The map used markers drawn in canvas to show the number of bikes being hired by each bike station. The size of each marker represented the number of bikes hired from that station (unfortunately the map no longer seems to work).

If you want to use canvas for your markers a good place to start would be Paul Kinlan's tutorial Using Canvas to Create Beautiful Custom Markers in Google Maps.



Unknown said...

Keir, these are really awesome experiments. Thanks for sharing your work.

FYI: you're second example link "This example" is broken.


Keir Clarke said...

Thanks Chris,

Now Fixed!

I've been having a problem lately with Blogger spasmodically adding a url (http://blank.gif) to my posts.

That's what happened here - Blogger pasted it in in the middle of that link.

I'm not sure why it is happening but it is annoying!

Etieqa said...

Thank you for the links, it's very useful!

About Monocubed, it's still working actually. Open in Chrome, select 24hrs > key in the date 2010-10-23.

Sammie said...

Check out my writeup of how I extended the google.maps.OverlayView class of google maps to render to a canvas using the javascript processingjs drawing api, covers translating location data into usable x y drawing coordinates: http://samedwards.net/?p=14

Anonymous said...

I would like to learnm they are super cool.. COuld you provide some steps or codes. Thanks!!