Create your own vector maps for the web with jvectormap

Maybe your application requires the integration of a geographical map for a marvelous presentation of your gigantic data. otherwise these data are not valuable for having a nice user experience on your application. Jvectormap can help you to do this stuff.

jVectorMap is a vector-based, cross-browser and cross-platform component for interactive geography-related data visualization on the web. It provides numerious features like smooth zooming and panning, fully-customizable styling, markers, labels and tooltips.
jvectormap

Requirements

Javascript

The GNU GPL is free , for Commercial or Developer use , check the pricing here

Implementation

Once you get the code of jVectorMap from the official repo ,you can start experimenting with various features it provides. First of all let’s create a simple map with africa map with default parameters. So create an html container that have 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).

Here Is some list of countries code that will we use :

code	country
BF	Burkina Faso
DJ	Djibouti
RW	Rwanda
MA	MOROCCO

Check the rest of countries code here

<!DOCTYPE html>
<html>
<head>
  <title>Africa map demo using jsVectorMap</title>
  <link rel="stylesheet" href="jquery-jvectormap-2.0.3.css" type="text/css" media="screen"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="jquery-jvectormap-2.0.3.min.js"></script>

  <script src="http://jvectormap.com/js/jquery-jvectormap-africa-mill.js"></script>
</head>
<body>
  <div id="africa-map" style="width: 1000px; height: 800px"></div>
  <script>
    $(function(){
      // if you want to choose another continent , see the link here: http://jvectormap.com/maps/world/ 
      $('#africa-map').vectorMap({map: 'africa_mill'});
    });

// for more countries code in order to add them in the var gdpData , see the link here  :http://jvectormap.com/maps/world/africa/
var gdpData = {
  "ZA": 16.63,
  "MA": 11.58,
  "DZ": 158.97,
  "LY": 454.45
};

    $('#africa-map').vectorMap({
       backgroundColor:'#ed5555',
  map: 'africa_mill',
  series: {

    regions: [{
      values: gdpData,
      scale: ['#5AAC4B'],
      normalizeFunction: 'polynomial'
    }]
  },
  onRegionTipShow: function(e, el, code){
    // this message is showwing on the hover event .
    el.html(el.html()+' (GDP - '+gdpData[code]+')');
  }
});
  </script>
</body>
</html>

Let’s suppose that your huge data will be saved in the gdpData variable . you are going some how to map your daba structure and then you will just inject it vectorMap Function .

you can choose the background color , the country hover color , and more options . for more , see the official documentation

Clone the project and enjoy playing JvectorMap.

Inferom

Create your own vector maps for the web with jvectormap

Requirements

Implementation