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.

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 install --save @maptiler/sdk

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Heatmap layer (heatmap helper) | 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

body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heatmap helper</title>
<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" />
<style>
  body {margin: 0; padding: 0;}
  #map {position: absolute; top: 0; bottom: 0; width: 100%;}
</style>
</head>
<body>
<div id="map"></div>

<script>
    maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
    const map = new maptilersdk.Map({
        container: 'map',
        zoom: 6.56,
        center: [-119.715, 37.999],
        style: maptilersdk.MapStyle.DATAVIZ.LIGHT
    });

    map.on('load', async function () {
      await maptilersdk.helpers.addHeatmap(map, {
        data: 'YOUR_MAPTILER_DATASET_ID_HERE',
      });
    });

</script>
</body>
</html>

Heatmap layer (heatmap helper)

main.js

index.html

style.css

Heatmap layer custom radius by property (heatmap helper)

Create a heatmap layer

Heatmap layer opacity (heatmap helper)

Point layer cluster (point helper)

Heatmap layer (heatmap helper)

NPM module setup

main.js

index.html

style.css

Basic JavaScript setup

Related examples

Heatmap layer custom radius by property (heatmap helper)

Create a heatmap layer

Heatmap layer opacity (heatmap helper)

Point layer cluster (point helper)