API Reference

Props, types and helpers exported by components/visited-map.tsx.

VisitedMap

Prop	Type	Default	Description
countries	VisitedMapCountries	—	Countries by status (ISO 3166-1 alpha-2 codes). Each is highlighted with its status color and gets a pin at its center.
places	VisitedMapPlace[]	—	Cities or any other point, e.g. Barcelona inside Spain.
countryPins	boolean	true	Show a pin at the center of each country in countries.
hideStats	boolean	false	Hide how much of the world you've seen, shown by default in the top-left corner: a chip that expands into the list of places by continent.
hideLegend	boolean	false	Hide the legend under the map, which lists the statuses in use.
zoomable	boolean	false	Let people zoom and pan the map (up to 6×): buttons in the corner, ⌘/Ctrl + scroll, pinch, drag and double-click. Pins, tooltips and borders keep their size. Adds a small client component; without it the map ships no JavaScript.
focus	VisitedMapCountryCode	—	Start zoomed in on a country, e.g. "AR". Frames its main landmass (France without French Guiana, the US without Alaska). With zoomable, people can zoom out and reset brings them back; without it, the map stays cropped.
className	string	—	Extra classes for the root element (the map card and its legend).

If a country shows up more than once (in several lists, or through a place's country), the strongest status wins: current, then lived, visited and wishlist. A country's center pin only reflects countries, so a current city doesn't make its country's pin pulse.

VisitedMapCountries

Prop	Type	Description
current	VisitedMapCountryCode	Where you are now. Its pin pulses.
lived	VisitedMapCountryCode[]	Countries you've lived in.
visited	VisitedMapCountryCode[]	Countries you've been to.
wishlist	VisitedMapCountryCode[]	Countries you want to visit. Not counted in the stats.

VisitedMapPlace

Prop	Type	Description
name	string	Shown in a tooltip on hover, click/tap or keyboard focus.
coords	[lng, lat]	Longitude first, then latitude (GeoJSON order).
country	VisitedMapCountryCode	Country the place is in (e.g. "ES"). Highlighted with the place's variant.
variant	"visited" \| "lived" \| "wishlist" \| "current"	Pin style. Defaults to "visited". "current" pulses.

VisitedMapCountryCode

An ISO 3166-1 alpha-2 code for one of the 195 countries or 50 territories ("XK" for Kosovo). Every code gets a pin at its center. The map is drawn at 1:110m, so small countries and islands (Singapore, Malta, Curaçao…) show just the pin. Territories are never counted in the stats, and the Malvinas Islands are part of Argentina.

Variants

Variant	Pin	Country tint
visited	Sky blue dot	Light sky
lived	Emerald dot	Light emerald
wishlist	Hollow amber dot	Light amber
current	Rose dot with a pulsing halo, drawn on top	Light rose

To change the colors, edit pinStyles and countryStyles in components/visited-map.tsx after installing.

VisitedMapSwatch

A status's pin, drawn exactly like on the map, plus visitedMapVariants, every status with its label in legend order. Use them to build your own legend or filters.

import { visitedMapVariants, VisitedMapSwatch } from "@/components/visited-map"

<ul className="flex gap-4 text-sm">
  {visitedMapVariants.map(({ variant, label }) => (
    <li key={variant} className="flex items-center gap-1.5">
      <VisitedMapSwatch variant={variant} />
      {label}
    </li>
  ))}
</ul>

getVisitedStats

Takes the same props as the map and returns the share of the world's 195 countries you've visited. Small countries that aren't drawn, like Singapore, still count; territories such as Greenland or Puerto Rico don't.

import { getVisitedStats } from "@/components/visited-map"

const { visited, total, percent } = getVisitedStats({ countries, places })
// → { visited: 6, total: 195, percent: 3.1 }

Prop	Type	Description
visited	number	Countries visited, counted once each (wishlist excluded).
total	number	Always 195: the UN member states plus the Vatican and Palestine.
percent	number	visited / total as a percentage, rounded to one decimal.