Merge branch 'publisher-production' into rm-example-map-tiles

* publisher-production:
  [docs] updates to search component and layout (#8362)
  [docs] adds docs-wide search component (#8349)
  [DOCS] Update Popup maxWidth description (#8312)
  [docs] update docs-page-shell (#8254)
  v1.0.0 (#8277)
  Add sku token to Mapbox API tile requests (#14) (#8276)
  @mapbox/mapbox gl style spec@13.7.0 (#8264)

CHANGELOG.md

@@ -1,3 +1,20 @@
+### ⚠️ Breaking changes
+
+This release replaces the existing “map views” pricing model in favor of a “map load” model. Learn more in [a recent blog post about these changes](https://blog.mapbox.com/new-pricing-46b7c26166e7).
+
+**By upgrading to this release, you are opting in to the new map loads pricing.**
+
+**Why is this change being made?**
+
+This change allows us to implement a more standardized and predictable method of billing GL JS map usage. You’ll be charged whenever your website or web application loads, not by when users pan and zoom around the map, incentivizing developers to create highly interactive map experiences. The new pricing structure also creates a significantly larger free tier to help developers get started building their applications with Mapbox tools while pay-as-you-go pricing and automatic volume discounts help your application scale with Mapbox. Session billing also aligns invoices with metrics web developers already track and makes it easier to compare usage with other mapping providers.
+
+**What is changing?**
+- Add SKU token to Mapbox API requests [#8276](https://github.com/mapbox/mapbox-gl-js/pull/8276)
+
+When (and only when) loading tiles from a Mapbox API with a Mapbox access token set (`mapboxgl.accessToken`), a query parameter named `sku` will be added to all requests for vector, raster and raster-dem tiles. Every map instance uses a unique `sku` value, which is refreshed every 12 hours. The token itself is comprised of a token version (always “1”), a sku ID (always “01”) and a random 10-digit base-62 number. The purpose of the token is to allow for metering of map sessions on the server-side. A session lasts from a new map instantiation until the map is destroyed or 12 hours passes, whichever comes first.
+
+For further information on the pricing changes, you can read our [blog post](https://blog.mapbox.com/new-pricing-46b7c26166e7) and check out our new [pricing page](https://www.mapbox.com/pricing), which has a price calculator. As always, you can also contact our team at [https://support.mapbox.com](https://support.mapbox.com).
+
 ## 0.54.0
 
 ### Breaking changes

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);
 }

bench/lib/tile_parser.js

@@ -7,7 +7,7 @@ import assert from 'assert';
 import deref from '../../src/style-spec/deref';
 import Style from '../../src/style/style';
 import { Evented } from '../../src/util/evented';
-import { normalizeSourceURL, normalizeTileURL } from '../../src/util/mapbox';
+import { RequestManager } from '../../src/util/mapbox';
 import WorkerTile from '../../src/source/worker_tile';
 import StyleLayerIndex from '../../src/style/style_layer_index';
 
@@ -17,23 +17,28 @@ import type { OverscaledTileID } from '../../src/source/tile_id';
 import type { TileJSON } from '../../src/types/tilejson';
 
 class StubMap extends Evented {
-    _transformRequest(url) {
-        return {url};
+    _requestManager: RequestManager;
+
+    constructor() {
+        super();
+        this._requestManager = new RequestManager();
     }
 }
 
+const mapStub = new StubMap();
+
 function createStyle(styleJSON: StyleSpecification): Promise<Style> {
     return new Promise((resolve, reject) => {
-        const style = new Style((new StubMap(): any));
+        const style = new Style((mapStub: any));
         style.loadJSON(styleJSON);
         style
             .on('style.load', () => resolve(style))
             .on('error', reject);
     });
 }
 
-function fetchTileJSON(sourceURL: string): Promise<TileJSON> {
-    return fetch(normalizeSourceURL(sourceURL))
+function fetchTileJSON(requestManager: RequestManager, sourceURL: string): Promise<TileJSON> {
+    return fetch(requestManager.normalizeSourceURL(sourceURL))
         .then(response => response.json());
 }
 
@@ -95,15 +100,15 @@ export default class TileParser {
 
         return Promise.all([
             createStyle(this.styleJSON),
-            fetchTileJSON((this.styleJSON.sources[this.sourceID]: any).url)
+            fetchTileJSON(mapStub._requestManager, (this.styleJSON.sources[this.sourceID]: any).url)
         ]).then(([style: Style, tileJSON: TileJSON]) => {
             this.style = style;
             this.tileJSON = tileJSON;
         });
     }
 
     fetchTile(tileID: OverscaledTileID) {
-        return fetch(normalizeTileURL(tileID.canonical.url(this.tileJSON.tiles)))
+        return fetch(this.style.map._requestManager.normalizeTileURL(tileID.canonical.url(this.tileJSON.tiles)))
             .then(response => response.arrayBuffer())
             .then(buffer => ({tileID, buffer}));
     }

docs/components/api-navigation.js

@@ -63,7 +63,7 @@ class ApiNavigation extends React.Component {
     render() {
         return (
             <div className='ml36'>
-                <ul id='toc' className='list-reset mb3 py1-ul'>
+                <ul id='toc' className='list-reset mb3 py1-ul' data-swiftype-index='false'>
                     {docs.map((doc, i) => (doc.kind === 'note') ?
                         <TableOfContentsNote key={i} {...doc}/> :
                         <TableOfContentsItem key={i} {...doc}/>)}

docs/components/example.js

@@ -89,7 +89,7 @@ ${html}
                                 <iframe id='demo' style={{ height: 400 }} className='w-full' allowFullScreen={true} mozallowfullscreen='true' webkitallowfullscreen='true'
                                     ref={(iframe) => { this.iframe = iframe; }}/>}
 
-                            <div className='bg-white'>
+                            <div className='bg-white' data-swiftype-index='false'>
                                 <div id='code'>
                                     <CodeSnippet
                                         code={this.displayHTML()}

docs/components/page_shell.js

@@ -18,10 +18,12 @@ import { overviewNavigation } from '../data/overview-navigation';
 import { styleSpecNavigation } from '../data/style-spec-navigation';
 import { plugins } from '../data/plugins';
 import { routeToPrefixed } from '@mapbox/batfish/modules/route-to';
-
+import Search from '@mapbox/dr-ui/search';
 
 const slugger = new GithubSlugger();
 
+const site = "Mapbox GL JS";
+
 class PageShell extends React.Component {
 
     componentDidMount() {
@@ -212,12 +214,12 @@ class PageShell extends React.Component {
 
         const sidebarProps = this.getSidebarProps(activeTab);
         const topbarContent = {
-            productName: "Mapbox GL JS",
+            productName: site,
             topNav: <TopNavTabs activeTab={activeTab} />
         };
 
         return (
-            <ReactPageShell site="Mapbox GL JS" darkHeaderText={true} includeFooter={false} {...this.props}>
+            <ReactPageShell site={site} darkHeaderText={true} includeFooter={false} {...this.props}>
                 <Helmet>
                     <link
                         rel="canonical"
@@ -227,17 +229,22 @@ class PageShell extends React.Component {
                 <div className="shell-header-buffer" />
                 <TopbarSticker unStickWidth={980}>
                     <div className="limiter">
-                        <div className="grid grid--gut36 mr-neg36 mr0-mm">
+                        <div className="grid">
                             <div className={`col col--4-mm ${sidebarProps.sidebarColSize ? `col--${sidebarProps.sidebarColSize}-ml` : ''} col--12`}>
                                 <div className="ml24-mm pt12">
                                     <ProductMenu productName={topbarContent.productName} homePage='/mapbox-gl-js/'/>
                                 </div>
                             </div>
-                            <div className={`col col--8-mm ${sidebarProps.sidebarColSize ? `col--${12 - sidebarProps.sidebarColSize}-ml` : ''} col--12`}>
+                            <div className={`col col--7-mm ${sidebarProps.sidebarColSize ? `col--${11 - sidebarProps.sidebarColSize}-ml` : ''} col--12`}>
                                 <div style={{ height: '50px' }}>
                                     {topbarContent.topNav}
                                 </div>
                             </div>
+                            <div className="col col--1-mm col--12">
+                                <div className="flex-parent-mm flex-parent--end-main h-full-mm wmax300 wmax-full-mm" style={{margin: '7px 0'}}>
+                                    <Search site={site} />
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </TopbarSticker>

docs/pages/examples.js

@@ -19,7 +19,7 @@ import imageConfig from '../img/dist/image.config.json'; // eslint-disable-line
 const meta = {
     title: 'Examples',
     description: 'Code examples for Mapbox GL JS.',
-    pathname: '/examples/',
+    pathname: '/mapbox-gl-js/examples/',
     lanaguage: ['JavaScript']
 };
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "mapbox-gl",
   "description": "A WebGL interactive maps library",
-  "version": "0.54.0",
+  "version": "1.0.0",
   "main": "dist/mapbox-gl.js",
   "style": "dist/mapbox-gl.css",
   "license": "SEE LICENSE IN LICENSE.txt",
@@ -11,7 +11,7 @@
   },
   "engines": {
     "node": ">=6.4.0"
-  },
+},
   "dependencies": {
     "@mapbox/geojson-rewind": "^0.4.0",
     "@mapbox/geojson-types": "^1.0.2",
@@ -42,13 +42,13 @@
     "@mapbox/appropriate-images": "^2.0.0",
     "@mapbox/appropriate-images-react": "^1.0.0",
     "@mapbox/batfish": "1.9.8",
-    "@mapbox/dr-ui": "0.6.0",
+    "@mapbox/dr-ui": "0.16.2",
     "@mapbox/flow-remove-types": "^1.3.0-await.upstream.2",
     "@mapbox/gazetteer": "^3.1.2",
     "@mapbox/mapbox-gl-rtl-text": "^0.2.1",
     "@mapbox/mapbox-gl-test-suite": "file:test/integration",
     "@mapbox/mbx-assembly": "^0.28.2",
-    "@mapbox/mr-ui": "0.5.0",
+    "@mapbox/mr-ui": "0.7.1",
     "@octokit/rest": "^15.15.1",
     "babel-eslint": "^10.0.1",
     "benchmark": "^2.1.4",
@@ -83,8 +83,8 @@
     "prop-types": "^15.6.2",
     "puppeteer": "^1.13.0",
     "raw-loader": "^1.0.0",
-    "react": "^16.7.0",
-    "react-dom": "16.3.3",
+    "react": "^16.8.0",
+    "react-dom": "16.8.0",
     "react-helmet": "^5.2.0",
     "remark": "^10.0.1",
     "remark-html": "^9.0.0",

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) {

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);

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) {

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));
     }

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) {

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) {