A Vue JS Component for Displaying Dynamic Data on A World Map

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

Learn Vue.js from Scratch - Full Course for Beginners

Create Shopping basket page With Vuejs and Nodejs