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',
});