Destination examples

Start with your country data.

Highlight country codes, fit the region, and apply Lumen tokens or your website’s colors. These are illustrative destinations.

Fit a regional view.

initialView="highlighted" fits the highlighted country geometry when the map is enhanced. Without JavaScript, Astro still renders the full map and the country list.

100%

Choose a country

Portugal
Spain
Switzerland
Germany
Italy

Regional highlights fitted on load. Country data belongs to your application.

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
  countries={lumenWorldMapCountries}
  label="Sample European destinations"
  highlightedCountries={['PT', 'ES', 'CH', 'DE', 'IT']}
  initialView="highlighted"
  variant="solid"
  animated={false}
  style="--ui-world-map-highlight: hsl(var(--accent));"
  caption="Regional highlights fitted on load. Country data belongs to your application."
/>

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 European destinations" highlightedCountries={['PT', 'ES', 'CH', 'DE', 'IT']}
  initialView="highlighted" variant="solid" animated={false} 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 initial-view="highlighted" variant="solid" animated="false" style="--ui-world-map-highlight: hsl(var(--accent))" label="Sample European destinations" highlighted-countries='["PT", "ES", "CH", "DE", "IT"]'></lumen-world-map>

Edit WorldMap in browser

Keep destination metadata in your application.

Use ISO country codes for highlights. Labels, travel dates, images, and navigation belong to your website. Listen to ui:world-map-select in Astro or Elements, or use onCountrySelect in React to render details with your existing components.

<WorldMap countries={lumenWorldMapCountries}
  highlightedCountries={visitedCountries}
  label="My visited countries"
  onCountrySelect={({ countryId }) => setActiveCountry(countryId)} />

<WorldMap countries={lumenWorldMapCountries}
  highlightedCountries={visitedCountries}
  label="My visited countries"
  onCountrySelect={({ countryId }) => setActiveCountry(countryId)} />

Match your website.

.travel-map {
  --ui-world-map-highlight: hsl(var(--brand));
  --ui-world-map-marker: hsl(var(--accent));
  --ui-world-map-surface: hsl(var(--surface-muted));
}

.travel-map {
  --ui-world-map-highlight: hsl(var(--brand));
  --ui-world-map-marker: hsl(var(--accent));
  --ui-world-map-surface: hsl(var(--surface-muted));
}

Localize country names with labels, navigation buttons with zoomLabels, and the chooser with listLabel. Use zoomable={false} for a static presentation.

Navigation guide · Full component API and default examples