In the dynamic world of web development, visualizing data through maps has become increasingly important, especially when representing regions and their unique attributes. This blog focuses on integrating J&K and Ladakh in India Map using React-SVG-Map. By leveraging the power of SVG (Scalable Vector Graphics) and the React framework, you can create a responsive and engaging map that enhances user experience and provides valuable insights. Whether you’re a developer looking to deepen your mapping skills or a data enthusiast eager to showcase geographical information, this guide will walk you through the essential steps to bring your map to life.
Table of Contents
Installation
First, you need to install the react-svg-map module in your React project using this command.
npm i react-svg-mapModule Setup
You have to include the module on the page. First, import the module and then use it in the HTML.
import { SVGMap } from "react-svg-map";This module enables the display of a complete world map; however, for our current needs, we are focusing on modifications to the map of India. Therefore, we have imported the module named ‘@svg-maps/india’. Additionally, you can extract detailed information about any specific state.
npm i @svg-maps/indiaFirst, import the map module in your React component.
import India from "@svg-maps/india";Call the map in the render/return method of the component to include it in the HTML.
<SVGMap map={India} className="svgIndiaMap" />We have assigned a custom class name to facilitate the seamless application of styles to this map. Upon executing the code, we noticed that the region of Ladakh is absent, as it was recently introduced. To address this, modifications were made to the map of India. Specifically, we updated the India object to reflect Ladakh and Jammu & Kashmir as distinct regions.
if (India && Object.keys(India).length) {
const findOne = India.locations.find((item) => item.id == "ladakh");
if (!findOne) {
const obj = {
name: "Ladakh",
id: "ladakh",
path:
"M252.3,41.5l0.3,1.8l-0.1,1.3l-0.9,1.7l-0.1,1.2l-1,1.4l-0.2,1.5l0.1,2.6l-0.8,2l-0.8,1.9l-0.6,1.4l-0.4,2.2l-1.5,0.8l-1.6,0.7l-2.1,1v2l-0.8,1.3l-1.9-0.1l-2.1,0.1l-1,0.9l0.2,1.1l0.9,1.6l0.5,2.1l-0.9,3.7l-2,2.2l-1.2,0.5l-2-0.5l-2.2-0.8l-1.4,0.6l-2,0.4l-1.2,0.4l-0.5,1.2l0.4,1.7l0.8,1.6l0.9,1.4l1.4,2.2L228,88l-1.1,0.9l-1.5,0.6l-0.2,1.4l0.2,1.6l-0.5,0.7l3.1,2.8l0.2,1.7l2.3,0.9l4.7,0.3l0.1,0.8l-1.3,2.9l0,1.3l2,2.2l0.5,2.1l1.3,1.1l0.7,2.2l-0.4,1.6l-2,0.5l-2.8,2.5l-1.1-0.9l-1.2,0.3l-1.6,1.2l-0.5,2.3l-1.2-0.3l-1.5,1l-1.3-0.6l-2.8-2.7l-0.4-2.3l0.3-0.8l-0.7-2.4l-1.9,1.2l-0.6,1l-1.7-0.1l-1.2,1l-0.7-0.2l-0.8,0.6l0,1.1l-0.6-0.4l-1.5,1.3l-0.7-0.8l0.4-0.5l0-1.2l1.9-1.1l-0.5-1.2l0.2-2.2l-1.8,0.6l0.2,0.6l-1.7,1.1l-1.3-0.2l-0.6,0.9l-0.6-0.5l-0.6,0.9l-0.7-0.3l0,1.1l-1.1,0.1l-1.7-2.6l0.2-1.8l-0.7-0.2l-0.7-1.3l-1.8-0.9l0.6-1l-1.6-1.7l-1-0.3l-0.2,0.7l-1.5,0.4l-1.4,1.4l-0.7,0l-0.6,0.6l-1.4-0.6l-0.6,1.5l-0.6,0.1l-0.5-0.8l-1-0.6l-0.4,0.3l-0.2-0.8l-1.1-0.9l-0.6,0.4l-0.2-1.7l-1.3,0.2l-0.8-0.7l-0.8,0.2l-1.7-1.1l-0.8-2l-0.7,0l-0.9-1.1l0.5-2.3l-0.5,0.2l-0.5-0.5c-0.9-1-3-0.9-4.1-1.5c-1.2-0.6-1.5-1.6-2.5-2.2c-1-0.6-1.2,0-2-1c-0.8-1-1.3-1-1.6-1.1c-0.4-0.1-0.3,0.1-0.3,0.4c0,0.3-1,1.1-1.6,0.6c-0.6-0.5,0.9-2.7,1.1-3.8c0.2-1.1-1-1.7-1.3-1.8c-0.3-0.2-1.4-2.4-2-3.1c-0.7-0.7-1.3-1.7-1.7-1.9c-0.8-0.4-2.6,0.1-3.7,0.2c-1,0-1.1-1.4-1.3-2c-0.2-0.6-1.9-1.2-2.1-2.6c-0.2-1.4,0-2.3-1.2-2.1c-1.2,0.2-2.2-0.4-3.7-1.6c-2.1-1.7-2.2-4.8-1.7-5.7c0.5-0.9-1.3-1.9-1.9-2.4c-0.7-0.5-0.9-0.8-0.4-2.3c0.6-1.5-0.3-2.8-0.6-3.2c-0.2-0.4-1.2-0.9-1.6-1.6c-0.5-0.7-0.9-0.4-1.2,0.2c-0.4,0.6-0.5,0.5-1,0.4c-0.5-0.1-0.8,0.9-1.1,1.4c-0.2,0.5-0.9-0.1-1.3-0.3c-0.3-0.2-1.5-0.2-2-0.5c-0.6-0.3-1.1-0.9-1.4-1.5s-1.1-0.6-1.8-0.7c-0.8-0.1-0.7-0.6-0.8-1.4c-0.1-0.8-0.7-2.6-0.9-3.2s-1.1-1.4-1.5-1.4s-0.7,1-1.3,1.4c-0.6,0.5-1.5,0.4-2.2,0.4c-0.6,0-0.4,0.4-0.8,0.4c-0.4,0-0.6-0.6-0.8-1c-0.2-0.4-1.2-0.2-1.9-0.5l-1.7,0.5v-1.9l-1.8-1.8l-2.5-1.1l-2-0.6l-1.2-0.9l-0.7-1.5l0.4-1.6l1.4-0.9l0.6-1.2l-1-2.2l-2.1,0.1l-2.4-0.3l-2-0.6l-3.5-0.3l-1.9-1.7l-0.9-1.8l-0.7-2.6l-2.7-1.3l-3.1-0.7l-2,1.3l-2.2,0.1L93.1,30L93,27.8l0.5-1.1L93,25.1l0.4-1.6l1-2.3l2.4-1.7l2.5-2.1l2.3-2.5l2.2-2.8l0.9-2.8l2-1.3l3.1,0.3l3.9,0.4L118,9l2.1-0.5l-1.9-2.1l-1.7-0.9l0.8-1.2l2-0.3l1.8,1.6l2.6,0.6l1.3-1.6l1.8-0.4l1.7-0.8l1.4-0.7l2.2-1.1l1.5-1.2l2.2-0.2l1.7,0.3l2.6,0.9l1.2,1.4l2.4-0.1l1.7-0.1l1.5-1.2l1.6-0.6l1.6,0.8l1.7,2.5l2,2.9l2.6,3l1.1,2.2l3.4,2.2l3.3,1.6l2.8,2.6l3.3,1.1l2.6,2.7l1.6,1.4l2.7,0.3l2.3,2.5l0.1,1.8l-0.5,1.5l0.7,1.9l1.2,1.8l2.7,0.8h3.3l3.7,1.1l2.2,2l0.9,2.6l1,1.8l3.5,0.4l4-1.8l3.5-0.9h2.8l2-3.2l2.3-2l2.7-0.6l2.2-0.9l2-1.5l3.5-0.3l2.9,0.9l1.8,1l1.2-0.7v-2.6l1.1-1.3l1.8-0.5l2.5,2l1.3,1.5l1.6,0.4l3.1,0.7l2.4,0.7l2-0.9l1.4-0.5l1.3,2.1l1.2,2l1.7,0.9l2.1,1.5l0.6,1.6L252.3,41.5z",
};
India.locations.push(obj);
}
//j&k
const findJK = India.locations.findIndex((item) => item.id == "jk");
if (findJK > -1) {
India.locations[findJK].path =
"M180.1,97.1l-0.5,0.2l-0.5,1.7l-2.2,0.4l-0.9-1.1l-0.7-0.1l-1.6,0.7l-1.6-0.2l-2.4,2.1l-0.8,1.8l-3,0.7l-0.2,0.9l-2.9,2.1l-1.6-1.1l-1.2,0l-0.3,1.5l1.7,1.4l0.8,1.4l-0.3,1.6l0.6,1.2l-1.1,1.7l-1.4,2.2l-1.2,0.3l-0.7,1.4l-3.8,1.7l-0.6,1.8l-0.2-0.8l-0.5-0.2l0.1-0.5l-1.2,0.4l-1.9-0.3l-2.6-1.7l-0.2-0.5l-1,0.2l-1.2-1.6l-1-0.3l-1.2,1.1l-3-1.2l-2.9,0.3l-1.2-3.1l0.7-1.2l-0.5-1.5l1-3l-1.2,0.4l-0.6,1.6l-1.7,0.4l-1.2,0.7l-2.9-0.3l-1.4-1l-2.1-1l-1.6-1.5l-2.5-0.9l-2.1-1.5h-3.2l-0.7-1.5l-1.1-1l-1.4-1.2l0.6-2.5l-0.9-1.8l-0.3-3.1l1.1-1.3l-0.8-3.2l0.5-1.2l0.1-1.5l-1.5-1.5l0.1-1.4l1-1.2l-0.8-3.1l-1.5-1.5l0.1-2.9l-0.3-2.3l-1-2.5l0.4-2.5v-1.7l1.3-1.4l2.2-0.6L115,63l0.1-1.9l1.3-2.3l1.4-0.2l3.4-0.1l1.2-0.9l0.8-3l0.9-1.9v0l1.7-0.5c0.7,0.3,1.8,0.1,1.9,0.5c0.2,0.4,0.4,1,0.8,1c0.4,0,0.2-0.4,0.8-0.4c0.6,0,1.6,0.1,2.2-0.4c0.6-0.5,0.8-1.4,1.3-1.4s1.3,0.8,1.5,1.4s0.8,2.4,0.9,3.2c0.1,0.8,0,1.3,0.8,1.4c0.8,0.1,1.5,0.1,1.8,0.7s0.9,1.3,1.4,1.5c0.6,0.3,1.7,0.3,2,0.5c0.3,0.2,1,0.8,1.3,0.3c0.2-0.5,0.5-1.5,1.1-1.4c0.5,0.1,0.6,0.2,1-0.4c0.4-0.6,0.8-0.9,1.2-0.2c0.5,0.7,1.4,1.2,1.6,1.6c0.2,0.4,1.1,1.6,0.6,3.2c-0.6,1.5-0.3,1.8,0.4,2.3c0.6,0.6,2.4,1.6,1.9,2.4c-0.5,0.9-0.3,4,1.7,5.7c1.5,1.2,2.5,1.8,3.7,1.6c1.2-0.2,1,0.7,1.2,2.1c0.2,1.4,1.9,2,2.1,2.6c0.2,0.6,0.3,2,1.3,2c1,0,2.9-0.6,3.7-0.2c0.5,0.2,1.1,1.2,1.7,1.9c0.7,0.7,1.7,2.9,2,3.1c0.3,0.2,1.5,0.8,1.3,1.8c-0.2,1.1-1.7,3.3-1.1,3.8c0.6,0.5,1.6-0.3,1.6-0.6c0-0.3-0.1-0.5,0.3-0.4c0.3,0.1,0.9,0.1,1.6,1.1c0.8,1,1,0.4,2,1c1,0.6,1.3,1.6,2.5,2.2C177.2,96.1,179.2,96.1,180.1,97.1z";
}The ID is unique for every state, so we use it to update the path. You can also rename the state name, for example, if I want to change the name of Delhi.
//THE GOVERNMENT OF NCT OF DELHI
const findDD = India.locations.findIndex((item) => item.id == "dl");
if (findDD > -1) {
India.locations[findDD].name = 'The Government of NCT of Delhi';
}You can apply some styles and change the color according to your preference.
//set parent div width
.rightArea{
width: 500px;
}
//set map color
.rightArea .svgIndiaMap .svg-map__location {
fill: #5d98b4;
position: relative;
stroke: white;
transition: all 0.3s ease-in-out;
}
//change selected state color
.rightArea .svgIndiaMap .svg-map__location:focus,
.rightArea .svgIndiaMap .selected-map {
fill: #23d959 !important;
stroke: none;
position: relative;
filter: drop-shadow(-2px 14px 0px #11451c);
transform: perspective(800px) rotateY(0deg);
transition: all 0.3s ease-in-out; transform-origin: top;
}
// Change union territory color
.rightArea .svg-map__location_puducherry,
.rightArea .svg-map__location_lakshadweep,
.rightArea .svg-map__location_an,
.rightArea .svg-map__location_dd,
.rightArea .svg-map__location_dl,
.rightArea .svg-map__location_dn {
stroke: #ff56c7 !important;
stroke-width: 5px !important;
filter: none;
}
// Change color of on focusing
.rightArea .svgIndiaMap .svg-map__location_puducherry:focus,
.rightArea .svgIndiaMap .svg-map__location_lakshadweep:focus,
.rightArea .svgIndiaMap .svg-map__location_an:focus,
.rightArea .svgIndiaMap .svg-map__location_dd:focus,
.rightArea .svgIndiaMap .svg-map__location_dl:focus,
.rightArea .svgIndiaMap .svg-map__location_dn:focus,
.rightArea .svgIndiaMap .svg-map__location_ch:focus,
.rightArea .svgIndiaMap .svg-map__location_ladakh.selected-map,
.rightArea .svgIndiaMap .svg-map__location_jk.selected-map,
.rightArea .svgIndiaMap .svg-map__location_ch.selected-map,
.rightArea .svgIndiaMap .svg-map__location_an.selected-map,
.rightArea .svgIndiaMap .svg-map__location_lakshadweep.selected-map,
.rightArea .svgIndiaMap .svg-map__location_dn.selected-map,
.rightArea .svgIndiaMap .svg-map__location_dl.selected-map,
.rightArea .svgIndiaMap .svg-map__location_dd.selected-map,
.rightArea .svgIndiaMap .svg-map__location_puducherry.selected-map {
fill: #23d959 !important;
stroke: #23d959 !important;
stroke-width: 2px !important;
/* filter: drop-shadow(-2px 14px 0px #77553e);*/
}
.rightArea .svgIndiaMap .svg-map__location_ch {
stroke: #ffbe56 !important;
}.
rightArea .svg-map__location:hover {
fill: #23d959 !important;
}
.rightArea .svgIndiaMap .svg-map__location_ladakh,
.rightArea .svgIndiaMap .svg-map__location_jk,
.rightArea .svgIndiaMap .svg-map__location_ch {
fill: #ff56c7 !important;
}
//handle tooltip
.custom-tooltip {
position: absolute;
background-color: #ff3f3f;
padding: 10px 20px;
border: 1px solid #ff3f3f;
font-size: 15px;
color: white;
z-index: 9999;
border-radius: 6px;
-webkit-clip-path: polygon(
0 13%,
100% 13%,
100% 83%,
57% 84%,
51% 100%,
44% 84%,
0 83% );
clip-path: polygon(
0 13%,
100% 13%,
100% 83%,
57% 84%,
51% 100%,
44% 84%,
0 83% );
}Leverage state management to dynamically handle and manipulate data in real-time.
const [hoveredStateId, setHoveredStateId] = useState(null); // tooltip state
const [locationSelected, setLocationSelected] = useState(null); //for knowing which one state is selected.
const [stateId, setStateId] = useState("up"); // tooltip state
const [isOpen, setIsOpen] = useState(false); //show tooltip or not
const [tooltipPosition, setTooltipPosition] = useState({}); //set tooltip position dynamically
const [state, setState] = useState({ value: 0, label: "India" }); //help in set state To enable tooltip display on hover, we integrated an additional module specifically designed for tooltips.
npm i react-tooltipInvoke the tooltip module at the top of the page.
import { Tooltip as ReactTooltip } from "react-tooltip";
import "react-tooltip/dist/react-tooltip.css";Embed the tooltip beneath the map in the HTML to ensure it interacts seamlessly with the state.
<ReactTooltip
anchorSelect={`#${stateId}`}
place={"top"}
content={hoveredStateId}
className={`rc-tooltip-cutstom ${stateId === "jk"
? "!ml-[-30px]"
: stateId === "py"
? "!ml-[-19px]"
: ""
} `}
offset={() => getOffset(stateId)} // set the
position / direction of the tooltip
isOpen={isOpen} // open or close tooltip
followCursor={true}
globalEventOff="click"
/>In this section, we configure the tooltip’s offset/position by utilizing the getOffset() function.
const getOffset = (state) => {
const offsets = {
up: -70,
rj: -70,
mp: -70,
wb: -70,
ap: -40,
ga: 0,
dl: 1,
dd: 1,
ch: 1,
py: -82,
sk: 1,
jk: -70,
ml: -10,
tr: -10,
mn: -10,
nl: -10,
ar: -20,
};
return offsets[state] || -31;
};State hover event: we need to detect which state the mouse is currently hovering over or leaving, allowing us to trigger specific actions accordingly.
onLocationMouseOver={handleStateHover}
onLocationMouseOut={handleStateLeave}
const handleLocationClick = (event) => {
setIsOpen(true);
const ids = event.target.attributes.getNamedItem("id").value;
setLocationSelected(ids);
};
const handleStateHover = (event) => {
setIsOpen(true);
const hoveredState = event.target.attributes.getNamedItem("name").value;
const positionX = event.screenX;
const positionY = event.screenY;
setHoveredStateId(hoveredState);
setTooltipPosition({ x: positionX, y: positionY }); // set position fo tooltip
setStateId(event.target.attributes.getNamedItem("id").value); //set state
};Upon clicking, utilize the function getLocationClassName() to designate the selected state.
const getLocationClassName = (location) => {
var classNew = "svg-map__location",
selected = " selected-map";
if (location.id == "ladakh") {
classNew = "svg-map__location_ladakh ";
if (location.id === locationSelected) selected = " selected-ladakh";
}
if (location.id == "ld") {
classNew += " svg-map__location_lakshadweep ";
}
// Return the dynamic class name based on the location properties or any other condition
return location.id === locationSelected ? classNew + selected : classNew;
};Dismiss the tooltip when the mouse exits the state.
const handleStateLeave = () => {
setIsOpen(false);
setHoveredStateId(null);
};Style.css
.rightArea{
width: 500px;
}
.rightArea .svgIndiaMap .svg-map__location {
fill: #5d98b4 !important;
position: relative;
stroke: white;
transition: all 0.3s ease-in-out;
}
.rightArea .svgIndiaMap .svg-map__location:focus,
.rightArea .svgIndiaMap .selected-map {
fill: #23d959 !important;
stroke: none;
position: relative;
filter: drop-shadow(-2px 14px 0px #11451c);
transform: perspective(800px) rotateY(0deg);
transition: all 0.3s ease-in-out;
transform-origin: top;
}
.rightArea .svg-map__location_puducherry,
.rightArea .svg-map__location_lakshadweep,
.rightArea .svg-map__location_an,
.rightArea .svg-map__location_dd,
.rightArea .svg-map__location_dl,
.rightArea .svg-map__location_dn {
stroke: #ff56c7 !important;
stroke-width: 5px !important;
filter: none;
}
.rightArea .svgIndiaMap .svg-map__location_puducherry:focus,
.rightArea .svgIndiaMap .svg-map__location_lakshadweep:focus,
.rightArea .svgIndiaMap .svg-map__location_an:focus,
.rightArea .svgIndiaMap .svg-map__location_dd:focus,
.rightArea .svgIndiaMap .svg-map__location_dl:focus,
.rightArea .svgIndiaMap .svg-map__location_dn:focus,
.rightArea .svgIndiaMap .svg-map__location_ch:focus,
.rightArea .svgIndiaMap .svg-map__location_ladakh.selected-map,
.rightArea .svgIndiaMap .svg-map__location_jk.selected-map,
.rightArea .svgIndiaMap .svg-map__location_ch.selected-map,
.rightArea .svgIndiaMap .svg-map__location_an.selected-map,
.rightArea .svgIndiaMap .svg-map__location_lakshadweep.selected-map,
.rightArea .svgIndiaMap .svg-map__location_dn.selected-map,
.rightArea .svgIndiaMap .svg-map__location_dl.selected-map,
.rightArea .svgIndiaMap .svg-map__location_dd.selected-map,
.rightArea .svgIndiaMap .svg-map__location_puducherry.selected-map {
fill: #23d959 !important;
stroke: #23d959 !important;
stroke-width: 2px !important;
}
.rightArea .svgIndiaMap .svg-map__location_ch {
stroke: #ffbe56 !important;
}
.rightArea .svg-map__location:hover {
fill: #23d959 !important;
}
.rightArea .svgIndiaMap .svg-map__location_ladakh,
.rightArea .svgIndiaMap .svg-map__location_jk,
.rightArea .svgIndiaMap .svg-map__location_ch {
fill: #ff56c7 !important;
}
.custom-tooltip {
position: absolute;
background-color: #ff3f3f;
padding: 10px 20px;
border: 1px solid #ff3f3f;
font-size: 15px;
color: white;
z-index: 9999;
border-radius: 6px;
-webkit-clip-path: polygon(
0 13%,
100% 13%,
100% 83%,
57% 84%,
51% 100%,
44% 84%,
0 83%
);
clip-path: polygon(
0 13%,
100% 13%,
100% 83%,
57% 84%,
51% 100%,
44% 84%,
0 83%
);
}Home.jsx
import React, { useState } from 'react';
import India from "@svg-maps/india";
import { SVGMap } from "react-svg-map";
import { Tooltip as ReactTooltip } from "react-tooltip";
import "react-tooltip/dist/react-tooltip.css";
const Home = () => {
const [hoveredStateId, setHoveredStateId] = useState(null);
const [locationSelected, setLocationSelected] = useState(null);
const [stateId, setStateId] = useState("up");
const [isOpen, setIsOpen] = useState(false);
const [tooltipPosition, setTooltipPosition] = useState({});
const getOffset = (state) => {
const offsets = {
up: -70,
rj: -70,
mp: -70,
wb: -70,
ap: -40,
ga: 0,
dl: 1,
dd: 1,
ch: 1,
py: -82,
sk: 1,
jk: -70,
ml: -10,
tr: -10,
mn: -10,
nl: -10,
ar: -20,
};
return offsets[state] || -31;
};
const handleLocationClick = (event) => {
setIsOpen(true);
const ids = event.target.attributes.getNamedItem("id").value;
setLocationSelected(ids);
};
const handleStateHover = (event) => {
setIsOpen(true);
const hoveredState = event.target.attributes.getNamedItem("name").value;
const positionX = event.screenX;
const positionY = event.screenY;
setHoveredStateId(hoveredState);
setTooltipPosition({ x: positionX, y: positionY });
setStateId(event.target.attributes.getNamedItem("id").value);
};
const getLocationClassName = (location) => {
var classNew = "svg-map__location",
selected = " selected-map";
if (location.id == "ladakh") {
classNew = "svg-map__location_ladakh ";
if (location.id === locationSelected) selected = " selected-ladakh";
}
if (location.id == "ld") {
classNew += " svg-map__location_lakshadweep ";
}
// Return the dynamic class name based on the location properties or any other condition
return location.id === locationSelected ? classNew + selected : classNew;
};
const handleStateLeave = () => {
setIsOpen(false);
setHoveredStateId(null);
};
if (India && Object.keys(India).length) {
const findOne = India.locations.find((item) => item.id == "ladakh");
if (!findOne) {
const obj = {
name: "Ladakh",
id: "ladakh",
path: "M252.3,41.5l0.3,1.8l-0.1,1.3l-0.9,1.7l-0.1,1.2l-1,1.4l-0.2,1.5l0.1,2.6l-0.8,2l-0.8,1.9l-0.6,1.4l-0.4,2.2l-1.5,0.8l-1.6,0.7l-2.1,1v2l-0.8,1.3l-1.9-0.1l-2.1,0.1l-1,0.9l0.2,1.1l0.9,1.6l0.5,2.1l-0.9,3.7l-2,2.2l-1.2,0.5l-2-0.5l-2.2-0.8l-1.4,0.6l-2,0.4l-1.2,0.4l-0.5,1.2l0.4,1.7l0.8,1.6l0.9,1.4l1.4,2.2L228,88l-1.1,0.9l-1.5,0.6l-0.2,1.4l0.2,1.6l-0.5,0.7l3.1,2.8l0.2,1.7l2.3,0.9l4.7,0.3l0.1,0.8l-1.3,2.9l0,1.3l2,2.2l0.5,2.1l1.3,1.1l0.7,2.2l-0.4,1.6l-2,0.5l-2.8,2.5l-1.1-0.9l-1.2,0.3l-1.6,1.2l-0.5,2.3l-1.2-0.3l-1.5,1l-1.3-0.6l-2.8-2.7l-0.4-2.3l0.3-0.8l-0.7-2.4l-1.9,1.2l-0.6,1l-1.7-0.1l-1.2,1l-0.7-0.2l-0.8,0.6l0,1.1l-0.6-0.4l-1.5,1.3l-0.7-0.8l0.4-0.5l0-1.2l1.9-1.1l-0.5-1.2l0.2-2.2l-1.8,0.6l0.2,0.6l-1.7,1.1l-1.3-0.2l-0.6,0.9l-0.6-0.5l-0.6,0.9l-0.7-0.3l0,1.1l-1.1,0.1l-1.7-2.6l0.2-1.8l-0.7-0.2l-0.7-1.3l-1.8-0.9l0.6-1l-1.6-1.7l-1-0.3l-0.2,0.7l-1.5,0.4l-1.4,1.4l-0.7,0l-0.6,0.6l-1.4-0.6l-0.6,1.5l-0.6,0.1l-0.5-0.8l-1-0.6l-0.4,0.3l-0.2-0.8l-1.1-0.9l-0.6,0.4l-0.2-1.7l-1.3,0.2l-0.8-0.7l-0.8,0.2l-1.7-1.1l-0.8-2l-0.7,0l-0.9-1.1l0.5-2.3l-0.5,0.2l-0.5-0.5c-0.9-1-3-0.9-4.1-1.5c-1.2-0.6-1.5-1.6-2.5-2.2c-1-0.6-1.2,0-2-1c-0.8-1-1.3-1-1.6-1.1c-0.4-0.1-0.3,0.1-0.3,0.4c0,0.3-1,1.1-1.6,0.6c-0.6-0.5,0.9-2.7,1.1-3.8c0.2-1.1-1-1.7-1.3-1.8c-0.3-0.2-1.4-2.4-2-3.1c-0.7-0.7-1.3-1.7-1.7-1.9c-0.8-0.4-2.6,0.1-3.7,0.2c-1,0-1.1-1.4-1.3-2c-0.2-0.6-1.9-1.2-2.1-2.6c-0.2-1.4,0-2.3-1.2-2.1c-1.2,0.2-2.2-0.4-3.7-1.6c-2.1-1.7-2.2-4.8-1.7-5.7c0.5-0.9-1.3-1.9-1.9-2.4c-0.7-0.5-0.9-0.8-0.4-2.3c0.6-1.5-0.3-2.8-0.6-3.2c-0.2-0.4-1.2-0.9-1.6-1.6c-0.5-0.7-0.9-0.4-1.2,0.2c-0.4,0.6-0.5,0.5-1,0.4c-0.5-0.1-0.8,0.9-1.1,1.4c-0.2,0.5-0.9-0.1-1.3-0.3c-0.3-0.2-1.5-0.2-2-0.5c-0.6-0.3-1.1-0.9-1.4-1.5s-1.1-0.6-1.8-0.7c-0.8-0.1-0.7-0.6-0.8-1.4c-0.1-0.8-0.7-2.6-0.9-3.2s-1.1-1.4-1.5-1.4s-0.7,1-1.3,1.4c-0.6,0.5-1.5,0.4-2.2,0.4c-0.6,0-0.4,0.4-0.8,0.4c-0.4,0-0.6-0.6-0.8-1c-0.2-0.4-1.2-0.2-1.9-0.5l-1.7,0.5v-1.9l-1.8-1.8l-2.5-1.1l-2-0.6l-1.2-0.9l-0.7-1.5l0.4-1.6l1.4-0.9l0.6-1.2l-1-2.2l-2.1,0.1l-2.4-0.3l-2-0.6l-3.5-0.3l-1.9-1.7l-0.9-1.8l-0.7-2.6l-2.7-1.3l-3.1-0.7l-2,1.3l-2.2,0.1L93.1,30L93,27.8l0.5-1.1L93,25.1l0.4-1.6l1-2.3l2.4-1.7l2.5-2.1l2.3-2.5l2.2-2.8l0.9-2.8l2-1.3l3.1,0.3l3.9,0.4L118,9l2.1-0.5l-1.9-2.1l-1.7-0.9l0.8-1.2l2-0.3l1.8,1.6l2.6,0.6l1.3-1.6l1.8-0.4l1.7-0.8l1.4-0.7l2.2-1.1l1.5-1.2l2.2-0.2l1.7,0.3l2.6,0.9l1.2,1.4l2.4-0.1l1.7-0.1l1.5-1.2l1.6-0.6l1.6,0.8l1.7,2.5l2,2.9l2.6,3l1.1,2.2l3.4,2.2l3.3,1.6l2.8,2.6l3.3,1.1l2.6,2.7l1.6,1.4l2.7,0.3l2.3,2.5l0.1,1.8l-0.5,1.5l0.7,1.9l1.2,1.8l2.7,0.8h3.3l3.7,1.1l2.2,2l0.9,2.6l1,1.8l3.5,0.4l4-1.8l3.5-0.9h2.8l2-3.2l2.3-2l2.7-0.6l2.2-0.9l2-1.5l3.5-0.3l2.9,0.9l1.8,1l1.2-0.7v-2.6l1.1-1.3l1.8-0.5l2.5,2l1.3,1.5l1.6,0.4l3.1,0.7l2.4,0.7l2-0.9l1.4-0.5l1.3,2.1l1.2,2l1.7,0.9l2.1,1.5l0.6,1.6L252.3,41.5z",
};
India.locations.push(obj);
}
//j&k
const findJK = India.locations.findIndex((item) => item.id == "jk");
if (findJK > -1) {
India.locations[findJK].path = "M180.1,97.1l-0.5,0.2l-0.5,1.7l-2.2,0.4l-0.9-1.1l-0.7-0.1l-1.6,0.7l-1.6-0.2l-2.4,2.1l-0.8,1.8l-3,0.7l-0.2,0.9l-2.9,2.1l-1.6-1.1l-1.2,0l-0.3,1.5l1.7,1.4l0.8,1.4l-0.3,1.6l0.6,1.2l-1.1,1.7l-1.4,2.2l-1.2,0.3l-0.7,1.4l-3.8,1.7l-0.6,1.8l-0.2-0.8l-0.5-0.2l0.1-0.5l-1.2,0.4l-1.9-0.3l-2.6-1.7l-0.2-0.5l-1,0.2l-1.2-1.6l-1-0.3l-1.2,1.1l-3-1.2l-2.9,0.3l-1.2-3.1l0.7-1.2l-0.5-1.5l1-3l-1.2,0.4l-0.6,1.6l-1.7,0.4l-1.2,0.7l-2.9-0.3l-1.4-1l-2.1-1l-1.6-1.5l-2.5-0.9l-2.1-1.5h-3.2l-0.7-1.5l-1.1-1l-1.4-1.2l0.6-2.5l-0.9-1.8l-0.3-3.1l1.1-1.3l-0.8-3.2l0.5-1.2l0.1-1.5l-1.5-1.5l0.1-1.4l1-1.2l-0.8-3.1l-1.5-1.5l0.1-2.9l-0.3-2.3l-1-2.5l0.4-2.5v-1.7l1.3-1.4l2.2-0.6L115,63l0.1-1.9l1.3-2.3l1.4-0.2l3.4-0.1l1.2-0.9l0.8-3l0.9-1.9v0l1.7-0.5c0.7,0.3,1.8,0.1,1.9,0.5c0.2,0.4,0.4,1,0.8,1c0.4,0,0.2-0.4,0.8-0.4c0.6,0,1.6,0.1,2.2-0.4c0.6-0.5,0.8-1.4,1.3-1.4s1.3,0.8,1.5,1.4s0.8,2.4,0.9,3.2c0.1,0.8,0,1.3,0.8,1.4c0.8,0.1,1.5,0.1,1.8,0.7s0.9,1.3,1.4,1.5c0.6,0.3,1.7,0.3,2,0.5c0.3,0.2,1,0.8,1.3,0.3c0.2-0.5,0.5-1.5,1.1-1.4c0.5,0.1,0.6,0.2,1-0.4c0.4-0.6,0.8-0.9,1.2-0.2c0.5,0.7,1.4,1.2,1.6,1.6c0.2,0.4,1.1,1.6,0.6,3.2c-0.6,1.5-0.3,1.8,0.4,2.3c0.6,0.6,2.4,1.6,1.9,2.4c-0.5,0.9-0.3,4,1.7,5.7c1.5,1.2,2.5,1.8,3.7,1.6c1.2-0.2,1,0.7,1.2,2.1c0.2,1.4,1.9,2,2.1,2.6c0.2,0.6,0.3,2,1.3,2c1,0,2.9-0.6,3.7-0.2c0.5,0.2,1.1,1.2,1.7,1.9c0.7,0.7,1.7,2.9,2,3.1c0.3,0.2,1.5,0.8,1.3,1.8c-0.2,1.1-1.7,3.3-1.1,3.8c0.6,0.5,1.6-0.3,1.6-0.6c0-0.3-0.1-0.5,0.3-0.4c0.3,0.1,0.9,0.1,1.6,1.1c0.8,1,1,0.4,2,1c1,0.6,1.3,1.6,2.5,2.2C177.2,96.1,179.2,96.1,180.1,97.1z";
}
//THE GOVERNMENT OF NCT OF DELHI
const findDD = India.locations.findIndex((item) => item.id == "dl");
if (findDD > -1) {
India.locations[findDD].name = 'The Government of NCT of Delhi';
}
}
return (
<div class="rightArea">
<SVGMap
map={India}
className="svgIndiaMap"
onLocationClick={handleLocationClick}
onLocationMouseOver={handleStateHover}
onLocationMouseOut={handleStateLeave}
locationClassName={getLocationClassName}
/>
<ReactTooltip
anchorSelect={`#${stateId}`}
place={"top"}
content={hoveredStateId}
className={`rc-tooltip-cutstom ${stateId === "jk"
? "!ml-[-30px]"
: stateId === "py"
? "!ml-[-19px]"
: ""
} `}
offset={() => getOffset(stateId)
isOpen={isOpen}
followCursor={true}
globalEventOff="click"
/>
</div>
)
};
export default Home;
How HashStudioz Can Help You?
At HashStudioz, we turn innovative ideas into reality. Our expert team can assist you with custom mapping solutions, optimizations, and complete project development. Partner with us to create a visually stunning and user-friendly experience for your audience!
With a strong focus on React Native App Development, HashStudioz brings your app ideas to life with seamless performance and engaging interfaces. Our skilled developers leverage the power of React Native to deliver high-quality applications that are both efficient and effective.
Our Expertise in React Native App Development
- React Native App Development Services
We turn your app ideas into reality with seamless performance and engaging interfaces. - Skilled Developers
Our team harnesses the power of React Native to create efficient, high-quality applications. - Custom Mapping Solutions
We provide tailored integrations to ensure your app meets your specific needs. - Expert Development Team
Our experienced developers excel in React and SVG technologies and are dedicated to your project’s success. - End-to-End Services
We manage all aspects of your project from concept to deployment, ensuring a smooth development process. - User Experience Focus
We design intuitive, engaging interfaces to enhance user interaction and satisfaction. - Ongoing Support
We offer continuous maintenance and updates to keep your application running smoothly, allowing you to focus on your business.
Conclusion
Following these steps, you can successfully integrate the updated map of India, including the newly recognized states of Jammu & Kashmir and Ladakh, into your React application using react-svg-map. This allows for a more accurate representation of the country’s geography in your project.
Your feedback and questions are important to us! If you have any queries or concerns, feel free to reach out. Let’s connect and continue the conversation!
Ready to enhance your web applications with interactive mapping features?
Shivam Rathore