Vector Map

Introduction

jVectorMap uses only native browser technologies like JavaScript, CSS, HTML, SVG or VML. No Flash or any other proprietary browser plug-in is required. This allows jVectorMap to work in all modern mobile browsers.

How to Setup

HTML Structure

<div id="world_map_marker_1" style="height: 400px"></div>

Dependency

CSS

<!-- vector map CSS -->
<link href="vendors/vectormap/jquery-jvectormap-2.0.3.css" rel="stylesheet" type="text/css" />

JS

<!-- Vector Maps JavaScript -->
<script src="vendors/vectormap/jquery-jvectormap-2.0.3.min.js"></script>
<script src="vendors/vectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="vendors/vectormap/jquery-jvectormap-de-merc.js"></script>
<script src="vendors/vectormap/jquery-jvectormap-es-merc.js"></script>
<script src="vendors/vectormap/jquery-jvectormap-us-aea-en.js"></script>
<script src="vendors/vectormap/jquery-jvectormap-us-lcc-en.js"></script>
<script src="vendors/vectormap/jquery-jvectormap-ru-mill.js"></script>
<script src="dist/js/vectormap-data.js"></script>

Initialize Vector Map JS

$('#world_map_marker_1').vectorMap(
{
map: 'world_mill_en',
backgroundColor: 'transparent',
regionStyle : {
initial : {
fill : '#eaecec'
}
},
markerStyle: {
initial: {
r: 5,
'fill': '#00acf0',
'fill-opacity':1,
'stroke': '#fff',
'stroke-width' : 2,
'stroke-opacity': 1
},
hover: {
r: 5,
'fill': '#00acf0',
'fill-opacity':1,
'stroke': '#fff',
'stroke-width' : 2,
'stroke-opacity': 1
},
},
markers : [{
latLng : [21.00, 78.00],
name : 'INDIA : 350'
},
{
latLng : [-33.00, 151.00],
name : 'Australia : 250'
},
{
latLng : [36.77, -119.41],
name : 'USA : 250'
},
{
latLng : [55.37, -3.41],
name : 'UK : 250'
},
{
latLng : [25.20, 55.27],
name : 'UAE : 250'
}],
series: {
regions: [{
values: {
"US": '#7fd5f7',
"SA": '#7fd5f7',
"AU": '#7fd5f7',
"IN": '#7fd5f7',
"GB": '#7fd5f7',
},
attribute: 'fill'
}]
},
hoverOpacity: null,
normalizeFunction: 'linear',
zoomOnScroll: false,
scaleColors: ['#000000', '#000000'],
selectedColor: '#000000',
selectedRegions: [],
enableZoom: false,
hoverColor: '#fff',
});