Tuesday, November 25th, 2008

Car Navigation Map Mashup in Canvas

Category: Canvas

Ernest is up to his old canvas tricks again. This time he has published a car navigation demo that lets you drive around a set of tiles from a map (Google Maps, OpenStreetMap) and it paints your course at the same time.

How did he do it?

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, Joshua 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.

Posted by Dion Almaer at 8:01 am

4.3 rating from 20 votes


Comments feed TrackBack URI

Took a look at this thing .. its nothing special. Its extremely buggy even in Firefox. Its a nice idea though and there is loads of room for improvement

Comment by PhoenixSA — November 25, 2008

Cool demo. The “same origin policy” is really a shame, because it encumbers the web for security’s sake. I don’t understand, why the user is not asked to permit or forbid this action instead of just making it impossible. There could be a simple dialog asking if i want this web page to use cross-domain data once/forever/… I would do the dame with iframe scripting access, video/audio tag, cross domain XHR,…
Give the users the choice and the developers the possibilities instead of forbidding everything!

Comment by AndiSkater — November 25, 2008

Nice work. I wonder if the intended use (somehow increasing your knowledge of a location by providing another perspective) is the best use. The first thing I thought of was building a game using this. But for helping me make sense of a map, the gods-eye, 2d, zoomable view is actually superior.

Comment by nataxia — November 25, 2008

What a cool idea.

Comment by Nosredna — November 25, 2008

Leave a comment

You must be logged in to post a comment.