{"id":10300,"date":"2023-10-15T09:48:01","date_gmt":"2023-10-15T09:48:01","guid":{"rendered":"http:\/\/localhost\/hashstudioz\/?p=10300"},"modified":"2025-03-18T11:56:26","modified_gmt":"2025-03-18T11:56:26","slug":"how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map","status":"publish","type":"post","link":"https:\/\/www.hashstudioz.com\/blog\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\/","title":{"rendered":"How to Integrating a New State (J&amp;K and Ladakh) and tooltip into the India Map with React-SVG-Map"},"content":{"rendered":"\n<p>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 <strong>integrating J&amp;K and Ladakh in India Map<\/strong> using <strong>React-SVG-Map<\/strong>. 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&#8217;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.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.hashstudioz.com\/blog\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\/#Installation\" >Installation&nbsp;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.hashstudioz.com\/blog\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\/#Module_Setup\" >Module Setup<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.hashstudioz.com\/blog\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\/#How_HashStudioz_Can_Help_You\" >How HashStudioz Can Help You?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.hashstudioz.com\/blog\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\/#Our_Expertise_in_React_Native_App_Development\" >Our Expertise in React Native App Development<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Installation\"><\/span><strong>Installation<\/strong>&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>First, you need to install the react-svg-map module in your React project using this command.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm i react-svg-map<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Module_Setup\"><\/span><strong>Module Setup<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>You have to include the module on the page. First, import the module and then use it in the HTML.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { SVGMap } from \"react-svg-map\";<\/code><\/pre>\n\n\n\n<p>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 \u2018@svg-maps\/india\u2019. Additionally, you can extract detailed information about any specific state.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm i @svg-maps\/india<\/code><\/pre>\n\n\n\n<p>First, import the map module in your React component.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import India from \"@svg-maps\/india\";<\/code><\/pre>\n\n\n\n<p>Call the map in the render\/return method of the component to include it in the HTML.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;SVGMap map={India} className=\"svgIndiaMap\" \/&gt;<\/code><\/pre>\n\n\n\n<p>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 &amp; Kashmir as distinct regions.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if (India &amp;&amp; Object.keys(India).length) {\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const findOne = India.locations.find((item) =&gt; item.id == \"ladakh\");\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!findOne) {\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const obj = {\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: \"Ladakh\",\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id: \"ladakh\",\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;path: \n\"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\",\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;India.locations.push(obj);\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/j&amp;k\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const findJK = India.locations.findIndex((item) =&gt; item.id == \"jk\");\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;if (findJK &gt; -1) {\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;India.locations&#91;findJK].path = \n\"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\";\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<\/code><\/pre>\n\n\n\n<p>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.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> \/\/THE GOVERNMENT OF NCT OF DELHI\n        const findDD = India.locations.findIndex((item) =&gt; item.id == \"dl\");\n        if (findDD &gt; -1) {\n            India.locations&#91;findDD].name = 'The Government of NCT of Delhi';\n        }<\/code><\/pre>\n\n\n\n<p>You can apply some styles and change the color according to your preference.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/set parent div width\n.rightArea{\n  width: 500px;\n}\n\/\/set map color\n.rightArea .svgIndiaMap .svg-map__location {\n  fill: #5d98b4;\n  position: relative;\n  stroke: white;\n  transition: all 0.3s ease-in-out;\n}\n\/\/change selected state color\n.rightArea .svgIndiaMap .svg-map__location:focus,\n.rightArea .svgIndiaMap .selected-map {&nbsp;&nbsp;\nfill: #23d959 !important;&nbsp;&nbsp;\nstroke: none;&nbsp;&nbsp;\nposition: relative;&nbsp;\nfilter: drop-shadow(-2px 14px 0px #11451c);&nbsp;&nbsp;\ntransform: perspective(800px) rotateY(0deg);&nbsp;&nbsp;\ntransition: all 0.3s ease-in-out;&nbsp;&nbsp;transform-origin: top;\n}\n\/\/ Change union territory color\n.rightArea .svg-map__location_puducherry,\n.rightArea .svg-map__location_lakshadweep,\n.rightArea .svg-map__location_an,\n.rightArea .svg-map__location_dd,\n.rightArea .svg-map__location_dl,\n.rightArea .svg-map__location_dn {&nbsp;&nbsp;\nstroke: #ff56c7 !important;&nbsp;&nbsp;\nstroke-width: 5px !important;&nbsp;&nbsp;\nfilter: none;\n}\n\/\/ Change color of on focusing\n.rightArea .svgIndiaMap .svg-map__location_puducherry:focus,\n.rightArea .svgIndiaMap .svg-map__location_lakshadweep:focus,\n.rightArea .svgIndiaMap .svg-map__location_an:focus,\n.rightArea .svgIndiaMap .svg-map__location_dd:focus,\n.rightArea .svgIndiaMap .svg-map__location_dl:focus,\n.rightArea .svgIndiaMap .svg-map__location_dn:focus,\n.rightArea .svgIndiaMap .svg-map__location_ch:focus,\n.rightArea .svgIndiaMap .svg-map__location_ladakh.selected-map,\n.rightArea .svgIndiaMap .svg-map__location_jk.selected-map,\n.rightArea .svgIndiaMap .svg-map__location_ch.selected-map,\n.rightArea .svgIndiaMap .svg-map__location_an.selected-map,\n.rightArea .svgIndiaMap .svg-map__location_lakshadweep.selected-map,\n.rightArea .svgIndiaMap .svg-map__location_dn.selected-map,\n.rightArea .svgIndiaMap .svg-map__location_dl.selected-map,\n.rightArea .svgIndiaMap .svg-map__location_dd.selected-map,\n.rightArea .svgIndiaMap .svg-map__location_puducherry.selected-map {&nbsp;&nbsp;\nfill: #23d959 !important;&nbsp;&nbsp;\nstroke: #23d959 !important;&nbsp;&nbsp;\nstroke-width: 2px !important;&nbsp;\n\/* filter: drop-shadow(-2px 14px 0px #77553e);*\/\n}\n\n.rightArea .svgIndiaMap .svg-map__location_ch {&nbsp;&nbsp;\nstroke: #ffbe56 !important;\n}.\nrightArea .svg-map__location:hover {&nbsp;&nbsp;\nfill: #23d959 !important;\n}\n.rightArea .svgIndiaMap .svg-map__location_ladakh,\n.rightArea .svgIndiaMap .svg-map__location_jk,\n.rightArea .svgIndiaMap .svg-map__location_ch {&nbsp;\nfill: #ff56c7 !important;\n}\n\/\/handle tooltip\n.custom-tooltip {&nbsp;&nbsp;\nposition: absolute;&nbsp;&nbsp;\nbackground-color: #ff3f3f;&nbsp;&nbsp;\npadding: 10px 20px;&nbsp;&nbsp;\nborder: 1px solid #ff3f3f;&nbsp;&nbsp;\nfont-size: 15px;&nbsp;&nbsp;\ncolor: white;&nbsp;&nbsp;\nz-index: 9999;&nbsp;&nbsp;\nborder-radius: 6px;&nbsp;&nbsp;\n-webkit-clip-path: polygon(&nbsp;&nbsp;&nbsp;\n0 13%,&nbsp;&nbsp;&nbsp;&nbsp;\n100% 13%,&nbsp;&nbsp;&nbsp;\n100% 83%,&nbsp;&nbsp;&nbsp;\n57% 84%,&nbsp;&nbsp;&nbsp;\n51% 100%,&nbsp;&nbsp;&nbsp;&nbsp;\n44% 84%,&nbsp;&nbsp;&nbsp;\n0 83%&nbsp;&nbsp;);&nbsp;&nbsp;\nclip-path: polygon(&nbsp;&nbsp;&nbsp;&nbsp;\n0 13%,&nbsp;&nbsp;&nbsp;&nbsp;\n100% 13%,&nbsp;&nbsp;&nbsp;&nbsp;\n100% 83%,&nbsp;&nbsp;&nbsp;&nbsp;\n57% 84%,&nbsp;&nbsp;&nbsp;&nbsp;\n51% 100%,&nbsp;&nbsp;&nbsp;&nbsp;\n44% 84%,&nbsp;&nbsp;&nbsp;&nbsp;\n0 83%&nbsp;&nbsp;);\n}<\/code><\/pre>\n\n\n\n<p>Leverage state management to dynamically handle and manipulate data in real-time.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    const &#91;hoveredStateId, setHoveredStateId] = useState(null); \/\/ tooltip state\n    const &#91;locationSelected, setLocationSelected] = useState(null); \/\/for knowing which one state is selected.\n    const &#91;stateId, setStateId] = useState(\"up\");  \/\/ tooltip state\n    const &#91;isOpen, setIsOpen] = useState(false); \/\/show tooltip or not\n    const &#91;tooltipPosition, setTooltipPosition] = useState({}); \/\/set tooltip position dynamically\n    const &#91;state, setState] = useState({ value: 0, label: \"India\" }); \/\/help in set state&nbsp;<\/code><\/pre>\n\n\n\n<p>To enable tooltip display on hover, we integrated an additional module specifically designed for tooltips.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm i react-tooltip<\/code><\/pre>\n\n\n\n<p>Invoke the tooltip module at the top of the page.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Tooltip as ReactTooltip } from \"react-tooltip\";\nimport \"react-tooltip\/dist\/react-tooltip.css\";<\/code><\/pre>\n\n\n\n<p>Embed the tooltip beneath the map in the HTML to ensure it interacts seamlessly with the state.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  &lt;ReactTooltip\n                                anchorSelect={`#${stateId}`}\n                                place={\"top\"}\n                                content={hoveredStateId}\n                                className={`rc-tooltip-cutstom ${stateId === \"jk\"\n                                    ? \"!ml-&#91;-30px]\"\n                                    : stateId === \"py\"\n                                        ? \"!ml-&#91;-19px]\"\n                                        : \"\"\n                                    } `}\n                                offset={() =&gt; getOffset(stateId)} \/\/  set the\nposition \/ direction of the tooltip\n                                isOpen={isOpen} \/\/ open or close tooltip\n                                followCursor={true}\n                                globalEventOff=\"click\"\n                            \/&gt;<\/code><\/pre>\n\n\n\n<p>&nbsp;&nbsp;In this section, we configure the tooltip&#8217;s offset\/position by utilizing the getOffset() function.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  const getOffset = (state) =&gt; {\n        const offsets = {\n            up: -70,\n            rj: -70,\n            mp: -70,\n            wb: -70,\n            ap: -40,\n            ga: 0,\n            dl: 1,\n            dd: 1,\n            ch: 1,\n            py: -82,\n            sk: 1,\n            jk: -70,\n            ml: -10,\n            tr: -10,\n            mn: -10,\n            nl: -10,\n            ar: -20,\n        };\n\n        return offsets&#91;state] || -31;\n    };<\/code><\/pre>\n\n\n\n<p>State hover event: we need to detect which state the mouse is currently hovering over or leaving, allowing us to trigger specific actions accordingly.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>onLocationMouseOver={handleStateHover}\nonLocationMouseOut={handleStateLeave}\n\n   const handleLocationClick = (event) =&gt; {\n        setIsOpen(true);\n        const ids = event.target.attributes.getNamedItem(\"id\").value;\n        setLocationSelected(ids);\n    };\n\n    const handleStateHover = (event) =&gt; {\n        setIsOpen(true);\n        const hoveredState = event.target.attributes.getNamedItem(\"name\").value;\n        const positionX = event.screenX;\n        const positionY = event.screenY;\n        setHoveredStateId(hoveredState);\n        setTooltipPosition({ x: positionX, y: positionY }); \/\/ set position fo tooltip\n        setStateId(event.target.attributes.getNamedItem(\"id\").value); \/\/set state\n    };<\/code><\/pre>\n\n\n\n<p>Upon clicking, utilize the function getLocationClassName() to designate the selected state.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const getLocationClassName = (location) =&gt; {\n        var classNew = \"svg-map__location\",\n            selected = \" selected-map\";\n        if (location.id == \"ladakh\") {\n            classNew = \"svg-map__location_ladakh \";\n            if (location.id === locationSelected) selected = \" selected-ladakh\";\n        }\n        if (location.id == \"ld\") {\n            classNew += \" svg-map__location_lakshadweep \";\n        }\n        \/\/ Return the dynamic class name based on the location properties or any other condition\n        return location.id === locationSelected ? classNew + selected : classNew;\n    };<\/code><\/pre>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;Dismiss the tooltip when the mouse exits the state.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const handleStateLeave = () =&gt; {\n        setIsOpen(false);\n        setHoveredStateId(null);\n    };<\/code><\/pre>\n\n\n\n<p><strong>Style.css<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.rightArea{\n  width: 500px;\n}\n\n.rightArea .svgIndiaMap .svg-map__location {\n  fill: #5d98b4 !important;\n  position: relative;\n  stroke: white;\n  transition: all 0.3s ease-in-out;\n}\n\n.rightArea .svgIndiaMap .svg-map__location:focus,\n.rightArea .svgIndiaMap .selected-map {\n  fill: #23d959 !important;\n  stroke: none;\n  position: relative;\n  filter: drop-shadow(-2px 14px 0px #11451c);\n  transform: perspective(800px) rotateY(0deg);\n  transition: all 0.3s ease-in-out;\n  transform-origin: top;\n}\n\n.rightArea .svg-map__location_puducherry,\n.rightArea .svg-map__location_lakshadweep,\n.rightArea .svg-map__location_an,\n.rightArea .svg-map__location_dd,\n.rightArea .svg-map__location_dl,\n.rightArea .svg-map__location_dn {\n  stroke: #ff56c7 !important;\n  stroke-width: 5px !important;\n  filter: none;\n}\n\n.rightArea .svgIndiaMap .svg-map__location_puducherry:focus,\n.rightArea .svgIndiaMap .svg-map__location_lakshadweep:focus,\n.rightArea .svgIndiaMap .svg-map__location_an:focus,\n.rightArea .svgIndiaMap .svg-map__location_dd:focus,\n.rightArea .svgIndiaMap .svg-map__location_dl:focus,\n.rightArea .svgIndiaMap .svg-map__location_dn:focus,\n.rightArea .svgIndiaMap .svg-map__location_ch:focus,\n.rightArea .svgIndiaMap .svg-map__location_ladakh.selected-map,\n.rightArea .svgIndiaMap .svg-map__location_jk.selected-map,\n.rightArea .svgIndiaMap .svg-map__location_ch.selected-map,\n.rightArea .svgIndiaMap .svg-map__location_an.selected-map,\n.rightArea .svgIndiaMap .svg-map__location_lakshadweep.selected-map,\n.rightArea .svgIndiaMap .svg-map__location_dn.selected-map,\n.rightArea .svgIndiaMap .svg-map__location_dl.selected-map,\n.rightArea .svgIndiaMap .svg-map__location_dd.selected-map,\n.rightArea .svgIndiaMap .svg-map__location_puducherry.selected-map {\n  fill: #23d959 !important;\n  stroke: #23d959 !important;\n  stroke-width: 2px !important;\n}\n\n.rightArea .svgIndiaMap .svg-map__location_ch {\n  stroke: #ffbe56 !important;\n}\n.rightArea .svg-map__location:hover {\n  fill: #23d959 !important;\n}\n.rightArea .svgIndiaMap .svg-map__location_ladakh,\n.rightArea .svgIndiaMap .svg-map__location_jk,\n.rightArea .svgIndiaMap .svg-map__location_ch {\n  fill: #ff56c7 !important;\n}\n.custom-tooltip {\n  position: absolute;\n  background-color: #ff3f3f;\n  padding: 10px 20px;\n  border: 1px solid #ff3f3f;\n  font-size: 15px;\n  color: white;\n  z-index: 9999;\n  border-radius: 6px;\n  -webkit-clip-path: polygon(\n    0 13%,\n    100% 13%,\n    100% 83%,\n    57% 84%,\n    51% 100%,\n    44% 84%,\n    0 83%\n  );\n  clip-path: polygon(\n    0 13%,\n    100% 13%,\n    100% 83%,\n    57% 84%,\n    51% 100%,\n    44% 84%,\n    0 83%\n  );\n}<\/code><\/pre>\n\n\n\n<p><strong>Home.jsx<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React, { useState } from 'react';\nimport India from \"@svg-maps\/india\";\nimport { SVGMap } from \"react-svg-map\";\nimport { Tooltip as ReactTooltip } from \"react-tooltip\";\nimport \"react-tooltip\/dist\/react-tooltip.css\";\n\nconst Home = () =&gt; {\n    const &#91;hoveredStateId, setHoveredStateId] = useState(null);\n    const &#91;locationSelected, setLocationSelected] = useState(null);\n    const &#91;stateId, setStateId] = useState(\"up\");\n    const &#91;isOpen, setIsOpen] = useState(false);\n    const &#91;tooltipPosition, setTooltipPosition] = useState({});\n\n    const getOffset = (state) =&gt; {\n        const offsets = {\n            up: -70,\n            rj: -70,\n            mp: -70,\n            wb: -70,\n            ap: -40,\n            ga: 0,\n            dl: 1,\n            dd: 1,\n            ch: 1,\n            py: -82,\n            sk: 1,\n            jk: -70,\n            ml: -10,\n            tr: -10,\n            mn: -10,\n            nl: -10,\n            ar: -20,\n        };\n\n        return offsets&#91;state] || -31;\n    };\n\n    const handleLocationClick = (event) =&gt; {\n        setIsOpen(true);\n        const ids = event.target.attributes.getNamedItem(\"id\").value;\n        setLocationSelected(ids);\n    };\n\n    const handleStateHover = (event) =&gt; {\n        setIsOpen(true);\n        const hoveredState = event.target.attributes.getNamedItem(\"name\").value;\n        const positionX = event.screenX;\n        const positionY = event.screenY;\n        setHoveredStateId(hoveredState);\n        setTooltipPosition({ x: positionX, y: positionY });\n        setStateId(event.target.attributes.getNamedItem(\"id\").value);\n    };\n\n    const getLocationClassName = (location) =&gt; {\n        var classNew = \"svg-map__location\",\n            selected = \" selected-map\";\n        if (location.id == \"ladakh\") {\n            classNew = \"svg-map__location_ladakh \";\n            if (location.id === locationSelected) selected = \" selected-ladakh\";\n        }\n        if (location.id == \"ld\") {\n            classNew += \" svg-map__location_lakshadweep \";\n        }\n        \/\/ Return the dynamic class name based on the location properties or any other condition\n        return location.id === locationSelected ? classNew + selected : classNew;\n    };\n\n    const handleStateLeave = () =&gt; {\n        setIsOpen(false);\n        setHoveredStateId(null);\n    };\n\n    if (India &amp;&amp; Object.keys(India).length) {\n        const findOne = India.locations.find((item) =&gt; item.id == \"ladakh\");\n        if (!findOne) {\n            const obj = {\n                name: \"Ladakh\",\n                id: \"ladakh\",\n                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\",\n            };\n            India.locations.push(obj);\n        }\n\n        \/\/j&amp;k\n        const findJK = India.locations.findIndex((item) =&gt; item.id == \"jk\");\n        if (findJK &gt; -1) {\n            India.locations&#91;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\";\n        }\n        \/\/THE GOVERNMENT OF NCT OF DELHI\n        const findDD = India.locations.findIndex((item) =&gt; item.id == \"dl\");\n        if (findDD &gt; -1) {\n            India.locations&#91;findDD].name = 'The Government of NCT of Delhi';\n        }\n    }\n\n    return (\n        &lt;div class=\"rightArea\"&gt;\n         &lt;SVGMap\n                                map={India}\n                                className=\"svgIndiaMap\"\n                                onLocationClick={handleLocationClick}\n                                onLocationMouseOver={handleStateHover}\n                                onLocationMouseOut={handleStateLeave}\n                                locationClassName={getLocationClassName}\n                            \/&gt;\n                            &lt;ReactTooltip\n                                anchorSelect={`#${stateId}`}\n                                place={\"top\"}\n                                content={hoveredStateId}\n                                className={`rc-tooltip-cutstom ${stateId === \"jk\"\n                                    ? \"!ml-&#91;-30px]\"\n                                    : stateId === \"py\"\n                                        ? \"!ml-&#91;-19px]\"\n                                        : \"\"\n                                    } `}\n                                offset={() =&gt; getOffset(stateId)\n                                isOpen={isOpen}\n                                followCursor={true}\n                                globalEventOff=\"click\"\n                            \/&gt;\n                            &lt;\/div&gt;\n    )\n};\n\nexport default Home;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdNOTwE1sopg_8yBJWsNXJu-XIWP7XRhwFIT9mZSM4ziD6EK8cSTMK9zmmLTHy2LN4RkNYli1XR1fWUDBSbJliJo-A2NQSVFmeskB3_cTJnAlsTwSf5QLo6VTHVYbD0Mho5u2dZaTKQIykgJaFJrQa53d0?key=nlwiGmNwL9_rMJoh637JJg\" alt=\"Integrating J&amp;K and Ladakh in India Map\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_HashStudioz_Can_Help_You\"><\/span>How HashStudioz Can Help You?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>At <a href=\"https:\/\/www.hashstudioz.com\"><strong>HashStudioz<\/strong><\/a>, 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!<\/p>\n\n\n\n<p>With a strong focus on <strong><a href=\"https:\/\/www.hashstudioz.com\/react-native-app-development.html\">React Native App Development<\/a><\/strong>, 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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Our_Expertise_in_React_Native_App_Development\"><\/span>Our Expertise in React Native App Development<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>React Native App Development Services<br><\/strong>We turn your app ideas into reality with seamless performance and engaging interfaces.<\/li>\n\n\n\n<li><strong>Skilled Developers<br><\/strong>Our team harnesses the power of React Native to create efficient, high-quality applications.<\/li>\n\n\n\n<li><strong>Custom Mapping Solutions<br><\/strong>We provide tailored integrations to ensure your app meets your specific needs.<\/li>\n\n\n\n<li><strong>Expert Development Team<br><\/strong>Our experienced developers excel in React and SVG technologies and are dedicated to your project&#8217;s success.<\/li>\n\n\n\n<li><strong>End-to-End Services<br><\/strong>We manage all aspects of your project from concept to deployment, ensuring a smooth development process.<\/li>\n\n\n\n<li><strong>User Experience Focus<br><\/strong>We design intuitive, engaging interfaces to enhance user interaction and satisfaction.<\/li>\n\n\n\n<li><strong>Ongoing Support<br><\/strong>We offer continuous maintenance and updates to keep your application running smoothly, allowing you to focus on your business.<\/li>\n<\/ol>\n\n\n\n<p><strong>Conclusion<br><\/strong>Following these steps, you can successfully integrate the updated map of India, including the newly recognized states of Jammu &amp; Kashmir and Ladakh, into your React application using react-svg-map. This allows for a more accurate representation of the country&#8217;s geography in your project, especially with Integrating J&amp;K and Ladakh in India Map<\/p>\n\n\n\n<p><strong>Your feedback and questions are important to us! If you have any queries or concerns, feel free to reach out. Let&#8217;s connect and continue the conversation!<\/strong><\/p>\n\n\n\n<div class=\"wp-block-group alignfull has-text-color has-background has-small-font-size\" style=\"color:#000000;background-color:#ffffff\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"has-text-align-center has-black-color has-luminous-vivid-amber-background-color has-text-color has-background has-link-color has-medium-font-size wp-elements-7fc62c8f9e415a707dc938c60df58347\"><strong>Ready to enhance your web applications with interactive mapping features? <\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-horizontal is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-03627597 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-25\"><a class=\"wp-block-button__link has-text-color has-background wp-element-button\" href=\"https:\/\/www.hashstudioz.com\/contact.html\" style=\"border-radius:50px;color:#ffffff;background-color:#000000\"><strong>Contact us<\/strong><\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&amp;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 [&hellip;]<\/p>\n","protected":false},"author":32,"featured_media":10324,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[116,395],"tags":[],"class_list":["post-10300","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native-app","category-technology"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Integrating J&amp;K and Ladakh in India Map with React-SVG-Map<\/title>\n<meta name=\"description\" content=\"Learn how to integrate J&amp;K and Ladakh in India map using React-SVG-Map, and add tooltips for a seamless interactive experience with Integrating J&amp;K and Ladakh in India Map.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hashstudioz.com\/blog\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Integrating J&amp;K and Ladakh in India Map with React-SVG-Map\" \/>\n<meta property=\"og:description\" content=\"Learn how to integrate J&amp;K and Ladakh in India map using React-SVG-Map, and add tooltips for a seamless interactive experience with Integrating J&amp;K and Ladakh in India Map.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hashstudioz.com\/blog\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\/\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hashstudioz\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/hashstudioz\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-15T09:48:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-18T11:56:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/How-to-Integrating-a-New-State-JK-and-Ladakh-and-tooltip-into-the-India-Map-with-React-SVG-Map-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Hansa Kumari\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/hashstudioz\" \/>\n<meta name=\"twitter:site\" content=\"@hashstudioz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hansa Kumari\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\\\/\"},\"author\":{\"name\":\"Hansa Kumari\",\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/#\\\/schema\\\/person\\\/aacb7c7aa78e0f5d293a8f0fd7db7396\"},\"headline\":\"How to Integrating a New State (J&amp;K and Ladakh) and tooltip into the India Map with React-SVG-Map\",\"datePublished\":\"2023-10-15T09:48:01+00:00\",\"dateModified\":\"2025-03-18T11:56:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\\\/\"},\"wordCount\":766,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/How-to-Integrating-a-New-State-JK-and-Ladakh-and-tooltip-into-the-India-Map-with-React-SVG-Map-1.png\",\"articleSection\":[\"React Native App\",\"Technology\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\\\/\",\"url\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\\\/\",\"name\":\"Integrating J&K and Ladakh in India Map with React-SVG-Map\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/How-to-Integrating-a-New-State-JK-and-Ladakh-and-tooltip-into-the-India-Map-with-React-SVG-Map-1.png\",\"datePublished\":\"2023-10-15T09:48:01+00:00\",\"dateModified\":\"2025-03-18T11:56:26+00:00\",\"description\":\"Learn how to integrate J&K and Ladakh in India map using React-SVG-Map, and add tooltips for a seamless interactive experience with Integrating J&K and Ladakh in India Map.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/How-to-Integrating-a-New-State-JK-and-Ladakh-and-tooltip-into-the-India-Map-with-React-SVG-Map-1.png\",\"contentUrl\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/How-to-Integrating-a-New-State-JK-and-Ladakh-and-tooltip-into-the-India-Map-with-React-SVG-Map-1.png\",\"width\":1200,\"height\":630,\"caption\":\"How to Integrating a New State (J&K and Ladakh) and tooltip into the India Map with React-SVG-Map\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Integrating a New State (J&amp;K and Ladakh) and tooltip into the India Map with React-SVG-Map\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/\",\"name\":\"HashStudioz Technologies\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/#organization\",\"name\":\"HashStudioz Technologies\",\"url\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/02\\\/logo-1.png\",\"contentUrl\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/02\\\/logo-1.png\",\"width\":1709,\"height\":365,\"caption\":\"HashStudioz Technologies\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hashstudioz\\\/\",\"https:\\\/\\\/x.com\\\/hashstudioz\",\"https:\\\/\\\/www.instagram.com\\\/hashstudioz\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/hashstudioz\",\"https:\\\/\\\/in.pinterest.com\\\/hashstudioz\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/#\\\/schema\\\/person\\\/aacb7c7aa78e0f5d293a8f0fd7db7396\",\"name\":\"Hansa Kumari\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ffbbd57dca579cbeff75d782cb30e7ba713a47cc78d9bdc7a9e05ec775c4123f?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ffbbd57dca579cbeff75d782cb30e7ba713a47cc78d9bdc7a9e05ec775c4123f?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ffbbd57dca579cbeff75d782cb30e7ba713a47cc78d9bdc7a9e05ec775c4123f?s=96&r=g\",\"caption\":\"Hansa Kumari\"},\"description\":\"Hansa Kumari is a skilled Technical Lead at HashStudioz Technologies, where she leverages her expertise in software development to lead innovative engineering projects. With a strong focus on collaboration and problem-solving, she is dedicated to driving her team's success and delivering high-quality solutions. Hansa is passionate about technology and continuously seeks to enhance her knowledge and skills to contribute effectively to the ever-evolving tech landscape.\",\"sameAs\":[\"https:\\\/\\\/www.hashstudioz.com\",\"https:\\\/\\\/www.facebook.com\\\/hashstudioz\",\"https:\\\/\\\/www.instagram.com\\\/hashstudioz\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/hashstudioz\",\"https:\\\/\\\/x.com\\\/https:\\\/\\\/twitter.com\\\/hashstudioz\"],\"url\":\"https:\\\/\\\/www.hashstudioz.com\\\/blog\\\/author\\\/hansa-kumari\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Integrating J&K and Ladakh in India Map with React-SVG-Map","description":"Learn how to integrate J&K and Ladakh in India map using React-SVG-Map, and add tooltips for a seamless interactive experience with Integrating J&K and Ladakh in India Map.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hashstudioz.com\/blog\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\/","og_locale":"en_US","og_type":"article","og_title":"Integrating J&K and Ladakh in India Map with React-SVG-Map","og_description":"Learn how to integrate J&K and Ladakh in India map using React-SVG-Map, and add tooltips for a seamless interactive experience with Integrating J&K and Ladakh in India Map.","og_url":"https:\/\/www.hashstudioz.com\/blog\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\/","article_publisher":"https:\/\/www.facebook.com\/hashstudioz\/","article_author":"https:\/\/www.facebook.com\/hashstudioz","article_published_time":"2023-10-15T09:48:01+00:00","article_modified_time":"2025-03-18T11:56:26+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/How-to-Integrating-a-New-State-JK-and-Ladakh-and-tooltip-into-the-India-Map-with-React-SVG-Map-1.png","type":"image\/png"}],"author":"Hansa Kumari","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/hashstudioz","twitter_site":"@hashstudioz","twitter_misc":{"Written by":"Hansa Kumari","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hashstudioz.com\/blog\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\/#article","isPartOf":{"@id":"https:\/\/www.hashstudioz.com\/blog\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\/"},"author":{"name":"Hansa Kumari","@id":"https:\/\/www.hashstudioz.com\/blog\/#\/schema\/person\/aacb7c7aa78e0f5d293a8f0fd7db7396"},"headline":"How to Integrating a New State (J&amp;K and Ladakh) and tooltip into the India Map with React-SVG-Map","datePublished":"2023-10-15T09:48:01+00:00","dateModified":"2025-03-18T11:56:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hashstudioz.com\/blog\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\/"},"wordCount":766,"publisher":{"@id":"https:\/\/www.hashstudioz.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hashstudioz.com\/blog\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\/#primaryimage"},"thumbnailUrl":"https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/How-to-Integrating-a-New-State-JK-and-Ladakh-and-tooltip-into-the-India-Map-with-React-SVG-Map-1.png","articleSection":["React Native App","Technology"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hashstudioz.com\/blog\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\/","url":"https:\/\/www.hashstudioz.com\/blog\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\/","name":"Integrating J&K and Ladakh in India Map with React-SVG-Map","isPartOf":{"@id":"https:\/\/www.hashstudioz.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hashstudioz.com\/blog\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\/#primaryimage"},"image":{"@id":"https:\/\/www.hashstudioz.com\/blog\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\/#primaryimage"},"thumbnailUrl":"https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/How-to-Integrating-a-New-State-JK-and-Ladakh-and-tooltip-into-the-India-Map-with-React-SVG-Map-1.png","datePublished":"2023-10-15T09:48:01+00:00","dateModified":"2025-03-18T11:56:26+00:00","description":"Learn how to integrate J&K and Ladakh in India map using React-SVG-Map, and add tooltips for a seamless interactive experience with Integrating J&K and Ladakh in India Map.","breadcrumb":{"@id":"https:\/\/www.hashstudioz.com\/blog\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hashstudioz.com\/blog\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hashstudioz.com\/blog\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\/#primaryimage","url":"https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/How-to-Integrating-a-New-State-JK-and-Ladakh-and-tooltip-into-the-India-Map-with-React-SVG-Map-1.png","contentUrl":"https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2024\/10\/How-to-Integrating-a-New-State-JK-and-Ladakh-and-tooltip-into-the-India-Map-with-React-SVG-Map-1.png","width":1200,"height":630,"caption":"How to Integrating a New State (J&K and Ladakh) and tooltip into the India Map with React-SVG-Map"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hashstudioz.com\/blog\/how-to-integrating-a-new-state-jk-and-ladakh-and-tooltip-into-the-india-map-with-react-svg-map\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hashstudioz.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Integrating a New State (J&amp;K and Ladakh) and tooltip into the India Map with React-SVG-Map"}]},{"@type":"WebSite","@id":"https:\/\/www.hashstudioz.com\/blog\/#website","url":"https:\/\/www.hashstudioz.com\/blog\/","name":"HashStudioz Technologies","description":"","publisher":{"@id":"https:\/\/www.hashstudioz.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hashstudioz.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hashstudioz.com\/blog\/#organization","name":"HashStudioz Technologies","url":"https:\/\/www.hashstudioz.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hashstudioz.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2020\/02\/logo-1.png","contentUrl":"https:\/\/www.hashstudioz.com\/blog\/wp-content\/uploads\/2020\/02\/logo-1.png","width":1709,"height":365,"caption":"HashStudioz Technologies"},"image":{"@id":"https:\/\/www.hashstudioz.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hashstudioz\/","https:\/\/x.com\/hashstudioz","https:\/\/www.instagram.com\/hashstudioz\/","https:\/\/www.linkedin.com\/company\/hashstudioz","https:\/\/in.pinterest.com\/hashstudioz\/"]},{"@type":"Person","@id":"https:\/\/www.hashstudioz.com\/blog\/#\/schema\/person\/aacb7c7aa78e0f5d293a8f0fd7db7396","name":"Hansa Kumari","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/ffbbd57dca579cbeff75d782cb30e7ba713a47cc78d9bdc7a9e05ec775c4123f?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/ffbbd57dca579cbeff75d782cb30e7ba713a47cc78d9bdc7a9e05ec775c4123f?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ffbbd57dca579cbeff75d782cb30e7ba713a47cc78d9bdc7a9e05ec775c4123f?s=96&r=g","caption":"Hansa Kumari"},"description":"Hansa Kumari is a skilled Technical Lead at HashStudioz Technologies, where she leverages her expertise in software development to lead innovative engineering projects. With a strong focus on collaboration and problem-solving, she is dedicated to driving her team's success and delivering high-quality solutions. Hansa is passionate about technology and continuously seeks to enhance her knowledge and skills to contribute effectively to the ever-evolving tech landscape.","sameAs":["https:\/\/www.hashstudioz.com","https:\/\/www.facebook.com\/hashstudioz","https:\/\/www.instagram.com\/hashstudioz\/","https:\/\/www.linkedin.com\/company\/hashstudioz","https:\/\/x.com\/https:\/\/twitter.com\/hashstudioz"],"url":"https:\/\/www.hashstudioz.com\/blog\/author\/hansa-kumari\/"}]}},"_links":{"self":[{"href":"https:\/\/www.hashstudioz.com\/blog\/wp-json\/wp\/v2\/posts\/10300","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hashstudioz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hashstudioz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hashstudioz.com\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hashstudioz.com\/blog\/wp-json\/wp\/v2\/comments?post=10300"}],"version-history":[{"count":17,"href":"https:\/\/www.hashstudioz.com\/blog\/wp-json\/wp\/v2\/posts\/10300\/revisions"}],"predecessor-version":[{"id":14165,"href":"https:\/\/www.hashstudioz.com\/blog\/wp-json\/wp\/v2\/posts\/10300\/revisions\/14165"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hashstudioz.com\/blog\/wp-json\/wp\/v2\/media\/10324"}],"wp:attachment":[{"href":"https:\/\/www.hashstudioz.com\/blog\/wp-json\/wp\/v2\/media?parent=10300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hashstudioz.com\/blog\/wp-json\/wp\/v2\/categories?post=10300"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hashstudioz.com\/blog\/wp-json\/wp\/v2\/tags?post=10300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}