Pause animation loop when removing canvas source

src/source/canvas_source.js

@@ -66,12 +66,16 @@ class CanvasSource extends ImageSource {
         let loopID;
 
         this.play = function() {
-            loopID = this.map.style.animationLoop.set(Infinity);
-            this.map._rerender();
+            if (loopID === undefined) {
+                loopID = this.map.style.animationLoop.set(Infinity);
+                this.map._rerender();
+            }
         };
 
         this.pause = function() {
-            this.map.style.animationLoop.cancel(loopID);
+            if (loopID !== undefined) {
+                loopID = this.map.style.animationLoop.cancel(loopID);
+            }
         };
 
         this._finishLoading();
@@ -87,14 +91,17 @@ class CanvasSource extends ImageSource {
     }
 
     onAdd(map: Map) {
-        if (this.map) return;
         this.map = map;
         this.load();
         if (this.canvas) {
             if (this.animate) this.play();
         }
     }
 
+    onRemove() {
+        this.pause();
+    }
+
     /**
      * Sets the canvas's coordinates and re-renders the map.
      *

test/unit/source/canvas_source.test.js

@@ -3,6 +3,7 @@
 const test = require('mapbox-gl-js-test').test;
 const CanvasSource = require('../../../src/source/canvas_source');
 const Transform = require('../../../src/geo/transform');
+const AnimationLoop = require('../../../src/style/animation_loop');
 const Evented = require('../../../src/util/evented');
 const util = require('../../../src/util/util');
 const window = require('../../../src/util/window');
@@ -30,7 +31,7 @@ class StubMap extends Evented {
     constructor() {
         super();
         this.transform = new Transform();
-        this.style = { animationLoop: { set: function() {} } };
+        this.style = { animationLoop: new AnimationLoop() };
     }
 
     _rerender() {
@@ -94,6 +95,44 @@ test('CanvasSource', (t) => {
         source.onAdd(map);
     });
 
+    t.test('onRemove stops animation', (t) => {
+        const source = createSource();
+        const map = new StubMap();
+
+        source.onAdd(map);
+
+        t.equal(map.style.animationLoop.stopped(), false, 'should animate initally');
+
+        source.onRemove();
+
+        t.equal(map.style.animationLoop.stopped(), true, 'should stop animating');
+
+        source.onAdd(map);
+
+        t.equal(map.style.animationLoop.stopped(), false, 'should animate when added again');
+
+        t.end();
+    });
+
+    t.test('play and pause animation', (t) => {
+        const source = createSource();
+        const map = new StubMap();
+
+        source.onAdd(map);
+
+        t.equal(map.style.animationLoop.stopped(), false, 'initially animating');
+
+        source.pause();
+
+        t.equal(map.style.animationLoop.stopped(), true, 'can be paused');
+
+        source.play();
+
+        t.equal(map.style.animationLoop.stopped(), false, 'can be played');
+
+        t.end();
+    });
+
     t.end();
 });