mapbox · mourner · Nov 13, 2023 · Nov 8, 2023 · Nov 8, 2023 · Nov 9, 2023
@@ -30,7 +30,6 @@ class Tiled3dWorkerTile {
     tileSize: number;
     source: string;
     overscaling: number;
-    enableTerrain: boolean;
     projection: Projection;
     status: 'parsing' | 'done';
     reloadCallback: ?WorkerTileCallback;
@@ -46,7 +45,6 @@ class Tiled3dWorkerTile {
         this.tileSize = params.tileSize;
         this.source = params.source;
         this.overscaling = this.tileID.overscaleFactor();
-        this.enableTerrain = !!params.enableTerrain;
         this.projection = params.projection;
         this.brightness = brightness;
     }
@@ -141,7 +139,6 @@ class Tiled3dModelWorkerSource implements WorkerSource {
         const uid = params.uid;
         if (loaded && loaded[uid]) {
             const workerTile = loaded[uid];
-            workerTile.enableTerrain = !!params.enableTerrain;
             workerTile.projection = params.projection;
             workerTile.brightness = params.brightness;
 

@@ -1,6 +1,20 @@
-## 3.0.0-rc.1
+## 3.0.0-rc.2
+
+Mapbox GL JS v3 enables the Mapbox Standard Style, a new realistic 3D lighting system, building shadows and many other visual enhancements, and an ergonomic API for using a new kind of rich, evolving, configurable map styles and seamless integration with custom data. You can get more information about the new features in the [Mapbox GL JS v3 migration guide](./MIGRATION_GUIDE_v3.md). Changes since `v3.0.0-rc.1`:
+
+### Features and improvements ✨
+
+- Improve performance for styles that use both hillshade layers and terrain.
 
-Mapbox GL JS v3 enables the Mapbox Standard Style, a new realistic 3D lighting system, building shadows and many other visual enhancements, and an ergonomic API for using a new kind of rich, evolving, configurable map styles and seamless integration with custom data. You can get more information about the new features in the [Mapbox GL JS v3 migration guide](./MIGRATION_GUIDE_v3.md). Changes since `v3.0.0-beta.5`:
+### Bug fixes 🐞
+
+- Fix an issue with `setConfigProperty` not taking effect for certain properties.
+- Fix rendering issues when a style and its imports share the same source IDs.
+- Fix `symbol-z-elevate` elevating symbols over invisible fill extrusions (with zero opacity).
+- Fix an issue with style validation accepting a style import with an empty ID.
+- Fix an issue with validation of unknown properties in `lights` objects.
+
+## 3.0.0-rc.1
 
 ### Features and improvements ✨
 

@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Mapbox GL JS debug page</title>
+    <meta charset='utf-8'>
+    <meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no'>
+    <link rel='stylesheet' href='../dist/mapbox-gl.css' />
+    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/min/vs/editor/editor.main.min.css'>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+
+        html,
+        body,
+        #map {
+            height: 100%;
+        }
+
+        #config {
+            position: absolute;
+            top:15px;
+            left:15px;
+            max-height: 95%;
+            overflow-y:auto;
+            z-index: 100;
+        }
+        #config::-webkit-scrollbar {
+            width: 10px;
+            height: 10px;
+        }
+        #config::-webkit-scrollbar-track {
+            background: rgba(0, 0, 0, 0.2);
+            border-radius: 10px;
+        }
+        #config::-webkit-scrollbar-thumb {
+            background: rgba(110, 110, 110);
+            border-radius: 10px;
+        }
+        #config::-webkit-scrollbar-thumb:hover {
+            background-color: rgba(90, 90, 90);
+        }
+
+        #editor {
+            display: none;
+            position: absolute;
+            top: 0px;
+            right: 0px;
+            bottom: 0px;
+            left: 0px;
+            z-index: 200;
+            background-color: pink;
+        }
+    </style>
+</head>
+
+<body>
+    <div id='map'></div>
+    <div id='config'></div>
+    <div id='editor'>Loading...</div>
+
+    <script src='../dist/mapbox-gl-dev.js'></script>
+    <script src='../debug/access_token_generated.js'></script>
+    <script type='module'>
+        import {Pane} from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.min.js';
+        import monacoLoader from 'https://cdn.jsdelivr.net/npm/@monaco-editor/[email protected]/+esm';
+
+        const pane = new Pane({
+            title: 'Parameters',
+            expanded: true,
+            container: document.querySelector('#config'),
+        });
+
+        const styles = [
+            'mapbox://styles/mapbox/standard',
+            'mapbox://styles/mapbox-map-design/standard-rc',
+            'mapbox://styles/mapbox-map-design/standard-experimental'
+        ];
+
+        const params = window.params = {style: styles[0]};
+        const arrayToOptions = (arr) => arr.reduce((acc, item) => ({...acc, [item]: item}), {});
+
+        const map = window.map = new mapboxgl.Map({
+            container: 'map',
+            center: [0, 0],
+            zoom: 0,
+            style: styles[0],
+            hash: true
+        });
+
+        const dynamicFolders = [];
+        const styleBinding = pane.addBinding(params, 'style', {label: 'Style', options: arrayToOptions(styles)});
+        styleBinding.on('change', (e) => map.setStyle(e.value));
+
+        map.on('style.load', (e) => {
+            const style = map.getStyle();
+            dynamicFolders.forEach((folder) => folder.dispose());
+
+            // Render imports configuration
+            const imports = style.imports || [];
+            for (const {id, data: fragment} of imports) {
+                const fragmentName = fragment.name || id;
+                const folder = pane.addFolder({title: fragmentName, expanded: true});
+                dynamicFolders.push(folder);
+
+                // Render configuration binding
+                const schema = fragment.schema || {};
+                for (const config in schema) {
+                    const meta = schema[config];
+                    const label = meta.metadata['mapbox:title'];
+                    const options = meta.values && Array.isArray(meta.values) ? arrayToOptions(meta.values) : undefined;
+                    params[config] = meta.default;
+                    const configBinding = folder.addBinding(params, config, {label, options});
+                    configBinding.on('change', (e) => map.setConfigProperty(id, config, e.value));
+                }
+            }
+        });
+
+        const toggleEditorButton = pane.addButton({title: 'Edit Style as JSON'});
+
+        let editor;
+        toggleEditorButton.on('click', async () => {
+            const container = document.getElementById('editor');
+            container.style.display = 'block';
+
+            if (!editor) {
+                const monaco = await monacoLoader.init();
+                container.innerHTML = '';
+                editor = monaco.editor.create(container, {theme: 'vs-dark', language: 'json'});
+            }
+
+            editor.focus();
+            const style = map.getStyle();
+            const styleJSON = JSON.stringify(style, null, 4);
+            editor.getModel().setValue(styleJSON);
+
+            editor.getDomNode().addEventListener('keydown', function (e) {
+                if (e.keyCode === 27) {
+                    container.style.display = 'none';
+                    return;
+                }
+
+                if ((e.metaKey || e.ctrlKey) && e.keyCode === 83) {
+                    e.preventDefault();
+
+                    try {
+                        const nextStyle = JSON.parse(editor.getModel().getValue());
+                        map.setStyle(nextStyle);
+                        container.style.display = 'none';
+                    } catch (e) {
+                        console.error(e);
+                    }
+                }
+            }, false);
+        });
+    </script>
+</body>
+
+</html>
@@ -1,7 +1,7 @@
 {
   "name": "mapbox-gl",
   "description": "A WebGL interactive maps library",
-  "version": "3.0.0-rc.1",
+  "version": "3.0.0-rc.2",
   "main": "dist/mapbox-gl.js",
   "style": "dist/mapbox-gl.css",
   "license": "SEE LICENSE IN LICENSE.txt",

@@ -24,7 +24,6 @@ export type BucketParameters<Layer: TypedStyleLayer> = {
     collisionBoxArray: CollisionBoxArray,
     sourceLayerIndex: number,
     sourceID: string,
-    enableTerrain: boolean,
     projection: ProjectionSpecification
 }
 

@@ -58,7 +58,7 @@ export default class DEMData {
     // RGBAImage data has uniform 1px padding on all sides: square tile edge size defines stride
     // and dim is calculated as stride - 2.
     constructor(uid: number, data: ImageData, sourceEncoding: DEMSourceEncoding,
-        convertToFloat: boolean, borderReady: boolean = false, buildQuadTree: boolean = false): void {
+        convertToFloat: boolean, borderReady: boolean = false): void {
         this.uid = uid;
         if (data.height !== data.width) throw new RangeError('DEM tiles must be square');
         if (sourceEncoding && sourceEncoding !== "mapbox" && sourceEncoding !== "terrarium") return warnOnce(
@@ -93,10 +93,6 @@ export default class DEMData {
             values[this._idx(dim, dim)] = values[this._idx(dim - 1, dim - 1)];
         }
 
-        if (buildQuadTree) {
-            this._buildQuadTree();
-        }
-
         if (convertToFloat) {
             const floatView = new Float32Array(data.data.buffer);
             const unpack = this.encoding === "terrarium" ? unpackTerrarium : unpackMapbox;

@@ -13,7 +13,7 @@ import type Style from '../style/style.js';
 class BuildingIndex {
     style: Style;
     layers: Array<StyleLayer>;
-    currentBuildingBuckets: Array<{bucket: ?Bucket, tileID: OverscaledTileID}>;
+    currentBuildingBuckets: Array<{bucket: ?Bucket, tileID: OverscaledTileID, verticalScale: number}>;
 
     constructor(style: Style) {
         this.style = style;
@@ -41,6 +41,13 @@ class BuildingIndex {
             const layer = this.layers[i];
             const sourceCache = this.style.getLayerSourceCache(layer);
 
+            let verticalScale = 1;
+            if (layer.type === 'fill-extrusion') {
+                // See https://mapbox.atlassian.net/browse/MAPS3D-1159 for more details on why we should take opacity into account.
+                const opacity = ((layer: any): FillExtrusionStyleLayer).paint.get('fill-extrusion-opacity');
+                verticalScale = opacity > 0.0 ? ((layer: any): FillExtrusionStyleLayer).paint.get('fill-extrusion-vertical-scale') : 0;
+            }
+
             let tile = sourceCache ? sourceCache.getTile(tileID) : null;
 
             if (!tile && sourceCache && tileID.canonical.z > sourceCache.getSource().minzoom) {
@@ -51,7 +58,7 @@ class BuildingIndex {
                     id = id.scaledTo(id.overscaledZ - 1);
                 }
             }
-            this.currentBuildingBuckets.push({bucket: tile ? tile.getBucket(layer) : null, tileID: tile ? tile.tileID : tileID});
+            this.currentBuildingBuckets.push({bucket: tile ? tile.getBucket(layer) : null, tileID: tile ? tile.tileID : tileID, verticalScale});
         }
 
         symbolBucket.hasAnyZOffset = false;
@@ -96,7 +103,7 @@ class BuildingIndex {
         for (let i = 0; i < this.layers.length; ++i) {
             const layer = this.layers[i];
             if (layer.type !== 'fill-extrusion') continue;
-            const {bucket, tileID} = this.currentBuildingBuckets[i];
+            const {bucket, tileID, verticalScale} = this.currentBuildingBuckets[i];
             if (!bucket) continue;
 
             const {tileX, tileY} = this._mapCoordToOverlappingTile(tid, x, y, tileID);
@@ -108,7 +115,6 @@ class BuildingIndex {
                 availableHeight = heightData.height;
                 continue;
             }
-            const verticalScale = ((layer: any): FillExtrusionStyleLayer).paint.get('fill-extrusion-vertical-scale');
             return heightData.height * verticalScale;
         }
 

@@ -12,11 +12,11 @@ class RasterDEMTileWorkerSource {
     offscreenCanvasContext: CanvasRenderingContext2D;
 
     loadTile(params: WorkerDEMTileParameters, callback: WorkerDEMTileCallback) {
-        const {uid, encoding, rawImageData, padding, buildQuadTree} = params;
+        const {uid, encoding, rawImageData, padding} = params;
         // Main thread will transfer ImageBitmap if offscreen decode with OffscreenCanvas is supported, else it will transfer an already decoded image.
         // Flow struggles to refine ImageBitmap type, likely due to the JSDom shim
         const imagePixels = window.ImageBitmap && rawImageData instanceof window.ImageBitmap ? this.getImageData(rawImageData, padding) : ((rawImageData: any): ImageData);
-        const dem = new DEMData(uid, imagePixels, encoding, params.convertToFloat, padding < 1, buildQuadTree);
+        const dem = new DEMData(uid, imagePixels, encoding, params.convertToFloat, padding < 1);
         callback(null, dem);
     }
 

@@ -254,7 +254,6 @@ class VectorTileWorkerSource extends Evented implements WorkerSource {
         if (loaded && loaded[uid]) {
             const workerTile = loaded[uid];
             workerTile.showCollisionBoxes = params.showCollisionBoxes;
-            workerTile.enableTerrain = !!params.enableTerrain;
             workerTile.projection = params.projection;
             workerTile.brightness = params.brightness;
             workerTile.tileTransform = tileTransform(params.tileID.canonical, params.projection);