mapbox · May 12, 2022 · May 16, 2022 · May 16, 2022 · May 17, 2022 · May 17, 2022
Showing 394 changed files with 6,508 additions and 2,053 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,21 +1,77 @@
+## 2.10.0
+
+## Features ✨ and improvements 🏁
+* Add new marker styling option rotationAlignment: 'horizon' allowing marker rotation to match the curvature of the horizon in globe view ([#11894](https://github.com/mapbox/mapbox-gl-js/pull/11894))
+* Improve panning precision on Globe View and relax constraints on lower zoom levels ([#12114](https://github.com/mapbox/mapbox-gl-js/pull/12114))
+* Add unit option to number-format expression ([#11839](https://github.com/mapbox/mapbox-gl-js/pull/11839)) (h/t [varna](https://github.com/varna))
+* Add screen reader alert for cooperative gestures warning message. ([#12058](https://github.com/mapbox/mapbox-gl-js/pull/12058))
+* Improve rendering performance on globe view ([#12050](https://github.com/mapbox/mapbox-gl-js/pull/12050))
+* Improve tile loading performance on low zoom levels ([#12061](https://github.com/mapbox/mapbox-gl-js/pull/12061))
+* Improve globe-mercator transition and map load performance with globe projection ([#12039](https://github.com/mapbox/mapbox-gl-js/pull/12039))
+
+
+## Bug fixes 🐞
+* Fix a bug where `id` expression didn't correctly handle a value of 0 ([#12000](https://github.com/mapbox/mapbox-gl-js/pull/12000))
+* Fix precision errors in depth pack/unpack ([#12005](https://github.com/mapbox/mapbox-gl-js/pull/12005))
+* Fix `cooperativeGestures` preventing panning on mobile while in fullscreen. ([#12058](https://github.com/mapbox/mapbox-gl-js/pull/12058))
+* Fix misplaced raster tiles after toggling `setStyle` with a globe projection ([#12049](https://github.com/mapbox/mapbox-gl-js/pull/12049))
+* Fix exception on creating map in an iframe with sandbox attribute. ([#12101](https://github.com/mapbox/mapbox-gl-js/pull/12101))
+* Fix "improve map" link in the attribution to include location even if map hash is disabled ([#12122](https://github.com/mapbox/mapbox-gl-js/pull/12122))
+* Fix Chrome console warnings about ignored event cancel on touch interactions ([#12121](https://github.com/mapbox/mapbox-gl-js/pull/12121)) (h/t [jschaf](https://github.com/jschaf))
+
+## 2.9.2
+
+### Bug fixes 🐞
+
+* Add a workaround in `ScaleControl` to support localization in browsers without `NumberFormat` support. ([#12068](https://github.com/mapbox/mapbox-gl-js/pull/12068))
+* Fix `GeolocateControl` not working in Safari. ([#12080](https://github.com/mapbox/mapbox-gl-js/pull/12080))
+
+## 2.9.1
+
+### Bug fixes 🐞
+
+* Fix missing lines on some Windows devices. ([#12017](https://github.com/mapbox/mapbox-gl-js/pull/12017))
+
+## 2.9.0
+
+### Features ✨
+
+* Add `globe` projection. This new projection displays the map as a 3d globe and can be enabled by either passing `projection: globe` to the map constructor or by calling `map.setProjection('globe')`. All layers are supported by globe except for Custom Layers and Sky.
+* Extend atmospheric `fog` with three new style specification properties: `high-color`, `space-color` and `star-intensity` to allow the design of atmosphere around the globe and night skies. ([#11590](https://github.com/mapbox/mapbox-gl-js/pull/11590))
+* Add a new line layer paint property in the style specification: `line-trim-offset` that can be used to create a custom fade out with improved update performance over `line-gradient`. ([#11570](https://github.com/mapbox/mapbox-gl-js/pull/11570))
+* Add an option for providing a geolocation adapter to `GeolocateControl`. ([#10400](https://github.com/mapbox/mapbox-gl-js/pull/10400)) (h/t [behnammodi](https://github.com/behnammodi))
+* Add `Map.Title` property to locale options to localise the map `aria-label`. ([#11549](https://github.com/mapbox/mapbox-gl-js/pull/11549)) (h/t [andrewharvey](https://github.com/andrewharvey))
+* Allow duplicated coordinates in tile request URLs. ([#11441](https://github.com/mapbox/mapbox-gl-js/pull/11441)) (h/t [ozero](https://github.com/ozero))
+
+### Bug fixes 🐞
+
+* Fix an issue which causes line layers to occasionally flicker. ([#11848](https://github.com/mapbox/mapbox-gl-js/pull/11848))
+* Fix markers in fog sometimes becoming more visible when behind terrain. ([#11658](https://github.com/mapbox/mapbox-gl-js/pull/11658))
+* Fix an issue where setting terrain exageration to 0 could prevent the zoom to be resolved. ([#11830](https://github.com/mapbox/mapbox-gl-js/pull/11830))
+* Copy stylesheet to allow toggling different styles using setStyle without overwriting some of the properties. ([#11942](https://github.com/mapbox/mapbox-gl-js/pull/11942))
+
 ## 2.8.2
 
 ### Bug fixes 🐞
+
 * Fix an issue where the special bundle for CSP-restricted environments was not compatible with further minification in some bundling setups. ([#11790](https://github.com/mapbox/mapbox-gl-js/pull/11790))
 
 ## 2.8.1
 
 ### Bug fixes 🐞
+
 * Fix the special bundle for CSP-restricted environments that broke in the 2.8.0 release. ([#11739](https://github.com/mapbox/mapbox-gl-js/pull/11739))
 
 ## 2.8.0
 
-## Performance improvements 🏁
+### Performance improvements 🏁
+
 * Improve memory usage by freeing memory more eagerly after loading tiles. ([#11434](https://github.com/mapbox/mapbox-gl-js/pull/11434))
 * Improve memory usage by reducing repeated line labels on overscaled tiles. ([#11414](https://github.com/mapbox/mapbox-gl-js/pull/11414))
 * Improve performance when placing many symbols on terrain. ([#11466](https://github.com/mapbox/mapbox-gl-js/pull/11466))
 
 ### Bug fixes 🐞
+
 * Fix `map.fitBounds()`, `map.fitScreenCoordinates()`, and `map.cameraForBounds()` incorrectly matching bounds with non-zero bearing. ([#11568](https://github.com/mapbox/mapbox-gl-js/pull/11568)) (h/t [TannerPerrien](https://github.com/TannerPerrien))
 * Improve control button appearance by applying `border-radius` more consistently. ([#11423](https://github.com/mapbox/mapbox-gl-js/pull/11423)) (h/t [nagix](https://github.com/nagix))
 * Fix `ScaleControl` displaying incorrect units with some projections.([#11657](https://github.com/mapbox/mapbox-gl-js/pull/11657))

diff --git a/debug/3d-playground.html b/debug/3d-playground.html
@@ -52,6 +52,13 @@
     this.sunHaloColor = [ 255, 255, 255 ];
     this.skyColor = [ 255, 255, 255 ];
     this.sunIntensity = 30.0;
+    this.verticalGradient = false;
+    this.lightIntensity = 0.26;
+    this.aoIntensity = 0.3;
+    this.aoRadius = 3;
+    this.aoGroundLine = true;
+    this.buildingColor = [ 255, 255, 255 ];
+    this.buildingOpacity = 1;
 };
 
 var demo3d = new Demo3D();
@@ -78,9 +85,9 @@
     var terrain = gui.addFolder('Terrain');
     var enableTerrain = terrain.add(demo3d, 'enableTerrain');
     enableTerrain.onFinishChange((value) => {
-        map.setTerrain(value ? {"source": "mapbox-dem", "exaggeration": 1.5} : null);
+        map.setTerrain(value ? {"source": "mapbox-dem", "exaggeration": demo3d.terrainExaggeration} : null);
     });
-    var terrainExaggeration = terrain.add(demo3d, 'terrainExaggeration', 0.5, 2);
+    var terrainExaggeration = terrain.add(demo3d, 'terrainExaggeration', 0, 2);
     terrainExaggeration.onFinishChange((value) => {
         if (demo3d.enableTerrain) {
             map.setTerrain({"source": "mapbox-dem", "exaggeration": value});
@@ -94,11 +101,11 @@
     sky.add(demo3d, 'animateSky');
     var sunAltitude = sky.add(demo3d, 'sunAltitude', 0.0, 90.0);
     sunAltitude.onFinishChange((value) => {
-        map.setLight({'position': [1, demo3d.sunAzimuth, value], 'anchor': 'map'});
+        map.setLight({'position': [1, demo3d.sunAzimuth, value], 'anchor': 'map', intensity: this.lightIntensity});
     });
     var sunAzimuth = sky.add(demo3d, 'sunAzimuth', 0.0, 360.0);
     sunAzimuth.onFinishChange((value) => {
-        map.setLight({'position': [1, value, demo3d.sunAltitude], 'anchor': 'map'});
+        map.setLight({'position': [1, value, demo3d.sunAltitude], 'anchor': 'map', intensity: this.lightIntensity});
     });
     var sunIntensity = sky.add(demo3d, 'sunIntensity', 0.0, 100.0);
     sunIntensity.onFinishChange((value) => {
@@ -124,6 +131,43 @@
         map.setPaintProperty('sky', 'sky-atmosphere-color',
             'rgba(' + value[0] + ', ' + value[1] + ', ' + value[2] + ', ' + demo3d.sunAtmosphereIntensity + ')');
     });
+
+    var buildings = gui.addFolder('Buildings');
+    var verticalGradient = buildings.add(demo3d, 'verticalGradient');
+    verticalGradient.onFinishChange((value) => {
+        map.setPaintProperty('extrusion', 'fill-extrusion-vertical-gradient', value);
+    });
+    var buildingsAO = buildings.add(demo3d, 'aoIntensity', 0.0, 1.0);
+    buildingsAO.onFinishChange((value) => {
+        map.setPaintProperty('extrusion', 'fill-extrusion-ambient-occlusion-intensity', value);
+        map.setPaintProperty('footprint-blur5', 'line-opacity', value);
+        map.setPaintProperty('footprint-blur2', 'line-opacity', value);
+    });
+    var aoRadius = buildings.add(demo3d, 'aoRadius', 0.0, 50.0);
+    aoRadius.onFinishChange((value) => {
+        map.setPaintProperty('extrusion', 'fill-extrusion-ambient-occlusion-radius', value);
+    });
+    var aoGroundLine = buildings.add(demo3d, 'aoGroundLine');
+    aoGroundLine.onFinishChange((value) => {
+        const visible = value ? 'visible' : 'none';
+        map.setLayoutProperty('footprint-blur2', 'visibility', visible);
+        map.setLayoutProperty('footprint-blur5', 'visibility', visible);
+    });
+    var buildingColor = buildings.addColor(demo3d, 'buildingColor');
+    buildingColor.onFinishChange((value) => {
+        map.setPaintProperty('extrusion', 'fill-extrusion-color',
+            'rgb(' + value[0] + ', ' + value[1] + ', ' + value[2] + ')');
+    });
+    var buildingOpacity = buildings.add(demo3d, 'buildingOpacity', 0.0, 1.0);
+    buildingOpacity.onFinishChange((value) => {
+        map.setPaintProperty('extrusion', 'fill-extrusion-opacity', value);
+    });
+    var lightIntensity = buildings.add(demo3d, 'lightIntensity', 0.0, 1.0);
+    lightIntensity.onFinishChange((value) => {
+        const light = map.getLight();
+        light['intensity'] = value;
+        map.setLight(light);
+    });
 };
 
 var map = window.map = new mapboxgl.Map({
@@ -159,14 +203,49 @@
         'source-layer': 'building',
         'filter': ['==', 'extrude', 'true'],
         'type': 'fill-extrusion',
-        'minzoom': 15,
+        'minzoom': 13,
         'paint': {
-            'fill-extrusion-color': ['rgb', ['number', ['feature-state', 'hover-r'], r], ['number', ['feature-state', 'hover-g'], r], ['number', ['feature-state', 'hover-b'], r]],
+            'fill-extrusion-color': 'rgb(' + demo3d.buildingColor[0] + ', ' + demo3d.buildingColor[1] + ', ' + demo3d.buildingColor[2] + ')',
             'fill-extrusion-height': ["get", "height"],
-            'fill-extrusion-opacity': 0.7
+            'fill-extrusion-base': ["get", "min_height"],
+            'fill-extrusion-opacity': demo3d.buildingOpacity,
+            'fill-extrusion-vertical-gradient': demo3d.verticalGradient,
+            'fill-extrusion-ambient-occlusion-intensity': demo3d.aoIntensity
         }
     }, 'waterway-label');
 
+    // Buildings AO lines
+    let buildingsBlurLayerId = "footprint-blur5";
+    if (!map.getLayer(buildingsBlurLayerId)) {
+        map.addLayer({
+            'id': buildingsBlurLayerId,
+            'source': 'composite',
+            'source-layer': 'building',
+            'filter': ['all', ['==', ['get', 'min_height'], 0], ['==', ['get', 'extrude'], 'true']],
+            'type': 'line',
+            'paint': {
+                'line-color': 'rgba(100, 100, 100, 0.3)',
+                'line-width': {"base": 1.3, "stops":[[14, 5], [22, 10]]},
+                'line-opacity': 0.4
+            }
+        }, "extrusion");
+    }
+    buildingsBlurLayerId = "footprint-blur2";
+    if (!map.getLayer(buildingsBlurLayerId)) {
+        map.addLayer({
+            'id': buildingsBlurLayerId,
+            'source': 'composite',
+            'source-layer': 'building',
+            'filter': ['all', ['==', ['get', 'min_height'], 0], ['==', ['get', 'extrude'], 'true']],
+            'type': 'line',
+            'paint': {
+                'line-color': 'rgba(100, 100, 100, 0.4)',
+                'line-width': 3,
+                'line-opacity': 0.4
+            }
+        }, "extrusion");
+    }
+
     map.addLayer({
         'id': 'sky',
         'type': 'sky',
@@ -184,6 +263,7 @@
         }
     });
     map.setFog({});
+    map.setLight({intensity: demo3d.lightIntensity});
     var elevationDebug = document.getElementById('elevationDebug');
     map.on('mousemove', (e) => {
         const elevation = map.queryTerrainElevation(map.unproject(e.point));

diff --git a/debug/buildings.html b/debug/buildings.html
@@ -0,0 +1,64 @@
+<!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' />
+    <style>
+        body { margin: 0; padding: 0; }
+        html, body, #map { height: 100%; }
+        #radius {
+            position: absolute;
+            width: 700px;
+            top: 10px;
+            left: 10px;
+            z-index: 1000;
+        }
+    </style>
+</head>
+
+<body>
+<div id='map'></div>
+<!-- <input type="range" id="radius" min="0" max="50" step="any" value="20" />
+ -->
+<script src='../dist/mapbox-gl-dev.js'></script>
+<script src='../debug/access_token_generated.js'></script>
+<script>
+
+var map = window.map = new mapboxgl.Map({
+    container: 'map',
+    zoom: 12.5,
+    center: [-122.4194, 37.7749],
+    style: 'mapbox://styles/mapbox/streets-v11',
+    hash: true
+});
+
+map.on('load', () => {
+
+    map.addLayer({
+        'id': 'add-3d-buildings',
+        'source': 'composite',
+        'source-layer': 'building',
+        'filter': ['==', 'extrude', 'true'],
+        'type': 'fill-extrusion',
+        'minzoom': 15,
+        'layout': {
+            'fill-extrusion-edge-radius': 0.4
+        },
+        'paint': {
+            'fill-extrusion-color': '#bbb',
+            'fill-extrusion-height': ['get', 'height'],
+            'fill-extrusion-base': ['get', 'min_height'],
+            'fill-extrusion-opacity': 1,
+            'fill-extrusion-ambient-occlusion-intensity': 0.5,
+            'fill-extrusion-ambient-occlusion-radius': 0.1
+        }
+    });
+
+    map.setLight({intensity: 0.7});
+});
+
+</script>
+</body>
+</html>
diff --git a/debug/custom-source.html b/debug/custom-source.html
@@ -35,41 +35,33 @@
 const colors = ['#74a9cf', '#3690c0', '#0570b0', '#045a8d'];
 let currentColor = colors[0];
 
+const canvas = document.createElement('canvas');
+canvas.width = canvas.height = tileSize;
+const context = canvas.getContext('2d', {willReadFrequently: true});
+
 map.on('load', () => {
     map.addSource('custom-source', {
         type: 'custom',
         tileSize,
         async loadTile({z, x, y}) {
-            const tileSize = 256;
-            const canvas = document.createElement('canvas');
-            canvas.width = canvas.height = tileSize;
-            const context = canvas.getContext('2d');
             context.fillStyle = 'red';
             context.fillRect(0, 0, tileSize, tileSize);
 
             context.font = '18px serif';
             context.fillStyle = 'white';
             context.textAlign = 'center';
             context.fillText(`${z}/${x}/${y}`, tileSize / 2, tileSize / 2, tileSize);
-
-            const imageData = context.getImageData(0, 0, tileSize, tileSize);
-            return imageData;
+            return canvas;
         },
         prepareTile({z, x, y}) {
-            const tileSize = 256;
-            const canvas = document.createElement('canvas');
-            canvas.width = canvas.height = tileSize;
-            const context = canvas.getContext('2d');
             context.fillStyle = currentColor;
             context.fillRect(0, 0, tileSize, tileSize);
 
             context.font = '18px serif';
             context.fillStyle = 'white';
             context.textAlign = 'center';
             context.fillText(`${z}/${x}/${y}`, tileSize / 2, tileSize / 2, tileSize);
-
-            const imageData = context.getImageData(0, 0, tileSize, tileSize);
-            return imageData;
+            return canvas;
         },
         hasTile({z, x, y}) {
             return (x + y) % 2 === 0;