Extra Maps for jQuery Vector Maps Plugin
Need a JQVMap for a specific country? Get it here
Today I have been playing around with the JQVmaps plugin for jQuery and it looked very familiar because it is basically a modified version of another jQuery plugin called jVectorMap. There are differences in the code as these are two different plugins or projects but there are many more maps provided on jVectorMap compared to JQVmaps. The map data is not the same but it is close enough and can be easily converted (there is also a python converter script to generate any kind of map from shape files).
So, jVectorMap provides 10 more maps which I have converted into JQVmaps format and you can grab these maps in the links below:
Map of Argentina for JQVmaps Jquery Plugin
Map of Australia for JQVmaps Jquery Plugin
Map of Belgium for JQVmaps Jquery Plugin
Map of Chicago for JQVmaps Jquery Plugin
Map of China for JQVmaps Jquery Plugin
Map of Colombia for JQVmaps Jquery Plugin
Map of France for JQVmaps Jquery Plugin
Map of India for JQVmaps Jquery Plugin
Map of Venezuela for JQVmaps Jquery Plugin
Map of New York for JQVmaps Jquery Plugin
Map of Canada for JQVmaps Jquery Plugin
Update: Lbrahim in the comments asked me to make a map of Africa for JQVmaps and I wanted to talk a little about this process. My first thought was that the African Continent is already in the JQVmaps World Map example and you could just zoom into that section similarly to my extended Europe example. It’s not ideal, however, and JQVmaps does not allow you to pass in extra parameters for which section of a map to display and at what scale. All these parameters are available in jVectorMap so it’s kind of annoying that they have not been ported over to the JQVmaps jQuery plugin. So, I have ported these parameters into my version of JQVmap, and now you can specify scale, transX, and transY coordinates so that you can show any section of a map with a particular scale. This would be the result of using these parameters and showing the African Continent from the World Map.
But, this is not ideal. What if you just wanted the map of Africa and with better detail? jVectorMap provides a python converter which should allow you to convert any shapefile to JavaScript. So, I found a shapefile of Africa and tried to run the this script but it resulted in many Python errors about missing modules (ImportError: No module named osgeo). After some research, I ended up downloading GDAL complete from kyngchaos and tried again but with no luck. The installation made GDAL available for python 2.6 instead of the 2.7 version that I normally run on my mac, so I had to use the “/usr/bin/python2.6″ command in bash but 2.6 was missing other modules needed in the script (ImportError: No module named argparse and ImportError: No module named anyjson). I ended up installing PIP (sudo easy_install-2.6 pip) and then installed Shapely (pip install Shapely), argparse (pip install argparse), and anyjson (pip install anyjson). So, if you are on a Mac, you might have to go through these steps just to get the python converter script to work.
But, when I finally ran the conversion, I got a really bad result (large js file which looked horrible). Keep in mind that if you are using JQVmap you have to convert a bit of the JavaScript file from jVectorMap format to JQVmap format. I tried another africa shapefile but again, really bad result. I researched the internet for more shapefiles and did find 2 more which the script could not even convert (threw errors). At the end of it all I ended up finding a pretty good Africa ShapeFile from GeoCommons, I ran the python converter script (/usr/bin/python2.6 converter.py africa_countries.shp africa.js –width 900), I converted the JavaScript file to JQVmap format, and here you can see the Map of Africa. It actually looks good but it is missing names of the countries, depending on what language you prefer you can easily add in the names into the Africa JavaScript file.
This whole exercise has kind of turned me off to JQVmaps. What about just SVG? This map of africa looks good to me and it’s just one nice svg file. Of course, no support for IE8 and below but since SVG defines graphics in XML format, I tried converting that SVG to a JQVmaps compatible JavaScript map. It actually was a really time consuming effort, but here is the result. This one has the names of the countries in the tooltip.
So, what about just working with shapefiles directly? I found a Javascript Shapefile and DBF Loader and here is an demo of using that script to show the African Continent. Pretty cool, but you don’t get the tooltips.
Finally, what about KML format? You could use KML and JavaScript as well and IndieMaps has a good writeup on mapping with HTML5, JavaScript, and Canvas plus a proof of concept for a map of Africa. Looks good but I guess you have to figure out how to add the tooltips.
