JQVMaps

JQVMap is a plugin that renders Interactive, Clickable Vector Maps. It uses resizable Scalable Vector Graphics (SVG) for modern browsers.

Page Demo Plugin Website

Available Maps

Select a vector map from the dropdown below to reveal it's code. Make sure to include the map script file which listed below the map.

World
World Asia Africa Europe Australia North America South America USA Canada Russia Germany France 
<div class="jqvmap"></div>
if($('.jqvmap')[0]) {
    $('.jqvmap').vectorMap({
        map: [map-name], // Pick a map from below table
        backgroundColor: 'rgba(0,0,0,0)',
        color: 'rgba(255,255,255,0.5)',
        borderColor: 'rgba(255,255,255,0.5)',
        hoverColor: 'rgba(255,255,255,0.75)',
        selectedColor: '#fff',
        enableZoom: true
    });
}
Map names and paths:
Map Name File
World world_en /resources/vendors/jqvmap/maps/jquery.vmap.world.js
Asia asia_en /resources/vendors/jqvmap/maps/continents/jquery.vmap.asia.js
Africa africa_en /resources/vendors/jqvmap/maps/continents/jquery.vmap.africa.js
Europe europe_en /resources/vendors/jqvmap/maps/jquery.vmap.europe.js
Australia australia_en /resources/vendors/jqvmap/maps/continents/jquery.vmap.australia.js
North America north-america_en /resources/vendors/jqvmap/maps/continents/jquery.vmap.north-america.js
South America south-america_en /resources/vendors/jqvmap/maps/continents/jquery.vmap.south-america.js
USA usa_en /resources/vendors/jqvmap/maps/jquery.vmap.usa.js
Canada canada_en /resources/vendors/jqvmap/maps/jquery.vmap.canada.js
Russia russia_en /resources/vendors/jqvmap/maps/jquery.vmap.russia.js
Germany germany_en /resources/vendors/jqvmap/maps/jquery.vmap.germany.js
France france_fr /resources/vendors/jqvmap/maps/jquery.vmap.france.js
Files required:
Type Files
Custom SCSS /src/scss/inc/vendor-overrides/_jqvmap.scss
Javascript /src/js/vendors/jqvmap.js
Library /resources/vendors/jqvmap/jqvmap.min.css /resources/vendors/jqvmap/jquery.vmap.min.js