Interactive SVG World Map Library – svgMap.js

Category: Javascript | February 27, 2021
Author: StephanWagner
Views Total: 678 views
Official Page: Go to website
Last Update: February 27, 2021
License: MIT


Interactive SVG World Map Library – svgMap.js


The svgMap.js lets you create an interactive, SVG powered world map on the webpage, with support for Info Window which can be used to present any data when the user hovers over a specific country and region.

How to use it:

Load the required svgMap.css and svgMap.js files in the document.

<link href="/dist/svgMap.css" rel="stylesheet">
<script src="/dist/svgMap.js"></script>

Create a container element to place the world map.

<div id="svgMapExample"></div>

Create a new svgMap object to render a world map inside the container.

new svgMap({
    targetElementID: 'svgMapExample',

To present data in the world map, following these steps:

// GDP data
var svgMapDataGPD = {
    data: {
      gdp: {
        name: 'GDP per capita',
        format: '{0} USD',
        thousandSeparator: ',',
        thresholdMax: 50000,
        thresholdMin: 1000
      change: {
        name: 'Change to year before',
        format: '{0} %'
      gdpAdjusted: {
        name: 'Purchasing Power Parity',
        format: '{0} USD',
        thousandSeparator: ',',
        thresholdMax: 50000,
        thresholdMin: 1000
      changeAdjusted: {
        name: 'Change to year before',
        format: '{0} %'
    applyData: 'gdpAdjusted',
    values: {
      AF: {gdp: 587, change: 4.73, gdpAdjusted: 1958, changeAdjusted: 0.02},
      // ...
new svgMap({
    targetElementID: 'svgMapExample',
    data: svgMapDataGPD

Default options to customize the world map.

// The element to render the map in
targetElementID: '',

// Minimum and maximum zoom
minZoom: 1,
maxZoom: 10,

// Initial zoom
initialZoom: 1.06,

// Zoom sensitivity
zoomScaleSensitivity: 0.2,

// Zoom with mousewheel
mouseWheelZoomEnabled: true,

// Data colors
colorMax: '#CC0033',
colorMin: '#FFE5D9',
colorNoData: '#E2E2E2',

// The flag type can be 'image' or 'emoji'
flagType: 'image',

// The URL to the flags when using flag type 'image', {0} will get replaced with the lowercase country id
flagURL: '[email protected]/svg/{0}.svg',

// Decide whether to show the flag option or not
hideFlag: false,

// The default text to be shown when no data is present
noDataText: 'No data available',

// Country specific options
countries: {
  // Western Sahara: Set to false to combine Morocco (MA) and Western Sahara (EH)
  EH: true


v2.1.1 (02/27/2021)

  • Fixes color bug

v2.1.0 (02/26/2021)

  • You can now add links to each country.

v2.0.4 (02/17/2021)

  • Refactored to make svgMap working with bundlers
  • Fixed umd wrapper
  • Added build files
  • Fixed es6 compatibility
  • Minor fix

v1.6.0 (12/30/2020)

  • Added accessibility

v1.5.0 (05/14/2020)

  • Added tooltip support for mobile devices

v1.4.2 (03/27/2020)

  • Fixed slightly off position of Monaco
  • Minor text changes

v1.4.0 (03/27/2020)

  • Increased default max zoom to 25, so that smaller countries are selectable
  • Added missing countries
  • Added option to combine Morocco (MA) with Western Sahara (EH)
  • Fixed country Andorra (AD)
  • Fixed the path creator asset

v1.3.4 (03/12/2020)

  • Add MA and EH combined

v1.3.3 (02/12/2020)

  • Fixed: Singapore no longer accessible after hovering over Malaysia

v1.3.2 (01/12/2020)

  • Improved z-indexes

v1.3.1 (01/10/2020)

  • Fixed minor margin offset when hideFlag is option is set
  • Fixed Gulp watch task
  • Minor version bump

v1.3.0 (01/08/2020)

  • Added option hideFlag
  • Added option noDataText
  • Fixed vulnerabilities

v1.2.1 (11/01/2019)

  • Added main to package file
  • Version bump

v1.2.0 (05/16/2019)

  • Change default flag type to image
  • Minor fixes and improvements

v1.1.0 (05/15/2019)

  • Bugfix

You Might Be Interested In:

2 thoughts on “Interactive SVG World Map Library – svgMap.js

  1. Allen

    Instead of hovering over, I would like to apply a mouse click and open a url for the clicked location. How can I do that?

  2. Arslan Nasir

    How can i add the marker to my selected countries..?


Leave a Reply