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

Now the whole code:

import React from "react";
import { VectorMap } from "react-jvectormap";
const map = [
{code: IN-RJ
value: 10000},
{code: IN-MP
value: 800},
{code: IN-DL
value: 900},
{code: IN-KL
value: 500},
};
getdata(key) {
var countryData = [];
map.forEach(function(obj){
countryData[obj.code] = obj.value;
});
return countryData[key];
}
getalldata() {
var countryData = [];
map.forEach(function(obj){
countryData[obj.code] = obj.value;
});
return countryData;
}
//getdata(key) is function that maps code to the value of array (JSON)and it return only value specific state code
handleshow2 = (e, el, code) => {
  el.html(el.html() + ` <br> Statics: ${this.getdata(code)});
};
//on hover on state, it call getdata(with state code) and display it on screen
const IndiaMap = () => {
  return (
    <div>
      <VectorMap
        map={"in_mill"}
        backgroundColor="transparent"
        focusOn={{
          x: 0.5,
          y: 0.5,
          scale: 0,
          animate: false
        }}
        zoomOnScroll={true}
        containerStyle={{
        width: "100%",
        height: "500px"
        }}
        onRegionClick={console.log(countryCode);} //gets the country                         code
        onRegionTipShow={this.handleshow2}
        containerClassName="map"
        regionStyle={{
          initial: {
             fill: "#e4e4e4",
             "fill-opacity": 0.9,
             stroke: "none",
             "stroke-width": 0,
             "stroke-opacity": 0
          },
          hover: {
             "fill-opacity": 0.8,
             cursor: "pointer"
          },
          selected: {
             fill: "#2938bc" // onclick colour of state
          },
        }}
        regionsSelectable={false}
        series={{
           regions: [
               {
                values: this.getalldata(), //can be directly served //with api response or any data
                scale: ['#C8EEFF', '#0071A4'], //color range
                normalizeFunction: "polynomial"
               }
           ]
        }}
/>
</div>
  );
};
export default IndiaMap;

Added custom way so that one can display any data on hover on Map. (getdata() and getalldata())

this represents the Map of India if you need World Map or map of any country you can visit https://jvectormap.com/.

this map is zoomable but there are many more customization available to it.

My Github handle:

ArpitSharma2800 - Overview