Skip to main content

ChinaMap

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 China, shading its 31 province-level divisions 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 { ChinaMap } from "~lib/data-display/maps/china-map";

Props​

NameTypeRequiredDefaultDescription
dataPartial<Record<ChinaProvinceName, ChinaMapEntry>>YesN/APer-province shading and optional value
showValuesbooleanNofalseRender numeric labels at province 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 | stringNo380Component width (px or CSS string); with height="fill", the column's width unless given
heightnumber | "fill" | stringNo300Component height (px or CSS string), or "fill" to be as tall as its width makes it at the map's proportion

ChinaProvinceName​

31 province-level divisions. Examples: "Guangdong", "Sichuan", "Beijing", "Shanghai", "Xinjiang", "Heilongjiang", "Yunnan".

ChinaMapEntry​

type ChinaMapEntry = {
  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​