Support external GL context (#603)

docs/components/static-map.md

@@ -132,6 +132,10 @@ An object that specifies bounds for viewport props with `min*`, `max*` keys. If
 
 Default: `{ minZoom: 0, maxZoom: 20, minPitch: 0, maxPitch: 60 }`
 
+##### `gl` {WebGLContext} ==EXPERIMENTAL==
+
+Use an existing WebGLContext instead of creating a new one. This allows multiple libraries to render into a shared buffer. Use with caution.
+
 
 ## Callbacks
 

src/mapbox/mapbox.js

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-/* global window, document, process */
+/* global window, document, process, HTMLCanvasElement */
 import PropTypes from 'prop-types';
 
 function noop() {}
@@ -182,6 +182,17 @@ export default class Mapbox {
       // TODO - need to call onload again, need to track with Promise?
       props.onLoad();
     } else {
+      if (props.gl) {
+        const getContext = HTMLCanvasElement.prototype.getContext;
+        // Hijack canvas.getContext to return our own WebGLContext
+        // This will be called inside the mapboxgl.Map constructor
+        HTMLCanvasElement.prototype.getContext = () => {
+          // Unhijack immediately
+          HTMLCanvasElement.prototype.getContext = getContext;
+          return props.gl;
+        };
+      }
+
       const mapOptions = {
         container: props.container || document.body,
         center: [0, 0],