Tuesday, February 10th, 2009

Canvas World Map

Category: Canvas, Showcase

Jon Combe has implemented a world map using Canvas to draw it all, for his JAWStats website statistics package.

You can tweak the color combinations and highlight areas, but no clicking and moving around just yet. Here are some of Jon’s thoughts:

The smallest places aren’t included on the map, so if you live in Lichtenstein, please accept my apologies.

Now for the car crash hack: Lesotho is unique in that it is wholly within another country, South Africa (actually, Vatican City is too, but it was too small to make it onto my map, apologies to the Pope). This means that if you draw South Africa after you’ve drawn Lesotho, Lesotho disappears. My horrible shortcut is to draw Lesotho again, immediately after drawing South Africa. Sad, lazy and ugly. But true.

If you’re interested where I got my data from I downloaded a big file from Wikimedia Commons which I opened in Adobe Illustrator where I plotted the country outlines. I then exported this as an SVG file and using a little jQuery looping jiggerypokery I extracted the coordinates.

Posted by Dion Almaer at 6:38 am

3.2 rating from 24 votes


Comments feed TrackBack URI

Cool. Where’s a link to a demonstration?

Comment by coob — February 10, 2009

I think it was left off accidentally. Here you go: ExCanvas World Map

Comment by joncombe — February 10, 2009

hehe seems to happen a lot here.

Cool canvas use tho. Wish it could be dragged

Comment by sidonaldson — February 10, 2009

Here’s a map of the US 2008 election: http://www.codedread.com/images/usa.svg

Comment by codedread — February 10, 2009

Whoah weird. How did a flyspec like Heard Island make it into that map and yet somehow they missed out on Tasmania.

Comment by Deadmeat — February 10, 2009

instead of going through the multiple steps of exporting to SVG, parsing it to extract coordinates, then hand coding the Canvas-drawing part, why not use dojox.gfx, which you can use to draw SVG or Canvas (or Silverlight/VML) directly.

If you use SVG/Silverlight/VML you get the event handling for free too, and it works on all browsers, even IE.

Comment by sos — February 10, 2009

Leave a comment

You must be logged in to post a comment.