jQuery Plugins › jQuery Other Plugins › jQuery jqvmap

jQuery Vector Map Rendering Plugin - jqvmap

File Size: 1.36 MB
Views Total: 11915
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2024

Chrome, IE8+, FireFox, Opera, Safari#SVG#map#vector map
jQuery Vector Map Rendering Plugin - jqvmap

 A jquery Map Plugin using resizable Scalable Vector Graphics (SVG) for Rendering Vector Maps. It comes with 4 examples: World Map, Europe Map, Germany Map, and USA Map.

Basic Usage (World Map)

1. Include necessary elements into your <head> section

<link href="jqvmap/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />
    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="jqvmap/jquery.vmap.js" type="text/javascript"></script>
<script src="jqvmap/maps/jquery.vmap.world.js" type="text/javascript"></script>
<script src="jqvmap/data/jquery.vmap.sampledata.js" type="text/javascript"></script>

2. Call the plugin with options

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#vmap').vectorMap({
    map: 'world_en',
    backgroundColor: '#333333',
    color: '#ffffff',
    hoverOpacity: 0.7,
    selectedColor: '#666666',
    enableZoom: true,
    showTooltip: true,
    values: sample_data,
    scaleColors: ['#C8EEFF', '#006491'],
    normalizeFunction: 'polynomial'
});
});
</script>

3. Markup

<div id="vmap" style="width: 600px; height: 400px;"></div>

4. Configuration options

// world_en, usa_en, europe_en and germany_en
map: 'world_en',
backgroundColor: '#a5bfdd',
borderColor: '#818181',
borderOpacity: 0.25,
borderWidth: 1,
color: '#f4f3f0',
enableZoom: true,
hoverColor: '#c9dfaf',
hoverOpacity: null,
normalizeFunction: 'linear',
scaleColors: ['#b6d6ff', '#005ace'],
selectedColor: '#c9dfaf',
selectedRegion: null,
showTooltip: true,
onRegionClick: function(element, code, region)
{
  var message = 'You clicked "'
      + region 
      + '" which has the code: '
      + code.toUpperCase();

  alert(message);
}

Change logs:

v1.5.1 (2016-05-18)

  • Added a minified css file
  • Added Turkey Map and Example File

v1.5 (2016-03-24)

  • Fixed bugs in labels and pins where mouse events were not passing through to clickable region
  • Removed -merc suffix from map files created by map creator ( fixes #204 )
  • Added new example for custom placement of pins ./examples/pins_custom.html
  • Fixed onRegionSelect issue not returning region
  • Added better support to make regions disabled

v1.4 (2015-12-06)

  • Added Touch Support for Mobile Devices
  • Added showLabels config option to place ISO codes by default
  • Added onResize event handler and fixed resize event binding issues
  • Fixed issue when dragging a map and releasing outside map
  • Added onLoad event handler

This awesome jQuery plugin is developed by 10bestdesign. For more Advanced Usages, please check the demo page or visit the official website.