# Map

Source: https://lumeo.nativ.sh/components/map

# Map

Interactive geographic map with declarative markers. Powered by Leaflet — open-source, no API key required. Ships with three named tile presets and accepts custom URL templates.

**Satellite package.** The Map lives in `Lumeo.Maps` — install it alongside the core `Lumeo` package. Leaflet and its stylesheet are loaded on demand from unpkg the first time a Map mounts; no npm build step is required for consumers.

## When to Use

-   Locating addresses, stores, or events on a slippy map
-   Visualizing point data sets with up to a few hundred markers
-   Pickers that capture a lat/lon from a click anywhere on the map
-   Read-only embeds in dashboards, contact pages, and event details

Preview Code

Basic

Centered at 48.137, 11.575 — zoom 6

Copy Code

Preview Code

Multiple markers (declarative)

Copy Code

Preview Code

Custom tile layer (CartoDark)

Copy Code

Preview Code

Marker variants

A

All variants honor the theme — switch the docs site to dark mode and the `Default` circle's border swaps to the dark background color.

Copy Code

Preview Code

Rich popup content (RenderFragment)

Marienplatz

Munich's central square, home of the Neues Rathaus and the famous Glockenspiel.

Historic

Free

Copy Code

Preview Code

Satellite imagery

Copy Code

Preview Code

Click-to-pick coordinate

Click anywhere on the map to drop a marker.

Copy Code

## API Reference

### Map

Prop

Type

Default

Description

Center

(double Lat, double Lon)

(51.0, 10.4)

Map center. Two-way bindable.

Zoom

int

5

Leaflet zoom level (0–18). Two-way bindable.

Height

string

"400px"

CSS height applied to the container.

TileLayer

string

"OpenStreetMap"

Preset name (`OpenStreetMap`, `CartoLight`, `CartoDark`, `Satellite`, `Terrain`) or a raw `{z}/{x}/{y}` URL template.

ZoomControl

bool

true

Show Leaflet's +/− zoom buttons.

Attribution

bool

true

Show the tile-provider attribution control. Tile providers' terms typically require attribution to stay visible — leave on.

ScrollWheelZoom

bool

true

Mirrors Leaflet's default. Set to `false` in dense scrollable layouts to avoid trapping page scroll.

OnClick

EventCallback<(double, double)>

—

Fires with (lat, lon) when the user clicks the map.

ChildContent

RenderFragment?

null

Place `MapMarker` children here.

Class

string?

null

Extra CSS classes on the root container.

### MapMarker

Prop

Type

Default

Description

Lat

double

0

Latitude in decimal degrees.

Lon

double

0

Longitude in decimal degrees.

Title

string?

null

Tooltip on hover and fallback popup body.

IconUrl

string?

null

Bitmap icon URL (32×32 anchored bottom-center). When set, overrides `Variant` / `Color` / `Icon`.

Variant

string

"Default"

Visual style of the auto-generated marker: `Default` (filled circle), `Outline`, `Pin` (classic teardrop), or `Dot` (minimal).

Color

string?

null

Override the marker fill. Friendly names (`red`, `green`, `yellow`, `blue`, `purple`, `pink`, `orange`, `teal`, `gray`, `slate`) or any CSS color. Null = theme primary.

Label

string?

null

Permanent text label rendered above the marker (always visible).

Icon

RenderFragment?

null

Inline content inside the marker circle — a letter, number, or `<Blazicon>` SVG.

Popup

RenderFragment?

null

Rich popup body. Falls back to `Title` when null. Styled as a shadcn card via `map.css`.

OnClick

EventCallback

—

Fires when the marker icon is clicked.