Heatmap layer opacity (heatmap helper)

This example demonstrates the process of incorporating a heatmap layer onto the map while customizing its opacity. To accomplish this, the heatmap layer helper is employed. To replicate this example, download the earthquake sample data.

In this particular instance, we modify the layer’s transparency based on the zoom level.


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: 8.8,
    center: [-116.783, 33.5211],
    style: MapStyle.DATAVIZ.DARK
});

map.on('load', async function () {
  await helpers.addHeatmap(map, {
    data: 'YOUR_MAPTILER_DATASET_ID_HERE',
    opacity: [
      {zoom: 3, value: 0 }, // fade in
      {zoom: 4, value: 1 }, // full opacity
      {zoom: 5, value: 0.75 }, // 75% opacity
      {zoom: 8, value: 0.50 }, // 50% opacity
      {zoom: 11, value: 0 }, // fade out
    ],
  });
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Heatmap layer opacity (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: 8.8,
        center: [-116.783, 33.5211],
        style: maptilersdk.MapStyle.DATAVIZ.DARK
    });

    map.on('load', async function () {
      await maptilersdk.helpers.addHeatmap(map, {
        data: 'YOUR_MAPTILER_DATASET_ID_HERE',
        opacity: [
          {zoom: 3, value: 0 }, // fade in
          {zoom: 4, value: 1 }, // full opacity
          {zoom: 5, value: 0.75 }, // 75% opacity
          {zoom: 8, value: 0.50 }, // 50% opacity
          {zoom: 11, value: 0 }, // fade out
        ],
      });
    });

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