SVG Map
svgMap is a JavaScript library that lets you easily create an interactable world map comparing customizable data for each country.
Getting started
For SVG maps we decided to use a pretty cool open source project called svgMap. For a more detailed guide and options you can browse the official plugin page. In this guide we’ll show you how to quickly get started using jVectorMap with Bootstrap.
<script src="@@path/vendor/svgmap/dist/svgMap.min.js"></script>
And the following stylesheet file in the head
tag:
World map with tooltips and coloring
Here’s an example of a line chart:
<div id="map" style="width: 100%; height: 300px"></div>
Javascript:
if(d.querySelector('#map')) {
new svgMap({
targetElementID: 'map',
colorMin: '#FCE1C3',
colorMax: '#F8BD7A',
flagType: 'emoji',
data: {
data: {
visitors: {
name: 'Visitors',
format: '{0} visitors',
thousandSeparator: ',',
thresholdMax: 500000,
thresholdMin: 0
},
change: {
name: 'Change by month',
format: '{0} %'
}
},
applyData: 'visitors',
values: {
US: {visitors: 272109, change: 4.73},
CA: {visitors: 160064, change: 11.09},
DE: {visitors: 120048, change: -2.3},
GB: {visitors: 110048, change: 3.3},
FR: {visitors: 100048, change: 1.3},
ES: {visitors: 90048, change: 1.5},
JP: {visitors: 56022, change: 3.5},
IT: {visitors: 48019, change: 1},
NL: {visitors: 40016, change: 2},
RU: {visitors: 30016, change: 3.4},
CN: {visitors: 50016, change: 6},
IN: {visitors: 140016, change: 2},
BR: {visitors: 40016, change: 5},
// ...
}
}
});
}
Options
You can pass the following options into svgMap:
-
targetElementID
(string
) The ID of the element where the world map will render (Required) -
minZoom
,maxZoom
(float
) Minimal and maximal zoom level. Default:1
forminZoom
,25
formaxZoom
-
initialZoom
(float
) Initial zoom level. Default:1.06
-
zoomScaleSensitivity
(float
) Sensitivity when zooming. Default:0.2
-
mouseWheelZoomEnabled
(boolean
) Enables or disables zooming with the scroll wheel. Default:true
-
colorMax
,colorMin
,colorNoData
(string
) The color values in hex for highest valuecolorMax
, lowest valuecolorMin
and no data availablecolorNoData
. Default:#CC0033
forcolorMax
,#FFE5D9
forcolorMin
,#E2E2E2
forcolorNoData
-
flagType
('emoji'
,'image'
) The type of the flag in the tooltip. Default:image
-
flagURL
(string
) The URL to the flags when using flag typeimage
. 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
) Decide whether to show the flag option or not -
noDataText
(string
) The default text to be shown when no data is present -
countries
(object
) Additional options specific to countries:EH
(boolean
) When set tofalse
, 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
) Maximal value to use for coloring calculations -
thresholdMin
(number
) 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 -
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 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 would like to add additional options or maps you can learn more from the official plugin page from svgMap on Github.