Map
Interactive geographic map with declarative markers. Powered by MapLibre GL — open-source, no API key required. Ships with named tile presets including Auto, which follows the site theme automatically, and accepts raw style.json URLs.
Installation
dotnet add package Lumeo.Maps
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Map />
Lumeo.Maps — install it alongside the core Lumeo
package. MapLibre GL 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
Self-hosting MapLibre
By default the Map lazy-loads MapLibre GL JS and its stylesheet from unpkg
the first time a Map mounts. That's the right tradeoff for most apps, but
it doesn't work behind a strict CSP, on an air-gapped intranet, or in compliance
scenarios where every third-party script call is a no-go.
The Lumeo CLI ships a one-shot installer that vendors MapLibre into
wwwroot/lib/lumeo-vendor/ and writes a bootstrap that wires up
window.lumeoCdn so the runtime loads from your own origin:
# 1. Install the Lumeo CLI as a global dotnet tool $ dotnet tool install -g Lumeo.Cli # 2. Vendor MapLibre into wwwroot/lib/lumeo-vendor/ and write the bootstrap $ lumeo deps install --lib maplibre --write-bootstrap # 3. Include the bootstrap before _content/Lumeo.Maps/js/* in index.html # <script src="js/lumeo-cdn-init.js"></script>
See CDN dependencies for the full list
of self-hostable libraries and the window.lumeoCdn override surface.
For more granular control (custom URL, integrity hash, alternative CDN) you can
set window.lumeoCdn = { mapLibreJs: "/my/cdn/maplibre-gl.js", mapLibreCss: "/my/cdn/maplibre-gl.css" };
before the first Map mounts.