---
title: "Line color ramp symbol (polyline helper) | JavaScript maps SDK"
description: "Style line color based on map zoom level."
---
# Line color ramp symbol (polyline helper)
This example shows how to add a line layer to a map, utilizing a color ramp symbol that modifies the line color based on the map’s zoom level. To accomplish this, the polyline layer helper is employed. To access the sample data, click on the [NY subway lines sample data](../../assets/NY_Subway_lines.geojson) link.
In this particular example, it’s not only the color of the line change but also the thickness of both the line and its outline dynamically adjusts as the map is zoomed in or out.
### 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: 9.5,
center: [-73.8931, 40.7396],
style: MapStyle.DATAVIZ.LIGHT
});
map.on('load', async function () {
await helpers.addPolyline(map, {
data: 'YOUR_MAPTILER_DATASET_ID_HERE',
outline: true,
lineColor: [
{zoom: 10, value: "#d12d0d"},
{zoom: 11, value: "#d18c0d"},
{zoom: 12, value: "#a0d10d"},
{zoom: 13, value: "#0dd189"},
{zoom: 14, value: "#0d93d1"},
{zoom: 15, value: "#340dd1"},
{zoom: 16, value: "#ba0dd1"},
{zoom: 17, value: "#d10d82"},
{zoom: 18, value: "#d10d20"},
],
lineWidth: [
{zoom: 10, value: 1},
{zoom: 16, value: 10},
],
outlineColor: [
{zoom: 10, value: "#0d93d1"},
{zoom: 14, value: "#d10d20"},
{zoom: 18, value: "#0d93d1"},
],
outlineWidth: [
{zoom: 9, value: 0.5},
{zoom: 13, value: 6},
{zoom: 15, value: 1},
{zoom: 18, value: 8},
]
});
});
```
#### index.html
```html
Line color ramp symbol (polyline helper) | NPM example
```
#### style.css
```css
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
```
### Basic JavaScript setup
```html
Polyline helper
```
## Related examples
### [Line layer (polyline helper)](https://docs.maptiler.com/sdk-js/examples/helper-polyline-minimal/)
Examples
Add minimal line layer using MapTiler polyline helper.
### [Add a GPX Line layer (polyline helper)](https://docs.maptiler.com/sdk-js/examples/helper-polyline-gpx/)
Examples
Add GPX line layer using MapTiler polyline helper.
### [Line outline glow blur symbol (polyline helper)](https://docs.maptiler.com/sdk-js/examples/helper-polyline-blur/)
Examples
Add glowing outline to line layer using helper.
### [Custom color ramp (color ramp)](https://docs.maptiler.com/sdk-js/examples/color-ramp-custom/)
Examples
Visualize point layers by creating custom map color ramps.