Add release testing page for atmosphere and globe view (#11878)

* Add release testing page for atmosphere and globe view
mapbox · May 12, 2022 · c9ecd82 · c9ecd82
1 parent ae2a34a
commit c9ecd82
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 4 deletions.
diff --git a/debug/atmosphere.html b/debug/atmosphere.html
@@ -11,11 +11,21 @@
         .mapboxgl-canvas {
           background-image: url("https://img.favpng.com/9/21/21/royalty-free-photography-illustration-png-favpng-d38x16Mw2kxSFqtUSXG8gT5CQ_t.jpg");
         }
+        #flyTo { 
+            position: absolute;
+            top: 0; left: 0;
+            margin: 15px;
+            font-size: 14px;
+            padding: 8px;
+            background-color: lightblue;
+            font-weight: bold;
+        }
     </style>
 </head>
 
 <body>
 <div id='map'></div>
+<button id='flyTo'>Fly to</button>
 
 <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js'></script>
 <script src='../dist/mapbox-gl-dev.js'></script>
@@ -42,15 +52,36 @@
 
 var map = window.map = new mapboxgl.Map({
     container: 'map',
-    zoom: 10,
+    zoom: 2,
     center: [78.7193, 36.2927],
-    pitch: 75,
-    bearing: -10,
     style: 'mapbox://styles/mapbox/streets-v11',
     hash: true,
     projection: 'globe'
 });
 
+document.getElementById('flyTo').addEventListener('click', (e) => {
+    if (e.target.innerHTML === 'Fly to') {
+        e.target.innerHTML = 'Fly out';
+        map.flyTo({
+            center: [8.11862, 46.58842],
+            zoom: 12.5,
+            bearing: 130,
+            pitch: 75,
+            duration: 12000
+        });
+    } else {
+        e.target.innerHTML = 'Fly to';
+        map.flyTo({
+            center: [78.7193, 36.2927],
+            zoom: 2,
+            pitch: 0,
+            bearing: 0,
+            duration: 12000
+        });
+    }
+
+});
+
 function updatePreset(value) {
     // 'mapbox/streets-v11',
     // 'mapbox/satellite-streets-v11',
@@ -222,6 +253,19 @@
         "space-color": 'rgba(' + guiParams.spaceColor[0] + ', ' + guiParams.spaceColor[1] + ', ' + guiParams.spaceColor[2] + ', ' + guiParams.spaceAlpha + ')',
         "star-intensity": guiParams.starIntensity
     });
+
+    map.addSource('mapbox-dem', {
+        'type': 'raster-dem',
+        'url': 'mapbox://mapbox.terrain-rgb',
+        'tileSize': 512,
+        'maxzoom': 14
+    });
+
+    map.setTerrain({
+        'source': 'mapbox-dem',
+        'exaggeration': 1.5
+    });
+
 });
 
 </script>

diff --git a/test/release/index.js b/test/release/index.js
@@ -108,6 +108,11 @@ const pages = [
         "key": "custom-source",
         "title": "Custom Source",
         "url": "./custom-source.html"
+    },
+    {
+        "key": "atmosphere",
+        "title": "Atmosphere",
+        "url": "./atmosphere.html"
     }
 ];
 

diff --git a/test/release/local_release_page_list.txt b/test/release/local_release_page_list.txt
@@ -8,4 +8,5 @@ threejs-antenna.html
 video.html
 custom-source.html
 heatmap-layer.html
-antimate-point-along-route.html
+atmosphere.html
+animate-point-along-route.html