mapbox · vakila · May 30, 2019 · Mar 21, 2019 · Mar 26, 2019 · Mar 29, 2019
diff --git a/CHANGELOG.md b/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
 

diff --git a/debug/wms.html b/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
     });

diff --git a/docs/README.md b/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.

diff --git a/docs/components/application-wrapper.js b/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');
 }
 

diff --git a/docs/components/example.js b/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'>

diff --git a/docs/components/markdown-page-shell.js b/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">

diff --git a/docs/components/page_shell.js b/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"

diff --git a/docs/documentation.yml b/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

diff --git a/docs/img/src/fill-pattern.png b/docs/img/src/fill-pattern.png
diff --git a/docs/img/src/mapbox-gl-geocoder-custom-render.png b/docs/img/src/mapbox-gl-geocoder-custom-render.png
diff --git a/docs/img/src/mapbox-gl-geocoder-proximity-bias.png b/docs/img/src/mapbox-gl-geocoder-proximity-bias.png
diff --git a/docs/img/src/mapbox-gl-geocoder-with-flyto.png b/docs/img/src/mapbox-gl-geocoder-with-flyto.png
diff --git a/docs/img/src/mapbox-gl-geocoder-with-language.png b/docs/img/src/mapbox-gl-geocoder-with-language.png
diff --git a/docs/img/src/placeholder.png b/docs/img/src/placeholder.png
diff --git a/docs/pages/api.js b/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({})

diff --git a/docs/pages/example/fill-pattern.html b/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>
diff --git a/docs/pages/example/fill-pattern.js b/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);
diff --git a/docs/pages/example/forward-geocode-custom-data.html b/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>
diff --git a/docs/pages/example/jump-to.html b/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',

diff --git a/docs/pages/example/mapbox-gl-geocoder-accept-coordinates.html b/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>
diff --git a/docs/pages/example/mapbox-gl-geocoder-custom-render.html b/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>
diff --git a/docs/pages/example/mapbox-gl-geocoder-custom-render.js b/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);
diff --git a/docs/pages/example/mapbox-gl-geocoder-limit-region.html b/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>
diff --git a/docs/pages/example/mapbox-gl-geocoder-outside-the-map.html b/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));

diff --git a/docs/pages/example/mapbox-gl-geocoder-proximity-bias.html b/docs/pages/example/mapbox-gl-geocoder-proximity-bias.html
diff --git a/docs/pages/example/mapbox-gl-geocoder-proximity-bias.js b/docs/pages/example/mapbox-gl-geocoder-proximity-bias.js
diff --git a/docs/pages/example/mapbox-gl-geocoder-with-flyto.html b/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>
diff --git a/docs/pages/example/mapbox-gl-geocoder-with-flyto.js b/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);