---
title: "Custom color ramp (color ramp) | JavaScript maps SDK"
description: "Visualize point layers by creating custom map color ramps."
---
> 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.
# Custom color ramp (color ramp)
This example shows how to create a custom color ramp and use it to visualize a point layer. Download the sample data [here](../../assets/schools.geojson).
### NPM module setup
```bash
npm install --save @maptiler/sdk
```
#### main.js
```js
import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
container: 'map',
zoom: 11.6,
center: [-119.807, 36.7828],
style: MapStyle.DATAVIZ.DARK
});
const myCustomRamp = new maptilersdk.ColorRamp({
stops: [
{ value: 100, color: [252, 222, 156] },
{ value: 500, color: [250, 164, 118] },
{ value: 1000, color: [240, 116, 110] },
{ value: 1500, color: [227, 79, 111] },
{ value: 2000, color: [220, 57, 119] },
{ value: 3000, color: [185, 37, 122] },
{ value: 4000, color: [124, 29, 111] },
]
});
map.on('load', async function () {
await maptilersdk.helpers.addPoint(map, {
data: 'schools.geojson',
property: "students",
pointColor: myCustomRamp,
pointOpacity: 0.7,
minPointRadius: 1,
maxPointRadius: 100,
showLabel: true,
});
});
```
#### index.html
```html
Custom color ramp (color ramp) | NPM example
```
#### style.css
```css
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
```
### Basic JavaScript setup
```html
Color ramp
```
## Related examples
### [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.
### [Polygon color ramp symbol (polygon helper)](https://docs.maptiler.com/sdk-js/examples/helper-polygon-ramped-style/)
Examples
Style polygon fill color based on zoom level.
### [Line color ramp symbol (polyline helper)](https://docs.maptiler.com/sdk-js/examples/helper-polyline-ramped-style/)
Examples
Style line color based on map zoom level.