Vue Chart Map

A Vue JS Component for displaying dynamic data on a world map.

Credits

• Most of this code is copied from https://github.com/Ghrehh/vue-world-map
• Most of this code is also copied from https://github.com/maguayo/vue-map-chart
• Github : https://github.com/ronael/vue-map-chart
• Map SVG amCharts
• Lang support i18n-iso-countries

Installation

Install via npm using npm install vue-chart-map

import MapChart from 'vue-chart-map'

Usage

This component is most useful in creating a heat map for various countries. And will color countries differently based on a props passed.

The component requires a prop of countryData to be passed to it, which is a JS object formatted like so.

{
  "US": 100,
  "CA": 120,
  "GB": 400,
}

Where the key is a country's ISO 3166 Code and the value is a numerical value associated with it.

Example:

import MapChart from 'vue-map-chart'

<MapChart
  :countryData="{'US': 4, 'CA': 7, 'GB': 8, 'IE': 14, 'ES': 21}"
  highColor="#ff0000"
  lowColor="#aaaaaa"
  countryStrokeColor="#909090"
  defaultCountryFillColor="#dadada"
  LangUser="fr"
  />

API

Props	Description	Optional	Type
countryData	See Usage Section above for details	no	Object
lowColor	Countries with lower values will be colored more strongly with this color	yes	String
highColor	Countries with higher values will be colored more strongly with this color	yes	String
defaultCountryFillColor	Countries with no data will default to this color	yes	String
countryStrokeColor	The color of the border around countries	yes	String
legendBorderColor	The color of the legend's border	yes	String
legendBorderRadius	The radius of the legend's border	yes	Number
legendHeaderBackgroundColor	The background color of the legend's header	yes	String
legendContentBackgroundColor	The background color of the legend's content	yes	String
legendFontColorHeader	The font color of the legend's header	yes	String
legendFontColorContent	The font color of the legend's content	yes	String
positionLeftTooltip	Choose the left position of the tooltip in relation to the mouse, like 3 or -13	yes	Number
positionTopTooltip	choose the Top position of the tooltip in relation to the mouse, like 3 or -13	yes	Number
legendBorderCss	Add CSS box-shadow property example: "1px solid #fff"	yes	String
legendBoxShadowCss	Add CSS border property example: "0px 0px 15px #fff"	yes	String
showLegend	(WIP) If true, when you select a country a legend will appear on the screen	WIP	Boolean
showEmptyValue	If false, does not display the countries in hover, if no value is passed for this country in countryData	yes	Boolean
LangUser	Change the language of the names of countries with an ISO code like "fr", default is "en"	yes	String
currencyAdd	If you want to add currency to your values like 2.45 -> $2.45	yes	Boolean
currencyOnlySign	If you only want the currency sign in the other like lang 2.45 $US -> 2.45$	yes	Boolean
currencyCurrent	If you want to change the currency (ISO 4217) lang 2.45 $ -> 2.45 €	yes	String

Roadmap

• Change Map type (World, Europe, single country, etc...) (WIP)
• Click events
• More customization
• Export PDF/CSV