Skip to main content

IndiaMap

Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.

A monochromatic SVG map of India, shading its 36 states and union territories using fill patterns and optional numeric labels. Uses a Mercator projection. The map keeps its proportions, filling as much of its box as it can and centered in the rest, in any box it is laid out in.

Import​

import { IndiaMap } from "~lib/data-display/maps/india-map";

Props​

NameTypeRequiredDefaultDescription
dataPartial<Record<IndiaStateName, IndiaMapEntry>>YesN/APer-state shading and optional value
showValuesbooleanNofalseRender numeric labels at state centroids
markersMapMarker[]NoN/APlaces to mark, each in its shape with an optional name beside it
legendMapLegendEntry[]NoN/AWhat each marker shape stands for, in a row under the map
widthnumber | stringNo250Component width (px or CSS string); with height="fill", the column's width unless given
heightnumber | "fill" | stringNo375Component height (px or CSS string), or "fill" to be as tall as its width makes it at the map's proportion

IndiaStateName​

36 states and union territories. Examples: "Maharashtra", "Uttar Pradesh", "Tamil Nadu", "Karnataka", "Rajasthan", "Kerala", "Gujarat".

IndiaMapEntry​

type IndiaMapEntry = {
  shading: "solid" | "diagonal" | "dots" | "crosshatch";
  value?: number;
};

MapMarker​

type MapMarker = {
  latitude: number;
  longitude: number;
  label?: string;
  shape?: "circle" | "square" | "triangle" | "diamond"; // "circle" by default
};

type MapLegendEntry = {
  shape: "circle" | "square" | "triangle" | "diamond";
  label: string;
};

Examples​

Default​

Open Default in Storybook

With Values​

Open With Values in Storybook

All Patterns​

Open All Patterns in Storybook

With Markers​

markers puts a dot on each place you give, with its label beside it where there is room, and a marker's shape draws it as a square, a triangle or a diamond instead, which legend names under the map. height="fill" makes the box as tall as its width makes it at the map's proportion. See WorldMap for how labels are placed, how the legend gives way and how a filled map shrinks.

Open With Markers in Storybook

See Also​