Dynamic Geo Heat Maps

Official Github

Forked from aleem-ahmed's package vue-world-map A Vue JS Component for displaying dynamic data on a world map.

This fork makes sure that the css properties for country data can be updated realtime.

Map from amCharts

Installation

Install via npm using npm install dynamic-geo-heat-maps

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,
}

For Individual Countries pass the ISO 3166 Code to the map prop. If nothing is passed the default is "world".

map="US"

for US the values for the states can be set like this:

{
  US_CA: 100,
  CA_NY: 120,
  UK_TX: 400,
}

note: Only US country map is available. Other countries are coming soon..

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

Example

<template>
  <div>
    <Map
      :countryData="{ US: 300, CA: 400 }"
    />

    <Map
      map="US"
      :countryData="{ US_CA: 300, US_NJ: 400 }"
    />
  </div>
</template>

<script>
  import map from 'vue-geo-heat-maps'
  .
  .
  .

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