URL Transform callback as a Map option

bench/benchmarks/buffer.js

@@ -24,7 +24,7 @@ module.exports = function run() {
     const evented = new Evented();
 
     const stylesheetURL = `https://api.mapbox.com/styles/v1/mapbox/streets-v9?access_token=${accessToken}`;
-    ajax.getJSON(stylesheetURL, (err, stylesheet) => {
+    ajax.getJSON({ url: stylesheetURL }, (err, stylesheet) => {
         if (err) return evented.fire('error', {error: err});
 
         evented.fire('log', {
@@ -82,14 +82,20 @@ module.exports = function run() {
     return evented;
 };
 
+class StubMap extends Evented {
+    _transformRequest(url) {
+        return { url };
+    }
+}
+
 function preloadAssets(stylesheet, callback) {
     const assets = {
         glyphs: {},
         icons: {},
         tiles: {}
     };
 
-    const style = new Style(stylesheet);
+    const style = new Style(stylesheet, new StubMap());
 
     style.on('style.load', () => {
         function getGlyphs(params, callback) {
@@ -107,7 +113,7 @@ function preloadAssets(stylesheet, callback) {
         }
 
         function getTile(url, callback) {
-            ajax.getArrayBuffer(url, (err, response) => {
+            ajax.getArrayBuffer({ url }, (err, response) => {
                 assets.tiles[url] = response.data;
                 callback(err, response.data);
             });

bench/benchmarks/geojson_setdata_large.js

@@ -14,7 +14,7 @@ module.exports = function() {
         evented.fire('log', {message: 'downloading large geojson'});
     }, 0);
 
-    ajax.getJSON('http://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_land.geojson', (err, data) => {
+    ajax.getJSON({ url: 'http://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_land.geojson' }, (err, data) => {
         evented.fire('log', {message: 'starting test'});
 
         if (err) return evented.fire('error', {error: err});

bench/benchmarks/style_load.js

@@ -12,8 +12,13 @@ module.exports = function() {
 
     const evented = new Evented();
 
+    class StubMap extends Evented {
+        _transformRequest(url) {
+            return { url };
+        }
+    }
     const stylesheetURL = `https://api.mapbox.com/styles/v1/mapbox/streets-v9?access_token=${accessToken}`;
-    ajax.getJSON(stylesheetURL, (err, json) => {
+    ajax.getJSON({ url: stylesheetURL }, (err, json) => {
         if (err) {
             return evented.fire('error', {error: err});
         }
@@ -23,7 +28,7 @@ module.exports = function() {
 
         asyncTimesSeries(20, (callback) => {
             const timeStart = performance.now();
-            new Style(json)
+            new Style(json, new StubMap())
                 .on('error', (err) => {
                     evented.fire('error', { error: err });
                 })

src/source/geojson_source.js

@@ -4,6 +4,7 @@ const Evented = require('../util/evented');
 const util = require('../util/util');
 const window = require('../util/window');
 const EXTENT = require('../data/extent');
+const ResourceType = require('../util/ajax').ResourceType;
 
 import type {Source} from './source';
 import type Map from '../ui/map';
@@ -138,8 +139,8 @@ class GeoJSONSource extends Evented implements Source {
     }
 
     onAdd(map: Map) {
-        this.load();
         this.map = map;
+        this.load();
     }
 
     /**
@@ -170,7 +171,7 @@ class GeoJSONSource extends Evented implements Source {
         const options = util.extend({}, this.workerOptions);
         const data = this._data;
         if (typeof data === 'string') {
-            options.url = resolveURL(data);
+            options.request = this.map._transformRequest(resolveURL(data), ResourceType.Source);
         } else {
             options.data = JSON.stringify(data);
         }

src/source/geojson_worker_source.js

@@ -18,11 +18,12 @@ import type {Actor} from '../util/actor';
 import type StyleLayerIndex from '../style/style_layer_index';
 
 import type {LoadVectorDataCallback} from './vector_tile_worker_source';
+import type {RequestParameters} from '../util/ajax';
 
 export type GeoJSON = Object;
 
 export type LoadGeoJSONParameters = {
-    url?: string,
+    request?: RequestParameters,
     data?: string,
     source: string,
     superclusterOptions?: Object,
@@ -164,8 +165,8 @@ class GeoJSONWorkerSource extends VectorTileWorkerSource {
         // origin or absolute path.
         // ie: /foo/bar.json or http://example.com/bar.json
         // but not ../foo/bar.json
-        if (params.url) {
-            ajax.getJSON(params.url, callback);
+        if (params.request) {
+            ajax.getJSON(params.request, callback);
         } else if (typeof params.data === 'string') {
             try {
                 return callback(null, JSON.parse(params.data));

src/source/image_source.js

@@ -91,7 +91,7 @@ class ImageSource extends Evented implements Source {
 
         this.url = this.options.url;
 
-        ajax.getImage(this.options.url, (err, image) => {
+        ajax.getImage(this.map._transformRequest(this.url, ajax.ResourceType.Image), (err, image) => {
             if (err) {
                 this.fire('error', {error: err});
             } else if (image) {
@@ -109,11 +109,8 @@ class ImageSource extends Evented implements Source {
     }
 
     onAdd(map: Map) {
-        this.load();
         this.map = map;
-        if (this.image) {
-            this.setCoordinates(this.coordinates);
-        }
+        this.load();
     }
 
     /**
@@ -181,7 +178,7 @@ class ImageSource extends Evented implements Source {
     }
 
     prepare() {
-        if (Object.keys(this.tiles).length === 0 === 0 || !this.image) return;
+        if (Object.keys(this.tiles).length === 0 || !this.image) return;
         this._prepareImage(this.map.painter.gl, this.image);
     }
 
@@ -230,7 +227,7 @@ class ImageSource extends Evented implements Source {
     serialize(): Object {
         return {
             type: 'image',
-            urls: this.url,
+            urls: this.options.url,
             coordinates: this.coordinates
         };
     }

src/source/load_tilejson.js

@@ -5,7 +5,9 @@ const ajax = require('../util/ajax');
 const browser = require('../util/browser');
 const normalizeURL = require('../util/mapbox').normalizeSourceURL;
 
-module.exports = function(options: any, callback: Callback<TileJSON>) {
+import type {RequestTransformFunction} from '../ui/map';
+
+module.exports = function(options: any, requestTransformFn: RequestTransformFunction, callback: Callback<TileJSON>) {
     const loaded = function(err, tileJSON: any) {
         if (err) {
             return callback(err);
@@ -22,7 +24,7 @@ module.exports = function(options: any, callback: Callback<TileJSON>) {
     };
 
     if (options.url) {
-        ajax.getJSON(normalizeURL(options.url), loaded);
+        ajax.getJSON(requestTransformFn(normalizeURL(options.url), ajax.ResourceType.Source), loaded);
     } else {
         browser.frame(() => loaded(null, options));
     }

src/source/raster_tile_source.js

@@ -52,7 +52,7 @@ class RasterTileSource extends Evented implements Source {
 
     load() {
         this.fire('dataloading', {dataType: 'source'});
-        loadTileJSON(this._options, (err, tileJSON) => {
+        loadTileJSON(this._options, this.map._transformRequest, (err, tileJSON) => {
             if (err) {
                 this.fire('error', err);
             } else if (tileJSON) {
@@ -69,8 +69,8 @@ class RasterTileSource extends Evented implements Source {
     }
 
     onAdd(map: Map) {
-        this.load();
         this.map = map;
+        this.load();
     }
 
     setBounds(bounds?: [number, number, number, number]) {
@@ -91,7 +91,7 @@ class RasterTileSource extends Evented implements Source {
     loadTile(tile: Tile, callback: Callback<void>) {
         const url = normalizeURL(tile.coord.url(this.tiles, null, this.scheme), this.url, this.tileSize);
 
-        tile.request = ajax.getImage(url, (err, img) => {
+        tile.request = ajax.getImage(this.map._transformRequest(url, ajax.ResourceType.Tile), (err, img) => {
             delete tile.request;
 
             if (tile.aborted) {

src/source/rtl_text_plugin.js

@@ -38,7 +38,7 @@ module.exports.setRTLTextPlugin = function(pluginURL: string, callback: ErrorCal
     }
     pluginRequested = true;
     module.exports.errorCallback = callback;
-    ajax.getArrayBuffer(pluginURL, (err, response) => {
+    ajax.getArrayBuffer({ url: pluginURL }, (err, response) => {
         if (err) {
             callback(err);
         } else if (response) {

src/source/vector_tile_source.js

@@ -5,6 +5,7 @@ const util = require('../util/util');
 const loadTileJSON = require('./load_tilejson');
 const normalizeURL = require('../util/mapbox').normalizeTileURL;
 const TileBounds = require('./tile_bounds');
+const ResourceType = require('../util/ajax').ResourceType;
 
 import type {Source} from './source';
 import type TileCoord from './tile_coord';
@@ -56,7 +57,7 @@ class VectorTileSource extends Evented implements Source {
     load() {
         this.fire('dataloading', {dataType: 'source'});
 
-        loadTileJSON(this._options, (err, tileJSON) => {
+        loadTileJSON(this._options, this.map._transformRequest, (err, tileJSON) => {
             if (err) {
                 this.fire('error', err);
             } else if (tileJSON) {
@@ -84,8 +85,8 @@ class VectorTileSource extends Evented implements Source {
     }
 
     onAdd(map: Map) {
-        this.load();
         this.map = map;
+        this.load();
     }
 
     serialize() {
@@ -94,8 +95,9 @@ class VectorTileSource extends Evented implements Source {
 
     loadTile(tile: Tile, callback: Callback<void>) {
         const overscaling = tile.coord.z > this.maxzoom ? Math.pow(2, tile.coord.z - this.maxzoom) : 1;
+        const url = normalizeURL(tile.coord.url(this.tiles, this.maxzoom, this.scheme), this.url);
         const params = {
-            url: normalizeURL(tile.coord.url(this.tiles, this.maxzoom, this.scheme), this.url),
+            request: this.map._transformRequest(url, ResourceType.Tile),
             uid: tile.uid,
             coord: tile.coord,
             zoom: tile.coord.z,

src/source/vector_tile_worker_source.js

@@ -40,7 +40,7 @@ export type LoadVectorData = (params: WorkerTileParameters, callback: LoadVector
  * @private
  */
 function loadVectorTile(params: WorkerTileParameters, callback: LoadVectorDataCallback) {
-    const xhr = ajax.getArrayBuffer(params.url, (err, response) => {
+    const xhr = ajax.getArrayBuffer(params.request, (err, response) => {
         if (err) {
             callback(err);
         } else if (response) {

src/source/video_source.js

@@ -96,8 +96,8 @@ class VideoSource extends ImageSource {
 
     onAdd(map: Map) {
         if (this.map) return;
-        this.load();
         this.map = map;
+        this.load();
         if (this.video) {
             this.video.play();
             this.setCoordinates(this.coordinates);

src/source/worker.js

@@ -108,7 +108,7 @@ class Worker {
      * function taking `(name, workerSourceObject)`.
      *  @private
      */
-    loadWorkerSource(map: string, params: {url: string}, callback: Callback<void>) {
+    loadWorkerSource(map: string, params: { url: string }, callback: Callback<void>) {
         try {
             this.self.importScripts(params.url);
             callback();

src/source/worker_source.js

@@ -7,6 +7,7 @@ import type {SerializedBucket} from '../data/bucket';
 import type {SerializedFeatureIndex} from '../data/feature_index';
 import type {SerializedCollisionTile} from '../symbol/collision_tile';
 import type {SerializedStructArray} from '../util/struct_array';
+import type {RequestParameters} from '../util/ajax';
 
 export type TileParameters = {
     source: string,
@@ -23,7 +24,7 @@ export type PlacementConfig = {
 
 export type WorkerTileParameters = TileParameters & {
     coord: TileCoord,
-    url: string,
+    request: RequestParameters,
     zoom: number,
     maxZoom: number,
     tileSize: number,

src/style/image_sprite.js

@@ -5,6 +5,8 @@ const ajax = require('../util/ajax');
 const browser = require('../util/browser');
 const normalizeURL = require('../util/mapbox').normalizeSpriteURL;
 
+import type {RequestTransformFunction} from '../ui/map';
+
 class SpritePosition {
     x: number;
     y: number;
@@ -27,28 +29,32 @@ class ImageSprite extends Evented {
     base: string;
     retina: boolean;
 
+    transformRequestFn: RequestTransformFunction;
     data: ?{[string]: SpritePosition};
     imgData: ?Uint8ClampedArray;
     width: ?number;
 
-    constructor(base: string, eventedParent?: Evented) {
+    constructor(base: string, transformRequestCallback: RequestTransformFunction, eventedParent?: Evented) {
         super();
         this.base = base;
         this.retina = browser.devicePixelRatio > 1;
         this.setEventedParent(eventedParent);
+        this.transformRequestFn = transformRequestCallback;
 
         const format = this.retina ? '@2x' : '';
-
-        ajax.getJSON(normalizeURL(base, format, '.json'), (err, data) => {
+        let url = normalizeURL(base, format, '.json');
+        const jsonRequest = transformRequestCallback(url, ajax.ResourceType.SpriteJSON);
+        ajax.getJSON(jsonRequest, (err, data) => {
             if (err) {
                 this.fire('error', {error: err});
             } else if (data) {
                 this.data = (data : any);
                 if (this.imgData) this.fire('data', {dataType: 'style'});
             }
         });
-
-        ajax.getImage(normalizeURL(base, format, '.png'), (err, img) => {
+        url = normalizeURL(base, format, '.png');
+        const imageRequest = transformRequestCallback(url, ajax.ResourceType.SpriteImage);
+        ajax.getImage(imageRequest, (err, img) => {
             if (err) {
                 this.fire('error', {error: err});
             } else if (img) {
@@ -71,7 +77,7 @@ class ImageSprite extends Evented {
 
     resize(/*gl*/) {
         if (browser.devicePixelRatio > 1 !== this.retina) {
-            const newSprite = new ImageSprite(this.base);
+            const newSprite = new ImageSprite(this.base, this.transformRequestFn);
             newSprite.on('data', () => {
                 this.data = newSprite.data;
                 this.imgData = newSprite.imgData;

src/style/style.js

@@ -85,6 +85,10 @@ class Style extends Evented {
             }
         });
 
+        const transformRequest = (url, resourceType) => {
+            return  this.map ? this.map._transformRequest(url, resourceType) : { url };
+        };
+
         const stylesheetLoaded = (err, stylesheet) => {
             if (err) {
                 this.fire('error', {error: err});
@@ -103,17 +107,17 @@ class Style extends Evented {
             }
 
             if (stylesheet.sprite) {
-                this.sprite = new ImageSprite(stylesheet.sprite, this);
+                this.sprite = new ImageSprite(stylesheet.sprite, transformRequest, this);
             }
 
-            this.glyphSource = new GlyphSource(stylesheet.glyphs, options.localIdeographFontFamily, this);
+            this.glyphSource = new GlyphSource(stylesheet.glyphs, options.localIdeographFontFamily, transformRequest, this);
             this._resolve();
             this.fire('data', {dataType: 'style'});
             this.fire('style.load');
         };
 
         if (typeof stylesheet === 'string') {
-            ajax.getJSON(mapbox.normalizeStyleURL(stylesheet), stylesheetLoaded);
+            ajax.getJSON(transformRequest(mapbox.normalizeStyleURL(stylesheet), ajax.ResourceType.Style), stylesheetLoaded);
         } else {
             browser.frame(stylesheetLoaded.bind(this, null, stylesheet));
         }