Heatmap layer min and max zoom (heatmap helper)

In this example, we will illustrate the process of configuring the minimum and maximum zoom levels for a heatmap layer. To achieve this, we will utilize the heatmap layer helper. You can access the earthquake sample data required for this exercise.

When setting the maximum zoom level, the heatmap will gradually appear (fade-in), starting at -.25z after reaching the minimum zoom level. Similarly, as the maximum zoom level is approached, the heatmap will gradually fade-out by 0.25z.


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: 7.92,
    center: [-118.609, 37.54],
    style: MapStyle.DATAVIZ.LIGHT
});

map.on('load', async function () {
  await helpers.addHeatmap(map, {
    data: 'YOUR_MAPTILER_DATASET_ID_HERE',
    minzoom: 6,
    maxzoom: 8,
  });
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Heatmap layer min and max zoom (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: 7.92,
        center: [-118.609, 37.54],
        style: maptilersdk.MapStyle.DATAVIZ.LIGHT
    });

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

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