diff --git a/debug/custom_webgl_layer.html b/debug/custom_webgl_layer.html
index 9a4429b9a5c..21449966e98 100644
--- a/debug/custom_webgl_layer.html
+++ b/debug/custom_webgl_layer.html
@@ -3,7 +3,7 @@
 <head>
     <title>Mapbox GL JS debug page</title>
     <meta charset='utf-8'>
-	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
     <link rel='stylesheet' href='/dist/mapbox-gl.css' />
     <style>
         body { margin: 0; padding: 0; }
@@ -18,7 +18,7 @@
 <script src='/debug/access_token_generated.js'></script>
 <script>
 
-var map = window.map = new mapboxgl.Map({
+var map = new mapboxgl.Map({
     container: 'map',
     zoom: 3,
     center: [-77.01866, 38.888],
@@ -29,18 +29,23 @@
 map.addControl(new mapboxgl.NavigationControl());
 map.addControl(new mapboxgl.GeolocateControl());
 
-window.callback = (gl)=>{
-    gl.clearColor(0, 0.5, 0, 1);
+map.setCustomWebGLDrawCallback('externallayer0', (gl, invalidate) => {
+    gl.clearColor(0, 1, 0, 0.1);
     gl.clear(gl.COLOR_BUFFER_BIT);
-}
+});
+map.setCustomWebGLDrawCallback('externallayer1', (gl, invalidate) => {
+    gl.clearColor(1, 1, 1, 0.1);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+});
 
 map.on('load', function() {
     map.addLayer({
-        "id": "externalwebgl",
-        "type": "custom-webgl",
-        "layout": {
-            "callback": "callback",
-        }
+        "id": "externallayer0",
+        "type": "custom-webgl"
+    }, "marine-label-sm-ln");
+    map.addLayer({
+        "id": "externallayer1",
+        "type": "custom-webgl"
     }, "marine-label-sm-ln");
 });
 
diff --git a/src/render/draw_custom_webgl.js b/src/render/draw_custom_webgl.js
index 62a7fd9e0f1..b4a406ce674 100644
--- a/src/render/draw_custom_webgl.js
+++ b/src/render/draw_custom_webgl.js
@@ -1,9 +1,5 @@
 // @flow
 
-const pattern = require('./pattern');
-const StencilMode = require('../gl/stencil_mode');
-const DepthMode = require('../gl/depth_mode');
-
 import type Painter from './painter';
 import type SourceCache from '../source/source_cache';
 import type WebGLLayer from '../style/style_layer/custom_webgl_layer';
@@ -20,15 +16,22 @@ function drawCustomWebGL(painter: Painter, sourceCache: SourceCache, layer: WebG
         For example, if the external renderer receives some data from an AJAX request,
         it can upload data to the WebGL context asynchronously (regarding Mapbox GL rendering,
         it would synchronous respect WebGL) and call invalidateCurrentWebGLState afterwards
-         to ensure that in the next Mapbox GL rendering pass the WebGL tracked is not stale (which would produce rendering artifacts).
+        to ensure that in the next Mapbox GL rendering pass the WebGL tracked is not stale (which would produce rendering artifacts).
     */
     const invalidateCurrentWebGLState = () => {
-        const names = Object.keys(painter.context).filter(name => painter.context[name].current !== undefined);
-        names.map((name, index) => painter.context[name].current = {});
+        Object.keys(this.context).forEach((key) => {
+            if (this.context[key].current !== undefined) {
+                this.context[key].current = {};
+            }
+        });
     };
-    const callback = window[layer.layout._values.callback];
-    if (callback) {
-        callback(painter.context.gl, invalidateCurrentWebGLState);
-        invalidateCurrentWebGLState();
+
+    const drawCallbacks = painter.customWebGLDrawCallbacks;
+    if (drawCallbacks.hasOwnProperty(layer.id)) {
+        const callback = drawCallbacks[layer.id];
+        if (callback) {
+            callback(painter.context.gl, invalidateCurrentWebGLState);
+            invalidateCurrentWebGLState();
+        }
     }
 }
diff --git a/src/render/painter.js b/src/render/painter.js
index 8b4e127140d..15096e38ed5 100644
--- a/src/render/painter.js
+++ b/src/render/painter.js
@@ -102,6 +102,7 @@ class Painter {
         this.context = new Context(gl);
         this.transform = transform;
         this._tileTextures = {};
+        this.customWebGLDrawCallbacks = {};
 
         this.setup();
 
@@ -471,6 +472,17 @@ class Painter {
 
         return nextProgram;
     }
+
+    /**
+     * Store a DrawCallback used by a `custom-webgl` layer.
+     * This callback will be called by the function renderLayer -> drawWebGL.
+     *
+     * @param {string} id The ID of the `custom-webgl` layer.
+     * @param {Function} callback The callback to be stored.
+     */
+    setCustomWebGLDrawCallback(id: string, callback: Function) {
+        this.customWebGLDrawCallbacks[id] = callback;
+    }
 }
 
 module.exports = Painter;
diff --git a/src/ui/map.js b/src/ui/map.js
index dd28b975c97..849ce44c660 100755
--- a/src/ui/map.js
+++ b/src/ui/map.js
@@ -1579,6 +1579,16 @@ class Map extends Camera {
         }
     }
 
+    /**
+     * Store a DrawCallback used by a `custom-webgl` layer in the `painter`.
+     *
+     * @param {string} id The ID of the `custom-webgl` layer.
+     * @param {Function} callback The callback to be stored.
+     */
+    setCustomWebGLDrawCallback(id: string, callback: Function) {
+        this.painter.setCustomWebGLDrawCallback(id, callback);
+    }
+
     /**
      * Gets and sets a Boolean indicating whether the map will render an outline
      * around each tile. These tile boundaries are useful for debugging.
