React India Map / React Any country Map

It’s been a long I have been using React and searching for a library that would help to create proper responsive Map, that can be used to show different statistics and some useful information (this info can be based on different states), and can be shown in different colors, and want it to look like this:

So now we have found React jvectormap, which can help us to create a responsive Map of the whole world along with a respective map for different countries.

So, at very first add this library to React app:

react-jvectormap

npm install --save react-jvectormap

Include this file in your index.html file:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jvectormap/2.0.4/jquery-jvectormap.css" type="text/css" media="screen"/>

now import jvector map to main jsx file:

import { VectorMap } from "react-jvectormap"

Jvector map comes with codes for different states:

Codes
1 IN-BR Bihar
2 IN-PY Puducherry
3 IN-DD Daman and Diu
4 IN-DN Dadra and Nagar Haveli
5 IN-DL Delhi
6 IN-NL Nagaland
7 IN-WB West Bengal
8 IN-HR Haryana
9 IN-HP Himachal Pradesh
10 IN-AS Assam
11 IN-UT Uttaranchal
12 IN-JH Jharkhand
13 IN-JK Jammu and Kashmir
14 IN-UP Uttar Pradesh
15 IN-SK Sikkim
16 IN-MZ Mizoram
17 IN-CT Chhattisgarh
18 IN-CH Chandigarh
19 IN-GA Goa
20 IN-GJ Gujarat
21 IN-RJ Rajasthan
22 IN-MP Madhya Pradesh
23 IN-OR Orissa
24 IN-TN Tamil Nadu
25 IN-AN Andaman and Nicobar
26 IN-AP Andhra Pradesh
27 IN-TR Tripura
28 IN-AR Arunachal Pradesh
29 IN-KA Karnataka
30 IN-PB Punjab
31 IN-ML Meghalaya
32 IN-MN Manipur
33 IN-MH Maharashtra
34 IN-KL Kerala
these codes can be found at https://jvectormap.com/maps/countries/india/

Now data, here I am taking a few states into account for demo:

const map = [
{code: IN-RJ
value: 10000},
{code: IN-MP
value: 800},
{code: IN-DL
value: 900},
{code: IN-KL
value: 500},
};