Skip to main content

JapanMap

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 Japan, shading its 47 prefectures 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 { JapanMap } from "~lib/data-display/maps/japan-map";

Props​

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

JapanPrefectureName​

47 prefectures. Examples: "Tokyo", "Osaka", "Hokkaido", "Kyoto", "Okinawa", "Kanagawa", "Aichi", "Fukuoka".

JapanMapEntry​

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