Clickable continent/country maps: which way to go?

Question

There are many Web sites that include clickable maps that highlight regions on mouseover and allow the user to narrow down a selection from a world map view to a continent level. Here is an interesting example: davidlynch.org.

Many of these clickable maps are implemented with HTML image maps, while another option is to use for example Google's GeoChart API. Concerning the HTML image maps option, I'm wondering where people get all the 'raw data', all the country and regional border polygons. Is there a free resource for that? Concerning the Google GeoChart option, I'm wondering if that is scalable or if the number of API calls are somehow limited?

Does anyone have some advice on the availability of a free library that allows a straightforward implementation of clickable maps with customizable regions?

Answer 1

Well it is not really a problem which could be tagged 'geocoding'.

Since I have been playing with Raphael.js these days, I thought of this lib while reading your question title. I also remember Wikipedia commons hosted a SVG map of the world. Raphael helps you manipulate svg files, so that could be a nice way to go. Anyway, after searching whith the criteria 'raphael' I found a conversation matching your request, exactly. So there it is : http://groups.google.com/group/raphaeljs/browse_thread/thread/46b5402c677ce274/7ff6a6a8d8f5f9fa?pli=1

There are some utility scripts, as well as the link to the svg world file mentioned above and a live examples (and links to Stack Exchange topics).
Sure there is work to do, and it may be easier to call directly the google api.

In my experience of the gmaps API, you have to make many requests per second to be blacklisted by google. Like when you launch a heavy batch geocoding tool. So it depends of your project but I would consider quite safe to use it even if your page is popular.

[EDIT] : There is now a live demo on RaphaelJs website.

[EDIT again]: And now a complete production workflow based on Python and Raphael exists : Kartograph. It's really young but looks promising.

Answer 2

Check this out. Seems to serve your requirements and offers a bit more: Google Maps with Clickable Regions http://codecanyon.net/item/google-maps-with-clickable-countries/3186942

Answer 3

I second the raphael.js, it is a nice library to draw the shapes with all kinds of user interaction. As an example, you may look at this project, which is a vector map of Russia, implemented on top of the Raphael.js. It allows highlighting the regions programmatically.

Answer 4

There are two libraries I can recommend without doubt: 1. d3JS and 2. Raphael JS

The latter is what I was using for writing my

clickable map generator web application - Make a Clickable Map

d3JS has a steeper learning curve, but you can do way more things with it than Raphael. On the other hand, Raphael is easier to pick up and is fun to work with.