Creating Maps for jVectorMap
Need a jVectorMap for a specific country? Get it here
The title of the post might be a bit misleading as I want to talk about how to understand and modify maps for jVectorMap rather than create maps. There is some interest on creating different versions of the original world map and not necessarily a new rendering and projection. In my last post on converting jVectorMap to JQVMap I had few requests for continent maps. So, I opened the JavaScript file that has the map data and realized that the code there is basically built on SVG paths. This is actually well documented and a link there takes you to a pretty good explanation of how SVG paths work. So, today, I will create some continents from the data we already have and talk a little about SVG and geo projection.
Lets say you want to make a jVectorMap of North America. Take a look at this unminified code for the world map. Notice how all the countries are listed there with their geo data all represented in each object. All I did is comment out all the countries and uncomment the ones that belong in North America. Here is the jVectorMap of North America. Pretty easy, but mostly because North America is neatly placed into the top left of the map and there is a bit more tweaking that needs to be done to display other continents.
With South America, we actually have to modify the SVG paths. They are constructed to show at the bottom left of the graph so that needs to be changed if we want to view the continent in the center of the map. The modification is also easy because the first 2 values after M define the x,y position of the start of the line drawing. If you take a look at the JavaScript file for the South America Map, you will see that I basically change the first SVG path value (of Bolivia) from M263.83 to M163.83, which moves x position by 100. I change the next value from 340.79 to 110.79, which moves the y by 230. I changed the values of other countries the same way so the map moved up and to the right.
I had to do more tweaking for French Guiana as it is a territory of France located in South America. So, I took the SVG path value of France and found the M to Z values that represented French Guiana and only used them while deleting the values that draw the country of France. Here is the jVectorMap of South America. One comment about this approach is that it does mess up Geo Projections. If you are trying to plot geo coordinates on the map you need to mess around with the projection and inset objects. I have done a little bit of that on the South America map to plot the caribbean islands next to Venezuela but it’s not that accurate.
At that point you really need to generate the map correctly with a proper geo projection. To create these maps you need to install Python, GDAL, and Shapely and start messing around with the jVectorMap converter. As a final point, I found canvg helpful in playing around with SVG paths. I should also point out that there are many maps in SVG format (just look at Wikipedia) and you can easily look at the source of the SVG map and grab the path data to manually construct a new map for jVectorMap.
