Getting started

Once you get the code of jVectorMap from the download page and one of the map from the maps page you can start experimenting with various features it provides. First of all let's create just a simple map with a world map with default parameters. Create an html containing the following:

  • all JavaScript and CSS resources necessary to render the world map,
  • initialization code, which tells the browser where to put the map and what parameters to use to render it,
  • <div> element which will be a container for the map (note that map will be fitted according to the size of the container, that's why the container should have some non-zero width and height).
<!DOCTYPE html>
<html>
<head>
  <title>jVectorMap demo</title>
  <link rel="stylesheet" href="jquery-jvectormap-2.0.1.css" type="text/css" media="screen"/>
  <script src="jquery.js"></script>
  <script src="jquery-jvectormap-2.0.1.min.js"></script>
  <script src="jquery-jvectormap-world-mill.js"></script>
</head>
<body>
  <div id="world-map" style="width: 600px; height: 400px"></div>
  <script>
    $(function(){
      $('#world-map').vectorMap({map: 'world_mill'});
    });
  </script>
</body>
</html>

If you open created page in a web-browser you should see something similar to this:

Now when you created simple test map you can provide additional parameters to change the look and behavior of the map. The supported parameters could be found on the JavaScript API page. As an example let's create a choropleth map. We will visualize information about GDP in 2010 for every country. At first we need some data. Let it be site of International Monetary Fond. There we can get information in xsl format, which can be easily converted first to csv with any spreadsheet software and then to json with any scripting language. Now we have file gdp-data.js with such a content:

var gdpData = {
  "AF": 16.63,
  "AL": 11.58,
  "DZ": 158.97,
  ...
};

Now if we connect this file to our page and pass the gdpData variable to the map initialization code we will get nice and informative map:

Here is the code, which was used to initialize the map above (description of every parameter could be found on the JavaScript API page):

$('#world-map-gdp').vectorMap({
  map: 'world_mill',
  series: {
    regions: [{
      values: gdpData,
      scale: ['#C8EEFF', '#0071A4'],
      normalizeFunction: 'polynomial'
    }]
  },
  onRegionTipShow: function(e, el, code){
    el.html(el.html()+' (GDP - '+gdpData[code]+')');
  }
});