Create world map charts with svgMap

svgMap is a lightweight JavaScript library that lets you easily create interactive world maps, allowing you to display customizable data for each country in a visually engaging way.

Install

ES6

You can install svgMap via npm:

npm install --save svgmap

import svgMap from 'svgmap';
import 'svgmap/dist/svg-map.css';

CDN

jsDelivr is a great CDN choice for svgMap:

<script src="https://cdn.jsdelivr.net/npm/svgmap@v2.21.0/dist/svg-map.umd.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/svgmap@v2.21.0/dist/svg-map.min.css" rel="stylesheet">

Usage

Create an HTML element where to show your map, then use JavaScript to initialize:

<div id="svgMap"></div>

new svgMap({
  targetElementID: 'svgMap',
  data: {
    data: {
      gdp: {
        name: 'GDP per capita',
        format: '{0} USD',
        thousandSeparator: ',',
        thresholdMax: 50000,
        thresholdMin: 1000
      },
      change: {
        name: 'Change to year before',
        format: '{0} %'
      }
    },
    applyData: 'gdp',
    values: {
      AF: {gdp: 587, change: 4.73},
      AL: {gdp: 4583, change: 11.09},
      DZ: {gdp: 4293, change: 10.01}
      // ...
    }
  }
});

Demo

The example code above creates a world map displaying the GDP per capita and its change from the previous year:

Options

You can pass the following options into svgMap:

Localize

Use the option countryNames to translate country names.
In the folder demo/html/local you can find translations in following languages:

Arabic, Chinese, English, French, German, Hindi, Portuguese, Russian, Spanish, Urdu

To create your own translations, check out country-list by Saša Stamenković.

Attribution

If you need more detailed maps or more options for your data, there is a great open source project called datawrapper out there, with a lot more power than svgMap. Highmaps is also a great alternative.

svgMap uses svg-pan-zoom by Anders Riutta.

The country flag images are from country-flags by Hampus Nilsson.