JQVMap is a jQuery plugin that renders Interactive, Clickable Vector Maps. Demo page.
Usage
To use the plugin, you need to add the following files.
<!-- CSS -->
<link rel="stylesheet" href="libs/vmap/jqvmap.min.css" type="text/css">
<!-- Javascript -->
<script src="libs/vmap/jquery.vmap.min.js"></script>
<!-- Map to use -->
<script src="libs/vmap/maps/jquery.vmap.world.js"></script>World Map
<div id="vmap" style="height: 400px;"></div>$('#vmap').vectorMap({
map: 'world_en',
backgroundColor: '#fff',
color: '#ffffff',
hoverOpacity: 0.7,
borderColor: '#fff',
selectedColor: '#666666',
enableZoom: false,
showTooltip: true,
scaleColors: ['#C8EEFF', '#006491'],
normalizeFunction: 'polynomial',
});Custom Region
Add this to your page:
<script src="libs/vmap/maps/jquery.vmap.usa.js"></script><div id="vmap" style="height: 400px;"></div>$('#vmap').vectorMap({
map: 'usa_en',
backgroundColor: '#fff',
color: '#ffffff',
hoverOpacity: 0.7,
borderColor: '#fff',
selectedColor: '#666666',
enableZoom: false,
showTooltip: true,
scaleColors: ['#C8EEFF', '#006491'],
normalizeFunction: 'polynomial',});
On this page