🇮🇳 India Map SVG (React Component)

Interactive SVG maps of India and its states with zoom, pan, hover tooltips, and click events.
Built with React + TypeScript.

📦 Installation

npm install india-map-svg
# or
yarn add india-map-svg

⚡ Usage

import { useState } from "react";
import { MapOfSvg } from "india-map-svg";
import "./index.css";

export default function App() {
  const [map, setMap] = useState("India");

  return (
    <div className="main-div">
      <h1>India Map</h1>
      <div className="border">
        <MapOfSvg
          name={map}
          strokeColor="#2c3e50"
          pathFillColor="white"
          hoverPathColor="pink"
          viewportConfig={{ x: 0, y: 0, width: 2500, height: 2500 }}
          autoFit={true} // ✅ auto-scale map to fit container
          enableZoomPan={true} // ✅ zoom and drag
          fillById={{ MH: "orange", KA: "green" }} // ✅ custom colors per state
          onPathHover={(name, id) => console.log("Hovered:", name, id)}
          onPathClick={(name, id) => alert(`Clicked: ${name} (${id})`)}
        />
      </div>
    </div>
  );
}

Example CSS

.main-div {
  width: 100%;
  height: 100vh; /* full screen height */
}
.border {
  border: 2px solid black;
  max-width: 500px;
}

⚙️ Props

| Prop | Type | Default | Description | | --------------------- | -------------------------- | ----------------- | ------------------------------------------------- | | name | string | required | "India" or a state name (must match data file). | | height | string \| number | "100%" | Height of SVG container. | | width | string \| number | "100%" | Width of SVG container. | | onPathClick | (name, id) => void | undefined | Callback when a state/region is clicked. | | onPathHover | (name, id) => void | undefined | Callback when hovering a state. | | viewportConfig | {x,y,width,height,scale} | undefined | Custom viewport (overrides default viewBox). | | autoFit | boolean | true | Auto-scale map to fit container. | | preserveAspectRatio | string | "xMidYMid meet" | SVG aspect ratio. | | fillById | Record<string,string> | {} | Fill colors per state (e.g. { MH: "red" }). | | strokeWidth | number | 1 | Path border thickness. | | strokeColor | string | "#000" | Path border color. | | pathFillColor | string | "#f0f0f0" | Default fill for states. | | coverFillColor | string | "black" | Fill for "cover" layers. | | backgroundColor | string | "transparent" | SVG background. | | hoverPathColor | string | "lightblue" | Fill color on hover. | | enableZoomPan | boolean | true | Enable mouse zoom + pan dragging. | | minScale | number | 0.1 | Minimum zoom level. | | maxScale | number | 10 | Maximum zoom level. |

✨ Features

• 🗺️ Interactive SVG map of India + states
• 🎨 Custom fill colors per state (fillById)
• 🖱️ Hover tooltips + hover color
• 🖱️ Click events with state name + ID
• 🔍 Zoom & pan support (mouse drag + wheel)
• ⚡ Auto-fit to container

🛠 Development

Clone and build locally:

git clone https://github.com/Chauhan-yuvraj/india-map-svg.git
cd india-map-svg
npm install
npm run dev

Build for npm:

npm run build
npm version patch   # or minor / major
npm publish --access public

📄 License

MIT © Chauhan Yuvraj