Heatmap layer no zoom compensation (heatmap helper)

This example shows how to add a heatmap layer onto a map without adjusting the radius based on the zoom level. To achieve this, we utilize the heatmap layer helper. You can access the sample data by downloading the US schools example data.

By disabling the .zoomCompensation, we ensure that the size of the data points is solely determined by their corresponding property, rather than being influenced by the zoom level.

This heatmap map approach is particularly suitable for visualizations that are either fixed at a certain zoom level or have a limited range of zoom levels.


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: 11.51,
    center: [-81.4158, 28.5213],
    style: MapStyle.DATAVIZ.LIGHT
});

map.on('load', async function () {
  await helpers.addHeatmap(map, {
    data: 'schools.geojson',
    property: "students",
    zoomCompensation: false,
    radius: [
      {propertyValue: 500, value: 20},
      {propertyValue: 6000, value: 200},
    ],
  });
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Heatmap layer no zoom compensation (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: 11.51,
        center: [-81.4158, 28.5213],
        style: maptilersdk.MapStyle.DATAVIZ.LIGHT
    });

    map.on('load', async function () {
      await maptilersdk.helpers.addHeatmap(map, {
        data: 'schools.geojson',
        property: "students",
        zoomCompensation: false,
        radius: [
          {propertyValue: 500, value: 20},
          {propertyValue: 6000, value: 200},
        ],
      });
    });

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

Heatmap layer no zoom compensation (heatmap helper)

main.js

index.html

style.css

Heatmap layer (heatmap helper)

Create a heatmap layer

Heatmap layer min and max zoom (heatmap helper)

Point layer cluster (point helper)

Heatmap layer no zoom compensation (heatmap helper)

NPM module setup

main.js

index.html

style.css

Basic JavaScript setup

Related examples

Heatmap layer (heatmap helper)

Create a heatmap layer

Heatmap layer min and max zoom (heatmap helper)

Point layer cluster (point helper)