india-map-react

Interactive React component for India's map with state-level interactions.
Uses the official India boundary TopoJSON (ST_NM property).

Live demo hosted on Vercel → Live Demo Link

Preview

⚠️ Disclaimer
This map is provided for visualization and general informational purposes only.
It follows the official boundaries of India as per publicly available government data sources.
The boundaries shown are not intended for legal, surveying, or navigational use. Minor variations in geometry may exist due to data simplification and rendering optimizations.
For authoritative and legally binding boundaries, please refer to official sources such as the Survey of India.

This project is not an official government product.

Install

npm install india-map-react react-simple-maps

Quick Start

import { IndiaMap } from "india-map-react";

export default function App() {
  return (
    <IndiaMap
      onStateClick={(name) => console.log(name)}
    />
  );
}

Features

| Feature | Prop | |---|---| | State click | onStateClick | | Hover callback | onStateHover, onStateLeave | | Tooltip (built-in) | showTooltip, tooltipContent | | Zoom + pan | enableZoom, minZoom, maxZoom | | Choropleth coloring | enableChoropleth, stateData | | Per-state custom color | stateData[name].color | | Map markers / pins | markers, onMarkerClick | | Multi-select | multiSelect | | Controlled selection | selectedState |

Props Reference

Data

| Prop | Type | Description | |---|---|---| | stateData | Record<string, StateData> | Per-state values / colors. Key = state name (ST_NM). | | markers | MarkerData[] | Array of pins to render on the map. |

Colors

| Prop | Default | Description | |---|---|---| | fillColor | "#1A1A2E" | Default state fill | | hoverColor | "#2D2D5A" | Fill on hover | | selectedColor | "#4f46e5" | Fill for selected state | | strokeColor | "#444" | Border between states | | strokeWidth | 0.5 | Border width |

Choropleth

| Prop | Default | Description | |---|---|---| | enableChoropleth | false | Enable value-based coloring | | choroplethLow | "#dbeafe" | Color for lowest value | | choroplethHigh | "#1d4ed8" | Color for highest value |

Behavior

| Prop | Default | Description | |---|---|---| | selectedState | — | Controlled selected state name | | multiSelect | false | Allow multiple selections | | disabled | false | Disable all interactions |

Zoom

| Prop | Default | Description | |---|---|---| | enableZoom | false | Scroll-wheel zoom + drag-to-pan | | minZoom | 1 | Minimum zoom level | | maxZoom | 8 | Maximum zoom level |

Tooltip

| Prop | Default | Description | |---|---|---| | showTooltip | true | Show tooltip on hover | | tooltipContent | — | (name, data?) => ReactNode — custom tooltip |

Examples

Basic click + tooltip

<IndiaMap
  showTooltip
  onStateClick={(name) => alert(`Clicked: ${name}`)}
/>

Choropleth — population density

import { IndiaMap, Legend } from "india-map-react";

const populationData = {
  "Uttar Pradesh": { value: 241 },
  "Maharashtra":   { value: 123 },
  "Bihar":         { value: 128 },
  "West Bengal":   { value: 107 },
  // ...
};

<IndiaMap
  stateData={populationData}
  enableChoropleth
  choroplethLow="#eff6ff"
  choroplethHigh="#1d4ed8"
  tooltipContent={(name, data) => (
    <span>{name}: <strong>{data?.value ?? "N/A"}</strong> million</span>
  )}
/>

<Legend
  title="Population (millions)"
  minLabel="Low"
  maxLabel="High"
  lowColor="#eff6ff"
  highColor="#1d4ed8"
  style={{ marginTop: 8 }}
/>

Per-state custom colors

<IndiaMap
  stateData={{
    "Kerala":      { color: "#4ade80" },
    "Rajasthan":   { color: "#fb923c" },
    "West Bengal": { color: "#f472b6" },
  }}
/>

Markers (city pins)

<IndiaMap
  markers={[
    { id: "del", label: "Delhi",   lat: 28.61, lng: 77.20, color: "#f59e0b" },
    { id: "mum", label: "Mumbai",  lat: 19.08, lng: 72.88, color: "#ec4899" },
    { id: "ben", label: "Bengaluru", lat: 12.97, lng: 77.59, color: "#22d3ee" },
  ]}
  onMarkerClick={(marker) => console.log("Marker clicked:", marker.label)}
/>

Zoom + pan

<IndiaMap
  enableZoom
  minZoom={1}
  maxZoom={10}
/>

Multi-select

const [selected, setSelected] = useState<string[]>([]);

<IndiaMap
  multiSelect
  onStateClick={(name) =>
    setSelected((prev) =>
      prev.includes(name) ? prev.filter(n => n !== name) : [...prev, name]
    )
  }
/>

Custom tooltip

<IndiaMap
  showTooltip
  tooltipContent={(name, data) => (
    <div>
      <strong>{name}</strong>
      {data?.value && <p>GDP: ₹{data.value}L Cr</p>}
    </div>
  )}
/>

State Names Reference

The TopoJSON uses ST_NM for state names. All 36 states and UTs:

Andaman & Nicobar, Andhra Pradesh, Arunachal Pradesh, Assam, Bihar,
Chandigarh, Chhattisgarh, Dadra and Nagar Haveli and Daman and Diu,
Delhi, Goa, Gujarat, Haryana, Himachal Pradesh, Jammu & Kashmir,
Jharkhand, Karnataka, Kerala, Ladakh, Lakshadweep, Madhya Pradesh,
Maharashtra, Manipur, Meghalaya, Mizoram, Nagaland, Odisha,
Puducherry, Punjab, Rajasthan, Sikkim, Tamil Nadu, Telangana,
Tripura, Uttar Pradesh, Uttarakhand, West Bengal

Exports

import { IndiaMap } from "india-map-react";   // main map
import { Legend }   from "india-map-react";   // choropleth legend
import type { IndiaMapProps, StateData, MarkerData } from "india-map-react";

⚠️ Disclaimer

This map is provided for visualization and general informational purposes only.

It follows the official boundaries of India as per publicly available government data sources. The boundaries shown are not intended for legal, surveying, or navigational use. Minor variations in geometry may exist due to data simplification and rendering optimizations.

For authoritative and legally binding boundaries, please refer to official sources such as the Survey of India.

This project is not an official government product.

License

MIT © KUNWAR YUVRAJ DURGESH