---
title: "Polygon color ramp symbol (polygon helper) | JavaScript maps SDK"
description: "Style polygon fill color based on zoom level."
---
> 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.
# Polygon color ramp symbol (polygon helper)
This example showcases the procedure of integrating a polygon layer that utilizes a color ramp symbol into a map. This allows for the alteration of the fill color based on the map’s zoom level. To achieve this, the polygon layer helper is employed. You can access the sample data by downloading the [sample data of Switzerland](../../assets/switzerland.geojson).
Furthermore, in this example, we also modify the color of the polygon border depending on the zoom level of the map.
### 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.62,
center: [8.224, 46.823],
style: MapStyle.STREETS
});
map.on('load', async function () {
await helpers.addPolygon(map, {
data: 'YOUR_MAPTILER_DATASET_ID_HERE',
fillColor: [
{zoom: 5, value: "#d12d0d"},
{zoom: 6, value: "#d18c0d"},
{zoom: 7, value: "#a0d10d"},
{zoom: 8, value: "#0dd189"},
{zoom: 9, value: "#0d93d1"},
{zoom: 10, value: "#340dd1"},
],
outline: true,
outlineDashArray: "__ ",
outlineWidth: [
{zoom: 0, value: 0},
{zoom: 3, value: 1},
{zoom: 6, value: 2},
{zoom: 8, value: 4},
{zoom: 15, value: 10},
{zoom: 22, value: 20},
],
outlineColor: [
{zoom: 4, value: "white"},
{zoom: 5, value: "red"},
{zoom: 6, value: "white"},
{zoom: 7, value: "red"},
{zoom: 8, value: "white"},
{zoom: 9, value: "red"},
{zoom: 10, value: "white"},
],
outlinePosition: "inside",
});
});
```
#### index.html
```html
Polygon color ramp symbol (polygon helper) | NPM example
```
#### style.css
```css
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
```
### Basic JavaScript setup
```html
Polygon helper
```
## Related examples
### [Polygon layer (polygon helper)](https://docs.maptiler.com/sdk-js/examples/helper-polygon-minimal/)
Examples
Add minimal polygon layer using MapTiler polygon helper.
### [Polygon fill pattern (polygon helper)](https://docs.maptiler.com/sdk-js/examples/helper-polygon-pattern/)
Examples
Add fill pattern to polygon layer using helper.
### [GeoJSON polygon layer](https://docs.maptiler.com/sdk-js/examples/geojson-polygon/)
Tutorials
Add GeoJSON polygon overlay to your web map application.
### [Show polygon information on click](https://docs.maptiler.com/sdk-js/examples/polygon-popup-on-click/)
Examples
Display a popup when a user clicks a polygon.