Interactive SVG World Map Library – svgMap.js

Category: Javascript | January 12, 2020
Author: StephanWagner
Views Total: 1,112
Official Page: Go to website
Last Update: January 12, 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'

Changelog:

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:


Leave a Reply