HeatmapLayer is a style layer that renders a heatmap visualization of point data.
Mapbox Style Specification
Props
A unique identifier for the layer.
If true, references an existing layer in the style.
sourceID
string
default:"Mapbox.StyleSource.DefaultSourceID"
The source from which to obtain data.
Identifier of the layer within the source.
Inserts the layer above the specified layer ID.
Inserts the layer below the specified layer ID.
slot
'bottom' | 'middle' | 'top'
The slot this layer is assigned to. v11 only
Minimum zoom level for layer visibility.
Maximum zoom level for layer visibility.
Filters features based on a condition.
Customizable style attributes.
Style Properties
style.visibility
'visible' | 'none'
default:"visible"
Controls layer visibility.
Radius of influence of one heatmap point in pixels. Increasing the value makes the heatmap smoother, but less detailed. Minimum: 1
A measure of how much an individual point contributes to the heatmap. Minimum: 0
Similar to heatmap-weight but controls the intensity globally rather than per point. Minimum: 0
style.heatmapColor
string
default:"interpolate expression"
Defines the color of each pixel based on its density value.
The global opacity at which the heatmap layer will be drawn. Range: 0-1.
Example
import { MapView, ShapeSource, HeatmapLayer } from '@rnmapbox/maps';
const points = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-122.4, 37.8],
},
properties: { intensity: 0.5 },
},
// ... more points
],
};
function Map() {
return (
<MapView>
<ShapeSource id="points" shape={points}>
<HeatmapLayer
id="heatmap"
style={{
heatmapRadius: 40,
heatmapWeight: ['get', 'intensity'],
heatmapIntensity: 1,
heatmapColor: [
'interpolate',
['linear'],
['heatmap-density'],
0, 'rgba(33,102,172,0)',
0.2, 'rgb(103,169,207)',
0.4, 'rgb(209,229,240)',
0.6, 'rgb(253,219,199)',
0.8, 'rgb(239,138,98)',
1, 'rgb(178,24,43)',
],
heatmapOpacity: 0.8,
}}
/>
</ShapeSource>
</MapView>
);
}