diff --git a/docs/assets/examples/globe-3d-terrain-satellite.png b/docs/assets/examples/globe-3d-terrain-satellite.png
new file mode 100644
index 0000000000..c998876a24
Binary files /dev/null and b/docs/assets/examples/globe-3d-terrain-satellite.png differ
diff --git a/test/examples/globe-3d-terrain-satellite.html b/test/examples/globe-3d-terrain-satellite.html
new file mode 100644
index 0000000000..3ab304f06e
--- /dev/null
+++ b/test/examples/globe-3d-terrain-satellite.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Globe with 3d terrain and hybrid satellite</title>
+    <meta property="og:description" content="Globe with 3D terrain elevation and hybrid satellite tiles." />
+    <meta charset='utf-8'>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel='stylesheet' href='../../dist/maplibre-gl.css' />
+    <script src='../../dist/maplibre-gl-dev.js'></script>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+
+        html,
+        body,
+        #map {
+            height: 100%;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="map"></div>
+    <script type="module">
+        const map = (window.map = new maplibregl.Map({
+            container: 'map',
+            zoom: 10,
+            center: [11.39085, 47.27574],
+            maxPitch: 180,
+            pitch: 60,
+            maxZoom: 18,
+            maxPitch: 85
+        }));
+
+
+        map.setStyle('https://tiles.stadiamaps.com/styles/alidade_satellite.json', {
+            transformStyle: (previousStyle, nextStyle) => {
+                nextStyle.projection = { type: 'globe' }
+                nextStyle.sources = {
+                    ...nextStyle.sources, terrainSource: {
+                        type: 'raster-dem',
+                        url: 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',
+                        tileSize: 256
+                    },
+                    hillshadeSource: {
+                        type: 'raster-dem',
+                        url: 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',
+                        tileSize: 256
+                    }
+                }
+                nextStyle.terrain = {
+                    source: 'terrainSource',
+                    exaggeration: 1
+                }
+
+                nextStyle.sky = {}
+
+                nextStyle.layers.push({
+                    id: 'hills',
+                    type: 'hillshade',
+                    source: 'hillshadeSource',
+                    layout: { visibility: 'visible' },
+                    paint: { 'hillshade-shadow-color': '#473B24' }
+                })
+
+                return nextStyle
+            }
+        })
+
+
+        map.addControl(
+            new maplibregl.NavigationControl({
+                visualizePitch: true,
+                showZoom: true,
+                showCompass: true
+            })
+        );
+
+        map.addControl(
+            new maplibregl.TerrainControl({
+                source: 'terrainSource',
+                exaggeration: 1
+            })
+        );
+    </script>
+</body>
+
+</html>
