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
Centered at 48.137, 11.575 — zoom 6
All variants honor the theme — switch the docs site to dark mode and the
Default circle's border swaps to the dark background color.
Click anywhere on the map to drop a marker.
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. |