MapHeatmap
Density visualisation layer for the Map component. Renders a smooth colour-gradient heatmap from a collection of weighted lat/lon points using MapLibre GL's native heatmap layer.
Installation
dotnet add package Lumeo.Maps
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <MapHeatmap />
Satellite package.
MapHeatmap lives in
Lumeo.Maps — install it alongside the core Lumeo
package. Place it inside a <Map> ChildContent slot.
When to Use
- Showing population or user-location density across a region
- Visualising server-request origin hot spots on a world map
- Displaying weather data (precipitation, temperature) as a continuous gradient
- Highlighting event or crime concentration in a city dashboard
- Any scenario where individual markers would be too dense to read at low zoom
Radius = 10 px — tight clusters
Radius = 40 px — broad heat blobs
API Reference
MapHeatmap
Points is required; Intensity should be in the range 0–1 (pass 1 for uniform weight). ColorRamp takes alternating stop, cssColor values, e.g. new object[] { 0, "transparent", 0.5, "blue", 1, "red" } — when null, the default blue → cyan → yellow → orange → red ramp is used.
| Prop | Type | Default | Description |
|---|---|---|---|
| Points* | IEnumerable<(double Lat, double Lon, double Intensity)> | [] | Collection of heat points. Each tuple is (lat, lon, intensity) where intensity should be in the range 0–1 (defaults to 1 when not meaningful). Pass a bare (lat, lon) list via a helper or use the convenience constructor that sets intensity to 1. |
| Radius | int | 20 | Radius of each point in pixels at full zoom. Defaults to 20. |
| Opacity | double | 0.8 | Opacity of the heatmap layer (0–1). Defaults to 0.8. |
| ColorRamp | object[]? | — | Color ramp expressed as a MapLibre interpolation stops list. Format: alternating stop (0–1) and CSS color values. Example: new object[] { 0, "transparent", 0.4, "blue", 0.8, "red", 1, "orange" }. Defaults to a blue → cyan → yellow → orange → red ramp. |