3D Terrain | TrackAsia GL JS Docs

Use 3D terrain to show mountains and valleys.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>3D Terrain</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://unpkg.com/trackasia-gl@1.0.5/dist/trackasia-gl.js"></script>
<link href="https://unpkg.com/trackasia-gl@1.0.5/dist/trackasia-gl.css" rel="stylesheet" />
<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = (window.map = new trackasiagl.Map({
container: 'map',
zoom: 12,
center: [11.39085, 47.27574],
pitch: 52,
hash: true,
style: {
version: 8,
sources: {
osm: {
type: 'raster',
tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
tileSize: 256,
attribution: '&copy; OpenStreetMap Contributors',
maxzoom: 19
},
// Use a different source for terrain and hillshade layers, to improve render quality
terrainSource: {
type: 'raster-dem',
url: 'https://static.track-asia.com/demotiles/terrain-tiles/tiles.json?key=public_key',
tileSize: 256
},
hillshadeSource: {
type: 'raster-dem',
url: 'https://static.track-asia.com/demotiles/terrain-tiles/tiles.json?key=public_key',
tileSize: 256
}
},
layers: [
{
id: 'osm',
type: 'raster',
source: 'osm'
},
{
id: 'hills',
type: 'hillshade',
source: 'hillshadeSource',
layout: { visibility: 'visible' },
paint: { 'hillshade-shadow-color': '#473B24' }
}
],
terrain: {
source: 'terrainSource',
exaggeration: 1
}
},
maxZoom: 18,
maxPitch: 85
}));
 
map.addControl(
new trackasiagl.NavigationControl({
visualizePitch: true,
showZoom: true,
showCompass: true
})
);
 
map.addControl(
new trackasiagl.TerrainControl({
source: 'terrainSource',
exaggeration: 1
})
);
</script>
 
</body>
</html>