---
title: "Change building color based on zoom level | JavaScript maps SDK"
description: "Dynamically adjust 3D building colors based on zoom levels."
---
# Change building color based on zoom level
Use the [`interpolate` expression](https://docs.maptiler.com/gl-style-specification/expressions/#interpolate) to ease-in the building layer and smoothly fade from one color to the next.
### 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: [-90.73414, 14.55524],
zoom: 13
});
map.on('load', function () {
map.setPaintProperty('Building', 'fill-color', [
'interpolate',
['exponential', 0.5],
['zoom'],
15,
'#e2714b',
22,
'#eee695'
]);
map.setPaintProperty('Building', 'fill-opacity', [
'interpolate',
['exponential', 0.5],
['zoom'],
15,
0,
22,
1
]);
});
document.getElementById('zoom').addEventListener('click', function () {
map.zoomTo(19, { duration: 9000 });
});
```
#### index.html
```html
Change building color based on zoom level
```
#### style.css
```css
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
```
### Basic JavaScript setup
```html
Change building color based on zoom level
```
## Related examples
### [Change a layer's color with buttons](https://docs.maptiler.com/sdk-js/examples/color-switcher/)
Examples
Change layer fill colors dynamically using the setPaintProperty method.
### [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.