jQVMap Plugin is a javascript library that allows creating map of continents and countries on each continent. You can zoom in or zoom out to see different areas of the map. You can also drag on the map to see different sections and hover on the map to see the name of each country. You can also choose focus on one continent or one country
Features
- Zoom In or Zoom out
- Drag on the map
- Hover the mouse over each country
- Focus on continent
- Focus on country
- Fully responsive and works great on every device (Desktop, Tablet, Mobile)
Live Demo
How to Use
1. CSS
Add the css below to your html page
<link rel="stylesheet"
href="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/css/jquery-jvectormap.css"
type="text/css" media="screen" />
2. HTML
Create a container where you want to render map and add 4 buttons to perform some actions on the map
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="map1" style="width: 720px; height: 400px"></div>
<div style="margin: 10px 0;">
<button id="focus-single">Focus on Australia</button>
<button id="focus-multiple">Focus on Australia and Japan</button>
<br>
<button id="focus-coords">Focus on Cyprus</button>
<button id="focus-init">Return to the initial state</button>
</div>
</div>
</div>
3. Javascript
Load jQuery library together with the jVectorMap library into your code
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/assets/jquery-1.8.2.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/js/jquery-jvectormap.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/lib/jquery-mousewheel.js">
</script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/jvectormap.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/abstract-element.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/abstract-canvas-element.js">
</script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/abstract-shape-element.js">
</script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/svg-element.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/svg-group-element.js">
</script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/svg-canvas-element.js">
</script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/svg-shape-element.js">
</script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/svg-path-element.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/svg-circle-element.js">
</script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/svg-image-element.js">
</script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/svg-text-element.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/vml-element.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/vml-group-element.js">
</script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/vml-canvas-element.js">
</script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/vml-shape-element.js">
</script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/vml-path-element.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/vml-circle-element.js">
</script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/vml-image-element.js">
</script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/map-object.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/region.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/marker.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/vector-canvas.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/simple-scale.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/ordinal-scale.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/numeric-scale.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/color-scale.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/legend.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/data-series.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/proj.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/src/map.js"></script>
<script
src="http://onlinefreetools.net/wp-content/uploads/demo/others/jvectormap/assets/jquery-jvectormap-world-mill-en.js">
</script>
<script>
jQuery.noConflict();
jQuery(function () {
jQuery('#focus-single').click(function () {
jQuery('#map1').vectorMap('set', 'focus', {
region: 'AU',
animate: true
});
});
jQuery('#focus-multiple').click(function () {
jQuery('#map1').vectorMap('set', 'focus', {
regions: ['AU', 'JP'],
animate: true
});
});
jQuery('#focus-coords').click(function () {
jQuery('#map1').vectorMap('set', 'focus', {
scale: 7,
lat: 35,
lng: 33,
animate: true
});
});
jQuery('#focus-init').click(function () {
jQuery('#map1').vectorMap('set', 'focus', {
scale: 1,
x: 0.5,
y: 0.5,
animate: true
});
});
jQuery('#map1').vectorMap({
map: 'world_mill_en',
panOnDrag: true,
focusOn: {
x: 0.5,
y: 0.5,
scale: 2,
animate: true
},
series: {
regions: [{
scale: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial',
values: {
"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,
"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
}
}]
}
});
})
</script>
Source Code
DownloadFor more Advanced Usages, please check the demo page or visit the official website.
