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.