Data display

WorldMap

Highlights countries and labeled locations on a reusable animated dotted or solid world map.

View preview API reference Figma behavior note

FrameworksAstro · React · Elements

Registry commandlumen add WorldMap

InteractionEnhanced runtime

Design sourceBehavior-only contract

Explore navigation guidance and regional destination examples.

See it and copy it

Framework example

Choose Astro, React, or Elements to compare native usage against the shared visual output. Each example assumes the framework-level setup is already complete.

Dotted destinations

Places worth remembering

Your own destinations, your own colors. Sample data for this demo.

100%

Choose a country

Colombia
Japan
Portugal
Spain
United States
Brazil
Australia

Illustrative destinations. Hover over the map or choose a country to explore.

View WorldMap code

Framework usage

Switch targets to compare the adapter code. This live preview runs the Astro example. React and Elements use their own behavior APIs; complete the matching framework setup before copying an example.

---
import { WorldMap } from '@santi020k/lumen-astro'
import { lumenWorldMapCountries } from '@santi020k/lumen-core/world-map-data'
---

<WorldMap
  caption="Illustrative destinations. Hover over the map or choose a country to explore."
  countries={lumenWorldMapCountries}
  description="Your own destinations, your own colors. Sample data for this demo."
  heading="Places worth remembering"
  highlightedCountries={['CO', 'JP', 'PT', 'ES', 'US', 'BR', 'AU']}
  label="World map showing sample destinations"
  markers={[
    { id: 'bogota', label: 'Bogotá', latitude: 4.71, longitude: -74.07 },
    { id: 'tokyo', label: 'Tokyo', latitude: 35.68, longitude: 139.69 },
    { id: 'lisbon', label: 'Lisbon', latitude: 38.72, longitude: -9.14 }
  ]}
/>

import { WorldMap } from '@santi020k/lumen-react'
import { lumenWorldMapCountries } from '@santi020k/lumen-core/world-map-data'

const Example = () => (
  <WorldMap countries={lumenWorldMapCountries} label="Sample destinations"
    highlightedCountries={['CO', 'JP', 'PT']} variant="dotted"
    markers={[{ id: 'bogota', label: 'Bogotá', latitude: 4.71, longitude: -74.07 }]} />
)

<script type="module">
  import { defineLumenWorldMap, LumenWorldMapElement } from '@santi020k/lumen-elements/components/world-map'
  import { lumenWorldMapCountries } from '@santi020k/lumen-core/world-map-data'
  import '@santi020k/lumen-elements/styles.css'

  defineLumenWorldMap()
  const map = document.querySelector('lumen-world-map')
  if (map instanceof LumenWorldMapElement) map.countries = lumenWorldMapCountries
</script>

<lumen-world-map label="Sample destinations" highlighted-countries='["CO", "JP", "PT"]'></lumen-world-map>

Edit WorldMap in browser

Solid regions

Use Lumen accent colors and country labels to match your product.

100%

Explore a country

Colombia
日本
Portugal

Solid styling with Lumen accent colors and localized country labels.

View WorldMap code

Framework usage

Switch targets to compare the adapter code. This live preview runs the Astro example. React and Elements use their own behavior APIs; complete the matching framework setup before copying an example.

---
import { WorldMap } from '@santi020k/lumen-astro'
import { lumenWorldMapCountries } from '@santi020k/lumen-core/world-map-data'
---

<WorldMap
  animated={false}
  caption="Solid styling with Lumen accent colors and localized country labels."
  countries={lumenWorldMapCountries}
  highlightedCountries={['CO', 'JP', 'PT']}
  label="Sample destinations with a solid map style"
  labels={{ CO: 'Colombia', JP: '日本', PT: 'Portugal' }}
  listLabel="Explore a country"
  style="--ui-world-map-highlight: hsl(var(--accent));"
  variant="solid"
/>

import type { CSSProperties } from 'react'
import { WorldMap } from '@santi020k/lumen-react'
import { lumenWorldMapCountries } from '@santi020k/lumen-core/world-map-data'

const style: CSSProperties & { '--ui-world-map-highlight': string } = {
  '--ui-world-map-highlight': 'hsl(var(--accent))'
}

const Example = () => (
  <WorldMap countries={lumenWorldMapCountries} label="Sample destinations with a solid map style"
    highlightedCountries={['CO', 'JP', 'PT']} variant="solid" animated={false}
    labels={{ CO: 'Colombia', JP: '日本', PT: 'Portugal' }} listLabel="Explore a country" style={style} />
)

<script type="module">
  import { defineLumenWorldMap, LumenWorldMapElement } from '@santi020k/lumen-elements/components/world-map'
  import { lumenWorldMapCountries } from '@santi020k/lumen-core/world-map-data'
  import '@santi020k/lumen-elements/styles.css'

  defineLumenWorldMap()
  const map = document.querySelector('lumen-world-map')
  if (map instanceof LumenWorldMapElement) map.countries = lumenWorldMapCountries
</script>

<lumen-world-map variant="solid" animated="false" labels='{"JP":"日本"}' list-label="Explore a country" style="--ui-world-map-highlight: hsl(var(--accent))" label="Sample destinations with a solid map style" highlighted-countries='["CO", "JP", "PT"]'></lumen-world-map>

Edit WorldMap in browser

Choose your target

Add this component

Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.

pnpm add @santi020k/lumen-astro

pnpm add @santi020k/lumen-astro

lumen add WorldMap

lumen add WorldMap

pnpm add @santi020k/lumen-react

pnpm add @santi020k/lumen-react

lumen add WorldMap --target react

lumen add WorldMap --target react

pnpm add @santi020k/lumen-elements

pnpm add @santi020k/lumen-elements

lumen add WorldMap --target elements

lumen add WorldMap --target elements

API reference

Lumen-specific props and runtime attributes for the Astro primitive. Use the framework differences above and the copyable examples for React composition and Elements attributes; the public adapter types define their supported contracts.

Attribute	Values	Default	Description
initialView	"world" \| "highlighted"	"world"	Fits highlighted country geometry on enhancement. The Fit highlighted countries button repeats the fit; reset restores the world. Elements uses initial-view.
zoomable	boolean	true	Shows zoom, fit, and reset controls. Buttons use 50% steps from 100% to 800%. Ctrl/Cmd-scroll zooms toward the cursor; drag or scroll to explore.
zoomLabels	Partial<LumenWorldMapZoomLabels>	English labels	Localizes zoomIn, zoomOut, reset, level, fit and viewport. Elements accepts zoom-labels JSON.
countries	readonly LumenWorldMapCountryGeometry[]	required	Import lumenWorldMapCountries explicitly from @santi020k/lumen-core/world-map-data. Custom geometry uses the fixed 1000 × 400 projection.
label	string	required	Provides the accessible name for the map image.
highlightedCountries	readonly string[]	[]	Country codes to highlight; unknown codes and duplicates are dropped. Elements also accepts highlighted-countries as JSON.
variant	"dotted" \| "solid"	"dotted"	Chooses the map appearance.
markers	readonly LumenWorldMapMarker[]	[]	Labeled points with id, latitude and longitude. Invalid or off-map points are dropped.
labels / listLabel	Record<string, string> / string	country names / "Choose a country"	Localizes country names and the native chooser. Elements uses labels JSON and list-label.
selectedCountry	string	-	Initial selection in Astro, reflected selected-country in Elements, controlled selection in React; React also supports defaultSelectedCountry.
interactive / animated	boolean	true	Enable country selection and motion separately. Reduced motion disables animation automatically.
onCountrySelect	(detail: LumenWorldMapSelectDetail) => void	-	React callback; Astro and Elements emit ui:world-map-select with countryId, highlighted and label.
heading / description / caption	string	-	Optional Astro and React figure content. Elements supports authored content outside the map.
CSS variables	--ui-world-map-land / --ui-world-map-highlight / --ui-world-map-marker / --ui-world-map-surface	semantic tokens	Accept any CSS color to customize the map while preserving theme defaults.
class, className	string	""	Merges custom classes with the generated ui-* root classes.
...native attributes	HTML attributes	-	Forwards standard attributes to the root element unless the component consumes them.

Keyboard interactions

Keyboard behavior provided by the Astro UIPrimitives runtime for this component.

Key	Action
Tab	Focus the native country chooser.
Arrow keys	Choose a country using the native select.

Runtime events

CustomEvents dispatched by the Astro UIPrimitives runtime for this component.

Event	Target	Detail	When
ui:world-map-select	WorldMap root	{ countryId: string, highlighted: boolean, label: string }	A different country is selected by pointer or native chooser.