A Vue JS Component for Displaying Dynamic Data on A World Map
This is no longer being maintained, please do not open issues or PRs.
Vue World Map
A Vue JS Component for displaying dynamic data on a world map.
Map from amCharts
Installation
Install via npm using npm install vue-world-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,
UK: 400,
}
Where the key is a country’s ISO 3166 Code and the value is a numerical value associated with it.
API
| Props | Description | Optional |
|---|---|---|
| countryData | See Usage Section above for details | no |
| lowColor | Countries with lower values will be colored more strongly with this color | yes |
| highColor | Countries with higher values will be colored more strongly with this color | yes |
| defaultCountryFillColor | Countries with no data will default to this color | yes |
| countryStrokeColor | The color of the border around countries | yes |
Download Details:
Author: Ghrehh
Demo: https://www.amcharts.com/svg-maps/?map=world
Source Code: https://github.com/Ghrehh/vue-world-map
Suggest:
☞ Vue js Tutorial Zero to Hero || Brief Overview about Vue.js || Learn VueJS 2023 || JS Framework
☞ Learn Vue.js from scratch 2018
☞ Is Vue.js 3.0 Breaking Vue? Vue 3.0 Preview!
☞ Vue.js Tutorial: Zero to Sixty