World Map

Renders the world as a coarse square-dot land grid (Natural Earth 110m derived, ISO-A2 tagged — zero runtime geo dependencies). Highlight countries or entire continents with signal tones, pin cities, draw routes, and make regions selectable. Flat by default; dots snap, nothing animates.

"use client"

import { useState } from "react"

import { WorldMap } from "@/registry/warren/world-map/world-map"

export default function WorldMapDemo() {
  const [selected, setSelected] = useState<string | null>(null)

  return (
    <div className="flex flex-col gap-2">
      <WorldMap
        controls
        grid
        showCities
        highlights={[
          { kind: "continent", continent: "europe", tone: "teal" },
          { kind: "country", cc: "ES", tone: "primary" },
          { kind: "country", cc: "BR", tone: "success" },
          { kind: "country", cc: "JP", tone: "danger" },
        ]}
        markers={[
          { name: "Madrid", cc: "ES", lat: 40.42, lng: -3.7, tone: "primary" },
          { name: "Tokyo", cc: "JP", lat: 35.68, lng: 139.69, tone: "danger" },
          { name: "Sao Paulo", cc: "BR", lat: -23.55, lng: -46.63, tone: "success" },
        ]}
        links={[
          {
            id: "mad-tok",
            from: { lat: 40.42, lng: -3.7 },
            to: { lat: 35.68, lng: 139.69 },
            tone: "primary",
          },
          {
            id: "mad-sao",
            from: { lat: 40.42, lng: -3.7 },
            to: { lat: -23.55, lng: -46.63 },
            tone: "success",
          },
        ]}
        onCountryClick={setSelected}
      />
      <p className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground">
        {selected ? `SELECTED · ${selected}` : "CLICK A COUNTRY TO SELECT"}
      </p>
    </div>
  )
}

Installation

bunx shadcn add @warren/world-map

Usage

import { WorldMap } from "@/registry/warren/world-map/world-map"

<WorldMap
  grid
  showCities
  highlights={[
    { kind: "continent", continent: "europe", tone: "teal" },
    { kind: "country", cc: "ES", tone: "primary" },
  ]}
  markers={[{ name: "Madrid", cc: "ES", lat: 40.42, lng: -3.7 }]}
  links={[
    { id: "mad-tok", from: { lat: 40.42, lng: -3.7 }, to: { lat: 35.68, lng: 139.69 } },
  ]}
/>

Examples

Viewport controls

Pass controls to make the viewport interactive: a compact + / − / gear keypad is pinned to the map's top-right corner, scroll-wheel or two-finger pinch steps through the discrete zoom ladder (1× → 1.5× → 2× → 3× → 4×), and drag or arrow keys pan while zoomed (touch-action: none keeps gestures on the map, off the page). The gear opens a right-side settings sheet (@warren/sheet) — Switch rows: highlights, route links, points, point labels, city pins, graticule, and MINIMAL mode, which strips every overlay down to the bare land grid until toggled off. Toggle state follows the grid/showCities and show* layer props live (a caller-side toggle updates the matching switch); without controls, the show* props hide layers directly.

While zoomed-out at fit the land grid renders coarse (every other latitude band, roughly half the rects) and densifies to full detail on the first zoom step — the static, control-less map always renders full detail.

<WorldMap controls grid showCities markers={[...]} />

The toolbar itself is configurable: showZoomControls={false} drops the +/− stack (wheel/pinch still zoom), showGear={false} drops the settings entry.

<WorldMap controls showGear={false} highlights={[...]} />

Selectable regions

Pass onCountryClick to receive the ISO-A2 code of any clicked land dot — use it for region drilldowns in ops consoles.

Routes

links draws dashed hairlines between two lat/lng points; tone colors the stroke using signal semantics (primary = active lane, danger = failing path).

API Reference