---
title: "How to create a heatmap layer in Leaflet | Leaflet"
description: "Create heatmap layers in Leaflet using the maptilersdk plugin."
---
> 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.
# How to create a heatmap layer in Leaflet
Learn how to create a heatmap layer in Leaflet JavaScript library using the leaflet-maptilersdk plugin.
In this example, the heatmap layer is zoom-compensated and as a result the blobs roughly maintain their size in world-scale as we zoom-in/out. Download the [earthquake sample data](https://docs.maptiler.com/sdk-js/assets/earthquakes.geojson).
### NPM module setup
```bash
npm install --save @maptiler/leaflet-maptilersdk leaflet
```
#### main.js
```js
import { MaptilerLayer, MapStyle } from '@maptiler/leaflet-maptilersdk';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
const map = L.map('map').setView([37.999, -119.715], 7);
const mtLayer = new MaptilerLayer({
apiKey: 'YOUR_MAPTILER_API_KEY_HERE',
style: MapStyle.DATAVIZ.LIGHT, // optional
}).addTo(map);
mtLayer.on("ready", () => {
// Leverage the MapTiler SDK layer helpers to easily add polyline / point / polygon / heatmap layers
mtLayer.addHeatmap({
data: 'earthquakes.geojson',
});
});
```
#### index.html
```html
How to create a heatmap layer in Leaflet | NPM example
```
#### style.css
```css
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
```
### Basic JavaScript setup
```html
Vector Tiles in Leaflet JS
```
Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/credentials/api-key/#secure-key) before you publish it.
## Learn more
Check out the [Heatmap Layer Helper](https://docs.maptiler.com/sdk-js/api/helpers/#heatmap) documentation and look at the [Heatmap Helper examples](https://docs.maptiler.com/sdk-js/examples/?q=heatmap+helper) to see the visualization possibilities.
## Related examples
### [Display thousands of lines in Leaflet](https://docs.maptiler.com/leaflet/examples/helpers-polyline/)
Examples
Display thousands of lines efficiently in Leaflet using maptilersdk.
### [Display thousands of polygons in Leaflet](https://docs.maptiler.com/leaflet/examples/helpers-polygon/)
Examples
Display thousands of polygons efficiently in Leaflet using maptilersdk.
### [Plotting millions of points in Leaflet](https://docs.maptiler.com/leaflet/examples/helpers-point/)
Examples
Display millions of points efficiently in Leaflet using maptilersdk.
### [Points as cluster](https://docs.maptiler.com/leaflet/examples/cluster/)
Examples
Visualize data points as cluster maps using Leaflet JS.