A jvectormap wrapper for React apps fixed

Usage no npm install needed!

<script type="module">
  import reactJvectormapIls from '';


React jvectormap


A simple wrapper for jvectormap

Please feel free to contribute, open issues or just enjoy this library!

Gettings started

Install the library:

npm install --save react-jvectormap

Include the jvectormap.css file in your project:

<link rel="stylesheet" href="" type="text/css" media="screen"/>

Example usage

        <div style={{width: 500, height: 500}}>
            <VectorMap map={'us_aea'}
                           width: '100%',
                           height: '100%'

Will result the following map:

Supported props:

All the Map properties are supported as props.

Please note that map is a required prop, and must be one of the supported maps;

In addition, the plugin currently supports the following props:

prop type required description
containerStyle object no an inline style object for the map container
containerClassName string no a class name for the map container

Ref methods

You can allways add a ref to your VectorMap and access the following methods (more will be added in the future or upon request):

method params return type
programmatically change the map background color
color - string -
get the jvectormap object for additional options and methods (see jvectormap docs)
- object

Supported Maps

  • world_mill
  • us_aea
  • europe_mill
  • continents_mill
  • ch_mill
  • oceania_mill
  • africa_mill
  • asia_mill
  • north_america_mill
  • south_america_mill
  • ca_lcc
  • brazil
  • se_mill
  • es_mill
  • vietnam
  • indonesia
  • th_mill
  • de_mill
  • ar_mill
  • au_mill
  • kr_mill
  • co_mill

Please feel free to request new maps! just open an issue!