API

Export members

• SizeOption: the union of available sizes.
• ISOCode: the ISO code available to name countries.
• DataItem: the type for each country's value to be passed in the data prop.
• Data: it's just DataItem[], for more convenience.
• CountryContext: the context in rendering each country, to be used in customization callbacks.
• Props: the props type for the WorldMap component.
• regions: the list of regions ({ name, code }) available in the library
• disputedTerritories: Tier 1 dispute metadata keyed by dispute ID (crimea, palestinian-territories, taiwan, kashmir, western-sahara, kosovo).
• disputeIds: the list of dispute IDs.
• disputesByCountryCode: map from rendered country code (e.g. UA, XK) to dispute ID.
• getDisputeById(id) / getDisputeByCountryCode(code): lookups returning a DisputeClassification (or undefined for a country code with no dispute).
• disputedTerritoryAreas: the territory shapes drawn by showDisputedTerritories ({ id, name, disputeId, administration }), e.g. crimea, aksai-chin, west-bank.
• DisputedTerritoryContext, DisputedTerritoryArea, DisputeClassification, DisputeDisplayGuidance, DisputeTier, DisputeStatus, DisputeReviewStatus, DisputeBorderStyle, DisputeLabelStrategy, DisputeId: types for the dispute metadata.
• WorldMap: available both as named and default export. The actual component to be rendered.

Props

Prop	Type	Description
data	Data	Mandatory. Array of JSON records, each with country/value.
size	SizeOption | 'responsive' | number	The size of your map. responsive mode fills the width of its container. See Sizing for details, and see Sizing example
title	string	Any string for the title of your map.
color	string	Color for highlighted countries. A standard color string. E.g. "red" or "#ff0000".
tooltipBgColor	string	Tooltip background color.
tooltipTextColor	string	Tooltip text color.
valuePrefix	string	A string to prefix values in tooltips. E.g. "$"
valueSuffix	string	A string to suffix values in tooltips. E.g. "USD"
backgroundColor	string	Component background color.
strokeOpacity	string	The stroke opacity of non selected countries.
frame	boolean	Should a frame be drawn around the map.
frameColor	string	Frame color.
borderColor	string	Border color around each individual country.
richInteraction	boolean	WHen turned on, double clicks would cause the map to rescale. (Other cool features to come)
🚧 type 🚧	string	Select type of map you want, either "tooltip" or "marker". 📝 This functionality not only complicates the code, but is infrequently used and needs to be redesigned to make it better. For now it is deprecated and has no effect. 📝
styleFunction	(context: CountryContext) => React.CSSProperties	A callback function to customize styling of each country (see Custom styles example)
hrefFunction	(context: CountryContext) => object | string | undefined	A callback function to bind an href link to each country. The return can be the target URL as a string or an object specifying props passed to the anchor element (e.g. href and target). (see Href binding example)
tooltipTextFunction	(context: CountryContext) => string	A callback function to customize tooltip text (see Localization example)
onClickFunction	(context: CountryContext & {event: React.MouseEvent}) => void	A callback function to add custom onclick logic (see Onclick action example)
showDisputedTerritories	boolean	Draw the disputed territories (Crimea, the Kashmir areas, West Bank, Gaza, Western Sahara, Kosovo, Taiwan) as a red overlay above the countries. Off by default. (see Dispute metadata example)
disputedTerritoryColor	string	Fill and border color of the disputed-territory overlay. Default #d32f2f.
disputedTerritoryTooltipFunction	(context: DisputedTerritoryContext) => string	Tooltip text for each territory. The default lists status, recognized sovereign, controlling power, and parties.
onDisputedTerritoryClick	(context: DisputedTerritoryContext & {event: React.MouseEvent}) => void	Called when a territory in the overlay is clicked.
textLabelFunction	(mapWidth: number) => ({label: string} & TextProps)[]	A callback function to draw text labels on the map (see Text labels example)

type SizeOption = "sm" | "md" | "lg" | "xl" | "xxl";

type DataItem = {
  country: ISOCode;
  value: number | string;
};

type CountryContext = {
  countryCode: ISOCode;
  countryName: string;
  countryValue: number | string | undefined;
  color: string;
  minValue: number;
  maxValue: number;
  prefix: string;
  suffix: string;
  dispute?: DisputeClassification; // Tier 1 dispute metadata, if any
};

type DisputedTerritoryContext = {
  territoryId: string; // e.g. "crimea", "aksai-chin"
  territoryName: string;
  administration: string; // Natural Earth note, e.g. "Admin. by Russia; Claimed by Ukraine"
  dispute: DisputeClassification; // includes status, parties, unStanding, sourceRationale
};