Good js maps

Recently in my latest project I was asked to build a world map where a user could select different countries for which we have certain data of and visualize that data. I tried every single mapping/charting tool I could find. This is a compendium that compares each one of the tools I went through and hopefully it will help you out in deciding which one to choose.

Google Geo Map

The first think I learned with Google Geo Map is that not because it has the label Google on it means that it is bound to be kick ass. I mean sure, a lot of their tools are kick ass and they do a great job with documentation and examples. But in this particular senario Google Geo Map just didn’t cut it. For instance if you have data loaded for Sout Africa and Lesotho as well, hovering over South Africa will dissapear Lesotho from the map…. yep bugs. Kosovo is no where to be found and well if you want the map to work in IE7 simply forget it. All of the tooltip labes that show uppon hovering will come out blurry and there is just no way to fix it. The work around is done by browser sniffing and implementing a flash solution for IE7. Now as crazy as this may sound given the fact that the map creation is 99% similar you can create either an SVG object or  FLASH object quite easily with the same code base… still this gets messy even if you try not to because the country codes for the flash map are different from those of the svg map. Hence you need to have two sets of json files….

Openlayers

Given the fact that I had to make the app work with IE7 and that Google was simply not going to provide me with an easy implementation that would suffice my needs, I turned around to openlayers.

Open layers is an amazing library that is extremely well documented. If you have the time to go through its entire documentation I strongly recommend you do and as that prepare your self in case you ever have to build a tool with a world map. Now at first glance I though I had found the tool I was so eagerly looking for but again I was deceived. Time was against me and I had basically two days to get this thing working and I was back to cero. Getting a simple map to work took for ever and finding the key points in the documentation that would allow me to fulfill the user experience that I wanted to create was turning out quite impossible.  A simple action like clicking on a country and getting its position or country code needed a combination of iso cods and geographies and on top of it there were some bugs that I just wasn’t able to pin point and fix like limiting the zoom level even though it clearly states in the documentation how to do it.

jVector map

In comes the hero.

Finally a map that is extremely easy to implement, has all the key functionalities that you would expect a world map to have (like clicking on a country or hovering over a country), highly customizable and friendly and works all the way down to IE7 like a charm. The only downside would be that it doesn’t have by default a lot of individual region maps. For instance if you want to show only the map of Africa, there is no individual SVG map for it. This is still a very particular use case because the map does have zoom in and zoom out functions in order to pan into the map and drag around to move from one part of the map to the other.

Hope this helps in deciding what tool to use!