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.

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

Population density — Europe

Radius comparison — tight (10 px) vs. broad (40 px)

Radius = 10 px — tight clusters

Radius = 40 px — broad heat blobs

Custom color ramp — red / yellow / white

Heatmap + clustered markers

API Reference

MapHeatmap

Prop	Type	Default	Description
Points	IEnumerable<(double Lat, double Lon, double Intensity)>	required	Collection of heat points. `Intensity` should be in the range 0–1; pass 1 for uniform weight. Use a helper or LINQ to project from your data model.
Radius	int	20	Pixel radius of each point at full zoom. MapLibre scales this automatically as the user zooms. Smaller values create sharper, more localised hot spots; larger values produce broad blobs.
Opacity	double	0.8	Overall opacity of the heatmap layer (0–1). Lower values let the base tile show through more clearly.
ColorRamp	object[]?	null	Custom color ramp as 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.