Add sku token to Mapbox API tile requests (#14) (#8276)

mapbox · May 22, 2019 · 0b99b23 · 0b99b23
1 parent 2dbd0dd
commit 0b99b23
Show file tree

Hide file tree

Showing 30 changed files with 617 additions and 397 deletions.
diff --git a/bench/lib/fetch_style.js b/bench/lib/fetch_style.js
@@ -1,10 +1,12 @@
 // @flow
 
 import type {StyleSpecification} from '../../src/style-spec/types';
-import {normalizeStyleURL} from '../../src/util/mapbox';
+import { RequestManager } from '../../src/util/mapbox';
+
+const requestManager = new RequestManager();
 
 export default function fetchStyle(value: string | StyleSpecification): Promise<StyleSpecification> {
     return typeof value === 'string' ?
-        fetch(normalizeStyleURL(value)).then(response => response.json()) :
+        fetch(requestManager.normalizeStyleURL(value)).then(response => response.json()) :
         Promise.resolve(value);
 }
diff --git a/bench/lib/tile_parser.js b/bench/lib/tile_parser.js
@@ -7,7 +7,7 @@ import assert from 'assert';
 import deref from '../../src/style-spec/deref';
 import Style from '../../src/style/style';
 import { Evented } from '../../src/util/evented';
-import { normalizeSourceURL, normalizeTileURL } from '../../src/util/mapbox';
+import { RequestManager } from '../../src/util/mapbox';
 import WorkerTile from '../../src/source/worker_tile';
 import StyleLayerIndex from '../../src/style/style_layer_index';
 
@@ -17,23 +17,28 @@ import type { OverscaledTileID } from '../../src/source/tile_id';
 import type { TileJSON } from '../../src/types/tilejson';
 
 class StubMap extends Evented {
-    _transformRequest(url) {
-        return {url};
+    _requestManager: RequestManager;
+
+    constructor() {
+        super();
+        this._requestManager = new RequestManager();
     }
 }
 
+const mapStub = new StubMap();
+
 function createStyle(styleJSON: StyleSpecification): Promise<Style> {
     return new Promise((resolve, reject) => {
-        const style = new Style((new StubMap(): any));
+        const style = new Style((mapStub: any));
         style.loadJSON(styleJSON);
         style
             .on('style.load', () => resolve(style))
             .on('error', reject);
     });
 }
 
-function fetchTileJSON(sourceURL: string): Promise<TileJSON> {
-    return fetch(normalizeSourceURL(sourceURL))
+function fetchTileJSON(requestManager: RequestManager, sourceURL: string): Promise<TileJSON> {
+    return fetch(requestManager.normalizeSourceURL(sourceURL))
         .then(response => response.json());
 }
 
@@ -95,15 +100,15 @@ export default class TileParser {
 
         return Promise.all([
             createStyle(this.styleJSON),
-            fetchTileJSON((this.styleJSON.sources[this.sourceID]: any).url)
+            fetchTileJSON(mapStub._requestManager, (this.styleJSON.sources[this.sourceID]: any).url)
         ]).then(([style: Style, tileJSON: TileJSON]) => {
             this.style = style;
             this.tileJSON = tileJSON;
         });
     }
 
     fetchTile(tileID: OverscaledTileID) {
-        return fetch(normalizeTileURL(tileID.canonical.url(this.tileJSON.tiles)))
+        return fetch(this.style.map._requestManager.normalizeTileURL(tileID.canonical.url(this.tileJSON.tiles)))
             .then(response => response.arrayBuffer())
             .then(buffer => ({tileID, buffer}));
     }

diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
   },
   "engines": {
     "node": ">=6.4.0"
-  },
+},
   "dependencies": {
     "@mapbox/geojson-rewind": "^0.4.0",
     "@mapbox/geojson-types": "^1.0.2",

diff --git a/src/render/glyph_manager.js b/src/render/glyph_manager.js
@@ -8,7 +8,7 @@ import { asyncAll } from '../util/util';
 import { AlphaImage } from '../util/image';
 
 import type {StyleGlyph} from '../style/style_glyph';
-import type {RequestTransformFunction} from '../ui/map';
+import type {RequestManager} from '../util/mapbox';
 import type {Callback} from '../types/callback';
 
 type Entry = {
@@ -19,7 +19,7 @@ type Entry = {
 };
 
 class GlyphManager {
-    requestTransform: RequestTransformFunction;
+    requestManager: RequestManager;
     localIdeographFontFamily: ?string;
     entries: {[string]: Entry};
     url: ?string;
@@ -28,8 +28,8 @@ class GlyphManager {
     static loadGlyphRange: typeof loadGlyphRange;
     static TinySDF: Class<TinySDF>;
 
-    constructor(requestTransform: RequestTransformFunction, localIdeographFontFamily: ?string) {
-        this.requestTransform = requestTransform;
+    constructor(requestManager: RequestManager, localIdeographFontFamily: ?string) {
+        this.requestManager = requestManager;
         this.localIdeographFontFamily = localIdeographFontFamily;
         this.entries = {};
     }
@@ -77,7 +77,7 @@ class GlyphManager {
             let requests = entry.requests[range];
             if (!requests) {
                 requests = entry.requests[range] = [];
-                GlyphManager.loadGlyphRange(stack, range, (this.url: any), this.requestTransform,
+                GlyphManager.loadGlyphRange(stack, range, (this.url: any), this.requestManager,
                     (err, response: ?{[number]: StyleGlyph | null}) => {
                         if (response) {
                             for (const id in response) {

diff --git a/src/source/geojson_source.js b/src/source/geojson_source.js
@@ -247,7 +247,7 @@ class GeoJSONSource extends Evented implements Source {
         const options = extend({}, this.workerOptions);
         const data = this._data;
         if (typeof data === 'string') {
-            options.request = this.map._transformRequest(browser.resolveURL(data), ResourceType.Source);
+            options.request = this.map._requestManager.transformRequest(browser.resolveURL(data), ResourceType.Source);
             options.request.collectResourceTiming = this._collectResourceTiming;
         } else {
             options.data = JSON.stringify(data);

diff --git a/src/source/image_source.js b/src/source/image_source.js
@@ -109,7 +109,7 @@ class ImageSource extends Evented implements Source {
 
         this.url = this.options.url;
 
-        getImage(this.map._transformRequest(this.url, ResourceType.Image), (err, image) => {
+        getImage(this.map._requestManager.transformRequest(this.url, ResourceType.Image), (err, image) => {
             if (err) {
                 this.fire(new ErrorEvent(err));
             } else if (image) {

diff --git a/src/source/load_tilejson.js b/src/source/load_tilejson.js
@@ -4,14 +4,13 @@ import { pick } from '../util/util';
 
 import { getJSON, ResourceType } from '../util/ajax';
 import browser from '../util/browser';
-import { normalizeSourceURL as normalizeURL, canonicalizeTileset } from '../util/mapbox';
 
-import type {RequestTransformFunction} from '../ui/map';
+import type {RequestManager} from '../util/mapbox';
 import type {Callback} from '../types/callback';
 import type {TileJSON} from '../types/tilejson';
 import type {Cancelable} from '../types/cancelable';
 
-export default function(options: any, requestTransformFn: RequestTransformFunction, callback: Callback<TileJSON>): Cancelable {
+export default function(options: any, requestManager: RequestManager, callback: Callback<TileJSON>): Cancelable {
     const loaded = function(err: ?Error, tileJSON: ?Object) {
         if (err) {
             return callback(err);
@@ -28,14 +27,14 @@ export default function(options: any, requestTransformFn: RequestTransformFuncti
 
             // only canonicalize tile tileset if source is declared using a tilejson url
             if (options.url) {
-                result.tiles = canonicalizeTileset(result, options.url);
+                result.tiles = requestManager.canonicalizeTileset(result, options.url);
             }
             callback(null, result);
         }
     };
 
     if (options.url) {
-        return getJSON(requestTransformFn(normalizeURL(options.url), ResourceType.Source), loaded);
+        return getJSON(requestManager.transformRequest(requestManager.normalizeSourceURL(options.url), ResourceType.Source), loaded);
     } else {
         return browser.frame(() => loaded(null, options));
     }

diff --git a/src/source/raster_dem_tile_source.js b/src/source/raster_dem_tile_source.js
@@ -3,7 +3,6 @@
 import { getImage, ResourceType } from '../util/ajax';
 import { extend } from '../util/util';
 import { Evented } from '../util/evented';
-import { normalizeTileURL as normalizeURL } from '../util/mapbox';
 import browser from '../util/browser';
 import { OverscaledTileID } from './tile_id';
 import RasterTileSource from './raster_tile_source';
@@ -40,8 +39,8 @@ class RasterDEMTileSource extends RasterTileSource implements Source {
     }
 
     loadTile(tile: Tile, callback: Callback<void>) {
-        const url = normalizeURL(tile.tileID.canonical.url(this.tiles, this.scheme), this.url, this.tileSize);
-        tile.request = getImage(this.map._transformRequest(url, ResourceType.Tile), imageLoaded.bind(this));
+        const url = this.map._requestManager.normalizeTileURL(tile.tileID.canonical.url(this.tiles, this.scheme), this.url, this.tileSize);
+        tile.request = getImage(this.map._requestManager.transformRequest(url, ResourceType.Tile), imageLoaded.bind(this));
 
         tile.neighboringTiles = this._getNeighboringTiles(tile.tileID);
         function imageLoaded(err, img) {

diff --git a/src/source/raster_tile_source.js b/src/source/raster_tile_source.js
@@ -5,7 +5,7 @@ import { extend, pick } from '../util/util';
 import { getImage, ResourceType } from '../util/ajax';
 import { Event, ErrorEvent, Evented } from '../util/evented';
 import loadTileJSON from './load_tilejson';
-import { normalizeTileURL as normalizeURL, postTurnstileEvent, postMapLoadEvent } from '../util/mapbox';
+import { postTurnstileEvent, postMapLoadEvent } from '../util/mapbox';
 import TileBounds from './tile_bounds';
 import Texture from '../render/texture';
 
@@ -61,7 +61,7 @@ class RasterTileSource extends Evented implements Source {
 
     load() {
         this.fire(new Event('dataloading', {dataType: 'source'}));
-        this._tileJSONRequest = loadTileJSON(this._options, this.map._transformRequest, (err, tileJSON) => {
+        this._tileJSONRequest = loadTileJSON(this._options, this.map._requestManager, (err, tileJSON) => {
             this._tileJSONRequest = null;
             if (err) {
                 this.fire(new ErrorEvent(err));
@@ -70,7 +70,7 @@ class RasterTileSource extends Evented implements Source {
                 if (tileJSON.bounds) this.tileBounds = new TileBounds(tileJSON.bounds, this.minzoom, this.maxzoom);
 
                 postTurnstileEvent(tileJSON.tiles);
-                postMapLoadEvent(tileJSON.tiles, this.map._getMapId());
+                postMapLoadEvent(tileJSON.tiles, this.map._getMapId(), this.map._requestManager._skuToken);
 
                 // `content` is included here to prevent a race condition where `Style#_updateSources` is called
                 // before the TileJSON arrives. this makes sure the tiles needed are loaded once TileJSON arrives
@@ -102,8 +102,8 @@ class RasterTileSource extends Evented implements Source {
     }
 
     loadTile(tile: Tile, callback: Callback<void>) {
-        const url = normalizeURL(tile.tileID.canonical.url(this.tiles, this.scheme), this.url, this.tileSize);
-        tile.request = getImage(this.map._transformRequest(url, ResourceType.Tile), (err, img) => {
+        const url = this.map._requestManager.normalizeTileURL(tile.tileID.canonical.url(this.tiles, this.scheme), this.url, this.tileSize);
+        tile.request = getImage(this.map._requestManager.transformRequest(url, ResourceType.Tile), (err, img) => {
             delete tile.request;
 
             if (tile.aborted) {

diff --git a/src/source/vector_tile_source.js b/src/source/vector_tile_source.js
@@ -4,7 +4,7 @@ import { Event, ErrorEvent, Evented } from '../util/evented';
 
 import { extend, pick } from '../util/util';
 import loadTileJSON from './load_tilejson';
-import { normalizeTileURL as normalizeURL, postTurnstileEvent, postMapLoadEvent } from '../util/mapbox';
+import { postTurnstileEvent, postMapLoadEvent } from '../util/mapbox';
 import TileBounds from './tile_bounds';
 import { ResourceType } from '../util/ajax';
 import browser from '../util/browser';
@@ -65,7 +65,7 @@ class VectorTileSource extends Evented implements Source {
 
     load() {
         this.fire(new Event('dataloading', {dataType: 'source'}));
-        this._tileJSONRequest = loadTileJSON(this._options, this.map._transformRequest, (err, tileJSON) => {
+        this._tileJSONRequest = loadTileJSON(this._options, this.map._requestManager, (err, tileJSON) => {
             this._tileJSONRequest = null;
             if (err) {
                 this.fire(new ErrorEvent(err));
@@ -74,7 +74,7 @@ class VectorTileSource extends Evented implements Source {
                 if (tileJSON.bounds) this.tileBounds = new TileBounds(tileJSON.bounds, this.minzoom, this.maxzoom);
 
                 postTurnstileEvent(tileJSON.tiles);
-                postMapLoadEvent(tileJSON.tiles, this.map._getMapId());
+                postMapLoadEvent(tileJSON.tiles, this.map._getMapId(), this.map._requestManager._skuToken);
 
                 // `content` is included here to prevent a race condition where `Style#_updateSources` is called
                 // before the TileJSON arrives. this makes sure the tiles needed are loaded once TileJSON arrives
@@ -106,9 +106,9 @@ class VectorTileSource extends Evented implements Source {
     }
 
     loadTile(tile: Tile, callback: Callback<void>) {
-        const url = normalizeURL(tile.tileID.canonical.url(this.tiles, this.scheme), this.url);
+        const url = this.map._requestManager.normalizeTileURL(tile.tileID.canonical.url(this.tiles, this.scheme), this.url, null);
         const params = {
-            request: this.map._transformRequest(url, ResourceType.Tile),
+            request: this.map._requestManager.transformRequest(url, ResourceType.Tile),
             uid: tile.uid,
             tileID: tile.tileID,
             zoom: tile.tileID.overscaledZ,

diff --git a/src/source/video_source.js b/src/source/video_source.js
@@ -66,7 +66,7 @@ class VideoSource extends ImageSource {
 
         this.urls = [];
         for (const url of options.urls) {
-            this.urls.push(this.map._transformRequest(url, ResourceType.Source).url);
+            this.urls.push(this.map._requestManager.transformRequest(url, ResourceType.Source).url);
         }
 
         getVideo(this.urls, (err, video) => {

diff --git a/src/style/load_glyph_range.js b/src/style/load_glyph_range.js
@@ -1,25 +1,23 @@
 // @flow
 
-import { normalizeGlyphsURL } from '../util/mapbox';
-
 import { getArrayBuffer, ResourceType } from '../util/ajax';
 
 import parseGlyphPBF from './parse_glyph_pbf';
 
 import type {StyleGlyph} from './style_glyph';
-import type {RequestTransformFunction} from '../ui/map';
+import type {RequestManager} from '../util/mapbox';
 import type {Callback} from '../types/callback';
 
 export default function (fontstack: string,
                            range: number,
                            urlTemplate: string,
-                           requestTransform: RequestTransformFunction,
+                           requestManager: RequestManager,
                            callback: Callback<{[number]: StyleGlyph | null}>) {
     const begin = range * 256;
     const end = begin + 255;
 
-    const request = requestTransform(
-        normalizeGlyphsURL(urlTemplate)
+    const request = requestManager.transformRequest(
+        requestManager.normalizeGlyphsURL(urlTemplate)
             .replace('{fontstack}', fontstack)
             .replace('{range}', `${begin}-${end}`),
         ResourceType.Glyphs);

diff --git a/src/style/load_sprite.js b/src/style/load_sprite.js
@@ -3,21 +3,20 @@
 import { getJSON, getImage, ResourceType } from '../util/ajax';
 
 import browser from '../util/browser';
-import { normalizeSpriteURL } from '../util/mapbox';
 import { RGBAImage } from '../util/image';
 
 import type {StyleImage} from './style_image';
-import type {RequestTransformFunction} from '../ui/map';
+import type {RequestManager} from '../util/mapbox';
 import type {Callback} from '../types/callback';
 import type {Cancelable} from '../types/cancelable';
 
 export default function(baseURL: string,
-                          transformRequestCallback: RequestTransformFunction,
+                          requestManager: RequestManager,
                           callback: Callback<{[string]: StyleImage}>): Cancelable {
     let json: any, image, error;
     const format = browser.devicePixelRatio > 1 ? '@2x' : '';
 
-    let jsonRequest = getJSON(transformRequestCallback(normalizeSpriteURL(baseURL, format, '.json'), ResourceType.SpriteJSON), (err: ?Error, data: ?Object) => {
+    let jsonRequest = getJSON(requestManager.transformRequest(requestManager.normalizeSpriteURL(baseURL, format, '.json'), ResourceType.SpriteJSON), (err: ?Error, data: ?Object) => {
         jsonRequest = null;
         if (!error) {
             error = err;
@@ -26,7 +25,7 @@ export default function(baseURL: string,
         }
     });
 
-    let imageRequest = getImage(transformRequestCallback(normalizeSpriteURL(baseURL, format, '.png'), ResourceType.SpriteImage), (err, img) => {
+    let imageRequest = getImage(requestManager.transformRequest(requestManager.normalizeSpriteURL(baseURL, format, '.png'), ResourceType.SpriteImage), (err, img) => {
         imageRequest = null;
         if (!error) {
             error = err;

diff --git a/src/style/style.js b/src/style/style.js
@@ -12,7 +12,7 @@ import Light from './light';
 import LineAtlas from '../render/line_atlas';
 import { pick, clone, extend, deepEqual, filterObject, mapObject } from '../util/util';
 import { getJSON, getReferrer, makeRequest, ResourceType } from '../util/ajax';
-import { isMapboxURL, normalizeStyleURL } from '../util/mapbox';
+import { isMapboxURL } from '../util/mapbox';
 import browser from '../util/browser';
 import Dispatcher from '../util/dispatcher';
 import { validateStyle, emitValidationErrors as _emitValidationErrors } from './validate_style';
@@ -137,7 +137,7 @@ class Style extends Evented {
         this.dispatcher = new Dispatcher(getWorkerPool(), this);
         this.imageManager = new ImageManager();
         this.imageManager.setEventedParent(this);
-        this.glyphManager = new GlyphManager(map._transformRequest, options.localIdeographFontFamily);
+        this.glyphManager = new GlyphManager(map._requestManager, options.localIdeographFontFamily);
         this.lineAtlas = new LineAtlas(256, 512);
         this.crossTileSymbolIndex = new CrossTileSymbolIndex();
 
@@ -192,8 +192,8 @@ class Style extends Evented {
         const validate = typeof options.validate === 'boolean' ?
             options.validate : !isMapboxURL(url);
 
-        url = normalizeStyleURL(url, options.accessToken);
-        const request = this.map._transformRequest(url, ResourceType.Style);
+        url = this.map._requestManager.normalizeStyleURL(url, options.accessToken);
+        const request = this.map._requestManager.transformRequest(url, ResourceType.Style);
 
         this._request = getJSON(request, (error: ?Error, json: ?Object) => {
             this._request = null;
@@ -227,7 +227,7 @@ class Style extends Evented {
         }
 
         if (json.sprite) {
-            this._spriteRequest = loadSprite(json.sprite, this.map._transformRequest, (err, images) => {
+            this._spriteRequest = loadSprite(json.sprite, this.map._requestManager, (err, images) => {
                 this._spriteRequest = null;
                 if (err) {
                     this.fire(new ErrorEvent(err));

diff --git a/src/style/style_layer/symbol_style_layer.js b/src/style/style_layer/symbol_style_layer.js
@@ -3,7 +3,7 @@
 import StyleLayer from '../style_layer';
 
 import SymbolBucket from '../../data/bucket/symbol_bucket';
-import resolveTokens from '../../util/token';
+import resolveTokens from '../../util/resolve_tokens';
 import { isExpression } from '../../style-spec/expression';
 import assert from 'assert';
 import properties from './symbol_style_layer_properties';