https://github.com/ghrehh/vue-world-map

A Vue JS component for displaying dynamic data on a world map.
https://github.com/ghrehh/vue-world-map

chart geolocation heatmap map vue vue-js-component

Last synced: 19 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/ghrehh/vue-world-map
• Owner: Ghrehh
• License: mit
• Created: 2018-01-07T05:02:33.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-02-27T20:56:36.000Z (over 1 year ago)
• Last Synced: 2024-10-14T20:39:33.664Z (about 1 month ago)
• Topics: chart, geolocation, heatmap, map, vue, vue-js-component
• Language: Vue
• Homepage:
• Size: 635 KB
• Stars: 39
• Watchers: 4
• Forks: 19
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# This is no longer being maintained, please do not open issues or PRs.

# This package is implemented in a really stupid way and I wouldn't recommend using it, you should probably use a different library or just copy the map SVG out of this and create your own.

# Vue World Map

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

Map from [amCharts](https://www.amcharts.com/svg-maps/?map=world)

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

``` javascript

{

  US: 100,

  CA: 120,

  UK: 400,

}

```

Where the key is a country's

[ISO 3166 Code](https://en.wikipedia.org/wiki/ISO_3166) 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 |