Heatmap layer custom radius (heatmap helper)

This example shows how to add a heatmap layer to the map by utilizing the heatmap layer helper, along with a customized zoom-ramping radius. You can access the sample data by downloading the US schools example data.

The radius, which can be adjusted based on custom properties, is also internally adjusted in conjunction with zoom values.


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.06,
    center: [-89.755, 35.073],
    style: MapStyle.DATAVIZ.LIGHT
});

map.on('load', async function () {
  await helpers.addHeatmap(map, {
    data: 'schools.geojson',
    radius: [
      {zoom: 2, value: 5 },
      {zoom: 5, value: 10 },
      {zoom: 10, value: 15 },
      {zoom: 15, value: 40 },
      {zoom: 20, value: 100 },
    ],
  });
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Heatmap layer custom radius (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.06,
        center: [-89.755, 35.073],
        style: maptilersdk.MapStyle.DATAVIZ.LIGHT
    });

    map.on('load', async function () {
      await maptilersdk.helpers.addHeatmap(map, {
        data: 'schools.geojson',
        radius: [
          {zoom: 2, value: 5 },
          {zoom: 5, value: 10 },
          {zoom: 10, value: 15 },
          {zoom: 15, value: 40 },
          {zoom: 20, value: 100 },
        ],
      });
    });

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