Make mapbox-gl an optional dependency (#2175)

Author: Pessimistress

README.md

@@ -31,6 +31,7 @@ import Map from 'react-map-gl';
 
 function App() {
   return <Map
+    mapLib={import('mapbox-gl')}
     initialViewState={{
       longitude: -100,
       latitude: 40,

docs/api-reference/attribution-control.md

@@ -8,6 +8,7 @@ import Map, {AttributionControl} from 'react-map-gl';
 
 function App() {
   return <Map
+    mapLib={import('mapbox-gl')}
     initialViewState={{
       longitude: -100,
       latitude: 40,

docs/api-reference/fullscreen-control.md

@@ -8,6 +8,7 @@ import Map, {FullscreenControl} from 'react-map-gl';
 
 function App() {
   return <Map
+    mapLib={import('mapbox-gl')}
     initialViewState={{
       longitude: -100,
       latitude: 40,

docs/api-reference/geolocate-control.md

@@ -8,6 +8,7 @@ import Map, {GeolocateControl} from 'react-map-gl';
 
 function App() {
   return <Map
+    mapLib={import('mapbox-gl')}
     initialViewState={{
       longitude: -100,
       latitude: 40,

docs/api-reference/layer.md

@@ -19,6 +19,7 @@ const parkLayer = {
 
 function App() {
   return <Map
+    mapLib={import('mapbox-gl')}
     initialViewState={{
       longitude: -122.4,
       latitude: 37.8,

docs/api-reference/map.md

@@ -8,6 +8,7 @@ import Map from 'react-map-gl';
 
 function App() {
   return <Map
+    mapLib={import('mapbox-gl')}
     initialViewState={{
       longitude: -100,
       latitude: 40,
@@ -38,7 +39,7 @@ function App() {
     });
   }, []);
 
-  return <Map ref={mapRef} onLoad={onMapLoad} />;
+  return <Map mapLib={import('mapbox-gl')} ref={mapRef} onLoad={onMapLoad} />;
 }
 ```
 
@@ -455,7 +456,9 @@ Props in this section are not reactive. They are only used once when the Map ins
 
 #### `mapLib`: any
 
-Override the map library. By default, it loads the mapbox-gl module using [dynamic import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports). This can be used to replace mapbox-gl with a compatible fork:
+Specify the underlying base map library for the Map component. The value can be provided with several options:
+
+By module import (and embedding in the final bundle):
 
 ```js
 import * as React from 'react';
@@ -467,6 +470,17 @@ function App() {
 }
 ```
 
+By dynamic import (thus enable bundle splitting):
+
+```js
+import * as React from 'react';
+import Map from 'react-map-gl';
+
+function App() {
+  return <Map mapLib={import('mapbox-gl')} />;
+}
+```
+
 Or to load a pre-bundled version of the library:
 
 ```html
@@ -482,7 +496,6 @@ function App() {
 }
 ```
 
-Default: `import('mapbox-gl')`
 
 #### `mapboxAccessToken`: string
 

docs/api-reference/marker.md

@@ -8,6 +8,7 @@ import Map, {Marker} from 'react-map-gl';
 
 function App() {
   return <Map
+    mapLib={import('mapbox-gl')}
     initialViewState={{
       longitude: -100,
       latitude: 40,

docs/api-reference/navigation-control.md

@@ -8,6 +8,7 @@ import Map, {NavigationControl} from 'react-map-gl';
 
 function App() {
   return <Map
+    mapLib={import('mapbox-gl')}
     initialViewState={{
       longitude: -100,
       latitude: 40,

docs/api-reference/popup.md

@@ -13,6 +13,7 @@ function App() {
   const [showPopup, setShowPopup] = React.useState(true);
 
   return <Map
+    mapLib={import('mapbox-gl')}
     initialViewState={{
       longitude: -100,
       latitude: 40,

docs/api-reference/scale-control.md

@@ -8,6 +8,7 @@ import Map, {ScaleControl} from 'react-map-gl';
 
 function App() {
   return <Map
+    mapLib={import('mapbox-gl')}
     initialViewState={{
       longitude: -100,
       latitude: 40,