UKMap
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 the United Kingdom, shading its regions using fill patterns and optional numeric labels. Supports two levels of granularity: the 4 constituent nations ("country") or 214 counties and unitary authorities ("counties"). 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 { UKMap } from "~lib/data-display/maps/uk-map";
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
data | Partial<Record<UKNationName | UKCountyName, UKMapEntry>> | Yes | N/A | Per-region shading and optional value |
granularity | "country" | "counties" | No | "counties" | Geographic detail level |
showValues | boolean | No | false | Render numeric labels at region centroids |
markers | MapMarker[] | No | N/A | Places to mark, each in its shape with an optional name beside it |
legend | MapLegendEntry[] | No | N/A | What each marker shape stands for, in a row under the map |
width | number | string | No | 200 | Component width (px or CSS string); with height="fill", the column's width unless given |
height | number | "fill" | string | No | 350 | Component height (px or CSS string), or "fill" to be as tall as its width makes it at the map's proportion |
UKNationName
One of: "England", "Northern Ireland", "Scotland", "Wales"
Use with granularity="country".
UKCountyName
214 counties and unitary authorities from the ONS CTYUA23 dataset.
Examples: "Surrey", "North Yorkshire", "Highland", "Argyll and Bute", "Cardiff", "Mid Ulster".
Use with granularity="counties" (the default).
UKMapEntry
type UKMapEntry = {
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
Counties (default)
Countries
With Values
All Patterns
All Nations
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.