Merge branch 'publisher-production' (#8305)

* Set default thumbnail for examples page for development (#8025)

* Set default thumbnail

* Add a little guidance about creating example images

* creates placeholder.png

* v0.54.0-beta.1 (#8084)

* CP removeFeatureState fix (#8090)

* Empty out features whose states have been removed instead of removing the feature object. This allows updating the buffers for features whose state has been removed, but also requires keep track of previously removed features.

* Update Changelog

* v0.54.0 (#8115)

* Example for `fill-pattern` (#8022)

* move docs dependencies to dev (#8121) (#8129)

* Mapbox-gl-geocoder v4 examples (#8053)

* add geocoder custom render example

* language localize example

* Update marker demo to use built-in marker function

* remove proximity bias for gl-geocoder example because this is now default behavior

* update point from geocode demo to set custom marker color

* update examples to use new mapbox-gl-geocoder API options

* lint new examples

* Update examples to gl-geocoder 4.0.0 api

* Options should be added to the geocoder, not the map

* lint examples

* remove templating syntax

* lint fixes

* @katydecorah 's code review fixes

* Studio does support rtl plugin (#8135)

* Update comment for setRTLTextPlugin (#8143)

* update comment for setRTLTextPlugin

* clarify wording in example

* update one more frame after canvas source paused (#8130) (#8163)

* update one more frame after canvas source paused

Calling `canvasSource.pause()` lets us know we can stop pulling in
updates from it. Since it is possible that changes were made to the
canvas source since the last render we should pull in one more update
before stopping. This also lets you call play and pause immediately to
render just one frame:

ctx.fillRect(10, 10, 50, 50);
canvasSource.play();
canvasSource.pause();

* add test

* don't render changes made after canvasSource.pause()

* optimize

* optimize

* Bugfix - removeFeatureState fails with target.id === 0 (#8150) (#8164)

* Fix an edge case where 0 target.id would fail to clear the feature state

* Check for number & string explicitly

* Add tests for 0 feature ID

* Fix logical check

* v0.54.0-beta.2 (#8166)

* [docs] meta updates for search (#8142)

* update docs-page-shell, update page-shell; update page meta

* Update react-page-shell.js

* remove contentType from examples page

* Update react-page-shell.js

* Update react-page-shell.js

* [docs] token refactor in docs-page-shell (#8174)

* Update page-shell-script.js

* do not force production page shell

* remove hardcoded token from example, add unit test to look for access token in example html files

* [docs] token refactor in docs-page-shell (#8174) (#8181)

* Update page-shell-script.js

* do not force production page shell

* remove hardcoded token from example, add unit test to look for access token in example html files

* Fix disappearing controls in Safari 12+ (#8193) (#8194)

* workaround for a Safari 12 bug with disappearing controls

* fix css lint

* v0.54.0 (take two) (#8184)

* v0.54.0

* update changelog once more

* fix imagery endpoint on WMS example (#8203)

* [email protected] (#8212)

* [docs] add trailing slash to `pathname` so resolved URL matches the canonical (#8228)

* Update documentation.yml (#8230)

* update mapbox-gl-geocoder to v4.3.0 (#8231)

* @mapbox/mapbox gl style [email protected] (#8264)

* Prepare @mapbox/[email protected]

* Add changelog of relevant items

* Add sku token to Mapbox API tile requests (#14) (#8276)

* v1.0.0 (#8277)

* [docs] update docs-page-shell (#8254)

* fix pathname

* Update react-page-shell.js

CHANGELOG.md

@@ -43,15 +43,19 @@ For further information on the pricing changes, you can read our [blog post](htt
 - Added `rel="noopener"` attributes to links that lead to external websites (such as Mapbox logo and OpenStreetMap edit link) for improved security. [#7914](https://github.com/mapbox/mapbox-gl-js/pull/7914)
 - Added tile size info when `map.showTileBoundaries` is turned on. [#7963](https://github.com/mapbox/mapbox-gl-js/pull/7963)
 - Significantly improved load times of the benchmark suite. [#8066](https://github.com/mapbox/mapbox-gl-js/pull/8066)
+- Improved behavior of `canvasSource.pause` to be more reliable and able to render a single frame. [#8130](https://github.com/mapbox/mapbox-gl-js/pull/8130)
 
 ### Bug fixes
 
+- Fixed a bug in Mac Safari 12+ where controls would disappear until you interact with the map. [8193](https://github.com/mapbox/mapbox-gl-js/pull/8193)
 - Fixed a memory leak when calling `source.setData(url)` many times. [#8035](https://github.com/mapbox/mapbox-gl-js/pull/8035)
 - Fixed a bug where marker lost focus when dragging. [#7799](https://github.com/mapbox/mapbox-gl-js/pull/7799)
 - Fixed a bug where `map.getCenter()` returned a reference to an internal `LngLat` object instead of cloning it, leading to potential mutability bugs. [#7922](https://github.com/mapbox/mapbox-gl-js/pull/7922)
 - Fixed a bug where default HTML marker positioning was slightly off. [#8074](https://github.com/mapbox/mapbox-gl-js/pull/8074)
 - Fixed a bug where adding a fill extrusion layer for non-polygon layers would lead to visual artifacts. [#7685](https://github.com/mapbox/mapbox-gl-js/pull/7685)
 - Fixed intermittent Flow failures on CI. [#8061](https://github.com/mapbox/mapbox-gl-js/pull/8061)
+- Fixed a bug where calling `Map#removeFeatureState` does not remove the state from some tile zooms [#8087](https://github.com/mapbox/mapbox-gl-js/pull/8087)
+- Fixed a bug where `removeFeatureState` didn't work on features with `id` equal to `0`. [#8150](https://github.com/mapbox/mapbox-gl-js/pull/8150)
 
 ## 0.53.1
 

debug/wms.html

@@ -31,7 +31,7 @@
 map.on('load', function() {
     map.addSource('wms-test', {
         "type": "raster",
-        "tiles": ['https://geodata.state.nj.us/imagerywms/Natural2015?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=Natural2015'
+        "tiles": ['https://img.nj.gov/imagerywms/Natural2015?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=Natural2015'
         ],
         "tileSize": 256
     });

docs/README.md

@@ -33,7 +33,7 @@ In the `.html` file, write the HTML and JavaScript constituting the example.
 * Do **not** use custom styles from your personal account. Use only the default `mapbox` account styles.
 * When embedding literal JSON (GeoJSON or Mapbox style snippets) into script code, double-quote property names and string values. Elsewhere, use single-quoted strings.
 
-Every example **must** have an accompanying image:
+Every example **must** have an accompanying image. To get an image, run the site locally and take a screenshot of the rendered map in the example:
 
 1. Run `npm run create-image <example-file-name> <mapbox-access-token>`. The script will take a screenshot of the map in the example and save it to `docs/img/src/`. Commit the image.
 2. Run `npm run start-docs` to verify that your example image is loading as expected.

docs/components/application-wrapper.js

@@ -1,7 +1,6 @@
 import React from 'react';
 
 if (typeof window !== 'undefined') {
-    window.MapboxPageShellProduction = true;
   import(/* webpackChunkName: "assembly-js" */ '@mapbox/mbx-assembly/dist/assembly.js');
 }
 

docs/components/example.js

@@ -66,6 +66,8 @@ ${html}
 
         render() {
             const {frontMatter} = this.props;
+            frontMatter.language = ['JavaScript'];
+            frontMatter.contentType = 'example';
             return (
                 <PageShell meta={frontMatter}>
                     <div className='relative prose'>

docs/components/markdown-page-shell.js

@@ -14,6 +14,9 @@ class MarkdownPageshell extends React.Component {
         if (!meta.pathname) {
             meta.pathname = location.pathname;
         }
+        if (frontMatter.contentType) meta.contentType = frontMatter.contentType;
+        if (frontMatter.language) meta.language = frontMatter.language;
+        if (frontMatter.level) meta.level = frontMatter.level;
         return (
             <PageShell meta={meta} {...this.props}>
                 <div className="prose">

docs/components/page_shell.js

@@ -217,7 +217,7 @@ class PageShell extends React.Component {
         };
 
         return (
-            <ReactPageShell darkHeaderText={true} includeFooter={false} {...this.props}>
+            <ReactPageShell site="Mapbox GL JS" darkHeaderText={true} includeFooter={false} {...this.props}>
                 <Helmet>
                     <link
                         rel="canonical"

docs/documentation.yml

@@ -15,7 +15,7 @@ toc:
   - CustomLayerInterface
   - name: Geography & Geometry
     description: |
-      `LngLat` and `LngLatBounds` represent points and rectanges in geographic
+      `LngLat` and `LngLatBounds` represent points and rectangles in geographic
       coordinates. `Point` represents points in screen coordinates.
   - LngLat
   - LngLatLike

docs/pages/api.js

@@ -9,9 +9,11 @@ import LinkerStack from 'documentation/src/output/util/linker_stack';
 import ApiItem from '../components/api-item';
 
 const meta = {
-    title: 'Mapbox GL JS API',
+    title: 'API Reference',
     description: 'The Mapbox GL JS API documentation to render interactive maps from vector tiles and Mapbox styles.',
-    pathname: '/mapbox-gl-js/api'
+    pathname: '/mapbox-gl-js/api/',
+    contentType: 'API',
+    lanaguage: ['JavaScript']
 };
 
 const linkerStack = new LinkerStack({})

docs/pages/example/fill-pattern.html

@@ -0,0 +1,49 @@
+<div id='map'></div>
+
+<script>
+var map = new mapboxgl.Map({
+    container: 'map',
+    style: 'mapbox://styles/mapbox/streets-v9',
+    zoom: 1
+});
+
+map.on('load', function() {
+    // Add GeoJSON data
+    map.addSource('source', {
+        "type": "geojson",
+        "data": {
+            "type": "Feature",
+            "properties": {},
+            "geometry": {
+                "type": "Polygon",
+                "coordinates": [[
+                    [-30, -25],
+                    [-30, 35],
+                    [30, 35],
+                    [30, -25],
+                    [-30, -25]
+                ]]
+            }
+        }
+    });
+
+    // Load an image to use as the pattern
+    map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/64px-Cat_silhouette.svg.png', function(err, image) {
+        // Throw an error if something went wrong
+        if (err) throw err;
+
+        // Declare the image
+        map.addImage('pattern', image);
+
+        // Use it
+        map.addLayer({
+            "id": "pattern-layer",
+            "type": "fill",
+            "source": "source",
+            "paint": {
+                "fill-pattern": "pattern"
+            }
+        });
+    });
+});
+</script>

docs/pages/example/fill-pattern.js

@@ -0,0 +1,10 @@
+/*---
+title: Add a pattern to a polygon
+description: Use [fill-pattern](https://docs.mapbox.com/mapbox-gl-js/style-spec/#paint-fill-fill-pattern) to draw a polygon from a repeating image pattern.
+tags:
+  - layers
+pathname: /mapbox-gl-js/example/fill-pattern/
+---*/
+import Example from '../../components/example';
+import html from './fill-pattern.html';
+export default Example(html);

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/v3.1.6/mapbox-gl-geocoder.min.js'></script>
-<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v3.1.6/mapbox-gl-geocoder.css' type='text/css' />
+<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' />
 <div id='map'></div>
 
 <script>
@@ -163,6 +163,7 @@
     accessToken: mapboxgl.accessToken,
     localGeocoder: forwardGeocoder,
     zoom: 14,
-    placeholder: "Enter search e.g. Lincoln Park"
+    placeholder: "Enter search e.g. Lincoln Park",
+    mapboxgl: mapboxgl
 }));
 </script>

docs/pages/example/jump-to.html

@@ -73,7 +73,6 @@
     ]
 };
 
-mapboxgl.accessToken = 'pk.eyJ1IjoibWFsLXdvb2QiLCJhIjoiY2oyZ2t2em50MDAyMzJ3cnltMDFhb2NzdiJ9.X-D4Wvo5E5QxeP7K_I3O8w';
 var map = new mapboxgl.Map({
     container: 'map',
     style: 'mapbox://styles/mapbox/streets-v11',

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/v3.1.6/mapbox-gl-geocoder.min.js'></script>
-<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v3.1.6/mapbox-gl-geocoder.css' type='text/css' />
+<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' />
 <div id='map'></div>
 
 <script>
@@ -28,7 +28,7 @@
                 type: "Point",
                 coordinates: [lng, lat]
             },
-            place_name: 'Lat: ' + lat + ', Lng: ' + lng, // eslint-disable-line camelcase
+            place_name: 'Lat: ' + lat + ' Lng: ' + lng, // eslint-disable-line camelcase
             place_type: ['coordinate'], // eslint-disable-line camelcase
             properties: {},
             type: 'Feature'
@@ -62,6 +62,7 @@
     accessToken: mapboxgl.accessToken,
     localGeocoder: coordinatesGeocoder,
     zoom: 4,
-    placeholder: "Try: -40, 170"
+    placeholder: "Try: -40, 170",
+    mapboxgl: mapboxgl
 }));
 </script>

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

@@ -0,0 +1,39 @@
+<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' />
+<style>
+.geocoder-dropdown-item{
+    padding: 5px
+}
+.geocoder-dropdown-icon{
+    margin-right: 10px;
+}
+.geocoder-dropdown-text{
+    color: #5a3fc0;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: larger;
+}
+</style>
+<div id='map'></div>
+
+<script>
+var map = new mapboxgl.Map({
+    container: 'map',
+    style: 'mapbox://styles/mapbox/streets-v9',
+    center: [-79.4512, 43.6568],
+    zoom: 13
+});
+
+var geocoder = new MapboxGeocoder({
+    accessToken: mapboxgl.accessToken,
+    types: 'poi',
+    // see https://docs.mapbox.com/api/search/#geocoding-response-object for information about the schema of each response feature
+    render: function(item) {
+        // extract the item's maki icon or use a default
+        var maki = item.properties.maki || 'marker';
+        return "<div class='geocoder-dropdown-item'><img class='geocoder-dropdown-icon' src='https://unpkg.com/@mapbox/[email protected]/icons/" + maki + "-15.svg'><span class='geocoder-dropdown-text'>" + item.text + "</span></div>";
+    },
+    mapboxgl: mapboxgl
+});
+map.addControl(geocoder);
+
+</script>

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

@@ -0,0 +1,12 @@
+/*---
+title: Use a custom render function with a geocoder
+description: >-
+  Use a custom html rendering function with the [mapbox-gl-geocoder](https://github.com/mapbox/mapbox-gl-geocoder)
+  to customize how the dropdown menu is displayed.
+tags:
+  - geocoder
+pathname: /mapbox-gl-js/example/mapbox-gl-geocoder-custom-render/
+---*/
+import Example from '../../components/example';
+import html from './mapbox-gl-geocoder-custom-render.html';
+export default Example(html);

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/v3.1.6/mapbox-gl-geocoder.min.js'></script>
-<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v3.1.6/mapbox-gl-geocoder.css' type='text/css' />
+<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' />
 <div id='map'></div>
 
 <script>
@@ -31,6 +31,7 @@
         }).reduce(function (acc, cur) {
             return acc || cur;
         });
-    }
+    },
+    mapboxgl: mapboxgl
 }));
 </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/v3.1.6/mapbox-gl-geocoder.min.js'></script>
-<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v3.1.6/mapbox-gl-geocoder.css' type='text/css' />
+<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' />
 <style>
     .geocoder {
         position:absolute;
@@ -23,7 +23,8 @@
 });
 
 var geocoder = new MapboxGeocoder({
-    accessToken: mapboxgl.accessToken
+    accessToken: mapboxgl.accessToken,
+    mapboxgl: mapboxgl
 });
 
 document.getElementById('geocoder').appendChild(geocoder.onAdd(map));

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

@@ -0,0 +1,30 @@
+<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' />
+<div id='map'></div>
+
+<script>
+var map = new mapboxgl.Map({
+    container: 'map',
+    style: 'mapbox://styles/mapbox/streets-v9',
+    center: [-79.4512, 43.6568],
+    zoom: 13
+});
+
+var geocoder = new MapboxGeocoder({
+    accessToken: mapboxgl.accessToken,
+    flyTo: {
+        bearing: 0,
+        // These options control the flight curve, making it move
+        // slowly and zoom out almost completely before starting
+        // to pan.
+        speed: 0.2, // make the flying slow
+        curve: 1, // change the speed at which it zooms out
+        // This can be any easing function: it takes a number between
+        // 0 and 1 and returns another number between 0 and 1.
+        easing: function (t) { return t; }
+    },
+    mapboxgl: mapboxgl
+});
+map.addControl(geocoder);
+
+</script>

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

@@ -0,0 +1,12 @@
+/*---
+title: Use a custom camera animation with a geocoder
+description: >-
+  Use camera animation options with the [mapbox-gl-geocoder](https://github.com/mapbox/mapbox-gl-geocoder)
+  to create a custom animation when a result is selected.
+tags:
+  - geocoder
+pathname: /mapbox-gl-js/example/mapbox-gl-geocoder-with-flyto/
+---*/
+import Example from '../../components/example';
+import html from './mapbox-gl-geocoder-with-flyto.html';
+export default Example(html);