HeatmapLayer

The HeatmapLayer allows you to visualize the density of point data on your map using a heatmap.

This type of layer is particularly useful for representing areas of high activity
such as population density, event hotspots, or any scenario where you want to highlight the concentration of data points.

Reference: Heatmap

Usage

The HeatmapLayer works by aggregating point data into a smooth gradient of colors, where warmer colors represent higher densities.

This layer is typically used with a source that provides point data, such as GeojsonSource, but it can also be configured independently using a source prop within the layer itself.

Style customization

You can also configure the appearance and behavior of the layer using the layout and paint options, similar to other layers in LibreGL.

Toggle layer visibility

You can programmatically control the visibility of the heatpmap layer on the map using the exposed toggle() method.

This method toggles the layer’s visibility by interacting with MapLibre’s setLayoutProperty() function.

Behind the scenes, it adjusts the visibility property of the heatpmap layer between visible and none.

Rerendering data

The data prop in the GeojsonSource is reactive, once the data changes, LibreGL automatically rerenders the layer like a charm, ensuring your map always reflects the latest data, here is an example.

API

Props

The Heatmap component’s props.