Plotting Country Capitals on Raphael World Map
After making some D3 examples I wanted to take a look at Raphael. If you are interested in comparing D3.js to Raphael.js, there are some good posts about this on Quora and StackOverflow, but I wanted to just create a simple example of drawing a world map and visualizing all the county capitals. When I looked at the Raphael World Map example, I also realized that I could use their JavaScript function to build a nice geographic coordinate converter which is often useful when plotting geo coords that contain degrees, minutes, and seconds. So, let’s get started.
You can read more about geographic coordinate conversion on Wikipedia but the Raphael World Map example already had a DMS to Decimal Degree conversion function in there so I have extracted it into my own online geo-coordinate conversion tool. This way, I can handle data that presents coordinates with degrees, minutess, and seconds instead of just decimal degrees.
In terms of finding geo coordinates of all the country capitals, there are several good sources, but I decided to retrieve this data from World Bank since they have an API. Instead of writing an Ajax request, I just pulled the JSON with all country information, parsed out the capital city geo coordinates, and converted them into an inline array.
After that, I cleaned up the original Raphael World Map example and plotted all these capital cities on the Map. Check out the demo and take a look at the source.
As a next step it would be nice to add zooming into the map and label the capitals or show the names in a tooltip. There are many Raphael plugins for zooming and you could even implement a standalone SVG zooming library. In terms of tooltips, you could use this jsfiddle or something more fancy like this Raphael SVG Tool Tip extension, but this is beyond the scope of my simple Raphael World Map example.
Related:
Raphael JS Tutorials
Using Raphaeljs to Create a Map
MigrationsMap built with Raphael
Continent change color on mouseover using Raphaeljs
Dymo Map label placer with simulated annealing
Data Converter
Geo Examples
Plotting Geo Points on Google Map
