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.


npm install --save @maptiler/leaflet-maptilersdk leaflet

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>How to create a heatmap layer in Leaflet | NPM example</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="map"></div>
  <script type="module" src="./main.js"></script>
</body>
</html>

style.css

#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Vector Tiles in Leaflet JS</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js"></script>
    <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" rel="stylesheet" />
    <script src="https://cdn.maptiler.com/leaflet-maptilersdk/v4.1.0/leaflet-maptilersdk.umd.min.js"></script>
    <style>
      #map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      const map = L.map('map').setView([37.999, -119.715], 7);
      const mtLayer = L.maptiler.maptilerLayer({
        apiKey: 'YOUR_MAPTILER_API_KEY_HERE',
        style: L.maptiler.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',
        });

      });
    </script>
  </body>
</html>

Replace YOUR_MAPTILER_API_KEY_HERE with your own API key. Make sure to secure the key before you publish it.