---
title: "Change a layer's color with buttons | JavaScript maps SDK"
description: "Change layer fill colors dynamically using the setPaintProperty method."
---
> 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.
# Change a layer’s color with buttons
Use [`setPaintProperty`](https://docs.maptiler.com/sdk-js/api/map/#map#setpaintproperty) to change a layer’s fill color.
### 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',
style: MapStyle.BASE,
center: [12.338, 45.4385],
zoom: 17.4
});
const swatches = document.getElementById('swatches');
const layer = document.getElementById('layer');
const colors = [
'#ffffcc',
'#a1dab4',
'#41b6c4',
'#2c7fb8',
'#253494',
'#fed976',
'#feb24c',
'#fd8d3c',
'#f03b20',
'#bd0026'
];
colors.forEach(function (color) {
const swatch = document.createElement('button');
swatch.style.backgroundColor = color;
swatch.addEventListener('click', function () {
map.setPaintProperty(layer.value, 'fill-color', color);
});
swatches.appendChild(swatch);
});
```
#### index.html
```html
Change a layer's color with buttons
```
#### style.css
```css
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
```
### Basic JavaScript setup
```html
Change a layer's color with buttons
```
## Related examples
### [Change color based on zoom level](https://docs.maptiler.com/sdk-js/examples/change-building-color-based-on-zoom-level/)
Examples
Dynamically adjust 3D building colors based on zoom levels.
### [Style lines with a data-driven property](https://docs.maptiler.com/sdk-js/examples/data-driven-lines/)
Examples
Create visualizations using data expressions for line colors.
### [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.
### [Point layer colored and sized according to a property (point helper)](https://docs.maptiler.com/sdk-js/examples/helper-point-property-style/)
Examples
Style point layer by property using point helper.