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

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

See Demo And Download

Official Website(StephanWagner): Click Here

This superior jQuery/javascript plugin is developed by StephanWagner. For extra Advanced Usages, please go to the official website.

Related Posts


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


Select Box Based Star Rating JavaScript Library | star-rating.js

star-rating.js is a small JavaScript library to create a customizable and gradually improved star rating control from a regular tick box with numeric values. The ES6 module…


Corner Fixed Notifications Alerts With Bootstrap | BS4 Show Notification

Bootstrap Notification is an easy-to-use jQuery plugin that uses the Bootstrap Alerts component to create static, rejectable, and stackable notification popups in the upper right corner of the…


Create Stackable Multi-level Sidebar Menu | HC Off-canvas Nav

Multi-Level Sidebar Slide Menu – HC MobileNav is a jQuery plugin for creating multi-level, mobile-first, totally accessible, off-canvas facet navigation that helps the infinite nesting of submenu…


Responsive Masonry Layout with SSR Support for Vue 3 | vue-masonry-wall

Vue masonry wall is a responsive masonry layout component for Vue 3 to deliver a Masonry-style responsive grid layout with SSR and RTL layout support. Features 📱…


A Bootstrap 5 Toast Notification Framework Library | bs-toaster

bs-toaster is simple to instantiate bs-toaster and create multiple toasts effortlessly using native Bootstrap 5! Feature Facts Small and clean Modern browser support. No IE sorry 💥…