Interactive SVG World Map Library – svgMap.js

Category: Javascript | December 10, 2018
Author: StephanWagner
Views Total: 150
Official Page: Go to website
Last Update: December 10, 2018
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'

You Might Be Interested In:

Leave a Reply