Skip to content
Home
Maptoolkit Maps JS
Examples
Display a Hybrid Satellite Map with Terrain Elevation

Display a Hybrid Satellite Map with Terrain Elevation

Combine raster satellite tiles with 3D terrain elevation.

const API_KEY = 'toursprung';

    const map = new maptoolkit.Map({
        container: 'map',
        zoom: 12,
        center: [11.39085, 47.27574],
        pitch: 70,
        maxPitch: 85,
        attributionControl: { compact: false }
    });

    map.setStyle(`https://static.maptoolkit.net/styles/toursprung/terrain.json?api_key=${API_KEY}`, {
        transformStyle: (previousStyle, nextStyle) => {
            nextStyle.sources = {
                ...nextStyle.sources,
                // Sentinel-2 cloudless satellite imagery from EOX
                satelliteSource: {
                    type: 'raster',
                    tiles: [
                        'https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2020_3857/default/g/{z}/{y}/{x}.jpg'
                    ],
                    tileSize: 256
                },
                // Maptoolkit terrarium-encoded DEM for 3D terrain
                terrainSource: {
                    type: 'raster-dem',
                    tiles: [`https://vtc-cdn.maptoolkit.net/terrain/{z}/{x}/{y}.webp?api_key=${API_KEY}`],
                    tileSize: 256,
                    minzoom: 5,
                    maxzoom: 12,
                    encoding: 'terrarium'
                },
                hillshadeSource: {
                    type: 'raster-dem',
                    tiles: [`https://vtc-cdn.maptoolkit.net/terrain/{z}/{x}/{y}.webp?api_key=${API_KEY}`],
                    tileSize: 256,
                    minzoom: 5,
                    maxzoom: 12,
                    encoding: 'terrarium'
                }
            };

            nextStyle.terrain = {
                source: 'terrainSource',
                exaggeration: 1
            };

            // Add hillshade on top of satellite for terrain relief
            nextStyle.layers.push({
                id: 'hills',
                type: 'hillshade',
                source: 'hillshadeSource',
                layout: { visibility: 'visible' },
                paint: { 'hillshade-shadow-color': '#473B24' }
            });

            // Insert satellite layer below the first non-fill, non-background layer
            // so that vector labels and roads render on top of the satellite imagery
            const firstNonFillLayer = nextStyle.layers.find(
                layer => layer.type !== 'fill' && layer.type !== 'background'
            );
            nextStyle.layers.splice(nextStyle.layers.indexOf(firstNonFillLayer), 0, {
                id: 'satellite',
                type: 'raster',
                source: 'satelliteSource',
                layout: { visibility: 'visible' },
                paint: { 'raster-opacity': 1 }
            });

            return nextStyle;
        }
    });

    map.addControl(new maptoolkit.NavigationControl({
        visualizePitch: true,
        showZoom: true,
        showCompass: true
    }), 'top-right');
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Display a Hybrid Satellite Map with Terrain Elevation – Maptoolkit Maps JS</title>
    <meta property="og:description" content="Combine raster satellite tiles with 3D terrain elevation." />
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/@maptoolkit/maps@11.0.0-beta.2/dist/maptoolkit.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@maptoolkit/maps@11.0.0-beta.2/dist/maptoolkit.css" />
    <style>
        html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
        #map { width: 100%; height: 100%; }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    const API_KEY = 'toursprung';

    const map = new maptoolkit.Map({
        container: 'map',
        zoom: 12,
        center: [11.39085, 47.27574],
        pitch: 70,
        maxPitch: 85,
        attributionControl: { compact: false }
    });

    map.setStyle(`https://static.maptoolkit.net/styles/toursprung/terrain.json?api_key=${API_KEY}`, {
        transformStyle: (previousStyle, nextStyle) => {
            nextStyle.sources = {
                ...nextStyle.sources,
                // Sentinel-2 cloudless satellite imagery from EOX
                satelliteSource: {
                    type: 'raster',
                    tiles: [
                        'https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2020_3857/default/g/{z}/{y}/{x}.jpg'
                    ],
                    tileSize: 256
                },
                // Maptoolkit terrarium-encoded DEM for 3D terrain
                terrainSource: {
                    type: 'raster-dem',
                    tiles: [`https://vtc-cdn.maptoolkit.net/terrain/{z}/{x}/{y}.webp?api_key=${API_KEY}`],
                    tileSize: 256,
                    minzoom: 5,
                    maxzoom: 12,
                    encoding: 'terrarium'
                },
                hillshadeSource: {
                    type: 'raster-dem',
                    tiles: [`https://vtc-cdn.maptoolkit.net/terrain/{z}/{x}/{y}.webp?api_key=${API_KEY}`],
                    tileSize: 256,
                    minzoom: 5,
                    maxzoom: 12,
                    encoding: 'terrarium'
                }
            };

            nextStyle.terrain = {
                source: 'terrainSource',
                exaggeration: 1
            };

            // Add hillshade on top of satellite for terrain relief
            nextStyle.layers.push({
                id: 'hills',
                type: 'hillshade',
                source: 'hillshadeSource',
                layout: { visibility: 'visible' },
                paint: { 'hillshade-shadow-color': '#473B24' }
            });

            // Insert satellite layer below the first non-fill, non-background layer
            // so that vector labels and roads render on top of the satellite imagery
            const firstNonFillLayer = nextStyle.layers.find(
                layer => layer.type !== 'fill' && layer.type !== 'background'
            );
            nextStyle.layers.splice(nextStyle.layers.indexOf(firstNonFillLayer), 0, {
                id: 'satellite',
                type: 'raster',
                source: 'satelliteSource',
                layout: { visibility: 'visible' },
                paint: { 'raster-opacity': 1 }
            });

            return nextStyle;
        }
    });

    map.addControl(new maptoolkit.NavigationControl({
        visualizePitch: true,
        showZoom: true,
        showCompass: true
    }), 'top-right');
</script>
</body>
</html>
Display a Globe with an AtmosphereDisplay a Non-Interactive Map