logo
image
Timotheus Bendan
Sales Manager
Profile Inbox Settings Logout
Vector Map
  • Shopping Cart
    ...
    Digital clock
    1 x $1.190,90
    ...
    Toy Car
    1 x $139.58
    ...
    Sunglasses
    2 x $50,90
    ...
    Cake
    1 x $10,50
    Sub Total : $1.442,78

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