# MapHeatmap

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

# 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

Preview Code

Population density — Europe

Copy Code

Preview Code

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

Radius = 10 px — tight clusters

Radius = 40 px — broad heat blobs

Copy Code

Preview Code

Custom color ramp — red / yellow / white

Copy Code

Preview Code

Heatmap + clustered markers

Copy Code

## 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.