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
npm install --save svgmapimport svgMap from 'svgmap';
import 'svgmap/dist/svg-map.css';<script src="https://cdn.jsdelivr.net/npm/svgmap@v2.19.2/dist/svg-map.umd.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/svgmap@v2.19.2/dist/svg-map.min.css" rel="stylesheet">Create an HTML element where to show your map, then use JavaScript to initialize:
<div id="svgMap"></div>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
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) | |
allowInteraction |
boolean |
true |
Allow users to zoom and pan around the map |
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 |
resetZoomOnResize |
boolean |
false |
Reset map zoom on resize |
zoomButtonsPosition |
string |
'bottomLeft' |
Position of the zoom buttons. Possible values: 'topLeft', 'topRight', 'bottomLeft', 'bottomRight' |
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. Accepts CSS vars, color names, rgb or hex values. |
colorMin |
string |
'#FFE5D9' |
Color for lowest value. Accepts CSS vars, color names, rgb or hex values. |
colorNoData |
string |
'#E2E2E2' |
Color when there is no data. Accepts CSS vars, color names, rgb or hex values. |
flagType |
'image', 'emoji' |
'image' |
The type of the flag in the tooltip |
ratioType |
'linear', 'log', function |
'linear' |
Ratio type for the color scale |
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 |
showTooltips |
boolean |
true |
When false, disables hover and touch-following tooltips only. Persistent on-map labels from persistentTooltips are unaffected. On touch devices, countries with a link open it on the first tap instead of using the two-tap pattern (first tap preview, second tap navigate). |
tooltipTrigger |
'hover', 'click' |
'hover' |
How the floating tooltip opens with the mouse: 'hover' opens on mouseenter/mouseleave.'click' opens on primary click and closes when clicking outside the map countries or tooltip. Only applies when showTooltips is true. |
persistentTooltips |
false, array, function |
false |
Persistent tooltips fixed on the map when it loads: an array of country IDs, or a function (function (countryID, countryValues) { … }) to decide per country. Independent of showTooltips. Best used with showTooltips: false or tooltipTrigger: 'click'. |
staticPins |
false, array, function |
false |
Static pins on the map at load time: an array of ISO 3166-1 alpha-2 country IDs (e.g. ['DE', 'FR']), or a function (function (countryID, countryValues) { … }) to decide per country. Pins are placed at the geographic center of each country (largest landmass). Independent of showTooltips. |
pinColor |
string |
'#000000' |
Default fill color for circle pins. Accepts CSS vars, color names, rgb or hex values. Can be overridden per country via data.values[id].pinColor. |
pinStrokeColor |
string |
'#ffffff' |
Default stroke color for circle pins. Can be overridden per country via data.values[id].pinStrokeColor. |
pinStrokeWidth |
number |
1 |
Default stroke width for circle pins, in screen pixels (non-scaling stroke). Can be overridden per country via data.values[id].pinStrokeWidth. Set to 0 for no stroke. |
pinSize |
number |
8 |
Default radius for circle pins, in SVG units (viewBox is 2000 × 1001). Can be overridden per country via data.values[id].pinSize. |
pinImage |
string |
Image URL used as a pin instead of the default circle. Can be overridden per country via data.values[id].pinImage. |
|
pinImageWidth |
number |
20 |
Width of the pin image in SVG units. Can be overridden per country via data.values[id].pinImageWidth. |
pinImageHeight |
number |
20 |
Height of the pin image in SVG units. Can be overridden per country via data.values[id].pinImageHeight. |
pinOffsetX |
number |
0 |
Horizontal offset from the pin position, in SVG units. Added after auto placement or pinX/pinY. Can be overridden per country via data.values[id].pinOffsetX. |
pinOffsetY |
number |
0 |
Vertical offset from the pin position, in SVG units. Added after auto placement or pinX/pinY. Can be overridden per country via data.values[id].pinOffsetY. |
onGetPin |
function |
Custom pin element. Signature: function (countryID, countryValues) { return svgElement; }. Return an SVG element (e.g. <g>, <path>) to use instead of the default circle or image pin. The library positions it at the pin coordinates via transform. Return null to fall back to the default pin. |
|
onGetTooltip |
function |
Called when a tooltip is created to custimize the tooltip content (function (tooltipDiv, countryID, countryValues) { return 'Custom HTML'; }) |
|
onCountryClick |
function |
Called when the user clicks a country (primary button, pointer released without dragging). Signature: function (countryID, event) { … }. Use this for custom actions instead of or in addition to data.values.link. Return false to skip opening the URL when the country has a link. On touch devices with a link, the callback runs when the tap would navigate (not on the first tap that only shows the tooltip). Countries show a pointer cursor while this option is set. |
|
countries |
object |
Additional options specific to countries: | |
↳ EH |
boolean |
true |
When set to false, Western Sahara (EH) will be combined with Morocco (MA) |
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 |
|
↳ pinColor |
string |
Pin fill color for this country (circle pins only) | |
↳ pinStrokeColor |
string |
Pin stroke color for this country (circle pins only) | |
↳ pinStrokeWidth |
number |
Pin stroke width for this country, in screen pixels (circle pins only) | |
↳ pinSize |
number |
Pin radius for this country (circle pins only) | |
↳ pinX |
number |
Pin X position in SVG units; use with pinY to override auto placement |
|
↳ pinY |
number |
Pin Y position in SVG units; use with pinX to override auto placement |
|
↳ pinOffsetX |
number |
Horizontal offset from the pin position, in SVG units (after auto placement or pinX/pinY) |
|
↳ pinOffsetY |
number |
Vertical offset from the pin position, in SVG units (after auto placement or pinX/pinY) |
|
↳ pinImage |
string |
Image URL used as the pin for this country | |
↳ pinImageWidth |
number |
Width of the pin image for this country | |
↳ pinImageHeight |
number |
Height of the pin image for this country | |
countryNames |
object |
An object with the ISO 3166-1 alpha-2 country code as key and the country name as value |
You can overwrite the following scss variables to customize the style of the map:
| Variable | Default |
|---|---|
| $textColor | #111 |
| $textColorLight | #777 |
| $oceanColor | #d9ecff |
| $mapActiveStrokeColor | #333 |
| $mapActiveStrokeWidth | 1.5 |
| $blockZoomNoticeColor | #fff |
| $blockZoomNoticeBackgroundColor | rgba(0, 0, 0, 0.8) |
| $mapControlsColor | #fff |
| $mapControlsBackgroundColor | #fff |
| $mapControlsIconColor | #ccc |
| $mapControlsIconColorActive | #000 |
| $mapControlsDisabledColor | #eee |
| $mapControlsBoxShadow | 0 0 0 2px rgba(0, 0, 0, 0.1) |
| $mapTooltipColor | #111 |
| $mapTooltipBackgroundColor | #fff |
| $mapTooltipFlagBackgroundColor | rgba(0, 0, 0, 0.15) |
| $mapTooltipBoxShadowColor | rgba(0, 0, 0, 0.2) |
| $continentControlsBoxShadow | 0 0 0 2px rgba(0, 0, 0, 0.1) |
| $countryStrokeColor | #fff |
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ć.
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.