World map scaled by country using HTML5
I've looked at RaphaelJS, D3 and other "mapping" tools (jvectormap, etc.), but I couldn't find any example of a world map that would scale in a country with a mouse. First I want to see a map of the world and then when you click on a country it will zoom in and just show that country (with the world not showing and you can zoom out to the world at any time). Here's an example:
Can you point me to an example, preferably in D3, protovis, Raphael, or another popular SVG / CANVAS type library. I will add a lot of data (geoform based) to these maps.
The closest example of what I need is the d3 map at http://theartofasking.com , but I was looking for more examples.
source to share
Check out two examples in the D3.js World Map, which scales in each country on a click . You should be able to expand this and build what you need.
source to share
I built something similar a bit back using SVG and jQuery. I animate the entire width and height of the map and move it around to fake the zoom effect. It gets the job done, works in all browsers, and doesn't rely on learning a new library.
https://igr-inc.com/iGR_Global_Statistics_Services/
This example scales across continents, but you can detail as much as possible. Look at the source, I hope it is quite explanatory, but shout out if you have any questions either.
source to share
You can see another example of a JavaScript map with zoom in / out
http://www.fla-shop.com/products/html5/world/zoom-world-map/
He uses RaphaelJS.
source to share