Updates for v2.9.0-beta.2 (#11970)

* beta.2 * Reload tiles after TileJSON is loaded in VectorTileSource#setSourceProperty (#11963) * Reload tiles after TileJSON is loaded in setSourceProperty * add more i18n tests * drop the language validation * mark i18n API as private * update s3 link to lower res video (#11965) Co-authored-by: Stepan Kuzmin <[email protected]> Co-authored-by: Anna Peery <[email protected]>
mapbox · Jun 8, 2022 · efadd30 · efadd30
1 parent 591b4fe
commit efadd30
Show file tree

Hide file tree

Showing 7 changed files with 142 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,4 @@
-## 2.9.0-beta.1
+## 2.9.0-beta.2
 
 ### Features ✨
 
@@ -14,6 +14,7 @@
 * 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
 

diff --git a/debug/globe-with-video.html b/debug/globe-with-video.html
@@ -41,7 +41,7 @@
     "sources": {
         "video": {
             "type": "video",
-            "urls": [ "ozone.mp4", "https://static-assets.mapbox.com/mapbox-gl-js/ozone.mp4"],
+            "urls": [ "ozone.mp4", "https://static-assets.mapbox.com/mapbox-gl-js/ozone2.mp4"],
             "coordinates": [
                 [-180.0, 85.0511287798066],
                 [180.0, 85.0511287798066],

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mapbox-gl",
   "description": "A WebGL interactive maps library",
-  "version": "2.9.0-beta.1",
+  "version": "2.9.0-beta.2",
   "main": "dist/mapbox-gl.js",
   "style": "dist/mapbox-gl.css",
   "license": "SEE LICENSE IN LICENSE.txt",

diff --git a/src/source/vector_tile_source.js b/src/source/vector_tile_source.js
@@ -105,11 +105,11 @@ class VectorTileSource extends Evented implements Source {
         this._deduped = new DedupedRequest();
     }
 
-    load() {
+    load(callback?: Callback<void>) {
         this._loaded = false;
         this.fire(new Event('dataloading', {dataType: 'source'}));
-        const language = this.map._language;
-        const worldview = this.map._worldview;
+        const language = this.language || this.map._language;
+        const worldview = this.worldview || this.map._worldview;
         this._tileJSONRequest = loadTileJSON(this._options, this.map._requestManager, language, worldview, (err, tileJSON) => {
             this._tileJSONRequest = null;
             this._loaded = true;
@@ -129,6 +129,8 @@ class VectorTileSource extends Evented implements Source {
                 this.fire(new Event('data', {dataType: 'source', sourceDataType: 'metadata'}));
                 this.fire(new Event('data', {dataType: 'source', sourceDataType: 'content'}));
             }
+
+            if (callback) callback(err);
         });
     }
 
@@ -152,11 +154,13 @@ class VectorTileSource extends Evented implements Source {
 
         callback();
 
-        const sourceCaches = this.map.style._getSourceCaches(this.id);
-        for (const sourceCache of sourceCaches) {
-            sourceCache.clearTiles();
-        }
-        this.load();
+        // Reload current tiles after TileJSON is loaded
+        this.load(() => {
+            const sourceCaches = this.map.style._getSourceCaches(this.id);
+            for (const sourceCache of sourceCaches) {
+                sourceCache.clearTiles();
+            }
+        });
     }
 
     /**
@@ -212,10 +216,6 @@ class VectorTileSource extends Evented implements Source {
 
     _setLanguage(language?: ?string): this {
         if (language === this.language) return this;
-        if (this.languageOptions && language && !this.languageOptions[language]) {
-            console.warn(`Vector tile source "${this.id}" does not support language "${language}".`);
-            return this;
-        }
 
         this.setSourceProperty(() => {
             this.language = language;

diff --git a/src/style-spec/package.json b/src/style-spec/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@mapbox/mapbox-gl-style-spec",
   "description": "a specification for mapbox gl styles",
-  "version": "13.25.0-beta.1",
+  "version": "13.25.0-beta.2",
   "author": "Mapbox",
   "keywords": [
     "mapbox",

diff --git a/src/ui/map.js b/src/ui/map.js
@@ -1056,6 +1056,7 @@ class Map extends Camera {
     /**
      * Returns the code for the map's language which is used for translating map labels.
      *
+     * @private
      * @returns {string} Returns the map's language code.
      * @example
      * const language = map.getLanguage();
@@ -1067,6 +1068,7 @@ class Map extends Camera {
     /**
      * Sets the map's language.
      *
+     * @private
      * @param {string} language A string representing the desired language. `undefined` or `null` will remove the current map language and reset the map to the default language as determined by `window.navigator.language`.
      * @returns {Map} Returns itself to allow for method chaining.
      * @example
@@ -1099,6 +1101,7 @@ class Map extends Camera {
     /**
      * Returns the code for the map's worldview.
      *
+     * @private
      * @returns {string} Returns the map's worldview code.
      * @example
      * const worldview = map.getWorldview();
@@ -1110,6 +1113,7 @@ class Map extends Camera {
     /**
      * Sets the map's worldview.
      *
+     * @private
      * @param {string} worldview A string representing the desired worldview. `undefined` or `null` will cause the map to fall back to the TileJSON's default worldview.
      * @returns {Map} Returns itself to allow for method chaining.
      * @example

diff --git a/test/unit/source/vector_tile_source.test.js b/test/unit/source/vector_tile_source.test.js
@@ -19,16 +19,17 @@ const mockDispatcher = wrapDispatcher({
     send () {}
 });
 
-function createSource(options, transformCallback) {
+function createSource(options, {transformCallback, customAccessToken} = {}) {
     const source = new VectorTileSource('id', options, mockDispatcher, options.eventedParent);
+    const sourceCache = {clearTiles: () => {}};
+
     source.onAdd({
         transform: {showCollisionBoxes: false},
         _getMapId: () => 1,
-        _requestManager: new RequestManager(transformCallback),
+        _requestManager: new RequestManager(transformCallback, customAccessToken),
+        _sourceCaches: [sourceCache],
         style: {
-            _getSourceCaches: () => {
-                return [{clearTiles: () => {}}];
-            }
+            _getSourceCaches: () => [sourceCache]
         }
     });
 
@@ -93,7 +94,7 @@ test('VectorTileSource', (t) => {
             return {url};
         });
 
-        createSource({url: "/source.json"}, transformSpy);
+        createSource({url: "/source.json"}, {transformCallback: transformSpy});
         window.server.respond();
         t.equal(transformSpy.getCall(0).args[0], '/source.json');
         t.equal(transformSpy.getCall(0).args[1], 'Source');
@@ -390,6 +391,33 @@ test('VectorTileSource', (t) => {
         t.end();
     });
 
+    t.test('supports property updates', (t) => {
+        window.server.respondWith('/source.json', JSON.stringify(sourceFixture));
+        const source = createSource({url: '/source.json'});
+        window.server.respond();
+
+        const loadSpy = t.spy(source, 'load');
+        const clearTilesSpy = t.spy(source.map._sourceCaches[0], 'clearTiles');
+
+        const responseSpy = t.spy((xhr) =>
+            xhr.respond(200, {"Content-Type": "application/json"}, JSON.stringify(sourceFixture)));
+
+        window.server.respondWith('/source.json', responseSpy);
+
+        source.setSourceProperty(() => {
+            source.attribution = 'OpenStreetMap';
+        });
+
+        window.server.respond();
+
+        t.ok(loadSpy.calledOnce);
+        t.ok(responseSpy.calledOnce);
+        t.ok(clearTilesSpy.calledOnce);
+        t.ok(responseSpy.calledBefore(clearTilesSpy), 'Tiles should be cleared after TileJSON is loaded');
+
+        t.end();
+    });
+
     t.test('supports url property updates', (t) => {
         const source = createSource({
             url: "http://localhost:2900/source.json"
@@ -420,5 +448,92 @@ test('VectorTileSource', (t) => {
         t.end();
     });
 
+    t.test('supports i18n tilesets', (t) => {
+        /* eslint camelcase: ["error", {allow: ["language_options", "worldview_options", "worldview_default"]}] */
+        const source = createSource({url: 'mapbox://user.map'}, {customAccessToken: 'key'});
+
+        const manager = source.map._requestManager;
+        const transformSpy = t.spy(manager, 'transformRequest');
+
+        // Response for initial request
+        window.server.respondWith(manager.normalizeSourceURL('mapbox://user.map'), JSON.stringify({
+            id: 'id',
+            minzoom: 1,
+            maxzoom: 10,
+            attribution: 'Mapbox',
+            language_options: {en: 'English', es: 'Spanish'},
+            worldview_default: 'US',
+            worldview_options: {CN: 'China', US: 'United States'},
+            tiles: ['https://api.mapbox.com/v4/user.map/{z}/{x}/{y}.png?access_token=key'],
+        }));
+
+        // Response for i18n request
+        window.server.respondWith(manager.normalizeSourceURL('mapbox://user.map', null, 'es', 'CN'), JSON.stringify({
+            id: 'id',
+            minzoom: 1,
+            maxzoom: 10,
+            attribution: 'Mapbox',
+            language: {id: 'es'},
+            language_options: {en: 'English', es: 'Spanish'},
+            worldview: {id: 'CN'},
+            worldview_default: 'US',
+            worldview_options: {CN: 'China', US: 'United States'},
+            tiles: ['https://api.mapbox.com/v4/user.map/{z}/{x}/{y}.png?access_token=key&language=es&worldview=CN'],
+        }));
+
+        let initialMetadataEvent = true;
+
+        source.on('data', (e) => {
+            if (e.sourceDataType !== 'metadata') return;
+
+            if (initialMetadataEvent) {
+                initialMetadataEvent = false;
+
+                // Initial language and worldview
+                t.deepEqual(source.tiles, ['mapbox://tiles/user.map/{z}/{x}/{y}.png']);
+                t.deepEqual(source.minzoom, 1);
+                t.deepEqual(source.maxzoom, 10);
+                t.deepEqual(source.attribution, 'Mapbox');
+                t.deepEqual(source.language, undefined);
+                t.deepEqual(source.languageOptions, {en: 'English', es: 'Spanish'});
+                t.deepEqual(source.worldview, 'US');
+                t.deepEqual(source.worldviewOptions, {CN: 'China', US: 'United States'});
+
+                source.loadTile({
+                    tileID: new OverscaledTileID(10, 0, 10, 5, 5),
+                }, () => {});
+
+                t.equal(transformSpy.lastCall.firstArg, `https://api.mapbox.com/v4/user.map/10/5/5.png?sku=${manager._skuToken}&access_token=key`);
+
+                // Update source language and worldview
+                source._setLanguage('es');
+                source._setWorldview('CN');
+                window.server.respond();
+
+                return;
+            }
+
+            // Updated language and worldview
+            t.deepEqual(source.tiles, ['mapbox://tiles/user.map/{z}/{x}/{y}.png?language=es&worldview=CN']);
+            t.deepEqual(source.minzoom, 1);
+            t.deepEqual(source.maxzoom, 10);
+            t.deepEqual(source.attribution, 'Mapbox');
+            t.deepEqual(source.language, 'es');
+            t.deepEqual(source.languageOptions, {en: 'English', es: 'Spanish'});
+            t.deepEqual(source.worldview, 'CN');
+            t.deepEqual(source.worldviewOptions, {CN: 'China', US: 'United States'});
+
+            source.loadTile({
+                tileID: new OverscaledTileID(10, 0, 10, 5, 5),
+            }, () => {});
+
+            t.equal(transformSpy.lastCall.firstArg, `https://api.mapbox.com/v4/user.map/10/5/5.png?language=es&worldview=CN&sku=${manager._skuToken}&access_token=key`);
+
+            t.end();
+        });
+
+        window.server.respond();
+    });
+
     t.end();
 });