6.0 release prep (#1263)

2026-01-18 15:54:22 +00:00 · 2020-12-16 20:43:50 -08:00 · 2020-12-16 20:43:50 -08:00 · ae6aef4714
commit ae6aef4714
parent 6a9d4ba31e
69 changed files with 96 additions and 78 deletions
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@ -11,6 +11,9 @@ jobs:
  test-node:
    runs-on: ubuntu-latest

+    env:
+      MapboxAccessToken: ${{ secrets.MAPBOX_ACCESS_TOKEN }}
+
    steps:
      - uses: actions/checkout@v2.1.1

--- a/docs/advanced/custom-components.md
+++ b/docs/advanced/custom-components.md
@ -81,4 +81,4 @@ Implement this method to render the content of this component. `this._context` i


 ## Source
-[base-control.js](https://github.com/visgl/react-map-gl/tree/5.2-release/src/components/base-control.js)
+[base-control.js](https://github.com/visgl/react-map-gl/tree/6.0-release/src/components/base-control.js)
--- a/docs/advanced/custom-overlays.md
+++ b/docs/advanced/custom-overlays.md
@ -20,7 +20,7 @@ class MyCustomOverlay extends BaseControl {
 }
 ```

-Here's an example of using the [ScatterplotOverlay](https://github.com/visgl/react-map-gl/tree/5.2-release/examples/additional-overlays/src/scatterplot-overlay.js):
+Here's an example of using the [ScatterplotOverlay](https://github.com/visgl/react-map-gl/tree/6.0-release/examples/additional-overlays/src/scatterplot-overlay.js):

 ```jsx
 <MapGL {...viewport} mapStyle={mapStyle}>
@ -35,4 +35,4 @@ Here's an example of using the [ScatterplotOverlay](https://github.com/visgl/rea
 </MapGL>
 ```

-There are more examples in the [examples/additional-overlays](https://github.com/visgl/react-map-gl/tree/5.2-release/examples/additional-overlays) folder of this repo.
+There are more examples in the [examples/additional-overlays](https://github.com/visgl/react-map-gl/tree/6.0-release/examples/additional-overlays) folder of this repo.
--- a/docs/api-reference/canvas-overlay.md
+++ b/docs/api-reference/canvas-overlay.md
@ -41,5 +41,5 @@ Stop propagation of dblclick event to the map component. Can be used to stop map


 ## Source
-[canvas-overlay.js](https://github.com/visgl/react-map-gl/tree/5.2-release/src/overlays/canvas-overlay.js)
+[canvas-overlay.js](https://github.com/visgl/react-map-gl/tree/6.0-release/src/overlays/canvas-overlay.js)

--- a/docs/api-reference/fly-to-interpolator.md
+++ b/docs/api-reference/fly-to-interpolator.md
@ -29,4 +29,4 @@ Parameters:

 ## Source

-[viewport-fly-to-interpolator.js](https://github.com/visgl/react-map-gl/tree/5.2-release/src/utils/transition/viewport-fly-to-interpolator.js)
+[viewport-fly-to-interpolator.js](https://github.com/visgl/react-map-gl/tree/6.0-release/src/utils/transition/viewport-fly-to-interpolator.js)
--- a/docs/api-reference/fullscreen-control.md
+++ b/docs/api-reference/fullscreen-control.md
@ -39,5 +39,5 @@ Label applied to the fullscreen control button.
 Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.

 ## Source
-[fullscreen-control.js](https://github.com/visgl/react-map-gl/tree/5.2-release/src/components/fullscreen-control.js)
+[fullscreen-control.js](https://github.com/visgl/react-map-gl/tree/6.0-release/src/components/fullscreen-control.js)

--- a/docs/api-reference/geolocate-control.md
+++ b/docs/api-reference/geolocate-control.md
@ -77,7 +77,7 @@ By default, if showUserLocation is `true` , a transparent circle will be drawn a

 A [React style](https://reactjs.org/docs/dom-elements.html#style) object applied to Geolocate control button.

-Check [`locate user`](https://github.com/visgl/react-map-gl/tree/5.2-release/examples/locate-user/src/app.js) example for basic styling.
+Check [`locate user`](https://github.com/visgl/react-map-gl/tree/6.0-release/examples/locate-user/src/app.js) example for basic styling.

 ##### `label` (String)

@ -98,4 +98,4 @@ Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to

 ## Source

-[geolocate-control.js](https://github.com/visgl/react-map-gl/tree/5.2-release/src/components/geolocate-control.js)
+[geolocate-control.js](https://github.com/visgl/react-map-gl/tree/6.0-release/src/components/geolocate-control.js)
--- a/docs/api-reference/html-overlay.md
+++ b/docs/api-reference/html-overlay.md
@ -44,4 +44,4 @@ Stop propagation of dblclick event to the map component. Can be used to stop map

 ## Source

-[html-overlay.js](https://github.com/visgl/react-map-gl/tree/5.2-release/src/overlays/html-overlay.js)
+[html-overlay.js](https://github.com/visgl/react-map-gl/tree/6.0-release/src/overlays/html-overlay.js)
--- a/docs/api-reference/interactive-map.md
+++ b/docs/api-reference/interactive-map.md
@ -99,7 +99,7 @@ Min zoom level.

 ##### `maxPitch` (Number)

- default: `60`
+- default: `85`

 Max pitch in degrees.

@ -366,5 +366,5 @@ Inherit the following methods from [StaticMap](/docs/api-reference/static-map.md

 ## Source

-[interactive-map.js](https://github.com/visgl/react-map-gl/tree/5.2-release/src/components/interactive-map.js)
+[interactive-map.js](https://github.com/visgl/react-map-gl/tree/6.0-release/src/components/interactive-map.js)

--- a/docs/api-reference/layer.md
+++ b/docs/api-reference/layer.md
@ -61,5 +61,5 @@ Note that layers are added by the order that they mount. They are *NOT* reordere

 ## Source

-[layer.js](https://github.com/visgl/react-map-gl/tree/5.2-release/src/components/layer.js)
+[layer.js](https://github.com/visgl/react-map-gl/tree/6.0-release/src/components/layer.js)

--- a/docs/api-reference/linear-interpolator.md
+++ b/docs/api-reference/linear-interpolator.md
@ -27,5 +27,5 @@ Parameters:

 ## Source

-[linear-interpolator.js](https://github.com/visgl/react-map-gl/tree/5.2-release/src/utils/transition/linear-interpolator.js)
+[linear-interpolator.js](https://github.com/visgl/react-map-gl/tree/6.0-release/src/utils/transition/linear-interpolator.js)

--- a/docs/api-reference/map-controller.md
+++ b/docs/api-reference/map-controller.md
@ -82,4 +82,4 @@ Invoke `onViewportChange` callback with a new map state.

 ## Source

-[map-controller.js](https://github.com/visgl/react-map-gl/tree/5.2-release/src/utils/map-controller.js)
+[map-controller.js](https://github.com/visgl/react-map-gl/tree/6.0-release/src/utils/map-controller.js)
--- a/docs/api-reference/marker.md
+++ b/docs/api-reference/marker.md
@ -145,5 +145,5 @@ Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to

 ## Source

-[marker.js](https://github.com/visgl/react-map-gl/tree/5.2-release/src/components/marker.js)
+[marker.js](https://github.com/visgl/react-map-gl/tree/6.0-release/src/components/marker.js)

--- a/docs/api-reference/navigation-control.md
+++ b/docs/api-reference/navigation-control.md
@ -97,5 +97,5 @@ Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to

 ## Source

-[navigation-control.js](https://github.com/visgl/react-map-gl/tree/5.2-release/src/components/navigation-control.js)
+[navigation-control.js](https://github.com/visgl/react-map-gl/tree/6.0-release/src/components/navigation-control.js)

--- a/docs/api-reference/popup.md
+++ b/docs/api-reference/popup.md
@ -133,5 +133,5 @@ Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to

 ## Source

-[popup.js](https://github.com/visgl/react-map-gl/tree/5.2-release/src/components/popup.js)
+[popup.js](https://github.com/visgl/react-map-gl/tree/6.0-release/src/components/popup.js)

--- a/docs/api-reference/scale-control.md
+++ b/docs/api-reference/scale-control.md
@ -42,4 +42,4 @@ Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to

 ## Source

-[scale-control.js](https://github.com/visgl/react-map-gl/tree/5.2-release/src/components/scale-control.js)
+[scale-control.js](https://github.com/visgl/react-map-gl/tree/6.0-release/src/components/scale-control.js)
--- a/docs/api-reference/source.md
+++ b/docs/api-reference/source.md
@ -60,4 +60,4 @@ Type of the source.

 ## Source

-[source.js](https://github.com/visgl/react-map-gl/tree/5.2-release/src/components/source.js)
+[source.js](https://github.com/visgl/react-map-gl/tree/6.0-release/src/components/source.js)
--- a/docs/api-reference/static-map.md
+++ b/docs/api-reference/static-map.md
@ -266,4 +266,4 @@ const viewport = new WebMercatorViewport({width: 800, height: 600})

 ## Source

-[static-map.js](https://github.com/visgl/react-map-gl/tree/5.2-release/src/components/static-map.js)
+[static-map.js](https://github.com/visgl/react-map-gl/tree/6.0-release/src/components/static-map.js)
--- a/docs/api-reference/svg-overlay.md
+++ b/docs/api-reference/svg-overlay.md
@ -44,4 +44,4 @@ Stop propagation of dblclick event to the map component. Can be used to stop map

 ## Source

-[svg-overlay.js](https://github.com/visgl/react-map-gl/tree/5.2-release/src/overlays/svg-overlay.js)
+[svg-overlay.js](https://github.com/visgl/react-map-gl/tree/6.0-release/src/overlays/svg-overlay.js)
--- a/docs/get-started/adding-custom-data.md
+++ b/docs/get-started/adding-custom-data.md
@ -73,7 +73,7 @@ import {SVGOverlay, HTMLOverlay, CanvasOverlay} from 'react-map-gl';

 ### Example Overlays

-There are a couple of [additional overlays](https://github.com/visgl/react-map-gl/tree/5.2-release/examples/additional-overlays) in the examples folder that can be copied into applications `ScatterplotOverlay`, `DraggablePointsOverlay`, `ChoroplethOverlay`.
+There are a couple of [additional overlays](https://github.com/visgl/react-map-gl/tree/6.0-release/examples/additional-overlays) in the examples folder that can be copied into applications `ScatterplotOverlay`, `DraggablePointsOverlay`, `ChoroplethOverlay`.


 ### Third-party Overlays
@ -91,4 +91,4 @@ import cities from 'example-cities';
 </MapGL>
 ```

-Want to create and share your own overlay? Check the [examples/additional-overlays](https://github.com/visgl/react-map-gl/tree/5.2-release/examples/additional-overlays) folder for examples.
+Want to create and share your own overlay? Check the [examples/additional-overlays](https://github.com/visgl/react-map-gl/tree/6.0-release/examples/additional-overlays) folder for examples.
--- a/docs/get-started/get-started.md
+++ b/docs/get-started/get-started.md
@ -34,7 +34,7 @@ function Map() {
 }
 ```

-See full project setup in [get-started examples](https://github.com/visgl/react-map-gl/tree/5.2-release/examples/get-started)
+See full project setup in [get-started examples](https://github.com/visgl/react-map-gl/tree/6.0-release/examples/get-started)

 ## Styling

@ -81,13 +81,13 @@ To use this API, consult Mapbox's [setRTLTextPlugin](https://docs.mapbox.com/map

 * `browserify` - react-map-gl is extensively tested with `browserify` and works without configuration.

-* `webpack` - Most of the provided react-map-gl examples use webpack. Look at the [get started examples](https://github.com/visgl/react-map-gl/tree/5.2-release/examples/get-started) folder for minimalist templates.
+* `webpack` - Most of the provided react-map-gl examples use webpack. Look at the [get started examples](https://github.com/visgl/react-map-gl/tree/6.0-release/examples/get-started) folder for minimalist templates.

 * `create-react-app` - react-map-gl is compatible with [create-react-app](https://github.com/facebook/create-react-app).

 * `create-react-app-typescript` - react-map-gl is compatible with [create-react-app-typescript](https://github.com/wmonk/create-react-app-typescript). You can see an example [here](https://github.com/zackhsi/react-map-gl-typescript).

-There's many other ready-to-run [examples](https://github.com/visgl/react-map-gl/tree/5.2-release/examples) you can take a look at if you need more inspiration.
+There's many other ready-to-run [examples](https://github.com/visgl/react-map-gl/tree/6.0-release/examples) you can take a look at if you need more inspiration.


 ## Using with a mapbox-gl Fork
--- a/docs/get-started/mapbox-tokens.md
+++ b/docs/get-started/mapbox-tokens.md
@ -3,8 +3,8 @@
 `react-map-gl` itself is open source and free. It provides a React wrapper for `mapbox-gl` or derived projects.
 Depending on which Mapbox GL JS version (or fork) you use, you may need a Mapbox token. You will need a Mapbox token if you use:

-  [mapbox-gl@>=2.0.0](https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.0.0) and above - requires a mapbox access token in order to access the map renderer, and generates billable events regardlesss of whether you are displaying your own maps.
-  `mapbox-gl@1.x` - requires an access token only if you load the map styles and tiles from Mapbox's data service. See "Display Maps Without A Mapbox Token" section below for using non-Mapbox tiles.
+-  `react-map-gl@>=6.0.0`, depending on [mapbox-gl@>=2.0.0](https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.0.0) and above - requires a mapbox access token in order to access the map renderer, and generates billable events regardlesss of whether you are displaying your own maps.
+-  `react-map-gl@5.x`, depending on `mapbox-gl@1.x` - requires an access token only if you load the map styles and tiles from Mapbox's data service. See "Display Maps Without A Mapbox Token" section below for using non-Mapbox tiles.

 To get a Mapbox token, you will need to register on [their website](https://www.mapbox.com). The token will be used to identify you and start serving up map tiles. The service is free until a certain level of traffic is exceeded.

--- a/docs/upgrade-guide.md
+++ b/docs/upgrade-guide.md
@ -1,5 +1,10 @@
 # Upgrade Guide

+## Upgrading to v6
+
+- A valid Mapbox access token is always required.
+- The default value of `InteractiveMap`'s `maxPitch` prop is changed to `85` from `60`.
+
 ## Upgrading to v4

 - `onChangeViewport` is removed, use `onViewportChange` instead
--- a/docs/whats-new.md
+++ b/docs/whats-new.md
@ -1,5 +1,15 @@
 # What's new

+## react-map-gl v6.0
+
+Release date: Dec 16, 2020
+
+### What's Changed
+
+The 6.0 release upgrades its Mapbox GL JS dependency to v2.0. There are [important changes](https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.0.0) to mapbox-gl's license and pricing model in this milestone. If you are NOT using a Mapbox account (e.g. self-hosting map tiles), do **NOT** upgrade to this version, and consider your options discussed in [this document](/docs/get-started/mapbox-tokens.md).
+
+See [upgrade guide](/docs/upgrade-guide.md) for a complete list of breaking changes.
+
 ## react-map-gl v5.2

 Release date: Jan 6, 2020
--- a/examples/additional-overlays/package.json
+++ b/examples/additional-overlays/package.json
@ -12,7 +12,7 @@
    "immutable": "^3.8.1",
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
-    "react-map-gl": "^5.2.0"
+    "react-map-gl": "^6.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
--- a/examples/clusters/package.json
+++ b/examples/clusters/package.json
@ -6,7 +6,7 @@
  "dependencies": {
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
-    "react-map-gl": "^5.2.0"
+    "react-map-gl": "^6.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
--- a/examples/clusters/src/control-panel.js
+++ b/examples/clusters/src/control-panel.js
@ -9,7 +9,7 @@ export default class ControlPanel extends PureComponent {
        <p>Use Mapbox GL JS' built-in functions to visualize points as clusters.</p>
        <div className="source-link">
          <a
-            href="https://github.com/visgl/react-map-gl/tree/5.2-release/examples/clusters"
+            href="https://github.com/visgl/react-map-gl/tree/6.0-release/examples/clusters"
            target="_new"
          >
            View Code ↗
--- a/examples/controls/package.json
+++ b/examples/controls/package.json
@ -6,7 +6,7 @@
  "dependencies": {
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
-    "react-map-gl": "^5.2.0"
+    "react-map-gl": "^6.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
--- a/examples/controls/src/control-panel.js
+++ b/examples/controls/src/control-panel.js
@ -18,7 +18,7 @@ export default class ControlPanel extends PureComponent {
        </p>
        <div className="source-link">
          <a
-            href="https://github.com/visgl/react-map-gl/tree/5.2-release/examples/controls"
+            href="https://github.com/visgl/react-map-gl/tree/6.0-release/examples/controls"
            target="_new"
          >
            View Code ↗
--- a/examples/custom-controller/package.json
+++ b/examples/custom-controller/package.json
@ -6,7 +6,7 @@
  "dependencies": {
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
-    "react-map-gl": "^5.2.0"
+    "react-map-gl": "^6.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
--- a/examples/custom-controller/src/control-panel.js
+++ b/examples/custom-controller/src/control-panel.js
@ -30,7 +30,7 @@ export default class ControlPanel extends PureComponent {
        <p>Override default event handling logic.</p>
        <div className="source-link">
          <a
-            href="https://github.com/visgl/react-map-gl/tree/5.2-release/examples/custom-controller"
+            href="https://github.com/visgl/react-map-gl/tree/6.0-release/examples/custom-controller"
            target="_new"
          >
            View Code ↗
--- a/examples/custom-cursor/package.json
+++ b/examples/custom-cursor/package.json
@ -6,7 +6,7 @@
  "dependencies": {
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
-    "react-map-gl": "^5.2.0"
+    "react-map-gl": "^6.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
--- a/examples/custom-cursor/src/control-panel.js
+++ b/examples/custom-cursor/src/control-panel.js
@ -66,7 +66,7 @@ export default class StyleControls extends PureComponent {
        <p>Customize the cursor based on interactivity.</p>
        <div className="source-link">
          <a
-            href="https://github.com/visgl/react-map-gl/tree/5.2-release/examples/custom-cursor"
+            href="https://github.com/visgl/react-map-gl/tree/6.0-release/examples/custom-cursor"
            target="_new"
          >
            View Code ↗
--- a/examples/deckgl-overlay/package.json
+++ b/examples/deckgl-overlay/package.json
@ -8,7 +8,7 @@
    "deck.gl": "^7.0.0",
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
-    "react-map-gl": "^5.2.0"
+    "react-map-gl": "^6.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
--- a/examples/draggable-markers/package.json
+++ b/examples/draggable-markers/package.json
@ -6,7 +6,7 @@
  "dependencies": {
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
-    "react-map-gl": "^5.2.0"
+    "react-map-gl": "^6.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
--- a/examples/draggable-markers/src/control-panel.js
+++ b/examples/draggable-markers/src/control-panel.js
@ -26,7 +26,7 @@ export default class ControlPanel extends PureComponent {
        <div>{eventNames.map(this.renderEvent)}</div>
        <div className="source-link">
          <a
-            href="https://github.com/visgl/react-map-gl/tree/5.2-release/examples/draggable-markers"
+            href="https://github.com/visgl/react-map-gl/tree/6.0-release/examples/draggable-markers"
            target="_new"
          >
            View Code ↗
--- a/examples/draw-polygon/package.json
+++ b/examples/draw-polygon/package.json
@ -7,8 +7,8 @@
    "@turf/area": "^6.0.1",
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
-    "react-map-gl": "^5.2.0",
-    "react-map-gl-draw": "^0.18.2",
+    "react-map-gl": "^6.0.0",
+    "react-map-gl-draw": "^6.0.0",
    "styled-components": "^4.3.2"
  },
  "devDependencies": {
--- a/examples/draw-polygon/src/control-panel.js
+++ b/examples/draw-polygon/src/control-panel.js
@ -17,7 +17,7 @@ export default class ControlPanel extends PureComponent {
        )}
        <div className="source-link">
          <a
-            href="https://github.com/visgl/react-map-gl/tree/5.2-release/examples/draw-polygon"
+            href="https://github.com/visgl/react-map-gl/tree/6.0-release/examples/draw-polygon"
            target="_new"
          >
            View Code ↗
--- a/examples/filter/package.json
+++ b/examples/filter/package.json
@ -6,7 +6,7 @@
  "dependencies": {
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
-    "react-map-gl": "^5.2.0"
+    "react-map-gl": "^6.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
--- a/examples/filter/src/control-panel.js
+++ b/examples/filter/src/control-panel.js
@ -9,7 +9,7 @@ export default class ControlPanel extends PureComponent {
        <p>Hover over counties to highlight counties that share the same name.</p>
        <div className="source-link">
          <a
-            href="https://github.com/visgl/react-map-gl/tree/5.2-release/examples/filter"
+            href="https://github.com/visgl/react-map-gl/tree/6.0-release/examples/filter"
            target="_new"
          >
            View Code ↗
--- a/examples/geojson-animation/package.json
+++ b/examples/geojson-animation/package.json
@ -6,7 +6,7 @@
  "dependencies": {
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
-    "react-map-gl": "^5.2.0"
+    "react-map-gl": "^6.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
--- a/examples/geojson-animation/src/control-panel.js
+++ b/examples/geojson-animation/src/control-panel.js
@ -9,7 +9,7 @@ export default class ControlPanel extends PureComponent {
        <p>Render animation by updating GeoJSON data source.</p>
        <div className="source-link">
          <a
-            href="https://github.com/visgl/react-map-gl/tree/5.2-release/examples/geojson-animation"
+            href="https://github.com/visgl/react-map-gl/tree/6.0-release/examples/geojson-animation"
            target="_new"
          >
            View Code ↗
--- a/examples/geojson/package.json
+++ b/examples/geojson/package.json
@ -8,7 +8,7 @@
    "d3-scale": "^1.0.6",
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
-    "react-map-gl": "^5.2.0"
+    "react-map-gl": "^6.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
--- a/examples/geojson/src/control-panel.js
+++ b/examples/geojson/src/control-panel.js
@ -17,7 +17,7 @@ export default class ControlPanel extends PureComponent {
        </p>
        <div className="source-link">
          <a
-            href="https://github.com/visgl/react-map-gl/tree/5.2-release/examples/geojson"
+            href="https://github.com/visgl/react-map-gl/tree/6.0-release/examples/geojson"
            target="_new"
          >
            View Code ↗
--- a/examples/heatmap/package.json
+++ b/examples/heatmap/package.json
@ -7,7 +7,7 @@
    "d3-request": "^1.0.5",
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
-    "react-map-gl": "^5.2.0"
+    "react-map-gl": "^6.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
--- a/examples/heatmap/src/control-panel.js
+++ b/examples/heatmap/src/control-panel.js
@ -57,7 +57,7 @@ export default class ControlPanel extends PureComponent {
        </p>
        <div className="source-link">
          <a
-            href="https://github.com/visgl/react-map-gl/tree/5.2-release/examples/heatmap"
+            href="https://github.com/visgl/react-map-gl/tree/6.0-release/examples/heatmap"
            target="_new"
          >
            View Code ↗
--- a/examples/interaction/package.json
+++ b/examples/interaction/package.json
@ -6,7 +6,7 @@
  "dependencies": {
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
-    "react-map-gl": "^5.2.0"
+    "react-map-gl": "^6.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
--- a/examples/interaction/src/control-panel.js
+++ b/examples/interaction/src/control-panel.js
@ -81,7 +81,7 @@ export default class ControlPanel extends PureComponent {
        <p>Turn interactive features off/on.</p>
        <div className="source-link">
          <a
-            href="https://github.com/visgl/react-map-gl/tree/5.2-release/examples/interaction"
+            href="https://github.com/visgl/react-map-gl/tree/6.0-release/examples/interaction"
            target="_new"
          >
            View Code ↗
--- a/examples/layers/package.json
+++ b/examples/layers/package.json
@ -7,7 +7,7 @@
    "immutable": "^3.8.1",
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
-    "react-map-gl": "^5.2.0"
+    "react-map-gl": "^6.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
--- a/examples/layers/src/control-panel.js
+++ b/examples/layers/src/control-panel.js
@ -117,7 +117,7 @@ export default class StyleControls extends PureComponent {
        <p>Dynamically show/hide map layers and change color with Immutable map style.</p>
        <div className="source-link">
          <a
-            href="https://github.com/visgl/react-map-gl/tree/5.2-release/examples/layers"
+            href="https://github.com/visgl/react-map-gl/tree/6.0-release/examples/layers"
            target="_new"
          >
            View Code ↗
--- a/examples/locate-user/package.json
+++ b/examples/locate-user/package.json
@ -7,7 +7,7 @@
    "immutable": "^3.8.1",
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
-    "react-map-gl": "^5.2.0"
+    "react-map-gl": "^6.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
--- a/examples/reuse-map/package.json
+++ b/examples/reuse-map/package.json
@ -6,7 +6,7 @@
  "dependencies": {
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
-    "react-map-gl": "^5.2.0"
+    "react-map-gl": "^6.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
--- a/examples/viewport-animation/package.json
+++ b/examples/viewport-animation/package.json
@ -6,7 +6,7 @@
  "dependencies": {
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
-    "react-map-gl": "^5.2.0"
+    "react-map-gl": "^6.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
--- a/examples/viewport-animation/src/control-panel.js
+++ b/examples/viewport-animation/src/control-panel.js
@ -26,7 +26,7 @@ export default class ControlPanel extends PureComponent {
        <p>Smooth animate of the viewport.</p>
        <div className="source-link">
          <a
-            href="https://github.com/visgl/react-map-gl/tree/5.2-release/examples/viewport-animation"
+            href="https://github.com/visgl/react-map-gl/tree/6.0-release/examples/viewport-animation"
            target="_new"
          >
            View Code ↗
--- a/examples/zoom-to-bounds/package.json
+++ b/examples/zoom-to-bounds/package.json
@ -7,7 +7,7 @@
    "@turf/bbox": "^6.0.1",
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
-    "react-map-gl": "^5.2.0"
+    "react-map-gl": "^6.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
--- a/examples/zoom-to-bounds/src/control-panel.js
+++ b/examples/zoom-to-bounds/src/control-panel.js
@ -9,7 +9,7 @@ export default class ControlPanel extends PureComponent {
        <p>Click on a San Fransisco Neighborhood to zoom in.</p>
        <div className="source-link">
          <a
-            href="https://github.com/visgl/react-map-gl/tree/5.2-release/examples/zoom-to-bounds"
+            href="https://github.com/visgl/react-map-gl/tree/6.0-release/examples/zoom-to-bounds"
            target="_new"
          >
            View Code ↗
--- a/package.json
+++ b/package.json
@ -45,7 +45,7 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.0.0",
-    "mapbox-gl": "^1.0.0",
+    "mapbox-gl": "^2.0.0",
    "mjolnir.js": "^2.4.0",
    "prop-types": "^15.7.2",
    "resize-observer-polyfill": "^1.5.1",
--- a/src/utils/map-state.js
+++ b/src/utils/map-state.js
@ -9,7 +9,7 @@ export const MAPBOX_LIMITS = {
  minZoom: 0,
  maxZoom: 24,
  minPitch: 0,
-  maxPitch: 60
+  maxPitch: 85
 };

 const DEFAULT_STATE = {
--- a/test/render/golden-images/alt-empty-map.png
+++ b/test/render/golden-images/alt-empty-map.png
--- a/test/render/golden-images/basic-map.png
+++ b/test/render/golden-images/basic-map.png
--- a/test/render/golden-images/geolocate-control.png
+++ b/test/render/golden-images/geolocate-control.png
--- a/test/render/golden-images/navigation-control.png
+++ b/test/render/golden-images/navigation-control.png
--- a/test/render/golden-images/popup.png
+++ b/test/render/golden-images/popup.png
--- a/test/render/golden-images/source-01.png
+++ b/test/render/golden-images/source-01.png
--- a/test/render/golden-images/source-02.png
+++ b/test/render/golden-images/source-02.png
--- a/test/render/golden-images/uber-map.png
+++ b/test/render/golden-images/uber-map.png
--- a/test/render/test-cases.js
+++ b/test/render/test-cases.js
@ -24,7 +24,7 @@ const ALT_EMPTY_MAP_STYLE = {
 };

 export default [
-  __MAPBOX_TOKEN__ && {
+  {
    title: 'Basic map',
    props: {
      mapboxApiAccessToken: __MAPBOX_TOKEN__,
@ -39,7 +39,7 @@ export default [
  {
    title: 'Invalid map token',
    props: {
-      mapboxApiAccessToken: '',
+      mapboxApiAccessToken: 'invalid_token',
      mapStyle: 'mapbox://styles/mapbox/dark-v9',
      longitude: -122.4,
      latitude: 37.78,
@ -50,7 +50,7 @@ export default [
  {
    title: 'Custom tile server',
    props: {
-      mapboxApiAccessToken: '',
+      mapboxApiAccessToken: __MAPBOX_TOKEN__,
      mapStyle: 'http://localhost:5000/test/data/style.json',
      longitude: -122.4,
      latitude: 37.78,
@ -63,7 +63,7 @@ export default [
    title: 'NavigationControl',
    Component: StaticMap,
    props: {
-      mapboxApiAccessToken: '',
+      mapboxApiAccessToken: __MAPBOX_TOKEN__,
      mapStyle: EMPTY_MAP_STYLE,
      longitude: -122.4,
      latitude: 37.78,
@ -81,7 +81,7 @@ export default [
    title: 'Popup',
    Component: StaticMap,
    props: {
-      mapboxApiAccessToken: '',
+      mapboxApiAccessToken: __MAPBOX_TOKEN__,
      mapStyle: EMPTY_MAP_STYLE,
      longitude: -122.4,
      latitude: 37.78,
@ -109,7 +109,7 @@ export default [
    title: 'JSX Source/Layer',
    Component: StaticMap,
    props: {
-      mapboxApiAccessToken: '',
+      mapboxApiAccessToken: __MAPBOX_TOKEN__,
      mapStyle: EMPTY_MAP_STYLE,
      longitude: -122.4,
      latitude: 37.78,
@ -130,7 +130,7 @@ export default [
    title: 'JSX Source/Layer toggle style',
    Component: StaticMap,
    props: {
-      mapboxApiAccessToken: '',
+      mapboxApiAccessToken: __MAPBOX_TOKEN__,
      mapStyle: ALT_EMPTY_MAP_STYLE,
      longitude: -122.4,
      latitude: 37.78,
@ -151,7 +151,7 @@ export default [
    title: 'JSX Source/Layer removal',
    Component: StaticMap,
    props: {
-      mapboxApiAccessToken: '',
+      mapboxApiAccessToken: __MAPBOX_TOKEN__,
      mapStyle: ALT_EMPTY_MAP_STYLE,
      longitude: -122.4,
      latitude: 37.78,
@ -164,7 +164,7 @@ export default [
    title: 'GeolocateControl',
    Component: StaticMap,
    props: {
-      mapboxApiAccessToken: '',
+      mapboxApiAccessToken: __MAPBOX_TOKEN__,
      mapStyle: EMPTY_MAP_STYLE,
      longitude: -122.4,
      latitude: 37.78,
@ -180,4 +180,4 @@ export default [
    },
    goldenImage: 'test/render/golden-images/geolocate-control.png'
  }
-].filter(Boolean);
+].filter(testCase => testCase.props.mapboxApiAccessToken);
--- a/test/src/utils/map-constraints.spec.js
+++ b/test/src/utils/map-constraints.spec.js
@ -7,7 +7,7 @@ const TEST_CASES = [
    result: true
  },
  {
-    props: {longitude: -122, latitude: 38, zoom: 10, pitch: 70, bearing: 0},
+    props: {longitude: -122, latitude: 38, zoom: 10, pitch: 90, bearing: 0},
    result: false
  },
  {
--- a/yarn.lock
+++ b/yarn.lock
@ -6498,10 +6498,10 @@ map-visit@^1.0.0:
  dependencies:
    object-visit "^1.0.0"

-mapbox-gl@^1.0.0:
-  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/mapbox-gl/-/mapbox-gl-1.12.0.tgz#7d1c73b1153d7ee219d30d80728d7df079bc7c05"
-  integrity sha512-B3URR4qY9R/Bx+DKqP8qmGCai8IOZYMSZF7ZSvcCZaYTaOYhQQi8ErTEDZtFMOR0ZPj7HFWOkkhl5SqvDfpJpA==
+mapbox-gl@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/mapbox-gl/-/mapbox-gl-2.0.0.tgz#a91bb7c58bd7d2dcab89f0f8a6571ff441daf1ef"
+  integrity sha512-agvgYMQflJj1Qp3Ge3IGWIHC/KGc65ukTE47OU9GFc4MGGUa1LngxNWul0ubD8AujmpWyVwfDnZDSoL8hA4c8Q==
  dependencies:
    "@mapbox/geojson-rewind" "^0.5.0"
    "@mapbox/geojson-types" "^1.0.2"