---
title: "Color ramp resampling (color ramp) | JavaScript maps SDK"
description: "Visualize point layers by resampling existing map color ramps."
---
# Color ramp resampling (color ramp)
This example shows how to resample a color ramp and use it to visualize a point layer. Download the sample data [here](../../assets/schools.geojson).
Select between different resampling methods or no resampling to compare point layer visualizations.
### NPM module setup
```bash
npm install --save @maptiler/sdk
```
#### main.js
```js
import { Map, MapStyle, config, ColorRampCollection } 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,
center: [-73.97402, 40.73302],
style: MapStyle.DATAVIZ.LIGHT
});
const ramp = ColorRampCollection.PORTLAND.scale(300, 4000);
const ramp_sqrt = ColorRampCollection.PORTLAND.scale(300, 4000).resample("ease-out-sqrt");
const ramp_exp = ColorRampCollection.PORTLAND.scale(300, 4000).resample("ease-out-exp");
let layers;
map.on('load', async function () {
await createColorRampLayer(ramp_sqrt, 'sqrt');
});
document.getElementById('resample-method').addEventListener('change', function(evt) {
const method = this.value;
mapRemoveLayers();
switch (method) {
case 'lineal':
createColorRampLayer(ramp, method);
break;
case 'sqrt':
createColorRampLayer(ramp_sqrt, method);
break;
case 'exp':
createColorRampLayer(ramp_exp, method);
break;
default:
createColorRampLayer(ramp, "lineal");
break;
}
});
async function createColorRampLayer(colorRamp, name) {
const rampLayers = await maptilersdk.helpers.addPoint(map, {
layerId: `school_color_ramp_${name}`,
data: 'schools.geojson',
property: "students",
pointColor: colorRamp,
pointOpacity: 0.7,
minPointRadius: 15,
showLabel: true,
});
layers = rampLayers;
}
function mapRemoveLayers() {
Object.keys(layers).forEach(item => {
if (layers[item] !== "") {
if (map.getLayer(layers[item])) map.removeLayer(layers[item]);
}
})
}
```
#### index.html
```html
Color ramp resampling (color ramp) | NPM example
No resample
Square root
Exponential
```
#### style.css
```css
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
#resample-method {position: absolute; top: 10px; left: 10px; z-index: 1000;}
```
### Basic JavaScript setup
```html
Color ramp
No resample
Square root
Exponential
```
## Related examples
### [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.
### [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.