jQuery Vector Maps v1.4.0

JQVMap is a jQuery plugin that renders Vector Maps.  It uses resizable Scalable Vector Graphics (SVG) for modern browsers like Firefox, Safari, Chrome, Opera and Internet Explorer 9.

Latest Release:  v1.4.0 on December 6th, 2015

World Vector Map

  • ? View Source Code for this Example

    <script src="js/jquery.vmap.js"></script>
    <script src="js/jquery.vmap.world.js"></script>
    <script src="js/jquery.vmap.sampledata.js"></script>
    
    <script>
    jQuery('#vmap').vectorMap({
    	map: 'world_en',
    	backgroundColor: null,
    	color: '#ffffff',
    	hoverOpacity: 0.7,
    	selectedColor: '#666666',
    	enableZoom: true,
    	showTooltip: true,
    	values: sample_data,
    	scaleColors: ['#C8EEFF', '#006491'],
    	normalizeFunction: 'polynomial'
    });
    </script>
    
    <div id="vmap" style="width: 600px; height: 400px;"></div>
    

USA Vector Map

  • ? View Source Code for this Example

    <script src="js/jquery.vmap.js"></script>
    <script src="js/jquery.vmap.usa.js"></script>
    
    <script>
    jQuery('#vmap').vectorMap({
    	map: 'usa_en',
    	backgroundColor: null,
    	color: '#ffffff',
    	enableZoom: true,
    	showTooltip: true,
    	selectedColor: null,
    	hoverColor: null,
    	colors: {
    		mo: '#666666',
    		fl: '#666666',
    		or: '#666666'
    	},
    	onRegionClick: function(event, code, region){
    		event.preventDefault();
    	}
    });
    </script>
    
    <div id="vmap" style="width: 600px; height: 400px;"></div>
    

Europe Vector Map

  • ? View Source Code for this Example

    <script src="js/jquery.vmap.js"></script>
    <script src="js/jquery.vmap.europe.js"></script>
    
    <script>
    jQuery('#vmap').vectorMap({
    	map: 'europe_en',
    	backgroundColor: null,
    	color: '#ffffff',
    	hoverColor: '#999999',
    	enableZoom: false,
    	showTooltip: false
    });
    </script>
    
    <div id="vmap" style="width: 600px; height: 400px;"></div>
    

Germany Vector Map

  • ? View Source Code for this Example

    <script src="js/jquery.vmap.js"></script>
    <script src="js/jquery.vmap.germany.js"></script>
    
    <script>
    jQuery('#vmap').vectorMap({
    	map: 'germany_en',
    	backgroundColor: null,
    	onRegionClick: function(element, code, region)
    	{
    		var message = 'You clicked "'
    			+ region
    			+ '" which has the code: '
    			+ code.toUpperCase();
    
    		alert(message);
    	}
    });
    </script>
    
    <div id="vmap" style="width: 600px; height: 400px;"></div>
    

Documentation

Full Documentation is available on our Github Repo.

Updates

Our CHANGELOG can be accessed on our Github Release Page.