javascript - World map that zooms into country using HTML5 - Stack Overflow

admin管理员组

文章数量:1331694

I have been looking at RaphaelJS, D3, and other "mapping" tools (jvectormap, etc) but I could not find any example of a world map that will zoom into a country on mouse click. I want to initially see a world map 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 point). Here is a bad example:

/?.html

Can you point me to an example, preferably in D3, protovis, Raphael, or another popular SVG/CANVAS type library. I will be adding lots of data points (based on geo coords) to these maps.

The closest example to what I need is the d3 map on but I was looking for more examples.

I have been looking at RaphaelJS, D3, and other "mapping" tools (jvectormap, etc) but I could not find any example of a world map that will zoom into a country on mouse click. I want to initially see a world map 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 point). Here is a bad example:

http://htmlpreview.github./?https://raw.github./escobar5/raphael-pan-zoom/master/examples/plete-map/index.html

Can you point me to an example, preferably in D3, protovis, Raphael, or another popular SVG/CANVAS type library. I will be adding lots of data points (based on geo coords) to these maps.

The closest example to what I need is the d3 map on http://theartofasking. but I was looking for more examples.

• javascript
• canvas
• dictionary
• svg
• geocoding

Share Follow edited Jan 29, 2013 at 18:31 Dave Lobby asked Jan 29, 2013 at 16:19 Dave LobbyDave Lobby 12511 gold badge22 silver badges66 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Check out the two examples under D3.js World Map that Zooms into each Country on Click. You should be able to expand on that and build what you need.

I built something similar a little while ago simply with SVG and jQuery. I'm animating the entire map's width and height and moving it's position to fake the effect of zooming. It does the job, works across all browsers and doesn't rely on learning a new Library.

https://igr-inc./iGR_Global_Statistics_Services/

This example zooms in on continents but you can go into as much details as possible. Have a look at the source, hopefully it's quite self explanatory but do shout if you have and queries.

You can see another example of a JavaScript map with zoom in/out

http://www.fla-shop./products/html5/world/zoom-world-map/

It uses RaphaelJS.

This map may do what you want with d3, zooming into each country and breaking up each country into first level admin districts (counties / states etc). For the US, which has huge states, it goes one level further and breaks each state into counties.

https://github./crittercism/critter-world-map

本文标签： javascriptWorld map that zooms into country using HTML5Stack Overflow