svgMap is a JavaScript library that lets you easily create an interactable world map comparing customizable data for each country.
npm install svgmapsvgMap 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
---
``bash`
npm install --save svgmap
`javascript`
import svgMap from 'svgmap';
import 'svgmap/dist/svg-map.css';
`html`
---
Create an HTML element where to show your map, then use JavaScript to initialize:
`html`
`javascript`
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 mapminZoom
| | 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 |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) |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 |
---
| 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.