Interactive SVG World Map Library – svgMap.js

Category: Javascript | May 14, 2020
Author: StephanWagner
Views Total: 2,414 views
Official Page: Go to website
Last Update: May 14, 2020
License: MIT

Preview:

Interactive SVG World Map Library – svgMap.js

Description:

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 svg-worldmap.css and svg-worldmap.js files in the document.

<link href="/dist/svg-worldmap.css" rel="stylesheet">
<script src="/dist/svg-worldmap.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: '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
}

Changelog:

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?

    Reply
  2. Arslan Nasir

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

    Reply

Leave a Reply