india-map-svg/README.md

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

# 🇮🇳 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

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

---

## ⚡ Usage

```tsx
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

```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:

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

Build for npm:

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

---

## 📄 License

MIT © Chauhan Yuvraj