A JavaScript library that allows you to Create an Easily Interactive World Map

svgMap is a JavaScript library that allows you to create an SVG-supported interactive world map on the web page, with support for an info window that can be used to present any data when the user hovers over a specific country and region.

How to make use of it:

Load the required svg-worldmap.css and svg-worldmap.js files within the doc.

<link href="/dist/svg-worldmap.css" rel="stylesheet">
<script src="/dist/svg-worldmap.js"></script>

Create a container component to position the world map.

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

Create a brand new svgMap object to render a world map contained in the container.

new svgMap({
    targetElementID: 'svgMapExample',
});

To current information on the earth 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 choices 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: 'https://cdn.jsdelivr.net/gh/hjnilsson/[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
}

Interactive SVG World Map Library, svgMap Plugin/Github