Skip to content

3D Terrain

Go beyond hillshade and show elevation in actual 3D.

<!DOCTYPE html>
<html lang="en">

    <head>
        <title>3D Terrain</title>
        <meta property="og:description" content="Go beyond hillshade and show elevation in actual 3D." />
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/trackasia-gl.css" />
        <script src="https://unpkg.com/[email protected]/dist/trackasia-gl.js"></script>
        <style>
            body {
                margin: 0;
                padding: 0;
            }

            html,
            body,
            #map {
                height: 100%;
            }
        </style>
    </head>

    <body>
        <div id="map"></div>
        <script>
            const 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://tiles.track-asia.com/sats/v2/{z}/{x}/{y}.jpg?key=public_key",
                            ],
                            tileSize: 256,
                            attribution: "&copy; OpenStreetMap Contributors",
                            maxzoom: 16,
                        },
                        // 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>