3D Terrain
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: '© 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>