svgMap

svgMap is a JavaScript library that lets you easily create an interactable world map comparing customizable data for each country.

Live demo: https://stephanwagner.me/create-world-map-charts-with-svgmap#svgMapDemoGDP

Install

ES6

npm install @tekhece/svgmap-next2

import svgMap from '@tekhece/svgmap-next2'
import '@tekhece/svgmap-next2/dist/svgMap.min.css';

## Usage

Create an HTML element where to show your map, then use JavaScript to initialize with useEffect:

```html
<div id="svgMap"></div>

useEffect(()=>{
  new svgMap({
    targetElementID: 'svgMap',
    data: {
      data: {
        gdp: {
          name: 'GDP per capita',
          format: '{0} USD',
          thousandSeparator: ',',
          thresholdMax: 50000,
          thresholdMin: 1000
        },
        change: {
          name: 'Change to year before',
          format: '{0} %'
        }
      },
      applyData: 'gdp',
      values: {
        AF: { gdp: 587, change: 4.73 },
        AL: { gdp: 4583, change: 11.09 },
        DZ: { gdp: 4293, change: 10.01 }
        // ...
      }
    }
  });
},[])

This example code creates a world map with the GDP per capita and its change to the previous year: https://stephanwagner.me/create-world-map-charts-with-svgmap#svgMapDemoGDP

Options

You can pass the following options into svgMap:

| Option | Type | Default | | | --- | --- | --- | --- | | targetElementID | string | | The ID of the element where the world map will render (Required) | | minZoom | float | 1 | Minimal zoom level | | maxZoom | float | 25 | Maximal zoom level | | initialZoom | float | 1.06 | Initial zoom level | | initialPan | object | | Initial pan on x and y axis (e.g. { x: 30, y: 60 }) | | showContinentSelector | boolean | false | Show continent selector | | zoomScaleSensitivity | float | 0.2 | Sensitivity when zooming | | showZoomReset | boolean | false | Show zoom reset button | | mouseWheelZoomEnabled | boolean | true | Enables or disables zooming with the scroll wheel | | mouseWheelZoomWithKey | boolean | false | Allow zooming only when one of the following keys is pressed: SHIFT, CONTROL, ALT, COMMAND, OPTION | | mouseWheelKeyMessage | string | 'Press the [ALT] key to zoom' | The message when trying to scroll without a key | | mouseWheelKeyMessageMac | string | Press the [COMMAND] key to zoom | The message when trying to scroll without a key on MacOS | | colorMax | string | '#CC0033' | Color for highest value | | colorMin | string | '#FFE5D9' | Color for lowest value | | colorNoData | string | '#E2E2E2' | Color when there is no data | | flagType | 'image', 'emoji' | 'image' | The type of the flag in the tooltip | | flagURL | string | | The URL to the flags when using flag type 'image'. The placeholder {0} will get replaced with the lowercase ISO 3166-1 alpha-2 country code. Default: 'https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/{0}.svg' | | hideFlag | boolean | false | Hide the flag in tooltips | | noDataText | string | 'No data available' | The text to be shown when no data is present | | touchLink | boolean | false | Set to true to open the link (see data.values.link) on mobile devices, by default the tooltip will be shown | | onGetTooltip | function | | Called when a tooltip is created to custimize the tooltip content (function (tooltipDiv, countryID, countryValues) { return 'Custom HTML'; }) | | countries | object | | Additional options specific to countries: | |    ↳ EH | boolean | true | When set to false, Western Sahara (EH) will be combined with Morocco (MA) | |    ↳ Crimea | 'UA', 'RU' | 'UA' | Crimea: Set to 'RU' to make the Crimea part of Russia, by default it is part of the Ukraine | | data | object | | The chart data to use for coloring and to show in the tooltip. Use a unique data-id as key and provide following options as value: | |    ↳ name | string | | The name of the data, it will be shown in the tooltip | |    ↳ format | string | | The format for the data value, {0} will be replaced with the actual value | |    ↳ thousandSeparator | string | ',' | The character to use as thousand separator | |    ↳ thresholdMax | number | null | Maximal value to use for coloring calculations | |    ↳ thresholdMin | number | 0 | Minimum value to use for coloring calculations | |    ↳ applyData | string | | The ID (key) of the data that will be used for coloring | |    ↳ values | object | | An object with the ISO 3166-1 alpha-2 country code as key and the chart data for each country as value | |         ↳ color | string | | Forces a color for this country | |         ↳ link | string | | An URL to redirect to when clicking the country | |         ↳ linkTarget | string | | The target of the link. By default the link will be opened in the same tab. Use '_blank' to open the link in a new tab | | countryNames | object | | An object with the ISO 3166-1 alpha-2 country code as key and the country name as value |

Localize

Use the option countryNames to translate country names. In the folder demo/html/local or demo/es6/local you can find translations in following languages: Arabic, Chinese, English, French, German, Hindi, Portuguese, Russian, Spanish, Urdu.

To create your own translations, check out country-list by Saša Stamenković.

Attribution

If you need more detailed maps or more options for your data, there is a great open source project called datawrapper out there, with a lot more power than svgMap.

svgMap uses svg-pan-zoom by Anders Riutta (now maintained by bumpu).

The country flag images are from country-flags by Hampus Joakim Borgos.

Most data in the demos was taken from Wikipedia.