Cool in FF. Buggy in Safari/Chrome/Opera. No IE.
Infinite Map
Taking the code made by Jacob on his Mario Kart demo I thought why not give it a try using the tiles of Yahoo or Google maps to create the same effect as in the GPS systems. The idea can be seen in the following picture:
I finally used the ones from openstreetmap.org since taking the tiles from them was trivial due to the way they name the images:
http://c.tile.openstreetmap.org/[z coord (zoom)]/[x coord]/[y coord].png
On top of that, I don't know the terms of service of Yahoo and Google maps so don't try this at home.
The key of the whole implementation is the use of the drawImage method for canvas. The fact that this method can take two possible source elements (an image element or another existing canvas element in the document) allows you to create very nice features like cropping images, image distortion or even a copy/paste selection feature as the one in photoshop.
In this case, Jacob already did the hard work of using the drawImage multiple times to split the original image into horizontal strips and then create the 3D effect. Another example of this technique is the one I did to create the Quicktime VR-style panorama effect using vertical strips instead.
For the car navigation map we have added an extra step to create the source image from the nine openstreetmap tiles. Merging first the tiles to a temporary canvas and then using this temporary canvas as the source of the final 3D map.
There's still more room to play around with it like improving the camera view or porting the collision system of the Mario Kart example.
A common issue some users find the first time they play with the canvas tag is the same origin policy which will prevent one from exporting the canvas to an image (using the toDataURL method) if the drawImage method uses images from another place. In order to solve that we need to proxy the images first.