I was trawling through some old stuff recently and I found some useful javascript I’d created for a project that was never used. The requirement was to replace a flash based map component with something iPad friendly. I found an amazing plugin by Jon Combe called ExCanvas which rendered an entire zoomable, colourable world map through canvas. However, it didn’t fit all the needs of the project – we needed the ability to add tooltips.
I spent a couple of hours adding in code to generate an imagemap from the same coords which the canvas uses. This imagemap creates hover states for all the countries on the map.
The hacks, in brief:
- added a countryNames array to the .js file
- added a hoverable imagemap which implements the countryNames array
- added some predefined zoom zones for regions like europe, north america, asia, pacific etc
Here’s a working example so you can see what I mean.
Never did get to use this, but it would be a shame to see it get deleted in some file cleanup, so I thought I’d better post it.
