Learn jVectorMap in 5 Minutes
In this series of jVectorMap video tutorial, I will cover basics of jVectorMap in 5 Minutes. Next setup of tutorials will cover the subsequent jVectorMap features.
- Learn jVectorMap in 5 Minutes
- How to Create/Make Responsive jVectorMap
- How to create custom jVectorMap Using QGIS & jVectorMap Converter
Step 1: Download jVectorMap Source Files And Linkin Index.html File:
First go to the jVectorMap site and download the source file.
Next Create new project in your server root folder, and add index.html file in it. Now copy the downloaded source files to the project folder, and link CSS & JS file in the index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>World Map - jVectorMap</title>
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,500,700" rel="stylesheet">
<link rel="stylesheet" href="./src/css/jquery-jvectormap-2.0.3.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="./src/js/lib/jquery-jvectormap-2.0.3.min.js"></script>
<!--- World SVG Path Info file in jVectorMap supported format-->
<script src="./src/js/lib/jquery-jvectormap-world-mill-en.js"></script>
</head>
<body>
<div class="container">
<div id="world-map" style="width: 600px; height: 400px"></div>
</div>
</body>
</html>
Where jquery-jvectormap-world-mill-en.js file contains each country SVG path information, ISO2 code and Country Name.
Step 2: Select World Map Container (<div>) Using jQuery and Initialize jVectorMap:
Next select Map Container <div> using jQuery, and initialize jVectorMap with options. In the options provide map projection name.
Now open the index.html file in your favorite browser (Chrome), you can view drawn world Map.
$('#world-map').vectorMap({
map: 'world_mill'
});
Step 3: Plot World Countries GDP Rate Using jVectorMap & jQuery:
Basically jVectorMap uses the ISO2 code to plot some data in the World Map. Here we have GDP rate each country along with ISO2 code.
var gdpData = {
"AF": 16.63,
"AL": 11.58,
"DZ": 158.97,
"AO": 85.81,
"AG": 1.1,
"AR": 351.02,
"AM": 8.83,
"AU": 1219.72,
"AT": 366.26,
"AZ": 52.17,
"BS": 7.54,
"BH": 21.73,
"BD": 105.4,
"BB": 3.96,
"BY": 52.89,
"BE": 461.33,
"BZ": 1.43,
"BJ": 6.49,
"BT": 1.4,
"BO": 19.18,
"BA": 16.2,
"BW": 12.5,
"BR": 2023.53,
"BN": 11.96,
"BG": 44.84,
"BF": 8.67,
"BI": 1.47,
"KH": 11.36,
"CM": 21.88,
"CA": 1563.66,
"CV": 1.57,
"CF": 2.11,
"TD": 7.59,
"CL": 199.18,
"CN": 5745.13,
"CO": 283.11,
"KM": 0.56,
"CD": 12.6,
"CG": 11.88,
"CR": 35.02,
"CI": 22.38,
"HR": 59.92,
"CY": 22.75,
"CZ": 195.23,
"DK": 304.56,
"DJ": 1.14,
"DM": 0.38,
"DO": 50.87,
"EC": 61.49,
"EG": 216.83,
"SV": 21.8,
"GQ": 14.55,
"ER": 2.25,
"EE": 19.22,
"ET": 30.94,
"FJ": 3.15,
"FI": 231.98,
"FR": 2555.44,
"GA": 12.56,
"GM": 1.04,
"GE": 11.23,
"DE": 3305.9,
"GH": 18.06,
"GR": 305.01,
"GD": 0.65,
"GT": 40.77,
"GN": 4.34,
"GW": 0.83,
"GY": 2.2,
"HT": 6.5,
"HN": 15.34,
"HK": 226.49,
"HU": 132.28,
"IS": 12.77,
"IN": 1430.02,
"ID": 695.06,
"IR": 337.9,
"IQ": 84.14,
"IE": 204.14,
"IL": 201.25,
"IT": 2036.69,
"JM": 13.74,
"JP": 5390.9,
"JO": 27.13,
"KZ": 129.76,
"KE": 32.42,
"KI": 0.15,
"KR": 986.26,
"UNDEFINED": 5.73,
"KW": 117.32,
"KG": 4.44,
"LA": 6.34,
"LV": 23.39,
"LB": 39.15,
"LS": 1.8,
"LR": 0.98,
"LY": 77.91,
"LT": 35.73,
"LU": 52.43,
"MK": 9.58,
"MG": 8.33,
"MW": 5.04,
"MY": 218.95,
"MV": 1.43,
"ML": 9.08,
"MT": 7.8,
"MR": 3.49,
"MU": 9.43,
"MX": 1004.04,
"MD": 5.36,
"MN": 5.81,
"ME": 3.88,
"MA": 91.7,
"MZ": 10.21,
"MM": 35.65,
"NA": 11.45,
"NP": 15.11,
"NL": 770.31,
"NZ": 138,
"NI": 6.38,
"NE": 5.6,
"NG": 206.66,
"NO": 413.51,
"OM": 53.78,
"PK": 174.79,
"PA": 27.2,
"PG": 8.81,
"PY": 17.17,
"PE": 153.55,
"PH": 189.06,
"PL": 438.88,
"PT": 223.7,
"QA": 126.52,
"RO": 158.39,
"RU": 1476.91,
"RW": 5.69,
"WS": 0.55,
"ST": 0.19,
"SA": 434.44,
"SN": 12.66,
"RS": 38.92,
"SC": 0.92,
"SL": 1.9,
"SG": 217.38,
"SK": 86.26,
"SI": 46.44,
"SB": 0.67,
"ZA": 354.41,
"ES": 1374.78,
"LK": 48.24,
"KN": 0.56,
"LC": 1,
"VC": 0.58,
"SD": 65.93,
"SR": 3.3,
"SZ": 3.17,
"SE": 444.59,
"CH": 522.44,
"SY": 59.63,
"TW": 426.98,
"TJ": 5.58,
"TZ": 22.43,
"TH": 312.61,
"TL": 0.62,
"TG": 3.07,
"TO": 0.3,
"TT": 21.2,
"TN": 43.86,
"TR": 729.05,
"TM": 0,
"UG": 17.12,
"UA": 136.56,
"AE": 239.65,
"GB": 2258.57,
"US": 14624.18,
"UY": 40.71,
"UZ": 37.72,
"VU": 0.72,
"VE": 285.21,
"VN": 101.99,
"YE": 30.02,
"ZM": 15.69,
"ZW": 5.57
};
$('#world-map').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]+')');
}
});
Where we provide data in Data series object along color low and high GDP rate color. Also we provide Scaling function i.e normalizeFunction: ‘polynomial’, which scale the given [‘#C8EEFF’, ‘#0071A4’] between low and high GDP number. Please check jVectorMap example using above provided demo link.
Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts
If you want any of my script need to be customized according to your business requirement,
Please feel free to contact me [at] muni2explore[at]gmail.com
Note: But it will be charged based on your customization requirement
