# 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.