ExCanvas World Map

February 2009

Google Analytics has an excellent map of the world showing where your website visitors come from. My JAWStats web stats project currently does not. :(

While I can't ever hope to compete with Google's product, I do want to have a similar map within JAWStats which shows roughly the same sort of information. Ignoring the "clickable" nature of Google's map at this stage (I'll tackle that another day), dynamically drawing a map in a web browser isn't so easy. Naturally, I thought Flash would be the answer but, never one for doing things the easy way, I wanted to try doing this directly in HTML's <canvas> tag.

Be warned, if you want to play with the code, my solution contains a nasty hack. In the meantime though, here goes:

Try different views: Google Maps style, news.bbc.co.uk style, The Economist style or something a little darker.

Background Colour: #
Foreground Colour: #
Border Colour: #
Border Width:
Zoom (press ctrl for multiple):
Highlight Country:

Highlight Colour:

Example code:

    id: "worldmap",
    bgcolor: "#202720",
    fgcolor: "#303030",
    bordercolor: "#585d58",
    borderwidth: 1.5,
    padding: 10,
    zoom: "mm,vn,my",
    detail: {
        "vn": "#ce3633"

Those parameters in detail:

"id"The only mandatory field. This is the id of the canvas element you want to use.
"bgcolor", "fgcolor", "bordercolor"The colours of the background (the wet bits), foreground (the dry bits) and country borders. Pass a hex color string (e.g. #789abc) or an RGB value (e.g. rgb(100,110,120)).
"borderwidth"Country borders and outlines measured in pixels (note: Internet Explorer doesn't go sub-zero).
"padding"The gap (if any) to be added between the detail of the map and the edge of the <canvas>.
"zoom"A comma-separated list of country codes you want the map to include or zoom in on.
"detail"An object of country code and colour value pairs used to highlight a single country.

Sadly, Internet Explorer is slower than other browsers as it has to do twice the work (I found fills and outlines have to be done separately). You'll need to add the ExCanvas script for IE, too.

The smallest places aren't included on the map, so if you live in Liechtenstein, 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.

If you want to download and use this in your own project, be my guest. This is free software released under the MIT Licence.

If you could contact me to tell me where you've used it, that would be great.

Jon Combe