From 0b99b232fd8db39f0b413d8f1b343bd40d661859 Mon Sep 17 00:00:00 2001
From: Ryan Hamley <rshamley@gmail.com>
Date: Wed, 22 May 2019 09:13:33 -0700
Subject: [PATCH] Add sku token to Mapbox API tile requests (#14) (#8276)

---
 bench/lib/fetch_style.js                      |   6 +-
 bench/lib/tile_parser.js                      |  21 +-
 package.json                                  |   2 +-
 src/render/glyph_manager.js                   |  10 +-
 src/source/geojson_source.js                  |   2 +-
 src/source/image_source.js                    |   2 +-
 src/source/load_tilejson.js                   |   9 +-
 src/source/raster_dem_tile_source.js          |   5 +-
 src/source/raster_tile_source.js              |  10 +-
 src/source/vector_tile_source.js              |  10 +-
 src/source/video_source.js                    |   2 +-
 src/style/load_glyph_range.js                 |  10 +-
 src/style/load_sprite.js                      |   9 +-
 src/style/style.js                            |  10 +-
 src/style/style_layer/symbol_style_layer.js   |   2 +-
 src/ui/map.js                                 |  22 +-
 src/util/mapbox.js                            | 133 +++-
 src/util/{token.js => resolve_tokens.js}      |   0
 src/util/sku_token.js                         |  42 ++
 test/unit/source/geojson_source.test.js       |  14 +-
 test/unit/source/image_source.test.js         |  13 +-
 .../source/raster_dem_tile_source.test.js     |   5 +-
 test/unit/source/raster_tile_source.test.js   |   5 +-
 test/unit/source/vector_tile_source.test.js   |   5 +-
 test/unit/style/load_glyph_range.test.js      |   4 +-
 test/unit/style/style.test.js                 |  10 +-
 test/unit/ui/control/logo.test.js             |   1 +
 test/unit/util/mapbox.test.js                 | 616 ++++++++++--------
 .../{token.test.js => resolve_tokens.test.js} |   2 +-
 test/unit/util/sku_token.test.js              |  32 +
 30 files changed, 617 insertions(+), 397 deletions(-)
 rename src/util/{token.js => resolve_tokens.js} (100%)
 create mode 100644 src/util/sku_token.js
 rename test/unit/util/{token.test.js => resolve_tokens.test.js} (96%)
 create mode 100644 test/unit/util/sku_token.test.js

diff --git a/bench/lib/fetch_style.js b/bench/lib/fetch_style.js
index a766e8a6f75..316cfd84588 100644
--- 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
index 1b0d72dabf3..3be9eb95b16 100644
--- 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,14 +17,19 @@ 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))
@@ -32,8 +37,8 @@ function createStyle(styleJSON: StyleSpecification): Promise<Style> {
     });
 }
 
-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,7 +100,7 @@ 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;
@@ -103,7 +108,7 @@ export default class TileParser {
     }
 
     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
index 9cf10122813..6e1c98a58ba 100644
--- 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
index 537f8be291d..c81c85a1bf1 100644
--- 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
index cfcf397ae8c..6c070bb9567 100644
--- 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
index 751a6b7ed6f..0c5e46bb8f7 100644
--- 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
index b244b602a2e..f3fcfc88582 100644
--- 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
index 86a1a86fd87..cf02306b4ef 100644
--- 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
index 855cfdbf8da..5580996c341 100644
--- 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
index 76c7a2168f2..21c9f53ac8f 100644
--- 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
index 145726da6c5..17644c07ac2 100644
--- 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
index 2e1061f0604..7c0552459cf 100644
--- 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
index eb22f092fc7..f868ec23014 100644
--- 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
index 45417adefce..132fbdfb7cf 100644
--- 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
index 4d4d51e0e1b..a1a245a1a21 100644
--- 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';
diff --git a/src/ui/map.js b/src/ui/map.js
index a7154296376..08a9d148791 100755
--- a/src/ui/map.js
+++ b/src/ui/map.js
@@ -1,13 +1,12 @@
 // @flow
 
 import { extend, bindAll, warnOnce, uniqueId } from '../util/util';
-
 import browser from '../util/browser';
 import window from '../util/window';
 const { HTMLImageElement, HTMLElement } = window;
 import DOM from '../util/dom';
 import { getImage, getJSON, ResourceType } from '../util/ajax';
-import { normalizeStyleURL } from '../util/mapbox';
+import { RequestManager } from '../util/mapbox';
 import Style from '../style/style';
 import EvaluationParameters from '../style/evaluation_parameters';
 import Painter from '../render/painter';
@@ -28,9 +27,9 @@ import TaskQueue from '../util/task_queue';
 import webpSupported from '../util/webp_supported';
 
 import type {PointLike} from '@mapbox/point-geometry';
+import type { RequestTransformFunction } from '../util/mapbox';
 import type {LngLatLike} from '../geo/lng_lat';
 import type {LngLatBoundsLike} from '../geo/lng_lat_bounds';
-import type {RequestParameters} from '../util/ajax';
 import type {StyleOptions, StyleSetterOptions} from '../style/style';
 import type {MapEvent, MapDataEvent} from './events';
 import type {CustomLayerInterface} from '../style/style_layer/custom_style_layer';
@@ -63,9 +62,6 @@ type IControl = {
 }
 /* eslint-enable no-use-before-define */
 
-type ResourceTypeEnum = $Keys<typeof ResourceType>;
-export type RequestTransformFunction = (url: string, resourceType?: ResourceTypeEnum) => RequestParameters;
-
 type MapOptions = {
     hash?: boolean,
     interactive?: boolean,
@@ -250,7 +246,6 @@ class Map extends Camera {
     _repaint: ?boolean;
     _vertices: ?boolean;
     _canvas: HTMLCanvasElement;
-    _transformRequest: RequestTransformFunction;
     _maxTileCacheSize: number;
     _frame: ?Cancelable;
     _styleDirty: ?boolean;
@@ -272,6 +267,7 @@ class Map extends Camera {
     _controls: Array<IControl>;
     _mapId: number;
     _localIdeographFontFamily: string;
+    _requestManager: RequestManager;
 
     /**
      * The map's {@link ScrollZoomHandler}, which implements zooming in and out with a scroll wheel or trackpad.
@@ -335,11 +331,7 @@ class Map extends Camera {
         this._renderTaskQueue = new TaskQueue();
         this._controls = [];
         this._mapId = uniqueId();
-
-        const transformRequestFn = options.transformRequest;
-        this._transformRequest = transformRequestFn ?
-            (url, type) => transformRequestFn(url, type) || ({ url }) :
-            (url) => ({ url });
+        this._requestManager = new RequestManager(options.transformRequest);
 
         if (typeof options.container === 'string') {
             this._container = window.document.getElementById(options.container);
@@ -1001,8 +993,8 @@ class Map extends Camera {
 
     _diffStyle(style: StyleSpecification | string,  options?: {diff?: boolean} & StyleOptions) {
         if (typeof style === 'string') {
-            const url = normalizeStyleURL(style);
-            const request = this._transformRequest(url, ResourceType.Style);
+            const url = this._requestManager.normalizeStyleURL(style);
+            const request = this._requestManager.transformRequest(url, ResourceType.Style);
             getJSON(request, (error: ?Error, json: ?Object) => {
                 if (error) {
                     this.fire(new ErrorEvent(error));
@@ -1254,7 +1246,7 @@ class Map extends Camera {
      * @see [Add an icon to the map](https://www.mapbox.com/mapbox-gl-js/example/add-image/)
      */
     loadImage(url: string, callback: Function) {
-        getImage(this._transformRequest(url, ResourceType.Image), callback);
+        getImage(this._requestManager.transformRequest(url, ResourceType.Image), callback);
     }
 
     /**
diff --git a/src/util/mapbox.js b/src/util/mapbox.js
index 9752b2a4aec..35e3574c73b 100644
--- a/src/util/mapbox.js
+++ b/src/util/mapbox.js
@@ -1,20 +1,34 @@
 // @flow
 
+/***** START WARNING - IF YOU USE THIS CODE WITH MAPBOX MAPPING APIS, REMOVAL OR
+* MODIFICATION OF THE FOLLOWING CODE VIOLATES THE MAPBOX TERMS OF SERVICE  ******
+* The following code is used to access Mapbox's Mapping APIs. Removal or modification
+* of this code when used with Mapbox's Mapping APIs can result in higher fees and/or
+* termination of your account with Mapbox.
+*
+* Under the Mapbox Terms of Service, you may not use this code to access Mapbox
+* Mapping APIs other than through Mapbox SDKs.
+*
+* The Mapping APIs documentation is available at https://docs.mapbox.com/api/maps/#maps
+* and the Mapbox Terms of Service are available at https://www.mapbox.com/tos/
+******************************************************************************/
+
 import config from './config';
 
 import browser from './browser';
-import webpSupported from './webp_supported';
 import window from './window';
-import { version } from '../../package.json';
+import webpSupported from './webp_supported';
+import { createSkuToken, SKU_ID } from './sku_token';
+import { version as sdkVersion } from '../../package.json';
 import { uuid, validateUuid, storageAvailable, b64DecodeUnicode, b64EncodeUnicode, warnOnce, extend } from './util';
-import { postData } from './ajax';
+import { postData, ResourceType } from './ajax';
 
 import type { RequestParameters } from './ajax';
 import type { Cancelable } from '../types/cancelable';
-import type {TileJSON} from '../types/tilejson';
+import type { TileJSON } from '../types/tilejson';
 
-const help = 'See https://www.mapbox.com/api-documentation/#access-tokens-and-token-scopes';
-const telemEventKey = 'mapbox.eventData';
+type ResourceTypeEnum = $Keys<typeof ResourceType>;
+export type RequestTransformFunction = (url: string, resourceType?: ResourceTypeEnum) => RequestParameters;
 
 type UrlObject = {|
     protocol: string,
@@ -23,6 +37,69 @@ type UrlObject = {|
     params: Array<string>
 |};
 
+export class RequestManager {
+    _skuToken: string;
+    _skuTokenExpiresAt: number;
+    _transformRequestFn: ?RequestTransformFunction;
+
+    constructor(transformRequestFn?: RequestTransformFunction) {
+        this._transformRequestFn = transformRequestFn;
+        this._createSkuToken();
+    }
+
+    _createSkuToken() {
+        const skuToken = createSkuToken();
+        this._skuToken = skuToken.token;
+        this._skuTokenExpiresAt = skuToken.tokenExpiresAt;
+    }
+
+    _isSkuTokenExpired(): boolean {
+        return Date.now() > this._skuTokenExpiresAt;
+    }
+
+    transformRequest(url: string, type: ResourceTypeEnum) {
+        if (this._transformRequestFn) {
+            return this._transformRequestFn(url, type) || {url};
+        }
+
+        return {url};
+    }
+
+    normalizeStyleURL(url: string, accessToken?: string): string {
+        return normalizeStyleURL(url, accessToken);
+    }
+
+    normalizeGlyphsURL(url: string, accessToken?: string): string {
+        return normalizeGlyphsURL(url, accessToken);
+    }
+
+    normalizeSourceURL(url: string, accessToken?: string): string {
+        return normalizeSourceURL(url, accessToken);
+    }
+
+    normalizeSpriteURL(url: string, format: string, extension: string, accessToken?: string): string {
+        return normalizeSpriteURL(url, format, extension, accessToken);
+    }
+
+    normalizeTileURL(tileURL: string, sourceURL?: ?string, tileSize?: ?number): string {
+        if (this._isSkuTokenExpired()) {
+            this._createSkuToken();
+        }
+
+        return normalizeTileURL(tileURL, sourceURL, tileSize, this._skuToken);
+    }
+
+    canonicalizeTileURL(url: string) {
+        return canonicalizeTileURL(url);
+    }
+
+    canonicalizeTileset(tileJSON: TileJSON, sourceURL: string) {
+        return canonicalizeTileset(tileJSON, sourceURL);
+    }
+}
+
+const help = 'See https://www.mapbox.com/api-documentation/#access-tokens-and-token-scopes';
+
 function makeAPIURL(urlObject: UrlObject, accessToken: string | null | void): string {
     const apiUrlObject = parseUrl(config.API_URL);
     urlObject.protocol = apiUrlObject.protocol;
@@ -53,23 +130,21 @@ function isMapboxHTTPURL(url: string): boolean {
     return mapboxHTTPURLRe.test(url);
 }
 
-export { isMapboxURL, isMapboxHTTPURL };
-
-export const normalizeStyleURL = function(url: string, accessToken?: string): string {
+const normalizeStyleURL = function(url: string, accessToken?: string): string {
     if (!isMapboxURL(url)) return url;
     const urlObject = parseUrl(url);
     urlObject.path = `/styles/v1${urlObject.path}`;
     return makeAPIURL(urlObject, accessToken);
 };
 
-export const normalizeGlyphsURL = function(url: string, accessToken?: string): string {
+const normalizeGlyphsURL = function(url: string, accessToken?: string): string {
     if (!isMapboxURL(url)) return url;
     const urlObject = parseUrl(url);
     urlObject.path = `/fonts/v1${urlObject.path}`;
     return makeAPIURL(urlObject, accessToken);
 };
 
-export const normalizeSourceURL = function(url: string, accessToken?: string): string {
+const normalizeSourceURL = function(url: string, accessToken?: string): string {
     if (!isMapboxURL(url)) return url;
     const urlObject = parseUrl(url);
     urlObject.path = `/v4/${urlObject.authority}.json`;
@@ -79,7 +154,7 @@ export const normalizeSourceURL = function(url: string, accessToken?: string): s
     return makeAPIURL(urlObject, accessToken);
 };
 
-export const normalizeSpriteURL = function(url: string, format: string, extension: string, accessToken?: string): string {
+const normalizeSpriteURL = function(url: string, format: string, extension: string, accessToken?: string): string {
     const urlObject = parseUrl(url);
     if (!isMapboxURL(url)) {
         urlObject.path += `${format}${extension}`;
@@ -90,10 +165,8 @@ export const normalizeSpriteURL = function(url: string, format: string, extensio
 };
 
 const imageExtensionRe = /(\.(png|jpg)\d*)(?=$)/;
-// matches any file extension specified by a dot and one or more alphanumeric characters
-const extensionRe = /\.[\w]+$/;
 
-export const normalizeTileURL = function(tileURL: string, sourceURL?: ?string, tileSize?: ?number): string {
+const normalizeTileURL = function(tileURL: string, sourceURL?: ?string, tileSize?: ?number, skuToken?: string): string {
     if (!sourceURL || !isMapboxURL(sourceURL)) return tileURL;
 
     const urlObject = parseUrl(tileURL);
@@ -106,10 +179,17 @@ export const normalizeTileURL = function(tileURL: string, sourceURL?: ?string, t
     urlObject.path = urlObject.path.replace(imageExtensionRe, `${suffix}${extension}`);
     urlObject.path = `/v4${urlObject.path}`;
 
+    if (config.REQUIRE_ACCESS_TOKEN && config.ACCESS_TOKEN && skuToken) {
+        urlObject.params.push(`sku=${skuToken}`);
+    }
+
     return makeAPIURL(urlObject);
 };
 
-export const canonicalizeTileURL = function(url: string) {
+// matches any file extension specified by a dot and one or more alphanumeric characters
+const extensionRe = /\.[\w]+$/;
+
+const canonicalizeTileURL = function(url: string) {
     const version = "/v4/";
 
     const urlObject = parseUrl(url);
@@ -129,7 +209,7 @@ export const canonicalizeTileURL = function(url: string) {
     return result;
 };
 
-export const canonicalizeTileset = function(tileJSON: TileJSON, sourceURL: string) {
+const canonicalizeTileset = function(tileJSON: TileJSON, sourceURL: string) {
     if (!isMapboxURL(sourceURL)) return tileJSON.tiles || [];
     const canonical = [];
     for (const url of tileJSON.tiles) {
@@ -159,6 +239,10 @@ function formatUrl(obj: UrlObject): string {
     return `${obj.protocol}://${obj.authority}${obj.path}${params}`;
 }
 
+export { isMapboxURL, isMapboxHTTPURL };
+
+const telemEventKey = 'mapbox.eventData';
+
 function parseAccessToken(accessToken: ?string) {
     if (!accessToken) {
         return null;
@@ -260,7 +344,8 @@ class TelemetryEvent {
             event: this.type,
             created: new Date(timestamp).toISOString(),
             sdkIdentifier: 'mapbox-gl-js',
-            sdkVersion: version,
+            sdkVersion,
+            skuId: SKU_ID,
             userId: this.anonId
         };
 
@@ -289,15 +374,19 @@ class TelemetryEvent {
 
 export class MapLoadEvent extends TelemetryEvent {
     +success: {[number]: boolean};
+    skuToken: string;
 
     constructor() {
         super('map.load');
         this.success = {};
+        this.skuToken = '';
     }
 
-    postMapLoadEvent(tileUrls: Array<string>, mapId: number) {
+    postMapLoadEvent(tileUrls: Array<string>, mapId: number, skuToken: string) {
         //Enabled only when Mapbox Access Token is set and a source uses
         // mapbox tiles.
+        this.skuToken = skuToken;
+
         if (config.EVENTS_URL &&
             config.ACCESS_TOKEN &&
             Array.isArray(tileUrls) &&
@@ -321,7 +410,7 @@ export class MapLoadEvent extends TelemetryEvent {
             this.anonId = uuid();
         }
 
-        this.postEvent(timestamp, {}, (err) => {
+        this.postEvent(timestamp, {skuToken: this.skuToken}, (err) => {
             if (!err) {
                 if (id) this.success[id] = true;
             }
@@ -329,7 +418,6 @@ export class MapLoadEvent extends TelemetryEvent {
     }
 }
 
-
 export class TurnstileEvent extends TelemetryEvent {
     constructor() {
         super('appUserTurnstile');
@@ -396,3 +484,6 @@ export const postTurnstileEvent = turnstileEvent_.postTurnstileEvent.bind(turnst
 
 const mapLoadEvent_ = new MapLoadEvent();
 export const postMapLoadEvent = mapLoadEvent_.postMapLoadEvent.bind(mapLoadEvent_);
+
+/***** END WARNING - REMOVAL OR MODIFICATION OF THE
+PRECEDING CODE VIOLATES THE MAPBOX TERMS OF SERVICE  ******/
diff --git a/src/util/token.js b/src/util/resolve_tokens.js
similarity index 100%
rename from src/util/token.js
rename to src/util/resolve_tokens.js
diff --git a/src/util/sku_token.js b/src/util/sku_token.js
new file mode 100644
index 00000000000..e448afcb976
--- /dev/null
+++ b/src/util/sku_token.js
@@ -0,0 +1,42 @@
+// @flow
+
+/***** START WARNING - IF YOU USE THIS CODE WITH MAPBOX MAPPING APIS, REMOVAL OR
+* MODIFICATION OF THE FOLLOWING CODE VIOLATES THE MAPBOX TERMS OF SERVICE  ******
+* The following code is used to access Mapbox's Mapping APIs. Removal or modification
+* of this code when used with Mapbox's Mapping APIs can result in higher fees and/or
+* termination of your account with Mapbox.
+*
+* Under the Mapbox Terms of Service, you may not use this code to access Mapbox
+* Mapping APIs other than through Mapbox SDKs.
+*
+* The Mapping APIs documentation is available at https://docs.mapbox.com/api/maps/#maps
+* and the Mapbox Terms of Service are available at https://www.mapbox.com/tos/
+******************************************************************************/
+
+type SkuTokenObject = {|
+    token: string,
+    tokenExpiresAt: number
+|};
+
+const SKU_ID = '01';
+
+function createSkuToken(): SkuTokenObject {
+    // SKU_ID and TOKEN_VERSION are specified by an internal schema and should not change
+    const TOKEN_VERSION = '1';
+    const base62chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+    // sessionRandomizer is a randomized 10-digit base-62 number
+    let sessionRandomizer = '';
+    for (let i = 0; i < 10; i++) {
+        sessionRandomizer += base62chars[Math.floor(Math.random() * 62)];
+    }
+    const expiration = 12 * 60 * 60 * 1000; // 12 hours
+    const token = [TOKEN_VERSION, SKU_ID, sessionRandomizer].join('');
+    const tokenExpiresAt = Date.now() + expiration;
+
+    return { token, tokenExpiresAt };
+}
+
+export { createSkuToken, SKU_ID };
+
+/***** END WARNING - REMOVAL OR MODIFICATION OF THE
+PRECEDING CODE VIOLATES THE MAPBOX TERMS OF SERVICE  ******/
diff --git a/test/unit/source/geojson_source.test.js b/test/unit/source/geojson_source.test.js
index a42989da336..e1955bae2a0 100644
--- a/test/unit/source/geojson_source.test.js
+++ b/test/unit/source/geojson_source.test.js
@@ -81,7 +81,9 @@ test('GeoJSONSource#setData', (t) => {
     t.test('respects collectResourceTiming parameter on source', (t) => {
         const source = createSource({ collectResourceTiming: true });
         source.map = {
-            _transformRequest: (data) => { return { url: data }; }
+            _requestManager: {
+                transformRequest: (url) => { return { url }; }
+            }
         };
         source.dispatcher.send = function(type, params, cb) {
             if (type === 'geojson.loadData') {
@@ -163,9 +165,11 @@ test('GeoJSONSource#update', (t) => {
 
     t.test('transforms url before making request', (t) => {
         const mapStub = {
-            _transformRequest: (url) => { return { url }; }
+            _requestManager: {
+                transformRequest: (url) => { return { url }; }
+            }
         };
-        const transformSpy = t.spy(mapStub, '_transformRequest');
+        const transformSpy = t.spy(mapStub._requestManager, 'transformRequest');
         const source = new GeoJSONSource('id', {data: 'https://example.com/data.geojson'}, mockDispatcher);
         source.onAdd(mapStub);
         t.ok(transformSpy.calledOnce);
@@ -242,7 +246,9 @@ test('GeoJSONSource#update', (t) => {
 
 test('GeoJSONSource#serialize', (t) => {
     const mapStub = {
-        _transformRequest: (url) => { return { url }; }
+        _requestManager: {
+            transformRequest: (url) => { return { url }; }
+        }
     };
     t.test('serialize source with inline data', (t) => {
         const source = new GeoJSONSource('id', {data: hawkHill}, mockDispatcher);
diff --git a/test/unit/source/image_source.test.js b/test/unit/source/image_source.test.js
index 5031473553e..3cac8573d21 100644
--- a/test/unit/source/image_source.test.js
+++ b/test/unit/source/image_source.test.js
@@ -20,10 +20,11 @@ class StubMap extends Evented {
     constructor() {
         super();
         this.transform = new Transform();
-    }
-
-    _transformRequest(url) {
-        return { url };
+        this._requestManager = {
+            transformRequest: (url) => {
+                return { url };
+            }
+        };
     }
 }
 
@@ -72,7 +73,7 @@ test('ImageSource', (t) => {
     t.test('transforms url request', (t) => {
         const source = createSource({ url : '/image.png' });
         const map = new StubMap();
-        const spy = t.spy(map, '_transformRequest');
+        const spy = t.spy(map._requestManager, 'transformRequest');
         source.onAdd(map);
         respond();
         t.ok(spy.calledOnce);
@@ -84,7 +85,7 @@ test('ImageSource', (t) => {
     t.test('updates url from updateImage', (t) => {
         const source = createSource({ url : '/image.png' });
         const map = new StubMap();
-        const spy = t.spy(map, '_transformRequest');
+        const spy = t.spy(map._requestManager, 'transformRequest');
         source.onAdd(map);
         respond();
         t.ok(spy.calledOnce);
diff --git a/test/unit/source/raster_dem_tile_source.test.js b/test/unit/source/raster_dem_tile_source.test.js
index 1cc5ecef6fd..71f71e7dbb6 100644
--- a/test/unit/source/raster_dem_tile_source.test.js
+++ b/test/unit/source/raster_dem_tile_source.test.js
@@ -2,13 +2,14 @@ import { test } from 'mapbox-gl-js-test';
 import RasterDEMTileSource from '../../../src/source/raster_dem_tile_source';
 import window from '../../../src/util/window';
 import { OverscaledTileID } from '../../../src/source/tile_id';
+import { RequestManager } from '../../../src/util/mapbox';
 
 function createSource(options, transformCallback) {
     const source = new RasterDEMTileSource('id', options, { send() {} }, options.eventedParent);
     source.onAdd({
         transform: { angle: 0, pitch: 0, showCollisionBoxes: false },
         _getMapId: () => 1,
-        _transformRequest: transformCallback ? transformCallback : (url) => { return { url }; }
+        _requestManager: new RequestManager(transformCallback)
     });
 
     source.on('error', (e) => {
@@ -59,7 +60,7 @@ test('RasterTileSource', (t) => {
             bounds: [-47, -7, -45, -5]
         }));
         const source = createSource({ url: "/source.json" });
-        const transformSpy = t.spy(source.map, '_transformRequest');
+        const transformSpy = t.spy(source.map._requestManager, 'transformRequest');
         source.on('data', (e) => {
             if (e.sourceDataType === 'metadata') {
                 const tile = {
diff --git a/test/unit/source/raster_tile_source.test.js b/test/unit/source/raster_tile_source.test.js
index f801c659f6d..f1988e5bbc4 100644
--- a/test/unit/source/raster_tile_source.test.js
+++ b/test/unit/source/raster_tile_source.test.js
@@ -2,13 +2,14 @@ import { test } from 'mapbox-gl-js-test';
 import RasterTileSource from '../../../src/source/raster_tile_source';
 import window from '../../../src/util/window';
 import { OverscaledTileID } from '../../../src/source/tile_id';
+import { RequestManager } from '../../../src/util/mapbox';
 
 function createSource(options, transformCallback) {
     const source = new RasterTileSource('id', options, { send() {} }, options.eventedParent);
     source.onAdd({
         transform: { angle: 0, pitch: 0, showCollisionBoxes: false },
         _getMapId: () => 1,
-        _transformRequest: transformCallback ? transformCallback : (url) => { return { url }; }
+        _requestManager: new RequestManager(transformCallback)
     });
 
     source.on('error', (e) => {
@@ -112,7 +113,7 @@ test('RasterTileSource', (t) => {
             bounds: [-47, -7, -45, -5]
         }));
         const source = createSource({ url: "/source.json" });
-        const transformSpy = t.spy(source.map, '_transformRequest');
+        const transformSpy = t.spy(source.map._requestManager, 'transformRequest');
         source.on('data', (e) => {
             if (e.sourceDataType === 'metadata') {
                 const tile = {
diff --git a/test/unit/source/vector_tile_source.test.js b/test/unit/source/vector_tile_source.test.js
index 42a5bd920df..8108a523c0b 100644
--- a/test/unit/source/vector_tile_source.test.js
+++ b/test/unit/source/vector_tile_source.test.js
@@ -3,13 +3,14 @@ import VectorTileSource from '../../../src/source/vector_tile_source';
 import { OverscaledTileID } from '../../../src/source/tile_id';
 import window from '../../../src/util/window';
 import { Evented } from '../../../src/util/evented';
+import { RequestManager } from '../../../src/util/mapbox';
 
 function createSource(options, transformCallback) {
     const source = new VectorTileSource('id', options, { send() {} }, options.eventedParent);
     source.onAdd({
         transform: { showCollisionBoxes: false },
         _getMapId: () => 1,
-        _transformRequest: transformCallback ? transformCallback : (url) => { return { url }; }
+        _requestManager: new RequestManager(transformCallback)
     });
 
     source.on('error', (e) => {
@@ -166,7 +167,7 @@ test('VectorTileSource', (t) => {
         window.server.respondWith('/source.json', JSON.stringify(require('../../fixtures/source')));
 
         const source = createSource({ url: "/source.json" });
-        const transformSpy = t.spy(source.map, '_transformRequest');
+        const transformSpy = t.spy(source.map._requestManager, 'transformRequest');
         source.on('data', (e) => {
             if (e.sourceDataType === 'metadata') {
                 const tile = {
diff --git a/test/unit/style/load_glyph_range.test.js b/test/unit/style/load_glyph_range.test.js
index b70b2e289a4..03de3dc57fe 100644
--- a/test/unit/style/load_glyph_range.test.js
+++ b/test/unit/style/load_glyph_range.test.js
@@ -4,6 +4,7 @@ import { test } from 'mapbox-gl-js-test';
 import fs from 'fs';
 import path from 'path';
 import window from '../../../src/util/window';
+import { RequestManager } from '../../../src/util/mapbox';
 import loadGlyphRange from '../../../src/style/load_glyph_range';
 
 test('loadGlyphRange', (t) => {
@@ -14,11 +15,12 @@ test('loadGlyphRange', (t) => {
     });
 
     const transform = t.stub().callsFake((url) => ({url}));
+    const manager = new RequestManager(transform);
 
     let request;
     window.XMLHttpRequest.onCreate = (req) => { request = req; };
 
-    loadGlyphRange('Arial Unicode MS', 0, 'https://localhost/fonts/v1/{fontstack}/{range}.pbf', transform, (err, result) => {
+    loadGlyphRange('Arial Unicode MS', 0, 'https://localhost/fonts/v1/{fontstack}/{range}.pbf', manager, (err, result) => {
         t.ifError(err);
         t.ok(transform.calledOnce);
         t.deepEqual(transform.getCall(0).args, ['https://localhost/fonts/v1/Arial Unicode MS/0-255.pbf', 'Glyphs']);
diff --git a/test/unit/style/style.test.js b/test/unit/style/style.test.js
index 24f0577ad89..9be9e5750a4 100644
--- a/test/unit/style/style.test.js
+++ b/test/unit/style/style.test.js
@@ -5,6 +5,7 @@ import SourceCache from '../../../src/source/source_cache';
 import StyleLayer from '../../../src/style/style_layer';
 import Transform from '../../../src/geo/transform';
 import { extend } from '../../../src/util/util';
+import { RequestManager } from '../../../src/util/mapbox';
 import { Event, Evented } from '../../../src/util/evented';
 import window from '../../../src/util/window';
 import {
@@ -47,10 +48,7 @@ class StubMap extends Evented {
     constructor() {
         super();
         this.transform = new Transform();
-    }
-
-    _transformRequest(url) {
-        return { url };
+        this._requestManager = new RequestManager();
     }
 
     _getMapId() {
@@ -125,7 +123,7 @@ test('Style#loadURL', (t) => {
 
     t.test('transforms style URL before request', (t) => {
         const map = new StubMap();
-        const spy = t.spy(map, '_transformRequest');
+        const spy = t.spy(map._requestManager, 'transformRequest');
 
         const style = new Style(map);
         style.loadURL('style.json');
@@ -324,7 +322,7 @@ test('Style#loadJSON', (t) => {
         window.useFakeXMLHttpRequest();
 
         const map = new StubMap();
-        const transformSpy = t.spy(map, '_transformRequest');
+        const transformSpy = t.spy(map._requestManager, 'transformRequest');
         const style = new Style(map);
 
         style.on('style.load', () => {
diff --git a/test/unit/ui/control/logo.test.js b/test/unit/ui/control/logo.test.js
index dc493588896..1d877a6ae88 100644
--- a/test/unit/ui/control/logo.test.js
+++ b/test/unit/ui/control/logo.test.js
@@ -25,6 +25,7 @@ function createMap(t, logoPosition, logoRequired) {
 function createSource(options, logoRequired) {
     const source = new VectorTileSource('id', options, { send () {} });
     source.onAdd({
+        _requestManager: {_skuToken: '1234567890123'},
         transform: { angle: 0, pitch: 0, showCollisionBoxes: false },
         _getMapId: () => 1
     });
diff --git a/test/unit/util/mapbox.test.js b/test/unit/util/mapbox.test.js
index 9e37fdfa4ea..ab611278645 100644
--- a/test/unit/util/mapbox.test.js
+++ b/test/unit/util/mapbox.test.js
@@ -1,9 +1,10 @@
 import { test } from 'mapbox-gl-js-test';
 import * as mapbox from '../../../src/util/mapbox';
 import config from '../../../src/util/config';
-import webpSupported from '../../../src/util/webp_supported';
 import window from '../../../src/util/window';
+import webpSupported from '../../../src/util/webp_supported';
 import { uuid } from '../../../src/util/util';
+import { SKU_ID } from '../../../src/util/sku_token';
 import { version } from '../../../package.json';
 
 const mapboxTileURLs = [
@@ -45,323 +46,345 @@ test("mapbox", (t) => {
         t.end();
     });
 
-    t.test('.normalizeStyleURL', (t) => {
-        t.test('returns an API URL with access_token parameter when no query string', (t) => {
-            t.equal(mapbox.normalizeStyleURL('mapbox://styles/user/style'), 'https://api.mapbox.com/styles/v1/user/style?access_token=key');
-            t.equal(mapbox.normalizeStyleURL('mapbox://styles/user/style/draft'), 'https://api.mapbox.com/styles/v1/user/style/draft?access_token=key');
-            t.end();
-        });
+    t.test('RequestManager', (t) => {
+        const manager = new mapbox.RequestManager();
 
-        t.test('returns an API URL with access_token parameter when query string exists', (t) => {
-            t.equal(mapbox.normalizeStyleURL('mapbox://styles/user/style?fresh=true'), 'https://api.mapbox.com/styles/v1/user/style?fresh=true&access_token=key');
-            t.equal(mapbox.normalizeStyleURL('mapbox://styles/user/style/draft?fresh=true'), 'https://api.mapbox.com/styles/v1/user/style/draft?fresh=true&access_token=key');
-            t.equal(mapbox.normalizeStyleURL('mapbox://styles/foo/bar'), 'https://api.mapbox.com/styles/v1/foo/bar?access_token=key');
+        t.test('creates token and expiration timestamp on construction', (t) => {
+            t.ok(manager._skuToken);
+            t.ok(manager._skuTokenExpiresAt);
             t.end();
         });
 
-        t.test('ignores non-mapbox:// scheme', (t) => {
-            t.equal(mapbox.normalizeStyleURL('http://path'), 'http://path');
+        t.test('identifies expired tokens correctly', (t) => {
+            const now = +Date.now();
+            const ms13Hours = (13 * 60 * 60 * 1000);
+            t.notOk(manager._isSkuTokenExpired());
+            const token = manager._skuToken;
+            withFixedDate(t, now + ms13Hours, () => manager.normalizeTileURL("mapbox://tiles/a.b/0/0/0.pbf", mapboxSource));
+            t.notEqual(token, manager._skuToken);
             t.end();
         });
 
-        t.test('handles custom API_URLs with paths', (t) => {
-            config.API_URL = 'https://test.example.com/api.mapbox.com';
-            t.equal(
-                mapbox.normalizeStyleURL('mapbox://styles/foo/bar'),
-                'https://test.example.com/api.mapbox.com/styles/v1/foo/bar?access_token=key'
-            );
-            t.end();
-        });
+        webpSupported.supported = false;
 
-        t.end();
-    });
+        t.test('.normalizeStyleURL', (t) => {
+            t.test('returns an API URL with access_token parameter when no query string', (t) => {
+                t.equal(manager.normalizeStyleURL('mapbox://styles/user/style'), 'https://api.mapbox.com/styles/v1/user/style?access_token=key');
+                t.equal(manager.normalizeStyleURL('mapbox://styles/user/style/draft'), 'https://api.mapbox.com/styles/v1/user/style/draft?access_token=key');
+                t.end();
+            });
 
-    t.test('.normalizeSourceURL', (t) => {
-        t.test('returns a v4 URL with access_token parameter', (t) => {
-            t.equal(mapbox.normalizeSourceURL(mapboxSource), 'https://api.mapbox.com/v4/user.map.json?secure&access_token=key');
-            t.end();
-        });
+            t.test('returns an API URL with access_token parameter when query string exists', (t) => {
+                t.equal(manager.normalizeStyleURL('mapbox://styles/user/style?fresh=true'), 'https://api.mapbox.com/styles/v1/user/style?fresh=true&access_token=key');
+                t.equal(manager.normalizeStyleURL('mapbox://styles/user/style/draft?fresh=true'), 'https://api.mapbox.com/styles/v1/user/style/draft?fresh=true&access_token=key');
+                t.equal(manager.normalizeStyleURL('mapbox://styles/foo/bar'), 'https://api.mapbox.com/styles/v1/foo/bar?access_token=key');
+                t.end();
+            });
 
-        t.test('uses provided access token', (t) => {
-            t.equal(mapbox.normalizeSourceURL(mapboxSource, 'token'), 'https://api.mapbox.com/v4/user.map.json?secure&access_token=token');
-            t.end();
-        });
+            t.test('ignores non-mapbox:// scheme', (t) => {
+                t.equal(manager.normalizeStyleURL('http://path'), 'http://path');
+                t.end();
+            });
 
-        t.test('uses provided query parameters', (t) => {
-            t.equal(mapbox.normalizeSourceURL(`${mapboxSource}?foo=bar`, 'token'), 'https://api.mapbox.com/v4/user.map.json?foo=bar&secure&access_token=token');
-            t.end();
-        });
+            t.test('handles custom API_URLs with paths', (t) => {
+                config.API_URL = 'https://test.example.com/api.mapbox.com';
+                t.equal(
+                    manager.normalizeStyleURL('mapbox://styles/foo/bar'),
+                    'https://test.example.com/api.mapbox.com/styles/v1/foo/bar?access_token=key'
+                );
+                t.end();
+            });
 
-        t.test('works with composite sources', (t) => {
-            t.equal(mapbox.normalizeSourceURL('mapbox://one.a,two.b,three.c'), 'https://api.mapbox.com/v4/one.a,two.b,three.c.json?secure&access_token=key');
             t.end();
         });
 
-        t.test('throws an error if no access token is provided', (t) => {
-            config.ACCESS_TOKEN = null;
-            t.throws(() => { mapbox.normalizeSourceURL(mapboxSource); }, 'An API access token is required to use Mapbox GL.');
-            config.ACCESS_TOKEN = 'key';
-            t.end();
-        });
+        t.test('.normalizeSourceURL', (t) => {
+            t.test('returns a v4 URL with access_token parameter', (t) => {
+                t.equal(manager.normalizeSourceURL(mapboxSource), 'https://api.mapbox.com/v4/user.map.json?secure&access_token=key');
+                t.end();
+            });
 
-        t.test('throws an error if a secret access token is provided', (t) => {
-            config.ACCESS_TOKEN = 'sk.abc.123';
-            t.throws(() => { mapbox.normalizeSourceURL(mapboxSource); }, 'Use a public access token (pk.*) with Mapbox GL JS.');
-            config.ACCESS_TOKEN = 'key';
-            t.end();
-        });
+            t.test('uses provided access token', (t) => {
+                t.equal(manager.normalizeSourceURL(mapboxSource, 'token'), 'https://api.mapbox.com/v4/user.map.json?secure&access_token=token');
+                t.end();
+            });
 
-        t.test('ignores non-mapbox:// scheme', (t) => {
-            t.equal(mapbox.normalizeSourceURL('http://path'), 'http://path');
-            t.end();
-        });
+            t.test('uses provided query parameters', (t) => {
+                t.equal(manager.normalizeSourceURL(`${mapboxSource}?foo=bar`, 'token'), 'https://api.mapbox.com/v4/user.map.json?foo=bar&secure&access_token=token');
+                t.end();
+            });
 
-        t.test('handles custom API_URLs with paths', (t) => {
-            config.API_URL = 'https://test.example.com/api.mapbox.com';
-            t.equal(
-                mapbox.normalizeSourceURL('mapbox://one.a'),
-                'https://test.example.com/api.mapbox.com/v4/one.a.json?secure&access_token=key'
-            );
-            t.end();
-        });
+            t.test('works with composite sources', (t) => {
+                t.equal(manager.normalizeSourceURL('mapbox://one.a,two.b,three.c'), 'https://api.mapbox.com/v4/one.a,two.b,three.c.json?secure&access_token=key');
+                t.end();
+            });
 
-        t.end();
-    });
+            t.test('throws an error if no access token is provided', (t) => {
+                config.ACCESS_TOKEN = null;
+                t.throws(() => { manager.normalizeSourceURL(mapboxSource); }, 'An API access token is required to use Mapbox GL.');
+                config.ACCESS_TOKEN = 'key';
+                t.end();
+            });
 
-    t.test('.normalizeGlyphsURL', (t) => {
-        t.test('normalizes mapbox:// URLs when no query string', (t) => {
-            t.equal(mapbox.normalizeGlyphsURL('mapbox://fonts/boxmap/{fontstack}/{range}.pbf'), 'https://api.mapbox.com/fonts/v1/boxmap/{fontstack}/{range}.pbf?access_token=key');
-            t.end();
-        });
+            t.test('throws an error if a secret access token is provided', (t) => {
+                config.ACCESS_TOKEN = 'sk.abc.123';
+                t.throws(() => { manager.normalizeSourceURL(mapboxSource); }, 'Use a public access token (pk.*) with Mapbox GL JS.');
+                config.ACCESS_TOKEN = 'key';
+                t.end();
+            });
 
-        t.test('normalizes mapbox:// URLs when query string exists', (t) => {
-            t.equal(mapbox.normalizeGlyphsURL('mapbox://fonts/boxmap/{fontstack}/{range}.pbf?fresh=true'), 'https://api.mapbox.com/fonts/v1/boxmap/{fontstack}/{range}.pbf?fresh=true&access_token=key');
-            t.end();
-        });
+            t.test('ignores non-mapbox:// scheme', (t) => {
+                t.equal(manager.normalizeSourceURL('http://path'), 'http://path');
+                t.end();
+            });
 
-        t.test('ignores non-mapbox:// scheme', (t) => {
-            t.equal(mapbox.normalizeGlyphsURL('http://path'), 'http://path');
-            t.end();
-        });
+            t.test('handles custom API_URLs with paths', (t) => {
+                config.API_URL = 'https://test.example.com/api.mapbox.com';
+                t.equal(
+                    manager.normalizeSourceURL('mapbox://one.a'),
+                    'https://test.example.com/api.mapbox.com/v4/one.a.json?secure&access_token=key'
+                );
+                t.end();
+            });
 
-        t.test('handles custom API_URLs with paths', (t) => {
-            config.API_URL = 'https://test.example.com/api.mapbox.com';
-            t.equal(
-                mapbox.normalizeGlyphsURL('mapbox://fonts/boxmap/{fontstack}/{range}.pbf'),
-                'https://test.example.com/api.mapbox.com/fonts/v1/boxmap/{fontstack}/{range}.pbf?access_token=key'
-            );
             t.end();
         });
 
-        t.end();
-    });
+        t.test('.normalizeGlyphsURL', (t) => {
+            t.test('normalizes mapbox:// URLs when no query string', (t) => {
+                t.equal(manager.normalizeGlyphsURL('mapbox://fonts/boxmap/{fontstack}/{range}.pbf'), 'https://api.mapbox.com/fonts/v1/boxmap/{fontstack}/{range}.pbf?access_token=key');
+                t.end();
+            });
 
-    t.test('.normalizeSpriteURL', (t) => {
-        t.test('normalizes mapbox:// URLs when no query string', (t) => {
-            t.equal(
-                mapbox.normalizeSpriteURL('mapbox://sprites/mapbox/streets-v8', '', '.json'),
-                'https://api.mapbox.com/styles/v1/mapbox/streets-v8/sprite.json?access_token=key'
-            );
+            t.test('normalizes mapbox:// URLs when query string exists', (t) => {
+                t.equal(manager.normalizeGlyphsURL('mapbox://fonts/boxmap/{fontstack}/{range}.pbf?fresh=true'), 'https://api.mapbox.com/fonts/v1/boxmap/{fontstack}/{range}.pbf?fresh=true&access_token=key');
+                t.end();
+            });
 
-            t.equal(
-                mapbox.normalizeSpriteURL('mapbox://sprites/mapbox/streets-v8', '@2x', '.png'),
-                'https://api.mapbox.com/styles/v1/mapbox/streets-v8/sprite@2x.png?access_token=key'
-            );
+            t.test('ignores non-mapbox:// scheme', (t) => {
+                t.equal(manager.normalizeGlyphsURL('http://path'), 'http://path');
+                t.end();
+            });
 
-            t.equal(
-                mapbox.normalizeSpriteURL('mapbox://sprites/mapbox/streets-v8/draft', '@2x', '.png'),
-                'https://api.mapbox.com/styles/v1/mapbox/streets-v8/draft/sprite@2x.png?access_token=key'
-            );
+            t.test('handles custom API_URLs with paths', (t) => {
+                config.API_URL = 'https://test.example.com/api.mapbox.com';
+                t.equal(
+                    manager.normalizeGlyphsURL('mapbox://fonts/boxmap/{fontstack}/{range}.pbf'),
+                    'https://test.example.com/api.mapbox.com/fonts/v1/boxmap/{fontstack}/{range}.pbf?access_token=key'
+                );
+                t.end();
+            });
 
             t.end();
         });
 
-        t.test('normalizes mapbox:// URLs when query string exists', (t) => {
-            t.equal(
-                mapbox.normalizeSpriteURL('mapbox://sprites/mapbox/streets-v8?fresh=true', '', '.json'),
-                'https://api.mapbox.com/styles/v1/mapbox/streets-v8/sprite.json?fresh=true&access_token=key'
-            );
-
-            t.equal(
-                mapbox.normalizeSpriteURL('mapbox://sprites/mapbox/streets-v8?fresh=false', '@2x', '.png'),
-                'https://api.mapbox.com/styles/v1/mapbox/streets-v8/sprite@2x.png?fresh=false&access_token=key'
-            );
+        t.test('.normalizeSpriteURL', (t) => {
+            t.test('normalizes mapbox:// URLs when no query string', (t) => {
+                t.equal(
+                    manager.normalizeSpriteURL('mapbox://sprites/mapbox/streets-v8', '', '.json'),
+                    'https://api.mapbox.com/styles/v1/mapbox/streets-v8/sprite.json?access_token=key'
+                );
 
-            t.equal(
-                mapbox.normalizeSpriteURL('mapbox://sprites/mapbox/streets-v8/draft?fresh=true', '@2x', '.png'),
-                'https://api.mapbox.com/styles/v1/mapbox/streets-v8/draft/sprite@2x.png?fresh=true&access_token=key'
-            );
-
-            t.end();
-        });
+                t.equal(
+                    manager.normalizeSpriteURL('mapbox://sprites/mapbox/streets-v8', '@2x', '.png'),
+                    'https://api.mapbox.com/styles/v1/mapbox/streets-v8/sprite@2x.png?access_token=key'
+                );
 
-        t.test('concantenates path, ratio, and extension for non-mapbox:// scheme', (t) => {
-            t.equal(mapbox.normalizeSpriteURL('http://www.foo.com/bar', '@2x', '.png'), 'http://www.foo.com/bar@2x.png');
-            t.end();
-        });
+                t.equal(
+                    manager.normalizeSpriteURL('mapbox://sprites/mapbox/streets-v8/draft', '@2x', '.png'),
+                    'https://api.mapbox.com/styles/v1/mapbox/streets-v8/draft/sprite@2x.png?access_token=key'
+                );
 
-        t.test('concantenates path, ratio, and extension for file:/// scheme', (t) => {
-            t.equal(mapbox.normalizeSpriteURL('file:///path/to/bar', '@2x', '.png'), 'file:///path/to/bar@2x.png');
-            t.end();
-        });
+                t.end();
+            });
 
-        t.test('normalizes non-mapbox:// scheme when query string exists', (t) => {
-            t.equal(mapbox.normalizeSpriteURL('http://www.foo.com/bar?fresh=true', '@2x', '.png'), 'http://www.foo.com/bar@2x.png?fresh=true');
-            t.end();
-        });
+            t.test('normalizes mapbox:// URLs when query string exists', (t) => {
+                t.equal(
+                    manager.normalizeSpriteURL('mapbox://sprites/mapbox/streets-v8?fresh=true', '', '.json'),
+                    'https://api.mapbox.com/styles/v1/mapbox/streets-v8/sprite.json?fresh=true&access_token=key'
+                );
 
-        t.test('handles custom API_URLs with paths', (t) => {
-            config.API_URL = 'https://test.example.com/api.mapbox.com';
-            t.equal(
-                mapbox.normalizeSpriteURL('mapbox://sprites/mapbox/streets-v8', '', '.json'),
-                'https://test.example.com/api.mapbox.com/styles/v1/mapbox/streets-v8/sprite.json?access_token=key'
-            );
-            t.end();
-        });
+                t.equal(
+                    manager.normalizeSpriteURL('mapbox://sprites/mapbox/streets-v8?fresh=false', '@2x', '.png'),
+                    'https://api.mapbox.com/styles/v1/mapbox/streets-v8/sprite@2x.png?fresh=false&access_token=key'
+                );
 
-        t.end();
-    });
+                t.equal(
+                    manager.normalizeSpriteURL('mapbox://sprites/mapbox/streets-v8/draft?fresh=true', '@2x', '.png'),
+                    'https://api.mapbox.com/styles/v1/mapbox/streets-v8/draft/sprite@2x.png?fresh=true&access_token=key'
+                );
 
-    t.test('canonicalize raster tileset', (t) => {
-        const tileset = {tiles: ["http://a.tiles.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.png?access_token=key"]};
-        mapbox.canonicalizeTileset(tileset, "mapbox://mapbox.satellite");
-        t.deepEquals(mapbox.canonicalizeTileset(tileset, "mapbox://mapbox.satellite"), ["mapbox://tiles/mapbox.satellite/{z}/{x}/{y}.png"]);
-        t.end();
-    });
+                t.end();
+            });
 
-    t.test('canonicalize vector tileset', (t) => {
-        const tileset = {tiles: ["http://a.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.vector.pbf?access_token=key"]};
-        t.deepEquals(mapbox.canonicalizeTileset(tileset, "mapbox://mapbox.streets"), ["mapbox://tiles/mapbox.streets/{z}/{x}/{y}.vector.pbf"]);
-        t.end();
-    });
+            t.test('concantenates path, ratio, and extension for non-mapbox:// scheme', (t) => {
+                t.equal(manager.normalizeSpriteURL('http://www.foo.com/bar', '@2x', '.png'), 'http://www.foo.com/bar@2x.png');
+                t.end();
+            });
 
-    t.test('.canonicalizeTileURL', (t) => {
-        t.equals(mapbox.canonicalizeTileURL("http://a.tiles.mapbox.com/v4/a.b/{z}/{x}/{y}.vector.pbf"),
-            "mapbox://tiles/a.b/{z}/{x}/{y}.vector.pbf");
-        t.equals(mapbox.canonicalizeTileURL("http://b.tiles.mapbox.com/v4/a.b/{z}/{x}/{y}.vector.pbf"),
-            "mapbox://tiles/a.b/{z}/{x}/{y}.vector.pbf");
-        t.equals(mapbox.canonicalizeTileURL("http://api.mapbox.com/v4/a.b/{z}/{x}/{y}.vector.pbf"),
-            "mapbox://tiles/a.b/{z}/{x}/{y}.vector.pbf");
-        t.equals(mapbox.canonicalizeTileURL("http://api.mapbox.com/v4/a.b/{z}/{x}/{y}.vector.pbf?access_token=key"),
-            "mapbox://tiles/a.b/{z}/{x}/{y}.vector.pbf");
-        t.equals(mapbox.canonicalizeTileURL("https://api.mapbox.cn/v4/a.b/{z}/{x}/{y}.vector.pbf?access_token=key"),
-            "mapbox://tiles/a.b/{z}/{x}/{y}.vector.pbf");
-        t.equals(mapbox.canonicalizeTileURL("http://api.mapbox.com/v4/a.b,c.d/{z}/{x}/{y}.vector.pbf?access_token=key"),
-            "mapbox://tiles/a.b,c.d/{z}/{x}/{y}.vector.pbf");
-        t.equals(mapbox.canonicalizeTileURL("http://a.tiles.mapbox.com/v4/a.b/{z}/{x}/{y}.vector.pbf?access_token=key&custom=parameter"),
-            "mapbox://tiles/a.b/{z}/{x}/{y}.vector.pbf?custom=parameter");
-        t.equals(mapbox.canonicalizeTileURL("http://a.tiles.mapbox.com/v4/a.b/{z}/{x}/{y}.vector.pbf?custom=parameter&access_token=key"),
-            "mapbox://tiles/a.b/{z}/{x}/{y}.vector.pbf?custom=parameter");
-        t.equals(mapbox.canonicalizeTileURL("http://a.tiles.mapbox.com/v4/a.b/{z}/{x}/{y}.vector.pbf?custom=parameter&access_token=key&second=param"),
-            "mapbox://tiles/a.b/{z}/{x}/{y}.vector.pbf?custom=parameter&second=param");
-        t.equals(mapbox.canonicalizeTileURL("http://api.mapbox.com/v4/a.b/{z}/{x}/{y}.jpg?access_token=key"),
-            "mapbox://tiles/a.b/{z}/{x}/{y}.jpg");
-        t.equals(mapbox.canonicalizeTileURL("http://api.mapbox.com/v4/a.b/{z}/{x}/{y}.jpg70?access_token=key"),
-            "mapbox://tiles/a.b/{z}/{x}/{y}.jpg70");
-        t.equals(mapbox.canonicalizeTileURL("http://api.mapbox.com/v4/a.b/{z}/{x}/{y}.jpg?access_token=key"),
-            "mapbox://tiles/a.b/{z}/{x}/{y}.jpg");
-        t.equals(mapbox.canonicalizeTileURL("http://api.mapbox.com/v4/a.b/{z}/{x}/{y}.jpg70?access_token=key"),
-            "mapbox://tiles/a.b/{z}/{x}/{y}.jpg70");
-        t.equals(mapbox.canonicalizeTileURL("http://api.mapbox.com/v4/a.b/{z}/{x}/{y}.png"),
-            "mapbox://tiles/a.b/{z}/{x}/{y}.png");
-        t.equals(mapbox.canonicalizeTileURL("http://api.mapbox.com/v4/a.b/{z}/{x}/{y}.png?access_token=key"),
-            "mapbox://tiles/a.b/{z}/{x}/{y}.png");
-        t.equals(mapbox.canonicalizeTileURL("http://api.mapbox.com/v4/a.b/{z}/{x}/{y}.png"),
-            "mapbox://tiles/a.b/{z}/{x}/{y}.png");
-        t.equals(mapbox.canonicalizeTileURL("http://api.mapbox.com/v4/a.b/{z}/{x}/{y}.png?access_token=key"),
-            "mapbox://tiles/a.b/{z}/{x}/{y}.png");
-
-        // We don't ever expect to see these inputs, but be safe anyway.
-        t.equals(mapbox.canonicalizeTileURL("http://path"), "http://path");
-        t.equals(mapbox.canonicalizeTileURL("http://api.mapbox.com/v4/"), "http://api.mapbox.com/v4/");
-        t.equals(mapbox.canonicalizeTileURL("http://api.mapbox.com/v4/a.b/{z}/{x}/{y}."), "http://api.mapbox.com/v4/a.b/{z}/{x}/{y}.");
-        t.equals(mapbox.canonicalizeTileURL("http://api.mapbox.com/v4/a.b/{z}/{x}/{y}/."), "http://api.mapbox.com/v4/a.b/{z}/{x}/{y}/.");
-        t.end();
-    });
+            t.test('concantenates path, ratio, and extension for file:/// scheme', (t) => {
+                t.equal(manager.normalizeSpriteURL('file:///path/to/bar', '@2x', '.png'), 'file:///path/to/bar@2x.png');
+                t.end();
+            });
 
-    t.test('.normalizeTileURL', (t) => {
-        webpSupported.supported = false;
+            t.test('normalizes non-mapbox:// scheme when query string exists', (t) => {
+                t.equal(manager.normalizeSpriteURL('http://www.foo.com/bar?fresh=true', '@2x', '.png'), 'http://www.foo.com/bar@2x.png?fresh=true');
+                t.end();
+            });
 
-        t.test('does nothing on 1x devices', (t) => {
-            config.API_URL = 'http://path.png';
-            config.REQUIRE_ACCESS_TOKEN = false;
-            t.equal(mapbox.normalizeTileURL('http://path.png/tile.png', mapboxSource),   'http://path.png/v4/tile.png');
-            t.equal(mapbox.normalizeTileURL('http://path.png/tile.png32', mapboxSource), 'http://path.png/v4/tile.png32');
-            t.equal(mapbox.normalizeTileURL('http://path.png/tile.jpg70', mapboxSource), 'http://path.png/v4/tile.jpg70');
-            t.end();
-        });
+            t.test('handles custom API_URLs with paths', (t) => {
+                config.API_URL = 'https://test.example.com/api.mapbox.com';
+                t.equal(
+                    manager.normalizeSpriteURL('mapbox://sprites/mapbox/streets-v8', '', '.json'),
+                    'https://test.example.com/api.mapbox.com/styles/v1/mapbox/streets-v8/sprite.json?access_token=key'
+                );
+                t.end();
+            });
 
-        t.test('inserts @2x on 2x devices', (t) => {
-            window.devicePixelRatio = 2;
-            config.API_URL = 'http://path.png';
-            config.REQUIRE_ACCESS_TOKEN = false;
-            t.equal(mapbox.normalizeTileURL('http://path.png/tile.png', mapboxSource), 'http://path.png/v4/tile@2x.png');
-            t.equal(mapbox.normalizeTileURL('http://path.png/tile.png32', mapboxSource), 'http://path.png/v4/tile@2x.png32');
-            t.equal(mapbox.normalizeTileURL('http://path.png/tile.jpg70', mapboxSource), 'http://path.png/v4/tile@2x.jpg70');
-            t.equal(mapbox.normalizeTileURL('http://path.png/tile.png?access_token=foo', mapboxSource), 'http://path.png/v4/tile@2x.png?access_token=foo');
-            window.devicePixelRatio = 1;
             t.end();
         });
 
-        t.test('inserts @2x when tileSize == 512', (t) => {
-            config.API_URL = 'http://path.png';
-            config.REQUIRE_ACCESS_TOKEN = false;
-            t.equal(mapbox.normalizeTileURL('http://path.png/tile.png', mapboxSource, 512), 'http://path.png/v4/tile@2x.png');
-            t.equal(mapbox.normalizeTileURL('http://path.png/tile.png32', mapboxSource, 512), 'http://path.png/v4/tile@2x.png32');
-            t.equal(mapbox.normalizeTileURL('http://path.png/tile.jpg70', mapboxSource, 512), 'http://path.png/v4/tile@2x.jpg70');
-            t.equal(mapbox.normalizeTileURL('http://path.png/tile.png?access_token=foo', mapboxSource, 512), 'http://path.png/v4/tile@2x.png?access_token=foo');
-            t.end();
-        });
+        t.test('canonicalize raster tileset', (t) => {
+            const tileset = {tiles: ["http://a.tiles.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.png?access_token=key"]};
+            manager.canonicalizeTileset(tileset, "mapbox://mapbox.satellite");
+            t.deepEquals(manager.canonicalizeTileset(tileset, "mapbox://mapbox.satellite"), ["mapbox://tiles/mapbox.satellite/{z}/{x}/{y}.png"]);
+            t.end();
+        });
+
+        t.test('canonicalize vector tileset', (t) => {
+            const tileset = {tiles: ["http://a.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.vector.pbf?access_token=key"]};
+            t.deepEquals(manager.canonicalizeTileset(tileset, "mapbox://mapbox.streets"), ["mapbox://tiles/mapbox.streets/{z}/{x}/{y}.vector.pbf"]);
+            t.end();
+        });
+
+        t.test('.canonicalizeTileURL', (t) => {
+            t.equals(manager.canonicalizeTileURL("http://a.tiles.mapbox.com/v4/a.b/{z}/{x}/{y}.vector.pbf"),
+                "mapbox://tiles/a.b/{z}/{x}/{y}.vector.pbf");
+            t.equals(manager.canonicalizeTileURL("http://b.tiles.mapbox.com/v4/a.b/{z}/{x}/{y}.vector.pbf"),
+                "mapbox://tiles/a.b/{z}/{x}/{y}.vector.pbf");
+            t.equals(manager.canonicalizeTileURL("http://api.mapbox.com/v4/a.b/{z}/{x}/{y}.vector.pbf"),
+                "mapbox://tiles/a.b/{z}/{x}/{y}.vector.pbf");
+            t.equals(manager.canonicalizeTileURL("http://api.mapbox.com/v4/a.b/{z}/{x}/{y}.vector.pbf?access_token=key"),
+                "mapbox://tiles/a.b/{z}/{x}/{y}.vector.pbf");
+            t.equals(manager.canonicalizeTileURL("https://api.mapbox.cn/v4/a.b/{z}/{x}/{y}.vector.pbf?access_token=key"),
+                "mapbox://tiles/a.b/{z}/{x}/{y}.vector.pbf");
+            t.equals(manager.canonicalizeTileURL("http://api.mapbox.com/v4/a.b,c.d/{z}/{x}/{y}.vector.pbf?access_token=key"),
+                "mapbox://tiles/a.b,c.d/{z}/{x}/{y}.vector.pbf");
+            t.equals(manager.canonicalizeTileURL("http://a.tiles.mapbox.com/v4/a.b/{z}/{x}/{y}.vector.pbf?access_token=key&custom=parameter"),
+                "mapbox://tiles/a.b/{z}/{x}/{y}.vector.pbf?custom=parameter");
+            t.equals(manager.canonicalizeTileURL("http://a.tiles.mapbox.com/v4/a.b/{z}/{x}/{y}.vector.pbf?custom=parameter&access_token=key"),
+                "mapbox://tiles/a.b/{z}/{x}/{y}.vector.pbf?custom=parameter");
+            t.equals(manager.canonicalizeTileURL("http://a.tiles.mapbox.com/v4/a.b/{z}/{x}/{y}.vector.pbf?custom=parameter&access_token=key&second=param"),
+                "mapbox://tiles/a.b/{z}/{x}/{y}.vector.pbf?custom=parameter&second=param");
+            t.equals(manager.canonicalizeTileURL("http://api.mapbox.com/v4/a.b/{z}/{x}/{y}.jpg?access_token=key"),
+                "mapbox://tiles/a.b/{z}/{x}/{y}.jpg");
+            t.equals(manager.canonicalizeTileURL("http://api.mapbox.com/v4/a.b/{z}/{x}/{y}.jpg70?access_token=key"),
+                "mapbox://tiles/a.b/{z}/{x}/{y}.jpg70");
+            t.equals(manager.canonicalizeTileURL("http://api.mapbox.com/v4/a.b/{z}/{x}/{y}.jpg?access_token=key"),
+                "mapbox://tiles/a.b/{z}/{x}/{y}.jpg");
+            t.equals(manager.canonicalizeTileURL("http://api.mapbox.com/v4/a.b/{z}/{x}/{y}.jpg70?access_token=key"),
+                "mapbox://tiles/a.b/{z}/{x}/{y}.jpg70");
+            t.equals(manager.canonicalizeTileURL("http://api.mapbox.com/v4/a.b/{z}/{x}/{y}.png"),
+                "mapbox://tiles/a.b/{z}/{x}/{y}.png");
+            t.equals(manager.canonicalizeTileURL("http://api.mapbox.com/v4/a.b/{z}/{x}/{y}.png?access_token=key"),
+                "mapbox://tiles/a.b/{z}/{x}/{y}.png");
+            t.equals(manager.canonicalizeTileURL("http://api.mapbox.com/v4/a.b/{z}/{x}/{y}.png"),
+                "mapbox://tiles/a.b/{z}/{x}/{y}.png");
+            t.equals(manager.canonicalizeTileURL("http://api.mapbox.com/v4/a.b/{z}/{x}/{y}.png?access_token=key"),
+                "mapbox://tiles/a.b/{z}/{x}/{y}.png");
+
+            // We don't ever expect to see these inputs, but be safe anyway.
+            t.equals(manager.canonicalizeTileURL("http://path"), "http://path");
+            t.equals(manager.canonicalizeTileURL("http://api.mapbox.com/v4/"), "http://api.mapbox.com/v4/");
+            t.equals(manager.canonicalizeTileURL("http://api.mapbox.com/v4/a.b/{z}/{x}/{y}."), "http://api.mapbox.com/v4/a.b/{z}/{x}/{y}.");
+            t.equals(manager.canonicalizeTileURL("http://api.mapbox.com/v4/a.b/{z}/{x}/{y}/."), "http://api.mapbox.com/v4/a.b/{z}/{x}/{y}/.");
+            t.end();
+        });
+
+        t.test('.normalizeTileURL', (t) => {
+            t.test('.normalizeTileURL does nothing on 1x devices', (t) => {
+                config.API_URL = 'http://path.png';
+                config.REQUIRE_ACCESS_TOKEN = false;
+                t.equal(manager.normalizeTileURL('http://path.png/tile.png', mapboxSource),   `http://path.png/v4/tile.png`);
+                t.equal(manager.normalizeTileURL('http://path.png/tile.png32', mapboxSource), `http://path.png/v4/tile.png32`);
+                t.equal(manager.normalizeTileURL('http://path.png/tile.jpg70', mapboxSource), `http://path.png/v4/tile.jpg70`);
+                t.end();
+            });
 
-        t.test('replaces img extension with webp on supporting devices', (t) => {
-            webpSupported.supported = true;
-            config.API_URL = 'http://path.png';
-            config.REQUIRE_ACCESS_TOKEN = false;
-            t.equal(mapbox.normalizeTileURL('http://path.png/tile.png', mapboxSource), 'http://path.png/v4/tile.webp');
-            t.equal(mapbox.normalizeTileURL('http://path.png/tile.png32', mapboxSource), 'http://path.png/v4/tile.webp');
-            t.equal(mapbox.normalizeTileURL('http://path.png/tile.jpg70', mapboxSource), 'http://path.png/v4/tile.webp');
-            t.equal(mapbox.normalizeTileURL('http://path.png/tile.png?access_token=foo', mapboxSource), 'http://path.png/v4/tile.webp?access_token=foo');
-            webpSupported.supported = false;
-            t.end();
-        });
+            t.test('.normalizeTileURL inserts @2x on 2x devices', (t) => {
+                window.devicePixelRatio = 2;
+                config.API_URL = 'http://path.png';
+                config.REQUIRE_ACCESS_TOKEN = false;
+                t.equal(manager.normalizeTileURL('http://path.png/tile.png', mapboxSource), `http://path.png/v4/tile@2x.png`);
+                t.equal(manager.normalizeTileURL('http://path.png/tile.png32', mapboxSource), `http://path.png/v4/tile@2x.png32`);
+                t.equal(manager.normalizeTileURL('http://path.png/tile.jpg70', mapboxSource), `http://path.png/v4/tile@2x.jpg70`);
+                t.equal(manager.normalizeTileURL('http://path.png/tile.png?access_token=foo', mapboxSource), `http://path.png/v4/tile@2x.png?access_token=foo`);
+                window.devicePixelRatio = 1;
+                t.end();
+            });
 
-        t.test('ignores non-mapbox:// sources', (t) => {
-            t.equal(mapbox.normalizeTileURL('http://path.png', nonMapboxSource), 'http://path.png');
-            t.end();
-        });
+            t.test('.normalizeTileURL inserts @2x when tileSize == 512', (t) => {
+                config.API_URL = 'http://path.png';
+                config.REQUIRE_ACCESS_TOKEN = false;
+                t.equal(manager.normalizeTileURL('http://path.png/tile.png', mapboxSource, 512), `http://path.png/v4/tile@2x.png`);
+                t.equal(manager.normalizeTileURL('http://path.png/tile.png32', mapboxSource, 512), `http://path.png/v4/tile@2x.png32`);
+                t.equal(manager.normalizeTileURL('http://path.png/tile.jpg70', mapboxSource, 512), `http://path.png/v4/tile@2x.jpg70`);
+                t.equal(manager.normalizeTileURL('http://path.png/tile.png?access_token=foo', mapboxSource, 512), `http://path.png/v4/tile@2x.png?access_token=foo`);
+                t.end();
+            });
 
-        t.test('ignores undefined sources', (t) => {
-            t.equal(mapbox.normalizeTileURL('http://path.png'), 'http://path.png');
-            t.end();
-        });
+            t.test('.normalizeTileURL replaces img extension with webp on supporting devices', (t) => {
+                webpSupported.supported = true;
+                config.API_URL = 'http://path.png';
+                config.REQUIRE_ACCESS_TOKEN = false;
+                t.equal(manager.normalizeTileURL('http://path.png/tile.png', mapboxSource), `http://path.png/v4/tile.webp`);
+                t.equal(manager.normalizeTileURL('http://path.png/tile.png32', mapboxSource), `http://path.png/v4/tile.webp`);
+                t.equal(manager.normalizeTileURL('http://path.png/tile.jpg70', mapboxSource), `http://path.png/v4/tile.webp`);
+                t.equal(manager.normalizeTileURL('http://path.png/tile.png?access_token=foo', mapboxSource), `http://path.png/v4/tile.webp?access_token=foo`);
+                webpSupported.supported = false;
+                t.end();
+            });
 
-        t.test('does not modify the access token for non-mapbox sources', (t) => {
-            config.API_URL = 'http://example.com';
-            t.equal(mapbox.normalizeTileURL('http://example.com/tile.png?access_token=tk.abc.123', nonMapboxSource), 'http://example.com/tile.png?access_token=tk.abc.123');
-            t.end();
-        });
+            t.test('.normalizeTileURL ignores non-mapbox:// sources', (t) => {
+                t.equal(manager.normalizeTileURL('http://path.png', nonMapboxSource), 'http://path.png');
+                t.end();
+            });
 
+            t.test('.normalizeTileURL ignores undefined sources', (t) => {
+                t.equal(manager.normalizeTileURL('http://path.png'), 'http://path.png');
+                t.end();
+            });
 
-        t.test('throw error on falsy url input', (t) => {
-            t.throws(() => {
-                mapbox.normalizeTileURL('', mapboxSource);
-            }, new Error('Unable to parse URL object'));
-            t.end();
-        });
+            t.test('.normalizeTileURL does not modify the access token for non-mapbox sources', (t) => {
+                config.API_URL = 'http://example.com';
+                t.equal(manager.normalizeTileURL('http://example.com/tile.png?access_token=tk.abc.123', nonMapboxSource), 'http://example.com/tile.png?access_token=tk.abc.123');
+                t.end();
+            });
 
-        t.test('matches gl-native normalization', (t) => {
-            config.API_URL = 'https://api.mapbox.com/';
-            t.equal(mapbox.normalizeTileURL("mapbox://tiles/a.b/0/0/0.pbf", mapboxSource), "https://api.mapbox.com/v4/a.b/0/0/0.pbf?access_token=key");
-            t.equal(mapbox.normalizeTileURL("mapbox://tiles/a.b/0/0/0.pbf?style=mapbox://styles/mapbox/streets-v9@0", mapboxSource), "https://api.mapbox.com/v4/a.b/0/0/0.pbf?style=mapbox://styles/mapbox/streets-v9@0&access_token=key");
-            t.equal(mapbox.normalizeTileURL("mapbox://tiles/a.b/0/0/0.pbf?", mapboxSource), "https://api.mapbox.com/v4/a.b/0/0/0.pbf?access_token=key");
-            t.equal(mapbox.normalizeTileURL("mapbox://tiles/a.b/0/0/0.png", mapboxSource), "https://api.mapbox.com/v4/a.b/0/0/0.png?access_token=key");
-            t.equal(mapbox.normalizeTileURL("mapbox://tiles/a.b/0/0/0@2x.png", mapboxSource), "https://api.mapbox.com/v4/a.b/0/0/0@2x.png?access_token=key");
-            t.equal(mapbox.normalizeTileURL("mapbox://tiles/a.b,c.d/0/0/0.pbf", mapboxSource), "https://api.mapbox.com/v4/a.b,c.d/0/0/0.pbf?access_token=key");
+            t.test('.normalizeTileURL throw error on falsy url input', (t) => {
+                t.throws(() => {
+                    manager.normalizeTileURL('', mapboxSource);
+                }, new Error('Unable to parse URL object'));
+                t.end();
+            });
 
-            config.API_URL = 'https://api.example.com/';
-            t.equal(mapbox.normalizeTileURL("mapbox://tiles/a.b/0/0/0.png", mapboxSource), "https://api.example.com/v4/a.b/0/0/0.png?access_token=key");
-            t.equal(mapbox.normalizeTileURL("http://path", nonMapboxSource), "http://path");
+            t.test('.normalizeTileURL matches gl-native normalization', (t) => {
+                config.API_URL = 'https://api.mapbox.com/';
+                // ensure the token exists
+                t.ok(manager._skuToken);
+                t.equal(manager.normalizeTileURL("mapbox://tiles/a.b/0/0/0.pbf", mapboxSource), `https://api.mapbox.com/v4/a.b/0/0/0.pbf?sku=${manager._skuToken}&access_token=key`);
+                t.equal(manager.normalizeTileURL("mapbox://tiles/a.b/0/0/0.pbf?style=mapbox://styles/mapbox/streets-v9@0", mapboxSource), `https://api.mapbox.com/v4/a.b/0/0/0.pbf?style=mapbox://styles/mapbox/streets-v9@0&sku=${manager._skuToken}&access_token=key`);
+                t.equal(manager.normalizeTileURL("mapbox://tiles/a.b/0/0/0.pbf?", mapboxSource), `https://api.mapbox.com/v4/a.b/0/0/0.pbf?sku=${manager._skuToken}&access_token=key`);
+                t.equal(manager.normalizeTileURL("mapbox://tiles/a.b/0/0/0.png", mapboxSource), `https://api.mapbox.com/v4/a.b/0/0/0.png?sku=${manager._skuToken}&access_token=key`);
+                t.equal(manager.normalizeTileURL("mapbox://tiles/a.b/0/0/0@2x.png", mapboxSource), `https://api.mapbox.com/v4/a.b/0/0/0@2x.png?sku=${manager._skuToken}&access_token=key`);
+                t.equal(manager.normalizeTileURL("mapbox://tiles/a.b,c.d/0/0/0.pbf", mapboxSource), `https://api.mapbox.com/v4/a.b,c.d/0/0/0.pbf?sku=${manager._skuToken}&access_token=key`);
+
+                config.API_URL = 'https://api.example.com/';
+                t.equal(manager.normalizeTileURL("mapbox://tiles/a.b/0/0/0.png", mapboxSource), `https://api.example.com/v4/a.b/0/0/0.png?sku=${manager._skuToken}&access_token=key`);
+                t.equal(manager.normalizeTileURL("http://path", nonMapboxSource), "http://path");
 
+                t.end();
+            });
             t.end();
         });
 
@@ -388,6 +411,16 @@ test("mapbox", (t) => {
             t.end();
         });
 
+        t.test('contains skuId', (t) => {
+            event.postTurnstileEvent(mapboxTileURLs);
+            const reqBody = window.server.requests[0].requestBody;
+            // reqBody is a string of an array containing the event object so pick out the stringified event object and convert to an object
+            const mapLoadEvent = JSON.parse(reqBody.slice(1, reqBody.length - 1));
+            t.equals(mapLoadEvent.event, 'appUserTurnstile');
+            t.equals(mapLoadEvent.skuId, SKU_ID);
+            t.end();
+        });
+
         t.test('does not POST when mapboxgl.ACCESS_TOKEN is not set', (t) => {
             config.ACCESS_TOKEN = null;
 
@@ -482,6 +515,7 @@ test("mapbox", (t) => {
 
                 const reqBody = JSON.parse(req.requestBody)[0];
                 t.notEqual(reqBody.userId, 'anonymous');
+                t.equal(reqBody.skuId, SKU_ID);
                 t.end();
             });
 
@@ -499,6 +533,7 @@ test("mapbox", (t) => {
                 req.respond(200);
                 const reqBody = JSON.parse(req.requestBody)[0];
                 t.equal(reqBody.created, new Date(now).toISOString());
+                t.equal(reqBody.skuId, SKU_ID);
 
                 t.end();
             });
@@ -571,6 +606,7 @@ test("mapbox", (t) => {
                 t.equal(req.method, 'POST');
                 t.equal(reqBody.event, 'appUserTurnstile');
                 t.equal(reqBody.sdkVersion, version);
+                t.equal(reqBody.skuId, SKU_ID);
                 t.ok(reqBody.userId);
 
                 t.end();
@@ -629,6 +665,7 @@ test("mapbox", (t) => {
                 t.equal(req.method, 'POST');
                 t.equal(reqBody.event, 'appUserTurnstile');
                 t.equal(reqBody.sdkVersion, version);
+                t.equal(reqBody.skuId, SKU_ID);
                 t.ok(reqBody.userId);
 
                 t.end();
@@ -651,13 +688,14 @@ test("mapbox", (t) => {
                 t.equal(req.method, 'POST');
                 t.equal(reqBody.event, 'appUserTurnstile');
                 t.equal(reqBody.sdkVersion, version);
+                t.equal(reqBody.skuId, SKU_ID);
                 t.ok(reqBody.userId);
                 t.equal(reqBody.created, new Date(tomorrow).toISOString());
 
                 t.end();
             });
 
-            t.test('Queues and POSTs appuserTurnstile events when triggerred in quick succession', (t) => {
+            t.test('Queues and POSTs appuserTurnstile events when triggered in quick succession', (t) => {
                 let now = Date.now();
 
                 const today = now;
@@ -691,6 +729,7 @@ test("mapbox", (t) => {
     t.test('MapLoadEvent', (t) => {
         let event;
         let turnstileEvent;
+        const skuToken = '1234567890123';
         t.beforeEach((callback) => {
             window.useFakeXMLHttpRequest();
             event = new mapbox.MapLoadEvent();
@@ -708,16 +747,27 @@ test("mapbox", (t) => {
             t.end();
         });
 
+        t.test('contains skuId and skuToken', (t) => {
+            event.postMapLoadEvent(mapboxTileURLs, 1, skuToken);
+            const reqBody = window.server.requests[0].requestBody;
+            // reqBody is a string of an array containing the event object so pick out the stringified event object and convert to an object
+            const mapLoadEvent = JSON.parse(reqBody.slice(1, reqBody.length - 1));
+            t.equals(mapLoadEvent.event, 'map.load');
+            t.equals(mapLoadEvent.skuId, SKU_ID);
+            t.equals(mapLoadEvent.skuToken, skuToken);
+            t.end();
+        });
+
         t.test('does not POST when mapboxgl.ACCESS_TOKEN is not set', (t) => {
             config.ACCESS_TOKEN = null;
 
-            event.postMapLoadEvent(mapboxTileURLs, 1);
+            event.postMapLoadEvent(mapboxTileURLs, 1, skuToken);
             t.equal(window.server.requests.length, 0);
             t.end();
         });
 
         t.test('does not POST when url does not point to mapbox.com', (t) => {
-            event.postMapLoadEvent(nonMapboxTileURLs, 1);
+            event.postMapLoadEvent(nonMapboxTileURLs, 1, skuToken);
 
             t.equal(window.server.requests.length, 0);
             t.end();
@@ -726,7 +776,7 @@ test("mapbox", (t) => {
         t.test('POSTs cn event when API_URL changes to cn endpoint', (t) => {
             config.API_URL = 'https://api.mapbox.cn';
 
-            event.postMapLoadEvent(mapboxTileURLs, 1);
+            event.postMapLoadEvent(mapboxTileURLs, 1, skuToken);
 
             const req = window.server.requests[0];
             req.respond(200);
@@ -737,14 +787,14 @@ test("mapbox", (t) => {
 
         t.test('POSTs no event when API_URL unavailable', (t) => {
             config.API_URL = null;
-            event.postMapLoadEvent(mapboxTileURLs, 1);
+            event.postMapLoadEvent(mapboxTileURLs, 1, skuToken);
             t.equal(window.server.requests.length, 0, 'no events posted');
             t.end();
         });
 
         t.test('POSTs no event when API_URL is non-standard', (t) => {
             config.API_URL = "https://api.example.com";
-            event.postMapLoadEvent(mapboxTileURLs, 1);
+            event.postMapLoadEvent(mapboxTileURLs, 1, skuToken);
             t.equal(window.server.requests.length, 0, 'no events posted');
             t.end();
         });
@@ -778,7 +828,7 @@ test("mapbox", (t) => {
                     anonId: 'anonymous'
                 }));
 
-                event.postMapLoadEvent(mapboxTileURLs, 1);
+                event.postMapLoadEvent(mapboxTileURLs, 1, skuToken);
                 const req = window.server.requests[0];
                 req.respond(200);
 
@@ -789,12 +839,12 @@ test("mapbox", (t) => {
 
             t.test('does not POST map.load event second time within same calendar day', (t) => {
                 let now = +Date.now();
-                withFixedDate(t, now, () => event.postMapLoadEvent(mapboxTileURLs, 1));
+                withFixedDate(t, now, () => event.postMapLoadEvent(mapboxTileURLs, 1, skuToken));
 
                 //Post second event
                 const firstEvent = now;
                 now += (60 * 1000); // A bit later
-                withFixedDate(t, now, () => event.postMapLoadEvent(mapboxTileURLs, 1));
+                withFixedDate(t, now, () => event.postMapLoadEvent(mapboxTileURLs, 1, skuToken));
 
                 const req = window.server.requests[0];
                 req.respond(200);
@@ -809,12 +859,12 @@ test("mapbox", (t) => {
 
             t.test('does not POST map.load event second time when clock goes backwards less than a day', (t) => {
                 let now = +Date.now();
-                withFixedDate(t, now, () => event.postMapLoadEvent(mapboxTileURLs, 1));
+                withFixedDate(t, now, () => event.postMapLoadEvent(mapboxTileURLs, 1, skuToken));
 
                 //Post second event
                 const firstEvent = now;
                 now -= (60 * 1000); // A bit earlier
-                withFixedDate(t, now, () => event.postMapLoadEvent(mapboxTileURLs, 1));
+                withFixedDate(t, now, () => event.postMapLoadEvent(mapboxTileURLs, 1, skuToken));
 
                 const req = window.server.requests[0];
                 req.respond(200);
@@ -830,7 +880,7 @@ test("mapbox", (t) => {
             t.test('POSTs map.load event when access token changes', (t) => {
                 config.ACCESS_TOKEN = 'pk.new.*';
 
-                event.postMapLoadEvent(mapboxTileURLs, 1);
+                event.postMapLoadEvent(mapboxTileURLs, 1, skuToken);
 
                 const req = window.server.requests[0];
                 req.respond(200);
@@ -844,7 +894,7 @@ test("mapbox", (t) => {
                 const anonId = uuid();
                 window.localStorage.setItem(`mapbox.eventData.uuid:${config.ACCESS_TOKEN}`, anonId);
                 turnstileEvent.postTurnstileEvent(mapboxTileURLs);
-                event.postMapLoadEvent(mapboxTileURLs, 1);
+                event.postMapLoadEvent(mapboxTileURLs, 1, skuToken);
 
 
                 const turnstileReq = window.server.requests[0];
@@ -866,7 +916,7 @@ test("mapbox", (t) => {
 
         t.test('when LocalStorage is not available', (t) => {
             t.test('POSTs map.load event', (t) => {
-                event.postMapLoadEvent(mapboxTileURLs, 1);
+                event.postMapLoadEvent(mapboxTileURLs, 1, skuToken);
 
                 const req = window.server.requests[0];
                 req.respond(200);
@@ -883,8 +933,8 @@ test("mapbox", (t) => {
 
             t.test('does not POST map.load multiple times for the same map instance', (t) => {
                 const now = Date.now();
-                withFixedDate(t, now, () => event.postMapLoadEvent(mapboxTileURLs, 1));
-                withFixedDate(t, now + 5, () => event.postMapLoadEvent(mapboxTileURLs, 1));
+                withFixedDate(t, now, () => event.postMapLoadEvent(mapboxTileURLs, 1, skuToken));
+                withFixedDate(t, now + 5, () => event.postMapLoadEvent(mapboxTileURLs, 1, skuToken));
 
                 const req = window.server.requests[0];
                 req.respond(200);
@@ -900,7 +950,7 @@ test("mapbox", (t) => {
             t.test('POSTs map.load event when access token changes', (t) => {
                 config.ACCESS_TOKEN = 'pk.new.*';
 
-                event.postMapLoadEvent(mapboxTileURLs, 1);
+                event.postMapLoadEvent(mapboxTileURLs, 1, skuToken);
 
                 const req = window.server.requests[0];
                 req.respond(200);
@@ -916,9 +966,9 @@ test("mapbox", (t) => {
             });
 
             t.test('POSTs distinct map.load for multiple maps', (t) => {
-                event.postMapLoadEvent(mapboxTileURLs, 1);
+                event.postMapLoadEvent(mapboxTileURLs, 1, skuToken);
                 const now = +Date.now();
-                withFixedDate(t, now, () => event.postMapLoadEvent(mapboxTileURLs, 2));
+                withFixedDate(t, now, () => event.postMapLoadEvent(mapboxTileURLs, 2, skuToken));
 
                 let req = window.server.requests[0];
                 req.respond(200);
@@ -938,9 +988,9 @@ test("mapbox", (t) => {
 
             t.test('Queues and POSTs map.load events when triggerred in quick succession by different maps', (t) => {
                 const now = Date.now();
-                withFixedDate(t, now, () => event.postMapLoadEvent(mapboxTileURLs, 1));
-                withFixedDate(t, now, () => event.postMapLoadEvent(mapboxTileURLs, 2));
-                withFixedDate(t, now, () => event.postMapLoadEvent(mapboxTileURLs, 3));
+                withFixedDate(t, now, () => event.postMapLoadEvent(mapboxTileURLs, 1, skuToken));
+                withFixedDate(t, now, () => event.postMapLoadEvent(mapboxTileURLs, 2, skuToken));
+                withFixedDate(t, now, () => event.postMapLoadEvent(mapboxTileURLs, 3, skuToken));
 
                 const reqOne = window.server.requests[0];
                 reqOne.respond(200);
diff --git a/test/unit/util/token.test.js b/test/unit/util/resolve_tokens.test.js
similarity index 96%
rename from test/unit/util/token.test.js
rename to test/unit/util/resolve_tokens.test.js
index ac83e1f2b41..1a47287db6b 100644
--- a/test/unit/util/token.test.js
+++ b/test/unit/util/resolve_tokens.test.js
@@ -1,5 +1,5 @@
 import { test } from 'mapbox-gl-js-test';
-import resolveTokens from '../../../src/util/token';
+import resolveTokens from '../../../src/util/resolve_tokens';
 
 test('resolveToken', (t) => {
     t.equal('3 Fine Fields', resolveTokens({a:3, b:'Fine', c:'Fields'}, '{a} {b} {c}'));
diff --git a/test/unit/util/sku_token.test.js b/test/unit/util/sku_token.test.js
new file mode 100644
index 00000000000..e4643f0bdc6
--- /dev/null
+++ b/test/unit/util/sku_token.test.js
@@ -0,0 +1,32 @@
+import { test } from 'mapbox-gl-js-test';
+import { createSkuToken, SKU_ID } from '../../../src/util/sku_token';
+
+test('sku token generation', (t) => {
+    const skuToken = createSkuToken().token;
+
+    t.test('token is the correct length', (t) => {
+        t.equal(skuToken.length, 13);
+        t.end();
+    });
+
+    t.test('token has the correct token version', (t) => {
+        t.equal(skuToken.charAt(0), '1');
+        t.end();
+    });
+
+    t.test('token has the correct sku ID', (t) => {
+        t.equal(skuToken.slice(1, 3), SKU_ID);
+        t.end();
+    });
+
+    t.test('createSkuToken generates a unique token each time it\'s called', (t) => {
+        const secondSkuToken = createSkuToken().token;
+        const thirdSkuToken = createSkuToken().token;
+        t.notEqual(skuToken, secondSkuToken);
+        t.notEqual(skuToken, thirdSkuToken);
+        t.notEqual(secondSkuToken, thirdSkuToken);
+        t.end();
+    });
+
+    t.end();
+});