Vector World Map

Below is an example of displaying the world map, with regions colored on a 5-tier scale from sample GDP data.

Vector Map: USA

Below is an example of displaying the usa map.

Vector Map: Canada

Below is an example of displaying the canada map.

Vector Map Options

Below are the available options for the vector map.

Source Code

new jsVectorMap({
  selector: '#vmap',
  map: 'world',
  backgroundColor: '#a5bfdd',
  regionStyle: {
    initial: { fill: '#f4f3f0', stroke: '#818181', strokeWidth: 0.25 },
    hover: { fill: '#c9dfaf' },
    selected: { fill: '#c9dfaf' }
  },
  zoomButtons: true,
  showTooltip: true,
  series: {
    regions: [{
      attribute: 'fill',
      scale: { tier0: '#b6d6ff', tier1: '#005ace' },
      values: { US: 'tier1', FR: 'tier0' }
    }]
  },
  onRegionClick(event, code) {}
});

Vector Map Countries & Continents

jsvectormap's npm package only bundles the world map; region/country maps (USA, Canada, and others) are sourced from the same project's GitHub repository as standalone data files.

Script Code

<script src="https://cdn.jsdelivr.net/npm/jsvectormap@1.7.0/dist/jsvectormap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsvectormap@1.7.0/dist/maps/world.js"></script>

Map Reference

Map Name	Source
world	Bundled with the npm package (dist/maps/world.js)
us_merc_en, canada, and others	Sourced from the jsvectormap GitHub repository (packages/maps/src/), pinned to the same release tag as the core library