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 for minZoom, 25 for maxZoom

• 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 value colorMax, lowest value colorMin and no data available colorNoData. Default: #CC0033 for colorMax, #FFE5D9 for colorMin, #E2E2E2 for colorNoData

• flagType ('emoji', 'image') The type of the flag in the tooltip. Default: image

• 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) 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 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) 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.