baseApiUrl w/ path & normalizeTileURL functionality

- adds regex to trim tileURL prefix to /v4/...
- adds filter to makeAPIURL preventing duplication of param 'access_token'
- reorders params on test case -> sku,access_token

closes #8458

src/util/mapbox.js

@@ -119,6 +119,7 @@ function makeAPIURL(urlObject: UrlObject, accessToken: string | null | void): st
     if (accessToken[0] === 's')
         throw new Error(`Use a public access token (pk.*) with Mapbox GL, not a secret access token (sk.*). ${help}`);
 
+    urlObject.params = urlObject.params.filter((d) => !d.includes('access_token'));
     urlObject.params.push(`access_token=${accessToken}`);
     return formatUrl(urlObject);
 }
@@ -171,18 +172,19 @@ const normalizeSpriteURL = function(url: string, format: string, extension: stri
 };
 
 const imageExtensionRe = /(\.(png|jpg)\d*)(?=$)/;
+const tileURLAPIPrefixRe = /^.+\/v4\//;
 
 const normalizeTileURL = function(tileURL: string, sourceURL?: ?string, tileSize?: ?number, skuToken?: string, customAccessToken?: ?string): string {
     if (!sourceURL || !isMapboxURL(sourceURL)) return tileURL;
 
     const urlObject = parseUrl(tileURL);
-
     // The v4 mapbox tile API supports 512x512 image tiles only when @2x
     // is appended to the tile URL. If `tileSize: 512` is specified for
     // a Mapbox raster source force the @2x suffix even if a non hidpi device.
     const suffix = browser.devicePixelRatio >= 2 || tileSize === 512 ? '@2x' : '';
     const extension = webpSupported.supported ? '.webp' : '$1';
     urlObject.path = urlObject.path.replace(imageExtensionRe, `${suffix}${extension}`);
+    urlObject.path = urlObject.path.replace(tileURLAPIPrefixRe, '/');
     urlObject.path = `/v4${urlObject.path}`;
 
     if (config.REQUIRE_ACCESS_TOKEN && (config.ACCESS_TOKEN || customAccessToken) && skuToken) {

test/unit/util/mapbox.test.js

@@ -361,7 +361,7 @@ test("mapbox", (t) => {
                 // Add a path to the config:
                 config.API_URL = 'http://localhost:8080/mbx';
                 const input    = `https://localhost:8080/mbx/v4/mapbox.mapbox-terrain-v2,mapbox.mapbox-streets-v7/10/184/401.vector.pbf?access_token=${config.ACCESS_TOKEN}`;
-                const expected =  `http://localhost:8080/mbx/v4/mapbox.mapbox-terrain-v2,mapbox.mapbox-streets-v7/10/184/401.vector.pbf?access_token=${config.ACCESS_TOKEN}&sku=${manager._skuToken}`;
+                const expected =  `http://localhost:8080/mbx/v4/mapbox.mapbox-terrain-v2,mapbox.mapbox-streets-v7/10/184/401.vector.pbf?sku=${manager._skuToken}&access_token=${config.ACCESS_TOKEN}`;
                 t.equal(manager.normalizeTileURL(input, 'mapbox://mapbox.mapbox-terrain-v2,mapbox.mapbox-streets-v7'), expected);
                 t.end();
             });