Skip to main content
196

Search Lumen

Find components, APIs, guides, and recipes.

GitHub
Web docs
WorldMap guide

Give your destinations a place.

Use the same map for travel, coverage, or regional storytelling. Your application owns destinations and country details; Lumen handles rendering and navigation.

100%
  • Portugal
  • Spain
  • Switzerland
  • Germany
  • Italy
Starts fitted to the highlighted countries. Reset returns to the world.

Navigate naturally.

Zoom from 100% to 800% with the buttons. Hold Ctrl or Cmd while scrolling over the map to zoom toward the cursor. Trackpad pinch events use the same anchor when the browser reports them as modified wheel gestures.

Drag an enlarged map with a mouse or pen. Touch scrolling and arrow-key scrolling in the focused viewport remain available. A drag does not select a country.

Fit highlighted countries centers the visible regions with padding. Reset restores the whole world. Choose small countries with the native chooser.

Fitting includes each country’s complete geometry, including overseas territories. Those regions can widen the fitted view.

Choose a usage.

Destination examples

Fit highlighted countries and customize regional map themes.

Component API

Compare Astro, React, and Elements usage and props.

Install for your framework.

WorldMap is included in the Astro, React, and Elements adapters. Import the optional geography from @santi020k/lumen-core/world-map-data. Browse the package directory for framework setup and optional integrations.

bashAstro map installation
pnpm add @santi020k/lumen-astro @santi020k/lumen-core
pnpm add @santi020k/lumen-astro @santi020k/lumen-core

For React or Elements, replace the Astro adapter with your framework package. Add Core directly when importing its country dataset.

Web docsFull catalog