jQuery Vector Maps v1.1.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.1.0 on October 17th, 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',
    	hoverColor: '#999999',
    	selectedColor: '#666666',
    	enableZoom: true,
    	showTooltip: true,
    	selectedRegions: ['MO', 'FL', 'OR']
    });
    </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',
    	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

Version 1.1.0

Released on October 17th, 2015
  • New Added new maps for Russia, France, Germany, Algeria, Iraq, Iran & Brazil
  • New Fixed `regionClickEvent` bug
  • New Added event handling for deselecting a region
  • New Added Touch Event code example
  • New Added sample HTML pages for each map

Version 1.0.0

Released on May 6th, 2012
  • Initial Release