Skip to content

Commit a59c54d

Browse files
stepankuzmingithub-actions[bot]
stepankuzmin
authored and
github-actions[bot]
committed
Update release testing pages (internal-6443)
GitOrigin-RevId: 96de2e4d9f54e7a4c49300f217e43e140ecd2756
1 parent 9bc1dcd commit a59c54d

File tree

10 files changed

+158
-430
lines changed

10 files changed

+158
-430
lines changed

‎debug/extrusion-query.html‎

Lines changed: 9 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -9,49 +9,32 @@
99
<style>
1010
body { margin: 0; padding: 0; }
1111
html, body, #map { height: 100%; }
12-
#controls { position: absolute; top: 0; left: 0; }
1312
</style>
1413
</head>
1514
<body>
1615
<div id="map"></div>
17-
<div id="controls">
18-
<label><input id="terrain-checkbox" type="checkbox"> terrain</label><br />
19-
<div>
20-
<label>Projection:</label>
21-
<select id="projName">
22-
<option value="mercator" selected>Mercator</option>
23-
<option value="globe">Globe</option>
24-
<option value="albers">Albers USA</option>
25-
<option value="equalEarth">Equal Earth</option>
26-
<option value="equirectangular">Equirectangular</option>
27-
<option value="lambertConformalConic">Lambert Conformal Conic</option>
28-
<option value="naturalEarth">Natural Earth</option>
29-
<option value="winkelTripel">Winkel Tripel</option>
30-
</select>
31-
</div>
32-
</div>
3316

3417
<script src="../dist/mapbox-gl-dev.js"></script>
3518
<script type="module">
19+
import {Pane} from 'https://esm.sh/tweakpane@4';
3620
import {getAccessToken} from './access_token_generated.js';
3721

3822
mapboxgl.accessToken = getAccessToken();
3923

40-
var map = window.map = new mapboxgl.Map({
24+
const map = window.map = new mapboxgl.Map({
4125
container: 'map',
42-
devtools: true,
43-
zoom: 16.9,
26+
zoom: 16,
4427
center: [-73.989816, 40.76263],
4528
pitch: 60,
46-
style: 'mapbox://styles/mapbox/streets-v10',
29+
style: 'mapbox://styles/mapbox/streets-v12',
30+
projection: 'globe',
4731
hash: true
4832
});
4933

5034
const r = 255 * 0.65;
51-
map.on('style.load', function() {
35+
map.on('style.load', () => {
5236
map.addLayer({
5337
'id': '3d-buildings',
54-
//'source': 'composite',
5538
'source': {
5639
'type': 'vector',
5740
'url': 'mapbox://mapbox.3d-buildings'
@@ -106,13 +89,10 @@
10689
}
10790
});
10891
});
109-
document.getElementById('terrain-checkbox').onclick = function() {
110-
map.setTerrain(this.checked ? {"source": "mapbox-dem"} : null);
111-
};
11292

113-
document.getElementById('projName').addEventListener('change', (e) => {
114-
const el = document.getElementById('projName');
115-
map.setProjection(el.options[el.selectedIndex].value);
93+
const pane = new Pane();
94+
pane.addBinding({terrain: false}, 'terrain').on('change', (e) => {
95+
map.setTerrain(e.value ? {"source": "mapbox-dem"} : null);
11696
});
11797

11898
</script>

‎debug/featurestate.html‎

Lines changed: 9 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -8,45 +8,29 @@
88
<style>
99
body { margin: 0; padding: 0; }
1010
html, body, #map { height: 100%; }
11-
#controls { position: absolute; top: 0; left: 0; padding:10px;}
1211
</style>
1312
</head>
1413

1514
<body>
1615
<div id="map"></div>
17-
<div id="controls">
18-
<div>
19-
<label>Projection:</label>
20-
<select id="projName">
21-
<option value="mercator" selected>Mercator</option>
22-
<option value="albers">Albers USA</option>
23-
<option value="equalEarth">Equal Earth</option>
24-
<option value="equirectangular">Equirectangular</option>
25-
<option value="globe">Globe</option>
26-
<option value="lambertConformalConic">Lambert Conformal Conic</option>
27-
<option value="naturalEarth">Natural Earth</option>
28-
<option value="winkelTripel">Winkel Tripel</option>
29-
</select>
30-
<label><input id="terrain-checkbox" type="checkbox"> terrain</label>
31-
</div>
32-
</div>
3316

3417
<script src="../dist/mapbox-gl-dev.js"></script>
3518
<script type="module">
19+
import {Pane} from 'https://esm.sh/tweakpane@4';
3620
import {getAccessToken} from './access_token_generated.js';
3721

3822
mapboxgl.accessToken = getAccessToken();
3923

40-
var map = window.map = new mapboxgl.Map({
24+
const map = window.map = new mapboxgl.Map({
4125
container: 'map',
42-
devtools: true,
4326
zoom: 4,
4427
center: [-96, 38],
45-
// style: {version: 8, layers: [], sources: {}}
46-
style: 'mapbox://styles/mapbox/streets-v11', // style URL
28+
style: 'mapbox://styles/mapbox/streets-v12',
29+
projection: 'globe',
30+
hash: true
4731
});
4832

49-
map.on('load', () => {
33+
map.on('style.load', () => {
5034
map.addSource('mapbox-dem', {
5135
"type": "raster-dem",
5236
"url": "mapbox://mapbox.mapbox-terrain-dem-v1",
@@ -95,14 +79,11 @@
9579
});
9680
});
9781

98-
document.getElementById('projName').addEventListener('change', (e) => {
99-
const el = document.getElementById('projName');
100-
map.setProjection(el.options[el.selectedIndex].value);
82+
const pane = new Pane();
83+
pane.addBinding({terrain: false}, 'terrain').on('change', (e) => {
84+
map.setTerrain(e.value ? {"source": "mapbox-dem"} : null);
10185
});
10286

103-
document.getElementById('terrain-checkbox').onclick = function() {
104-
map.setTerrain(this.checked ? {"source": "mapbox-dem"} : null);
105-
};
10687
</script>
10788
</body>
10889
</html>

‎debug/filter-features-with-globe.html‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,19 @@
179179
return uniqueFeatures;
180180
}
181181

182+
function updateAirportsList() {
183+
const features = map.queryRenderedFeatures({layers: ['airport']});
184+
if (features) {
185+
const uniqueFeatures = getUniqueFeatures(features, 'iata_code');
186+
renderListings(uniqueFeatures);
187+
airports = uniqueFeatures;
188+
}
189+
}
190+
191+
map.on('resize', () => {
192+
updateAirportsList();
193+
});
194+
182195
map.on('load', () => {
183196
map.addSource('airports', {
184197
'type': 'vector',
@@ -197,26 +210,18 @@
197210
}
198211
});
199212

213+
map.once('idle', () => {
214+
updateAirportsList();
215+
});
216+
200217
map.on('movestart', () => {
201218
// reset features filter as the map starts moving
202219
map.setFilter('airport', ['has', 'abbrev']);
203220
});
204221

205222
map.on('moveend', () => {
206-
const features = map.queryRenderedFeatures({layers: ['airport']});
207-
208-
if (features) {
209-
const uniqueFeatures = getUniqueFeatures(features, 'iata_code');
210-
// Populate features for the listing overlay.
211-
renderListings(uniqueFeatures);
212-
213-
// Clear the input container
214-
filterEl.value = '';
215-
216-
// Store the current features in sn `airports` variable to
217-
// later use for filtering on `keyup`.
218-
airports = uniqueFeatures;
219-
}
223+
updateAirportsList();
224+
filterEl.value = '';
220225
});
221226

222227
map.on('mousemove', 'airport', (e) => {
@@ -265,10 +270,6 @@
265270
]);
266271
}
267272
});
268-
269-
// Call this function on initialization
270-
// passing an empty array to render an empty state
271-
renderListings([]);
272273
});
273274

274275
document.getElementById('globe').addEventListener('click', (e) => {

‎debug/image-on-globe.html‎

Lines changed: 12 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -7,69 +7,27 @@
77
<style>
88
body { margin: 0; padding: 0; }
99
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
10-
#controls {
11-
position: absolute;
12-
top: 0;
13-
left: 0;
14-
padding:10px;
15-
background-color: lightblue;
16-
font-family: Arial, Helvetica, sans-serif;
17-
}
1810
</style>
1911
<link rel="stylesheet" href="../dist/mapbox-gl.css" />
2012
</head>
2113

2214
<body>
2315
<div id="map"></div>
24-
<div id="controls">
25-
<div>
26-
<label>Projection:</label>
27-
<select id="projName">
28-
<option value="mercator">Mercator</option>
29-
<option value="albers">Albers USA</option>
30-
<option value="equalEarth">Equal Earth</option>
31-
<option value="equirectangular">Equirectangular</option>
32-
<option value="globe" selected>Globe</option>
33-
<option value="lambertConformalConic">Lambert Conformal Conic</option>
34-
<option value="naturalEarth">Natural Earth</option>
35-
<option value="winkelTripel">Winkel Tripel</option>
36-
</select>
37-
</br>
38-
<label>Raster elevation:</label>
39-
<input type="range" id="rasterElevation" name="volume" min="0" max="5000000" value="1000000"/>
40-
</div>
41-
</div>
4216

4317
<script src="../dist/mapbox-gl-dev.js"></script>
4418
<script type="module">
19+
import {Pane} from 'https://esm.sh/tweakpane@4';
4520
import {getAccessToken} from './access_token_generated.js';
4621

4722
mapboxgl.accessToken = getAccessToken();
4823

4924
const map = new mapboxgl.Map({
5025
container: 'map',
51-
devtools: true,
52-
zoom: 5,
53-
center: [-75.789, 41.874],
54-
style: 'mapbox://styles/mapbox/dark-v10',
26+
style: 'mapbox://styles/mapbox/standard',
5527
hash: true,
56-
projection: 'globe'
5728
});
5829

59-
map.on('load', () => {
60-
map.addSource('mapbox-dem', {
61-
"type": "raster-dem",
62-
"url": "mapbox://mapbox.mapbox-terrain-dem-v1",
63-
"tileSize": 514,
64-
"maxzoom": 14
65-
});
66-
map.setTerrain({
67-
"source": "mapbox-dem",
68-
"exaggeration": 1.0
69-
});
70-
71-
map.setFog({});
72-
30+
map.on('style.load', () => {
7331
map.addSource('radar', {
7432
'type': 'image',
7533
'url': 'https://docs.mapbox.com/mapbox-gl-js/assets/radar.gif',
@@ -92,14 +50,15 @@
9250
});
9351
});
9452

95-
document.getElementById('projName').addEventListener('change', (e) => {
96-
const el = document.getElementById('projName');
97-
map.setProjection(el.options[el.selectedIndex].value);
98-
});
99-
100-
document.getElementById('rasterElevation').addEventListener('input', (e) => {
101-
const el = document.getElementById('rasterElevation');
102-
map.setPaintProperty('radar-layer', 'raster-elevation', Number(el.value));
53+
const pane = new Pane();
54+
pane.addBlade({
55+
view: 'slider',
56+
label: 'elevation',
57+
min: 0,
58+
max: 5000000,
59+
value: 1000000,
60+
}).on('change', (e) => {
61+
map.setPaintProperty('radar-layer', 'raster-elevation', e.value);
10362
});
10463

10564
</script>

‎debug/markers.html‎

Lines changed: 10 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -8,31 +8,15 @@
88
<style>
99
body { margin: 0; padding: 0; }
1010
html, body, #map { height: 100%; }
11-
#controls { position: absolute; top: 0; left: 0; }
1211
</style>
1312
</head>
1413

1514
<body>
1615
<div id="map"></div>
17-
<div id="controls">
18-
<button id="animate">Animate</button><br />
19-
<label><input id="terrain-checkbox" type="checkbox"> terrain</label><br />
20-
<div>
21-
<label>Projection:</label>
22-
<select id="projName">
23-
<option value="mercator" selected>Mercator</option>
24-
<option value="globe">Globe</option>
25-
<option value="albers">Albers USA</option>
26-
<option value="equalEarth">Equal Earth</option>
27-
<option value="equirectangular">Equirectangular</option>
28-
<option value="lambertConformalConic">Lambert Conformal Conic</option>
29-
<option value="naturalEarth">Natural Earth</option>
30-
<option value="winkelTripel">Winkel Tripel</option>
31-
</select>
32-
</div>
33-
</div>
16+
3417
<script src="../dist/mapbox-gl-dev.js"></script>
3518
<script type="module">
19+
import {Pane} from 'https://esm.sh/tweakpane@4';
3620
import {getAccessToken} from './access_token_generated.js';
3721

3822
mapboxgl.accessToken = getAccessToken();
@@ -42,6 +26,7 @@
4226
zoom: 12.5,
4327
center: [-77.01866, 38.888],
4428
style: 'mapbox://styles/mapbox/streets-v12',
29+
projection: 'globe',
4530
hash: true
4631
});
4732

@@ -136,8 +121,13 @@
136121
});
137122
})
138123

124+
const pane = new Pane();
125+
pane.addBinding({terrain: false}, 'terrain').on('change', (e) => {
126+
map.setTerrain(e.value ? {"source": "mapbox-dem", "exaggeration": 10} : null);
127+
});
128+
139129
let animate = false;
140-
document.getElementById('animate').addEventListener('click', () => {
130+
pane.addBinding({animate: false}, 'animate').on('change', (e) => {
141131
animate = !animate;
142132
if (animate) {
143133
spinMarkers();
@@ -156,28 +146,15 @@
156146
}
157147
window.requestAnimationFrame(spinMarkers);
158148

159-
map.addControl(new mapboxgl.NavigationControl());
160-
161-
map.on('load', function() {
149+
map.on('style.load', function() {
162150
map.addSource('mapbox-dem', {
163151
"type": "raster-dem",
164152
"url": "mapbox://mapbox.mapbox-terrain-dem-v1",
165153
"tileSize": 512,
166154
"maxzoom": 14
167155
});
168-
169-
map.setFog({});
170156
});
171157

172-
document.getElementById('terrain-checkbox').onclick = function() {
173-
map.setTerrain(this.checked ? {"source": "mapbox-dem", "exaggeration": 10} : null);
174-
};
175-
176-
document.getElementById('projName').addEventListener('change', (e) => {
177-
const el = document.getElementById('projName');
178-
map.setProjection(el.options[el.selectedIndex].value);
179-
});
180158
</script>
181-
182159
</body>
183160
</html>

0 commit comments

Comments
 (0)