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
npm install --save @maptiler/sdk
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();
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<title>Set Sky, Fog, Terrain</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="map"></div>
<table id="listing-group" class="listing-group">
<tr>
<td><label for="sky-enabled"><em></em>nabled</label></td>
<td><input type="checkbox" id="sky-enabled" checked /></td>
</tr>
<tr>
<td><label for="sky-color-picker">sky-color</label></td>
<td><input type="color" id="sky-color-picker" value="#94D6FF" style="width: 100%" /></td>
</tr>
<tr>
<td><label for="horizon-color-picker">horizon-color</label></td>
<td><input type="color" id="horizon-color-picker" value="#20233C" style="width: 100%" /></td>
</tr>
<tr>
<td><label for="fog-color-picker">fog-color</label></td>
<td><input type="color" id="fog-color-picker" value="#6E6E6E" style="width: 100%" /></td>
</tr>
<tr>
<td><label for="sky-horizon-blend-slider">sky-horizon-blend</label></td>
<td><input type="range" id="sky-horizon-blend-slider" min="0" max="1" step="0.01" value="0.4" /></td>
</tr>
<tr>
<td><label for="horizon-fog-blend-slider">horizon-fog-blend</label></td>
<td><input type="range" id="horizon-fog-blend-slider" min="0" max="1" step="0.01" value="0.5" /></td>
</tr>
<tr>
<td><label for="fog-ground-blend-slider">fog-ground-blend</label></td>
<td><input type="range" id="fog-ground-blend-slider" min="0" max="1" step="0.01" value="0.4" /></td>
</tr>
</table>
<script type="module" src="./main.js"></script>
</body>
</html>
body {
margin: 0;
padding: 0;
}
html,
body,
#map {
height: 100%;
}
.listing-group {
font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;
position: absolute;
bottom: 10px;
left: 10px;
color: #333359;
background-color: rgba(255, 255, 255, 0.8);
padding: 10px;
border-radius: 4px;
}
input[type="color"] {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
border-radius: 4px;
background: none;
border: 0;
cursor: pointer;
height: 30px;
padding: 0;
width: 15em;
}
