Interactive SVG World Map Library – svgMap.js

Category: Javascript | May 16, 2019
Author: StephanWagner
Views Total: 763
Official Page: Go to website
Last Update: May 16, 2019
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',

// Data thresholds
thresholdMax: null,
thresholdMin: null,

// The url to the flags, {0} will get replaced with lowercase coutry id
flagURL: 'https://cdn.jsdelivr.net/gh/hjnilsson/[email protected]/svg/{0}.svg'

Changelog:

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