indiamap

indiamap is a lightweight npm package developed and maintained by @kuntalojha for React and Next.js that provides a customizable React SVG map of India, including states and union territories, with interactive features like hover effects, click events, zoom support, and dynamic coloring.

📖 Overview

indiamap is a lightweight and structured npm package that provides comprehensive interactive map visualization of Indian states and union territories. It enables developers to easily access, manage, and integrate geographic UI components into their applications.

The package is designed for seamless use in web, mobile, and backend projects, making it ideal for dashboards, analytics platforms, educational tools, tourism applications, and data-driven systems.

✨ Features

| Feature | Description | | ----------------------- | -------------------------------------------------------------------- | | 🗺️ Interactive Map | SVG-based interactive map of India with States and Union Territories | | 🎯 Hover & Click Events | Supports individual state/UT hover and click interactions | | 🎨 Custom Colors | Fully customizable color mapping for each region | | 🔍 Zoom Support | Built-in zoom support for better region focus | | 🧭 StateMap & UtMap | Dedicated components for rendering specific state or UT | | ⚡ Lightweight | No external map libraries, fully SVG-based | | 🧩 Framework Support | Works with React, Next.js, and TypeScript | | 🎭 Hover Animations | Smooth hover scaling and transition effects | | 🧱 Modular Design | Built with reusable and extensible SVG architecture | | 📍 Tooltips Support | Optional structured tooltip data on hover | | 🌗 Theming | Supports light, dark, and custom themes |

📦 Installation

To install the indiamap package, use npm:

npm i indiamap

Choose your preferred package manager:

| Package Manager | Installation Command | | --------------- | ---------------------- | | npm | npm install indiamap | | yarn | yarn add indiamap | | pnpm | pnpm add indiamap |

⚠️ Peer Dependencies

| Dependency | Requirement | | ---------- | ----------- | | react | >=16.8.0 | | react-dom | >=16.8.0 |

🚀 Usage

Basic Example

import { IndiaMap } from 'indiamap';

export default function App() {
  return (
    <IndiaMap
      width="600px"
      height="600px"
      onClick={(state) => console.log(state)}
      onHover={(state) => console.log(state)}
    />
  );
}

🎯 Hover / Click Data

When a user interacts with a state or UT, you receive structured data:

{
  code: "MH",
  name: "Maharashtra",
  type: "state",
  color: "#E0E0E0",
  capital: {
    name: "Mumbai",
    latitude: 19.076,
    longitude: 72.8777
  }
}

🎨 Custom Colors Example

<IndiaMap
  width="600px"
  height="600px"
  colors={{
    MH: '#ff0000',
    GJ: '#00ff00',
    DL: '#0000ff',
  }}
/>

✔️ What this gives you

• Clean basic usage
• Real-world event structure
• Color customization example
• Ready for npm users immediately

⚛️ Next.js / App Router

indiamap works seamlessly with both the Next.js App Router and Pages Router.

App Router Example

'use client';

import { IndiaMap } from 'indiamap';

export default function Page() {
  return <IndiaMap width="600px" height="600px" />;
}

Pages Router Example

import { IndiaMap } from 'indiamap';

export default function Home() {
  return <IndiaMap width="600px" height="600px" />;
}

Using Dynamic Import

For client-only rendering:

import dynamic from 'next/dynamic';

const IndiaMap = dynamic(() => import('indiamap').then((mod) => mod.IndiaMap), {
  ssr: false,
});

export default function Page() {
  return <IndiaMap width="600px" height="600px" />;
}

🧩 Components

| Component | Description | | ---------- | ----------------------------------------------------------------------------- | | IndiaMap | Renders the complete map of India, including all States and Union Territories | | StateMap | Renders and focuses on a specific State | | UtMap | Renders and focuses on a specific Union Territory |

🗺️ IndiaMap

Use IndiaMap when you want to display the complete map of India.

import { IndiaMap } from 'indiamap';

export default function App() {
  return <IndiaMap width="600px" height="600px" />;
}

🗺️ StateMap

Use StateMap when you want to display a single State.

import { StateMap } from 'indiamap';

export default function App() {
  return <StateMap state="WB" width="500px" height="500px" />;
}

🏝️ UtMap

Use UtMap when you want to display a single Union Territory.

import { UtMap } from 'indiamap';

export default function App() {
  return <UtMap ut="DL" width="500px" height="500px" />;
}

Component Selection Guide

| Use Case | Recommended Component | | ----------------------------------- | --------------------- | | Display the entire country | IndiaMap | | Focus on a specific state | StateMap | | Focus on a specific union territory | UtMap | | Interactive dashboards | IndiaMap | | State-specific analytics | StateMap | | UT-specific analytics | UtMap |

📍 Hover Tooltip Example

Display state or union territory information on hover.

import { useState } from 'react';
import { IndiaMap } from 'indiamap';

export default function App() {
  const [hoveredRegion, setHoveredRegion] = useState(null);
  const [position, setPosition] = useState({ x: 0, y: 0 });

  return (
    <div
      onMouseMove={(e) => {
        setPosition({
          x: e.clientX,
          y: e.clientY,
        });
      }}
    >
      <IndiaMap
        width="600px"
        height="600px"
        onHover={(data) => {
          setHoveredRegion(data);
        }}
      />

      {hoveredRegion && (
        <div
          style={{
            position: 'fixed',
            left: position.x + 15,
            top: position.y + 15,
            background: hoveredRegion.color,
            border: '1px solid #ccc',
            borderRadius: '8px',
            padding: '10px',
            boxShadow: '0 2px 10px rgba(0,0,0,0.15)',
            pointerEvents: 'none',
            zIndex: 9999,
          }}
        >
          <strong>{hoveredRegion.name}</strong>
          <br />
          Capital: {hoveredRegion.capital.name}
          <br />
          Type: {hoveredRegion.type}
        </div>
      )}
    </div>
  );
}

Hover Data Structure

{
  code: "DL",
  name: "Delhi",
  type: "ut",
  color: "#B2DFDB",
  capital: {
    name: "New Delhi",
    latitude: 28.6139,
    longitude: 77.2090
  }
}

🔍 Zoom Example

Focus on a specific region by increasing the zoom level.

<StateMap state="WB" zoom={3} width="500px" height="500px" />

<UtMap ut="DL" zoom={6} width="500px" height="500px" />

<IndiaMap height="600px" width="600px" zoom={4} />

♿ Accessibility

• SVG-based rendering
• Keyboard-friendly event handling
• Screen-reader compatible metadata support
• Custom tooltip implementation support
• Fully compatible with responsive layouts

🗺️ State Codes Reference

| Code | State | Code | State | | ---- | ----------------- | ---- | ------------- | | AP | Andhra Pradesh | MN | Manipur | | AR | Arunachal Pradesh | ML | Meghalaya | | AS | Assam | MZ | Mizoram | | BR | Bihar | NL | Nagaland | | CG | Chhattisgarh | OD | Odisha | | GA | Goa | PB | Punjab | | GJ | Gujarat | RJ | Rajasthan | | HR | Haryana | SK | Sikkim | | HP | Himachal Pradesh | TN | Tamil Nadu | | JH | Jharkhand | TG | Telangana | | KA | Karnataka | TR | Tripura | | KL | Kerala | UP | Uttar Pradesh | | MP | Madhya Pradesh | UK | Uttarakhand | | MH | Maharashtra | WB | West Bengal |

🏛️ Union Territory Codes Reference

| Code | Union Territory | | ---- | ---------------------------------------- | | AN | Andaman and Nicobar Islands | | CH | Chandigarh | | DN | Dadra and Nagar Haveli and Daman and Diu | | DL | Delhi | | JK | Jammu and Kashmir | | LA | Ladakh | | LD | Lakshadweep | | PY | Puducherry |

📄 License

This project is licensed under the MIT License.

👨‍💻 Author

KUNTAL OJHA

• GitHub: @kuntalojha
• npm: @kuntalojha
• LinkedIn:@mrkuntalojha
• Twitter (X): @kuntalojha
• Instagram:@mrkuntalojha

This package is created and maintained by KUNTAL OJHA. If you have any questions or suggestions, please don't hesitate to reach out to me.

❤️ Support the Project