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 |
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.