merge publisher-production into master (#8519)

* [docs] adds docs-wide search component (#8349)

* update dr-ui, mr-ui

* add search component

* adjust columns to prevent overlap

* v1.1.0-beta.1 (#8353)

* Update CHANGELOG.md for v1.1.0-beta.1 release
* Bump package.json version to 1.1.0-beta.1

* [docs] updates to search component and layout (#8362)

* do not index /api sidebar

* exclude code snippets in examples from being indexed

* Update docs-page-shell

* update dr-ui, react, react-dom

* adjust columns to fit search and navigation better

* [docs] Replace example with a third-party raster source (#8274)

* remove Add a raster tile source example

* revert "remove Add a raster tile source example"

This reverts commit ea8bf28.

* add third-party tiles to map-tiles example

* fix attribution

* rm unused var

* Add mapbox-gl-framerate to plugins list (#8356)

* remove old plugins page and update reference to the maintained version (#8369)

* Add link to iOS SDK documentation (#8359)

* add ios sdk link per comment from stephen g

* add new link from minh and reword

* Include Hiragana and Katakana code blocks for local glyph generation (#8365) (#8378)

* document the tile size drawn with showTileBoundaries (#8379)

* use browser `Cache` interface to cache tiles (#8363)

Recent pricing changes introduced a `sku=` query parameter that changes with every map load. This defeats the browser's ability to cache these tiles. We're working around that by implementing our own caching with the new `Cache` api.

- skips caching tiles that expire soon
- only caches mapbox tiles (no 3rd party tiles, styles, etc because the browser should cache these fine)
- does not work in IE, Safari

Browser tests can be found in debug/cache_api.html

mapboxgl.clearStorage added to provide a way to clear the cache.

* fix cache support check for enforcing size limit

This was throwing errors in browsers that don't support the cache api
but wasn't previously noticed because it was not breaking anything.

* Fix background rotation hovering (#8367)

* update changelog

* mapbox-gl-geocoder@v4.4.0 (#8297)

* mapbox-gl-geocoder@v4.4.0

* add one more file to  v4.4.0

* fix Response construction in Edge, fix #8391 (#8392) (#8394)

Edge does not support constructing responses with readable streams.

* v1.1.0-beta.2 (#8395)

* Add sdk support spec section for text-radial-offset (#8384) (#8401)

This PR also assigns SDK versions for the `text-variable-anchor`
property (both `text-variable-anchor` and `text-radial-offset`
are the parts of the variable text placement feature).

* fix #8411, fetch in case of cache error (#8415) (#8417)

* fix #8411, fetch in case of cache error

* Use warnOnce

* v1.1.0 & style-spec@13.7.1 (#8408)

* Update style-spec version & changelog for style-spec@13.7.1

- Update style-spec/CHANGELOG.md to add bugfix items
- Bump style-spec/package.json version to 13.7.1 (patch)

* Update mapbox-gl package version to 1.1.0 for final release

* Add missing style-spec changelog entry

* Fix yarn.lock not installing under CI by auto-updating dependencies

* manually strip urls for faster cache matching (#8434) (#8449)

* update examples to use mapbox-gl-geocoder v4.4.1 (#8451)

* set antialias to true for custom layers and extrusion examples (#8474)

* swap map-tiles example to use https (#8482)

* fix race condition between caching and aborting (#8472)

fix #8470, continuous memory usage growth

* fix #8481, unbounded memory growth in IE (#8490)

Cancellable requests to workers should never call back after they have
been cancelled.

* v1.1.1

* [docs] fix SDK support for symbol-sort-key (#8501)

CHANGELOG.md

@@ -38,7 +38,8 @@
 * Fix location dot shadow not displaying ([#8119](https://github.com/mapbox/mapbox-gl-js/pull/8119)) (h/t [bravecow](https://github.com/bravecow))
 * Fix docs dev dependencies being mistakenly installed as package dependencies ([#8121](https://github.com/mapbox/mapbox-gl-js/pull/8121)) (h/t [bravecow](https://github.com/bravecow))
 * Various typo fixes ([#8230](https://github.com/mapbox/mapbox-gl-js/pull/8230), h/t [erictheise](https://github.com/erictheise)) ([#8236](https://github.com/mapbox/mapbox-gl-js/pull/8236), h/t [fredj](https://github.com/fredj))
-
+* Fix geolocate button CSS ([#8367](https://github.com/mapbox/mapbox-gl-js/pull/8367), h/t [GuillaumeGomez](https://github.com/GuillaumeGomez))
+* Fix caching for Mapbox tiles ([#8389](https://github.com/mapbox/mapbox-gl-js/pull/8389))
 
 ## 1.0.0
 

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

@@ -16,11 +16,14 @@ import TopNavTabs from './top-nav-tabs';
 import { tags } from '../data/tags.js';
 import { overviewNavigation } from '../data/overview-navigation';
 import { styleSpecNavigation } from '../data/style-spec-navigation';
-import { plugins } from '../data/plugins';
+import { plugins } from '../pages/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() {
@@ -211,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"
@@ -226,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/example/3d-buildings.html

@@ -6,7 +6,8 @@
     zoom: 15.5,
     pitch: 45,
     bearing: -17.6,
-    container: 'map'
+    container: 'map',
+    antialias: true
 });
 
 // The 'building' layer in the mapbox-streets vector source contains building-height

docs/pages/example/3d-extrusion-floorplan.html

@@ -6,7 +6,8 @@
     center: [-87.61694, 41.86625],
     zoom: 15.99,
     pitch: 40,
-    bearing: 20
+    bearing: 20,
+    antialias: true
 });
 
 map.on('load', function() {

docs/pages/example/add-3d-model.html

@@ -1,13 +1,14 @@
-<script src='https://unpkg.com/three@0.102.0/build/three.min.js'></script>
-<script src="https://unpkg.com/three@0.102.0/examples/js/loaders/GLTFLoader.js"></script>
+<script src='https://unpkg.com/three@0.106.2/build/three.min.js'></script>
+<script src="https://unpkg.com/three@0.106.2/examples/js/loaders/GLTFLoader.js"></script>
 <div id='map'></div>
 <script>
 var map = window.map = new mapboxgl.Map({
     container: 'map',
     style: 'mapbox://styles/mapbox/light-v10',
     zoom: 17.5,
     center: [148.9819, -35.3981],
-    pitch: 60
+    pitch: 60,
+    antialias: true // create the gl context with MSAA antialiasing, so custom layers are antialiased
 });
 
 // parameters to ensure the model is georeferenced correctly on the map
@@ -57,7 +58,8 @@
         // use the Mapbox GL JS map canvas for three.js
         this.renderer = new THREE.WebGLRenderer({
             canvas: map.getCanvas(),
-            context: gl
+            context: gl,
+            antialias: true
         });
 
         this.renderer.autoClear = false;

docs/pages/example/custom-style-layer.html

@@ -4,7 +4,8 @@
     container: 'map',
     zoom: 3,
     center: [7.5, 58],
-    style: 'mapbox://styles/mapbox/light-v10'
+    style: 'mapbox://styles/mapbox/light-v10',
+    antialias: true // create the gl context with MSAA antialiasing, so custom layers are antialiased
 });
 
 var highlightLayer = {

docs/pages/example/dancing-buildings.html

@@ -12,7 +12,8 @@
     },
     zoom: 15,
     pitch: 55,
-    container: 'map'
+    container: 'map',
+    antialias: true
 });
 
 map.addControl(new mapboxgl.FullscreenControl());

docs/pages/example/forward-geocode-custom-data.html

@@ -1,5 +1,5 @@
-<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.min.js'></script>
-<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.css' type='text/css' />
+<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.min.js'></script>
+<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.css' type='text/css' />
 <div id='map'></div>
 
 <script>

docs/pages/example/map-tiles.html

@@ -1,15 +1,15 @@
 <div id='map'></div>
 <script>
-var tileset = 'mapbox.streets';
 var map = new mapboxgl.Map({
     container: 'map', // container id
     style: {
         "version": 8,
         "sources": {
             "raster-tiles": {
                 "type": "raster",
-                "url": "mapbox://" + tileset,
-                "tileSize": 256
+                "tiles": ["https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg"],
+                "tileSize": 256,
+                "attribution": 'Map tiles by <a target="_top" rel="noopener" href="http://stamen.com">Stamen Design</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>'
             }
         },
         "layers": [{

docs/pages/example/map-tiles.js

@@ -1,6 +1,6 @@
 /*---
 title: Add a raster tile source
-description: Using a Mapbox raster tile source in a map.
+description: Add a third-party raster source to the map.
 tags:
   - sources
 pathname: /mapbox-gl-js/example/map-tiles/

docs/pages/example/mapbox-gl-geocoder-accept-coordinates.html

@@ -1,5 +1,5 @@
-<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.min.js'></script>
-<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.css' type='text/css' />
+<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.min.js'></script>
+<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.css' type='text/css' />
 <div id='map'></div>
 
 <script>

docs/pages/example/mapbox-gl-geocoder-custom-render.html

@@ -1,5 +1,5 @@
-<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.min.js'></script>
-<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.css' type='text/css' />
+<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.min.js'></script>
+<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.css' type='text/css' />
 <style>
 .geocoder-dropdown-item{
     padding: 5px

docs/pages/example/mapbox-gl-geocoder-limit-region.html

@@ -1,5 +1,5 @@
-<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.min.js'></script>
-<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.css' type='text/css' />
+<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.min.js'></script>
+<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.css' type='text/css' />
 <div id='map'></div>
 
 <script>

docs/pages/example/mapbox-gl-geocoder-outside-the-map.html

@@ -1,5 +1,5 @@
-<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.min.js'></script>
-<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.css' type='text/css' />
+<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.min.js'></script>
+<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.css' type='text/css' />
 <style>
     .geocoder {
         position:absolute;

docs/pages/example/mapbox-gl-geocoder-with-flyto.html

@@ -1,5 +1,5 @@
-<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.min.js'></script>
-<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.css' type='text/css' />
+<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.min.js'></script>
+<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.css' type='text/css' />
 <div id='map'></div>
 
 <script>

docs/pages/example/mapbox-gl-geocoder-with-language.html

@@ -1,5 +1,5 @@
-<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.min.js'></script>
-<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.css' type='text/css' />
+<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.min.js'></script>
+<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.css' type='text/css' />
 <div id='map'></div>
 
 <script>

docs/pages/example/mapbox-gl-geocoder.html

@@ -1,5 +1,5 @@
-<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.min.js'></script>
-<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.css' type='text/css' />
+<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.min.js'></script>
+<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.css' type='text/css' />
 <div id='map'></div>
 
 <script>

docs/pages/example/point-from-geocoder-result.html

@@ -1,5 +1,5 @@
-<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.min.js'></script>
-<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.css' type='text/css' />
+<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.min.js'></script>
+<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.css' type='text/css' />
 <style>
 #geocoder-container > div {
     min-width:50%;

docs/pages/plugins.js

@@ -12,7 +12,7 @@ const meta = {
     pathname: '/mapbox-gl-js/plugins/'
 };
 
-const plugins = {
+export const plugins = {
     "User Interface Plugins": {
         "mapbox-gl-accessibility": {
             "website": "https://github.com/mapbox/mapbox-gl-accessibility/",
@@ -155,6 +155,10 @@ const plugins = {
         "mapbox-gl-fps": {
             "website": "https://github.com/MazeMap/mapbox-gl-fps",
             "description": "A frames-per-seconds GUI control and measurer with statistic report output."
+        },
+        "mapbox-gl-framerate": {
+            "website": "https://github.com/mapbox/mapbox-gl-framerate",
+            "description": "A frame rate control to evaluate map rendering performance."
         }
     }
 };