---
title: "How to set Sky, Fog, Terrain | JavaScript maps SDK"
description: "Create a map with sky, fog and 3D terrain."
---
> 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.
# How to set Sky, Fog, Terrain
This tutorial shows how to create a map with sky, fog, and terrain and display it on a web page using MapTiler.
These features help improve the visual quality of your maps and create a more realistic environment. Adding fog and a dynamic sky enhances depth, while terrain makes elevation more visible, resulting in a more engaging map experience.
### 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', // container's id or the HTML element in which the SDK will render the map
style: MapStyle.HYBRID,
center: [8.02912, 46.53248], // starting position [lng, lat]
zoom: 13.16, // starting zoom
bearing: 0,
pitch: 76,
hash: true,
maxPitch: 85,
terrainControl: true,
terrain: true
});
function setSkyFromUi() {
// if sky should not be enabled set sky to undefined
if (!document.getElementById('sky-enabled').checked) {
map.setSky(undefined);
return;
}
// setSky from UI (takes values from sliders)
map.setSky({
'sky-color': document.getElementById('sky-color-picker').value,
'sky-horizon-blend': +document.getElementById('sky-horizon-blend-slider').value,
'horizon-color': document.getElementById('horizon-color-picker').value,
'horizon-fog-blend': +document.getElementById('horizon-fog-blend-slider').value,
'fog-color': document.getElementById('fog-color-picker').value,
'fog-ground-blend': +document.getElementById('fog-ground-blend-slider').value
});
}
map.on('load', () => {
document.getElementById('sky-color-picker').addEventListener('change', setSkyFromUi);
document.getElementById('horizon-color-picker').addEventListener('change', setSkyFromUi);
document.getElementById('fog-color-picker').addEventListener('change', setSkyFromUi);
document.getElementById('sky-horizon-blend-slider').addEventListener('change', setSkyFromUi);
document.getElementById('horizon-fog-blend-slider').addEventListener('change', setSkyFromUi);
document.getElementById('fog-ground-blend-slider').addEventListener('change', setSkyFromUi);
document.getElementById('sky-enabled').addEventListener('change', setSkyFromUi);
setSkyFromUi();
});
```
#### index.html
```html
Set Sky, Fog, Terrain
```
## Related examples
### [Display marker](https://docs.maptiler.com/sdk-js/examples/default-marker/)
Tutorials
Learn how to add a default marker to your map.
### [3D terrain map](https://docs.maptiler.com/sdk-js/examples/3d-map/)
Tutorials
Create and display 3D terrain maps on web pages.
### [Switch from Mapbox](https://docs.maptiler.com/sdk-js/examples/switch-from-mapbox/)
Tutorials
Guide for migrating from Mapbox GL JS to MapTiler SDK.
### [Switch from MapLibre](https://docs.maptiler.com/sdk-js/examples/switch-from-maplibre/)
Tutorials
Steps to switch from MapLibre GL JS to MapTiler SDK.