.circleci/config.yml

@@ -94,6 +94,7 @@ workflows:
               only: /v[0-9]+.[0-9]+.[0-9]+(-.+)?/
             branches:
               ignore: /.*/
+
 
 defaults: &defaults
   docker:
@@ -270,6 +271,15 @@ jobs:
       - attach_workspace:
           at: .
       - aws-cli/install
+      - run:
+          name: Check build file for correct SDK version
+          command: |
+            if grep -q "sdkVersion:\"$CIRCLE_TAG\"" mapbox-gl.js; then
+              echo SDK version in mapbox-gl.js matches $CIRCLE_TAG
+            else
+              echo SDK version in mapbox-gl.js does not match $CIRCLE_TAG
+              circleci-agent step halt
+            fi
       - run:
           name: Deploy release
           command: |

CHANGELOG.md

@@ -1,3 +1,40 @@
+## 2.1.0
+
+### ✨ Features and improvements
+
+- Added `localFontFamily` map option that enables local generation of all font glyphs. ([#10298](https://github.com/mapbox/mapbox-gl-js/pull/10298))
+- Introduced high resolution local glyph generation for improved rendering quality of glyphs generated using `localIdeographFontFamily` or `localFontFamily` options. ([#10298](https://github.com/mapbox/mapbox-gl-js/pull/10298))
+- Added `optimizeForTerrain` map option allowing to use terrain in _layer draw-order_ or _performance_ priority mode. This fixes terrain not always preserving layer draw-order during animations by making the behavior explicit. ([#10258](https://github.com/mapbox/mapbox-gl-js/pull/10258))
+- Improved performance by slightly shifting the horizon down, reducing the number of tiles loaded for highly-pitched maps. ([#10304](https://github.com/mapbox/mapbox-gl-js/pull/10304))
+- Improved `evented.once(eventName)` to return a promise if no listener function is provided, which allows using `async/await` with map events for a simpler and more readable code. ([#10203](https://github.com/mapbox/mapbox-gl-js/pull/10203))
+
+### 🐞 Bug fixes
+
+- Fixed querying of `fill-extrusion`s when terrain is enabled. ([#10293](https://github.com/mapbox/mapbox-gl-js/pull/10293))
+- Fixed a bug where close points were sometimes not clustered on higher zoom levels given a small clustering radius. Fixed `clusterMaxZoom` so that it is not capped by the source `maxzoom`. ([#10300](https://github.com/mapbox/mapbox-gl-js/pull/10300))
+- Fixed blurry map-aligned labels on highly pitched maps with terrain. ([#10296](https://github.com/mapbox/mapbox-gl-js/pull/10296))
+- Fixed a race condition when evaluating image expressions by ensuring sprite has loaded before parsing tiles. ([#10294](https://github.com/mapbox/mapbox-gl-js/pull/10294))
+- Fixed a bug with fullscreen `fill-extrusion` querying at low pitch. ([#10315](https://github.com/mapbox/mapbox-gl-js/pull/10315))
+- Fixed a regression with the usage of patterns with data-driven styling. ([#10284](https://github.com/mapbox/mapbox-gl-js/pull/10284))
+- Ensure `evented.listens` returns `false` when no listener is available. ([#10281](https://github.com/mapbox/mapbox-gl-js/pull/10281))
+
+
+## 2.0.1
+
+### ✨ Features and improvements
+
+- Added support for using third-party worker-loader plugins in build systems such as Webpack and Rollup (`mapboxgl.workerClass`). ([#10219](https://github.com/mapbox/mapbox-gl-js/pull/10219))
+- Added `mapboxgl.setNow` and `mapboxgl.restoreNow` methods which allow setting custom animation timing for 60 fps, jank-free video recording. ([#10172](https://github.com/mapbox/mapbox-gl-js/pull/10172))
+- Removed outdated CSS hacks that no longer apply. ([#10202](https://github.com/mapbox/mapbox-gl-js/pull/10202))
+
+### 🐞 Bug fixes
+
+- Fixed a bug where `ImageSource` and dynamically loaded icons didn't work in some cases in Firefox and Safari. ([#10230](https://github.com/mapbox/mapbox-gl-js/pull/10230))
+- Fixed a bug where `map.unproject` and `map.panBy` acted unpredictably in certain cases. ([#10224](https://github.com/mapbox/mapbox-gl-js/pull/10224))
+- Fixed a bug where the sky layer didn't take map padding into account. ([#10201](https://github.com/mapbox/mapbox-gl-js/pull/10201))
+- Fixed a bug where `map.setStyle` couldn't be used to enable terrain. ([#10177](https://github.com/mapbox/mapbox-gl-js/pull/10177))
+- Fixed a bug where mouse events didn't properly fire during zoom scrolling. ([#10171](https://github.com/mapbox/mapbox-gl-js/pull/10171))
+
 ## 2.0.0
 
 ### ⚠️ Breaking changes

bench/lib/access_token.js

@@ -2,7 +2,8 @@ const accessToken = (
     process.env.MapboxAccessToken ||
     process.env.MAPBOX_ACCESS_TOKEN ||
     getURLParameter('access_token') ||
-    localStorage.getItem('accessToken')
+    localStorage.getItem('accessToken') ||
+    'pk.eyJ1IjoibWFwYm94LWdsLWpzIiwiYSI6ImNram9ybGI1ajExYjQyeGxlemppb2pwYjIifQ.LGy5UGNIsXUZdYMvfYRiAQ'
 );
 
 localStorage.setItem('accessToken', accessToken);

build/check-bundle-size.js

@@ -22,7 +22,7 @@ const FILES = [
     ['JS', "dist/mapbox-gl.js"],
     ['CSS', "dist/mapbox-gl.css"]
 ];
-const PK = Buffer.from(process.env['SIZE_CHECK_APP_PRIVATE_KEY'], 'base64').toString('binary');
+const PK = process.env['SIZE_CHECK_APP_PRIVATE_KEY'];
 if (!PK) {
     console.log('Fork PR; not computing size.');
     process.exit(0);
@@ -36,35 +36,79 @@ const repo = 'mapbox-gl-js';
         authStrategy: createAppAuth,
         auth: {
             id: SIZE_CHECK_APP_ID,
-            privateKey: PK,
+            privateKey: Buffer.from(PK, 'base64').toString('binary'),
             installationId: SIZE_CHECK_APP_INSTALLATION_ID
         }
     });
 
     //get current sizes
     const currentSizes = FILES.map(([label, filePath]) => [label, getSize(filePath)]);
     console.log(currentSizes);
-    // Why we need to add GitHub's public key to known_hosts:
-    // https://circleci.com/docs/2.0/gh-bb-integration/#establishing-the-authenticity-of-an-ssh-host
-    execSync(`mkdir -p ~/.ssh`);
-    execSync(`echo 'github.com ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEAq2A7hRGmdnm9tUDbO9IDSwBK6TbQa+PXYPCPy6rbTrTtw7PHkccKrpp0yVhp5HdEIcKr6pLlVDBfOLX9QUsyCOV0wzfjIJNlGEYsdlLJizHhbn2mUjvSAHQqZETYP81eFzLQNnPHt4EVVUh7VfDESU84KezmD5QlWpXLmvU31/yMf+Se8xhHTvKSCZIFImWwoG6mbUoWf9nzpIoaSjB+weqqUUmpaaasXVal72J+UX2B+2RPW3RcT0eOzQgqlJL3RKrTJvdsjE3JEAvGq3lGHSZXy28G3skua2SmVi/w4yCE6gbODqnTWlg7+wC604ydGXA8VJiS5ap43JXiUFFAaQ==
-    bitbucket.org ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEAubiN81eDcafrgMeLzaFPsw2kNvEcqTKl/VqLat/MaB33pZy0y3rJZtnqwR2qOOvbwKZYKiEO1O6VqNEBxKvJJelCq0dTXWT5pbO2gDXC6h6QDXCaHo6pOHGPUy+YBaGQRGuSusMEASYiWunYN0vCAI8QaXnWMXNMdFP3jHAJH0eDsoiGnLPBlBp4TNm6rYI74nMzgz3B9IikW4WVK+dc8KZJZWYjAuORU3jc1c/NPskD2ASinf8v3xnfXeukU0sJ5N6m5E8VLjObPEO+mN2t/FZTMZLiFqPWc/ALSqnMnnhwrNi2rbfg/rd/IpL8Le3pSBne8+seeFVBoGqzHM9yXw==
-    ' >> ~/.ssh/known_hosts`);
-    execSync(`git reset --hard && git checkout origin/main`);
-    execSync('yarn install');
-    execSync('yarn run build-prod-min');
-    execSync('yarn run build-css');
-    const priorSizes = FILES.map(([label, filePath]) => [label, getSize(filePath)]);
-    console.log(priorSizes);
+
+    async function getMergeBase() {
+        const head = process.env['CIRCLE_SHA1'];
+        const pr = process.env['CIRCLE_PULL_REQUEST'];
+        if (pr) {
+            const number = +pr.match(/\/(\d+)\/?$/)[1];
+            return github.pulls.get({
+                owner,
+                repo,
+                pull_number: number
+            }).then(({data}) => {
+                const base = data.base.ref;
+                return execSync(`git merge-base origin/${base} ${head}`).toString().trim();
+            });
+        } else {
+            // Walk backward through the history (maximum of 10 commits) until
+            // finding a commit on either master or release-*; assume that's the
+            // base branch.
+            for (const sha of execSync(`git rev-list --max-count=10 ${head}`).toString().trim().split('\n')) {
+                const base = execSync(`git branch -r --contains ${sha} origin/main origin/release-*`).toString().split('\n')[0].trim();
+                if (base) {
+                    return Promise.resolve(execSync(`git merge-base ${base} ${head}`).toString().trim());
+                }
+            }
+        }
+
+        return Promise.resolve(null);
+    }
+
+    async function getPriorSize(mergeBase, name) {
+        if (!mergeBase) {
+            console.log('No merge base available.');
+            return Promise.resolve(null);
+        }
+
+        return github.checks.listForRef({
+            owner,
+            repo,
+            ref: mergeBase
+        }).then(({data}) => {
+            const run = data.check_runs.find(run => run.name === name);
+            if (run) {
+                const match = run.output.summary.match(/`[^`]+` is (\d+) bytes \([^\)]+\) uncompressed, (\d+) bytes \([^\)]+\) gzipped\./);
+                if (match) {
+                    const prior = { size: +match[1], gzipSize: +match[2] };
+                    console.log(`Prior size was ${prettyBytes(prior.size)}, gzipped ${prior.gzipSize}.`);
+                    return prior;
+                }
+            }
+            console.log('No matching check found.');
+            return Promise.resolve(null);
+        });
+    }
+
+    const mergeBase = await getMergeBase();
 
     // Generate a github check for each filetype
     for(let check_idx=0; check_idx<FILES.length; check_idx++){
         const [label, file] = FILES[check_idx];
         const name = `Size - ${label}`;
         const size = currentSizes[check_idx][1];
-        const priorSize = priorSizes[check_idx][1];
+        const priorSize = await getPriorSize(mergeBase, name);
+        console.log('priorSize: ', label, priorSize);
 
-        const title = `${formatSize(size.size, priorSize.size)}, gzipped ${formatSize(size.gzipSize, priorSize.gzipSize)}`;
+        const title = `${formatSize(size.size, priorSize ? priorSize.size : null)}, gzipped ${formatSize(size.gzipSize, priorSize ? priorSize.gzipSize : null)}`;
 
         const megabit = Math.pow(2, 12);
         const downloadTime3G = (size.gzipSize / (3 * megabit)).toFixed(0);

build/generate-struct-arrays.js

@@ -185,7 +185,9 @@ createStructArrayType('feature_index', createLayout([
     // the source layer the feature appears in
     { type: 'Uint16', name: 'sourceLayerIndex' },
     // the bucket the feature appears in
-    { type: 'Uint16', name: 'bucketIndex' }
+    { type: 'Uint16', name: 'bucketIndex' },
+    // Offset into bucket.layoutVertexArray
+    { type: 'Uint16', name: 'layoutVertexArrayOffset' },
 ]), true);
 
 // triangle index array
@@ -230,12 +232,13 @@ createStructArrayLayoutType(createLayout([{
 }], 4));
 
 // Fill extrusion specific array
-createStructArrayType(`fill_extrusion_centroid`, centroidAttributes);
+createStructArrayType(`fill_extrusion_centroid`, centroidAttributes, true);
 
 const layouts = Object.keys(layoutCache).map(k => layoutCache[k]);
 
 fs.writeFileSync('src/data/array_types.js',
     `// This file is generated. Edit build/generate-struct-arrays.js, then run \`yarn run codegen\`.
+/* eslint-disable camelcase */
 // @flow
 
 import assert from 'assert';

debug/10186.html

@@ -0,0 +1,131 @@
+<!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">
+    <style>
+        body { margin: 0; padding: 0 }
+        html, body, #map { height: 100%; }
+
+        #checkboxes {
+            position: absolute;
+            top:0;
+            left:0;
+            padding:10px;
+        }
+    </style>
+</head>
+
+<body>
+<div id='map'></div>
+<div id='checkboxes'>
+    <label><input id='show-tile-boundaries-checkbox' type='checkbox'> tile debug</label><br />
+</div>
+<script src='../dist/mapbox-gl-dev.js'></script>
+<script src='../debug/access_token_generated.js'></script>
+<script>
+
+const map = window.map = new mapboxgl.Map({
+    container: 'map',
+    style: {
+        'version': 8,
+        'name': "Blank",
+        'sources': {
+            'composite': {
+                'url': 'mapbox://mapbox.country-boundaries-v1',
+                'type': 'vector'
+            },
+            'overlay': {
+                'type': 'image',
+                'url': 'https://docs.mapbox.com/mapbox-gl-js/assets/radar.gif',
+                'coordinates': [
+                    [-80.425, 46.437],
+                    [-71.516, 46.437],
+                    [-71.516, 37.936],
+                    [-80.425, 37.936]
+                ]
+            },
+            'label': {
+                'type': 'geojson',
+                'data': {
+                    'type': 'FeatureCollection',
+                    'features': [{
+                        'type': 'Feature',
+                        'geometry': {
+                            'type': 'Point',
+                            'coordinates': [ -73, 43 ]
+                        }
+                    }]
+                }
+            }
+        },
+        'layers': [{
+            'id': 'background',
+            'type': 'background',
+            'paint': {
+                'background-color': 'beige'
+            }
+        },
+        {
+            'id': 'country-boundaries',
+            'type': 'line',
+            'paint': {
+                'line-color': 'hsl(216, 74%, 50%)'
+            },
+            'layout': {},
+            'source': 'composite',
+            'source-layer': 'country_boundaries'
+        },
+        {
+            'id': 'symbol',
+            'type': 'symbol',
+            'source': 'label',
+            'layout': {
+                'text-field': 'Test Test Test',
+                'text-size': 20,
+                'text-font': [
+                    'Open Sans Semibold',
+                    'Arial Unicode MS Bold'
+                ]
+            },
+            'paint': {
+                'text-color': 'red'
+            }
+        },
+        {
+            'id': 'overlay',
+            'source': 'overlay',
+            'type': 'raster',
+            'paint': {
+                'raster-opacity': 0.85
+            }
+        }],
+        'glyphs': 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
+        'id': 'blank'
+    },
+    hash: true,
+    center: [0, 0],
+    pitch: 0,
+    bearing: 0,
+    zoom: 0,
+    optimizeForTerrain: true
+});
+
+map.on('load', function () {
+    map.addSource('mapbox-dem', {
+        'type': 'raster-dem',
+        'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
+        'tileSize': 512,
+        'maxzoom': 14
+    });
+    map.setTerrain({'source': 'mapbox-dem', 'exaggeration': 1.5});
+});
+
+document.getElementById('show-tile-boundaries-checkbox').onclick = function() {
+    map.showTileBoundaries = !!this.checked;
+};
+
+</script>
+</body>
+</html>

debug/3d-playground.html

@@ -50,9 +50,20 @@
 window.onload = function() {
     var gui = new dat.GUI(); // eslint-disable-line
 
-    var style = gui.add(demo3d, 'style', [ 'streets-v11', 'light-v10', 'dark-v10', 'outdoors-v11', 'satellite-v9' ]);
+    var style = gui.add(demo3d, 'style', [
+        'mapbox/streets-v11',
+        'mapbox/satellite-streets-v11',
+        'mapbox/light-v10',
+        'mapbox/dark-v10',
+        'mapbox/outdoors-v11',
+        'mapbox/satellite-v9',
+        'mapbox/cjerxnqt3cgvp2rmyuxbeqme7',
+        'mapbox-map-design/ckhqrdj3q0q1y19ko8t70qtqu',
+        'mapbox-map-design/ckhqrf2tz0dt119ny6azh975y',
+        'mapbox-map-design/ckhqrbxlc1awj19svtb92m0bd'
+    ]);
     style.onFinishChange((value) => {
-        map.setStyle('mapbox://styles/mapbox/' + value);
+        map.setStyle('mapbox://styles/' + value);
     });
 
     var terrain = gui.addFolder('Terrain');
@@ -132,38 +143,6 @@
     });
     map.setTerrain(demo3d.enableTerrain ? {"source": "mapbox-dem", "exaggeration": 1.5} : null);
 
-    const hillshadeID = map.style._order.find((id) => map.style.getLayer(id).type === 'hillshade') || 'hillshade';
-    let hillshade = map.getLayer(hillshadeID);
-    let addHillshadeBefore = 'hillshade_highlight_bright';
-    if (hillshade && hillshade.type === 'hillshade') {
-        addHillshadeBefore = map.style._order[map.style._order.indexOf(hillshadeID) + 1];
-        map.removeLayer(hillshadeID);
-        hillshade = null;
-    }
-    if (!hillshade) {
-        map.addLayer({
-            "id": hillshadeID,
-            "source": "mapbox-dem",
-            "type": "hillshade"
-        }, addHillshadeBefore);
-    }
-    ["housenum-label", "hillshade_highlight_bright", "hillshade_highlight_med", "hillshade_shadow_faint",
-        "hillshade_shadow_med", "hillshade_shadow_dark", "hillshade_shadow_extreme"].forEach(layerid => { if (map.getLayer(layerid)) map.removeLayer(layerid); });
-
-    map.addSource("satellite", {
-        "type": "raster",
-        "url": "mapbox://mapbox.satellite",
-        "tileSize": 512
-    });
-    map.addLayer({
-        "id": "satellite",
-        "type": "raster",
-        "source": "satellite",
-        "layout": {
-            "visibility": "none"
-        }
-    });
-
     map.addLayer({
         'id': "extrusion",
         'source': 'composite',