---
title: "Heatmap layer (heatmap helper) | JavaScript maps SDK"
description: "Quickly add a heatmap layer using the heatmap helper."
---
> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# Heatmap layer (heatmap helper)
This example shows the process of adding a heatmap layer onto the map by using the heatmap layer helper with its default settings. To replicate this example, download the [earthquake sample data](../../assets/earthquakes.geojson).
A **heatmap map** is a visual representation of data values using different colors to indicate their magnitude within a dataset. In certain scenarios, like crime analytics, the color in a heatmap is used to represent the density of data points rather than the specific value associated with each point.
In this particular example, the heatmap layer is designed to compensate for zooming, which means that the size of the blobs remains relatively consistent when we zoom in or out on a global scale. This behavior is the standard default setting.
### NPM module setup
```bash
npm install --save @maptiler/sdk
```
#### main.js
```js
import { Map, MapStyle, config, helpers } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
container: 'map',
zoom: 6.56,
center: [-119.715, 37.999],
style: MapStyle.DATAVIZ.LIGHT
});
map.on('load', async function () {
await helpers.addHeatmap(map, {
data: 'YOUR_MAPTILER_DATASET_ID_HERE',
});
});
```
#### index.html
```html
Heatmap layer (heatmap helper) | NPM example
```
#### style.css
```css
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
```
### Basic JavaScript setup
```html
Heatmap helper
```
## Related examples
### [Heatmap layer custom radius by property (heatmap helper)](https://docs.maptiler.com/sdk-js/examples/helper-heatmap-ramped-radius-property/)
Examples
Apply property-ramping radius configurations to heatmap layers.
### [Create a heatmap layer](https://docs.maptiler.com/sdk-js/examples/heatmap-layer/)
Examples
Visualize point data frequency using a custom heatmap layer.
### [Heatmap layer opacity (heatmap helper)](https://docs.maptiler.com/sdk-js/examples/helper-heatmap-opacity/)
Examples
Customize the opacity of your heatmap layer visualization.
### [Point layer cluster (point helper)](https://docs.maptiler.com/sdk-js/examples/helper-point-cluster/)
Examples
Add clustered point layer using MapTiler point helper.