---
title: "Point layer colored and sized according to a property (point helper) | JavaScript maps SDK"
description: "Style point layer by property using point 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 colored and sized according to a property (point helper)
This example illustrates the process of incorporating a point layer into a map, with the color and size of the points determined by the “mag” property, which represents the magnitude of earthquakes. To achieve this, we utilize the point layer helper. To access the sample data necessary for this exercise, please download the [earthquake sample data](../../assets/earthquakes.geojson).
In this particular case, we have opted to establish magnitude boundaries ranging between 1 and 5.
### 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: 4.30,
center: [-167.99, 52.7],
style: MapStyle.DATAVIZ.LIGHT
});
map.on('load', async function () {
await helpers.addPoint(map, {
data: 'YOUR_MAPTILER_DATASET_ID_HERE',
property: "mag",
pointColor: ColorRampCollection.VIRIDIS.scale(1, 5),
});
});
```
#### index.html
```html
Point layer colored and sized according to a property (point helper) | NPM example
```
#### style.css
```css
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
```
### Basic JavaScript setup
```html
Point helper
```
## 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.