---
title: "Scale point radius based on the zoom level (point helper) | JavaScript maps SDK"
description: "Scale point layer radius by map zoom level."
---

# Scale point radius based on the zoom level (point helper)

This example shows the method of adjusting the size of a point layer based on the zoom level of the map using the point layer helper. By utilizing this technique, you can easily scale the radius of the point layer by the zoom level. To replicate this example, download the [earthquake sample data](../../assets/earthquakes.geojson).

### NPM module setup

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

#### main.js

```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: 6.30,
    center: [-119.602, 35.732],
    style: MapStyle.DATAVIZ.LIGHT
});

map.on('load', async function () {
  await helpers.addPoint(map, {
    data: 'YOUR_MAPTILER_DATASET_ID_HERE',
    pointRadius: [
      {zoom: 2, value: 1 },
      {zoom: 8, value: 6 },
      {zoom: 12, value: 10 },
    ],
    pointColor: "red",
  });
});
```

#### index.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Scale point radius based on the zoom level (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: 6.30,
        center: [-119.602, 35.732],
        style: maptilersdk.MapStyle.DATAVIZ.LIGHT
    });

    map.on('load', async function () {
      await maptilersdk.helpers.addPoint(map, {
        data: 'YOUR_MAPTILER_DATASET_ID_HERE',
        pointRadius: [
          {zoom: 2, value: 1 },
          {zoom: 8, value: 6 },
          {zoom: 12, value: 10 },
        ],
        pointColor: "red",
      });
    });

</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.

### [Point layer scaled radius by property (point helper)](https://docs.maptiler.com/sdk-js/examples/helper-point-ramped-property/)

Examples

Scale point layer radius and color by property.
