jqvmap - Javascript

jqvmap is a jQuery plugin that renders vector maps. It uses scalable vector graphics (SVG) to display the maps and allows the customization of the maps using javascript.

Features

• Customizable maps
• Supports multiple languages
• Handles zooming and panning of maps
• Allows customization of tooltips and popover boxes
• Supports markers and regions on maps

Usage

1. Download the jqvmap plugin
2. Include the required CSS and JS files in your HTML code

<link href="jquery-jvectormap.css" rel="stylesheet" type="text/css" />
<script src="jquery-jvectormap.min.js"></script>

3. Create a div element to contain the map in your HTML code

<div id="world-map"></div>

4. Initialize the map using javascript

$('#world-map').vectorMap({
  map: 'world_en',
  backgroundColor: '#f6f6f6',
  borderColor: '#818181',
  borderOpacity: 0.25,
  borderWidth: 1,
  color: '#c4c4c4',
  enableZoom: true,
  hoverColor: '#c9dfaf',
  hoverOpacity: null,
  normalizeFunction: 'linear',
  scaleColors: ['#b6d6ff', '#005ace'],
  selectedColor: '#c9dfaf',
  selectedRegions: null,
  showTooltip: true,
  onRegionClick: function(element, code, region)
  {
    alert('Clicked on '+region);
  }
});

Customization

1. Changing colors

// Change the color of the map
$('#world-map').vectorMap({
  color: '#c4c4c4',
});

// Change the hover color of the map
$('#world-map').vectorMap({
  hoverColor: '#c9dfaf',
});

// Change the selected color of the map
$('#world-map').vectorMap({
  selectedColor: '#c9dfaf',
});

// Change the color scale of the map
$('#world-map').vectorMap({
  scaleColors: ['#b6d6ff', '#005ace'],
});

// Change the background color of the map
$('#world-map').vectorMap({
  backgroundColor: '#f6f6f6',
});

// Change the color of the map border
$('#world-map').vectorMap({
  borderColor: '#818181',
});

// Change the opacity of the map border
$('#world-map').vectorMap({
  borderOpacity: 0.25,
});

// Change the width of the map border
$('#world-map').vectorMap({
  borderWidth: 1,
});

2. Adding markers

// Add a marker to the map at coordinates (lat, lng)
$('#world-map').vectorMap('addMarker', lat, lng);

// Add a marker with a custom icon to the map at coordinates (lat, lng)
$('#world-map').vectorMap('addMarker', lat, lng, {icon: 'my_icon.png'});

3. Adding regions

// Highlight a region on the map
$('#world-map').vectorMap('set', 'regions', { region_code: '#c4c4c4' });

// Select multiple regions on the map
$('#world-map').vectorMap('set', 'selectedRegions', ['region1', 'region2']);

// Unselect all regions on the map
$('#world-map').vectorMap('clearSelectedRegions');