Vue Map Chart
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
- Map SVG amCharts
Installation
Install via npm using npm install vue-map-chart
import MapChart from 'vue-map-chart'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"
/>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 |
| chromaScaleOn | If True chromaScale of color, if false countries with value will be filled of the hightColor. By default is True | yes | Boolean |
| 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 |
| legendBoxShadow | If true, a box shadow is display | yes | Boolean |
| showLegend | (WIP) If true, when you select a country a legend will appear on the screen | WIP | Boolean |
| Events | Description | Parameter |
|---|---|---|
| hoverCountry | Triggered when the device pointer hovers over a country | country object (from bound countryData prop) |
| hoverLeaveCountry | Triggered when the device pointer stops hovering a country | (none) |
Roadmap
- Change Map type (World, Europe, single country, etc...) (WIP)
- Click events
- More customization
- Export PDF/CSV