World Map – JQVMap Plugin

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.

Features

  • Zoom In or Zoom out
  • Drag on the map
  • Hover the mouse over each country
  • Fully responsive and works great on every device (Desktop, Tablet, Mobile)

Live Demo

Add the css below to your html page

<link rel="stylesheet" href="http://onlinefreetools.net/wp-content/uploads/demo/others/jqvmap/dist/jqvmap.css"
        type="text/css" media="screen" />

Create a container where you want to render map

<div id="wrapper">
    <div class="slider-wrapper theme-default">
        <div id="vmap" style="width: 600px; height: 400px;"></div>
    </div>
</div>

Include the JavaScript file jquery.vmap.js after jQuery

<script type="text/javascript"
    src="http://onlinefreetools.net/wp-content/uploads/demo/others/jqvmap/dist/jquery.vmap.js"></script>

Include the JavaScript file jquery.vmap.world.js after jquery.vmap.js file

<script type="text/javascript"
    src="http://onlinefreetools.net/wp-content/uploads/demo/others/jqvmap/dist/maps/jquery.vmap.world.js"
    charset="utf-8"></script>
<script type="text/javascript"
    src="http://onlinefreetools.net/wp-content/uploads/demo/others/jqvmap/js/jquery.vmap.sampledata.js"></script>

Call vectorMap method from jqvmap library and add configuration as below:

<script>
    jQuery(document).ready(function () {
        jQuery('#vmap').vectorMap({
            map: 'world_en',
            backgroundColor: '#333333',
            color: '#ffffff',
            hoverOpacity: 0.7,
            selectedColor: '#666666',
            enableZoom: true,
            showTooltip: true,
            scaleColors: ['#C8EEFF', '#006491'],
            values: sample_data,
            normalizeFunction: 'polynomial'
        });
    });
</script>

Source Code

Download

For more Advanced Usages, please check the demo page or visit the official website.