---
title: "Point layer disabled zoom compensation (point helper) | JavaScript maps SDK"
description: "Disable zoom compensation for point layer using helper."
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Point layer disabled zoom compensation (point helper)

This example demonstrates the process of incorporating a layer of points onto the map by utilizing the point layer helper while keeping zoom compensation disabled. Obtain the [USA school’s sample data](../../assets/schools.geojson).

In this particular example, the size of the points is adjusted based on the quantity of students enrolled in each school. It is advisable to view this map at zoom level 12 since zoom compensation has been deactivated.

### NPM module setup

```bash
npm install --save @maptiler/sdk
```

#### main.js

```js
import { Map, MapStyle, config, ColorRampCollection, 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: 12,
    center: [-73.99807, 40.71265],
    style: MapStyle.DATAVIZ.DARK
});

map.on('load', async function () {
  await helpers.addPoint(map, {
    data: 'schools.geojson',
    property: "students",
    pointColor: ColorRampCollection.PORTLAND.scale(200, 2000).resample("ease-out-sqrt"),
    pointOpacity: 0.8,
    minPointRadius: 6,
    maxPointRadius: 30,
    showLabel: true,
    zoomCompensation: false,
  });
});
```

#### index.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Point layer disabled zoom compensation (point 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

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

### Basic JavaScript setup

```html
<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>Point helper</title>
<script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.2.0/maptiler-sdk.umd.min.js"></script>
<link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.2.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: 12,
        center: [-73.99807, 40.71265],
        style: maptilersdk.MapStyle.DATAVIZ.DARK
    });

    map.on('load', async function () {
      await maptilersdk.helpers.addPoint(map, {
        data: 'schools.geojson',
        property: "students",
        pointColor: maptilersdk.ColorRampCollection.PORTLAND.scale(200, 2000).resample("ease-out-sqrt"),
        pointOpacity: 0.8,
        minPointRadius: 6,
        maxPointRadius: 30,
        showLabel: true,
        zoomCompensation: false,
      });
    });

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

## Related examples

### [Point layer cluster (point helper)](https://docs.maptiler.com/sdk-js/examples/helper-point-cluster/)

Examples

Add clustered point layer using MapTiler point helper.

### [Heatmap layer (heatmap helper)](https://docs.maptiler.com/sdk-js/examples/helper-heatmap-minimal/)

Examples

Quickly add a heatmap layer using the heatmap helper.

### [Point layer (point helper)](https://docs.maptiler.com/sdk-js/examples/helper-point-minimal/)

Examples

Add minimal point layer using MapTiler point helper.

### [Color ramp resampling (color ramp)](https://docs.maptiler.com/sdk-js/examples/color-ramp-resample/)

Examples

Visualize point layers by resampling existing map color ramps.
