Use styleDiff to apply setStyle changes incrementally

Previously, calls to map.setStyle() created a new Style instance.
Creating a new Style instance is an expensive operation that abandons the
current layers and sources. For simple updates, this is very wasteful.

Instead of creating a Style object for every call of map.setStyle() we
now diff the new style with the current style and apply the delta within
a batch update.

Situations where the non-incremental setStyle is used:
- initial style for a map
- the new stylesheet is already a Style instance
- the current style is not done loading
- the style diff cannot be applied incrementally

Issue: #1341

js/ui/map.js

@@ -8,6 +8,7 @@ var DOM = require('../util/dom');
 
 var Style = require('../style/style');
 var AnimationLoop = require('../style/animation_loop');
+var styleDiff = require('../style/style_diff');
 var Painter = require('../render/painter');
 
 var Transform = require('../geo/transform');
@@ -312,6 +313,28 @@ util.extend(Map.prototype, /** @lends Map.prototype */{
      * @returns {Map} `this`
      */
     setStyle: function(style) {
+        if (!this.style || style instanceof Style || !this.style._loaded) {
+            return this._setStyle(style);
+        }
+
+        try {
+            var operations = styleDiff.diff(this.style.json(), style);
+            if (operations.length) {
+                styleDiff.patch(this.style, operations);
+
+                // not worth being smart about calling _cascade and update
+                this.style._cascade(this._classes);
+                this.update(true);
+            }
+        } catch (e) {
+            // not all operations are supported, fall back to full _setStyle
+            this._setStyle(style);
+        }
+
+        return this;
+    },
+
+    _setStyle: function(style) {
         if (this.style) {
             this.style
                 .off('load', this._onStyleLoad)

test/js/ui/map.test.js

@@ -85,10 +85,65 @@ test('Map', function(t) {
             var map = createMap();
 
             map.setStyle({version: 7, sources: {}, layers: []});
+            var style = map.style;
             map.setStyle({version: 7, sources: {}, layers: []});
 
+            t.notOk(map.style === style, 'style is replaced');
+
             t.end();
         });
+
+        t.test('styles are updated', function(t) {
+            var map = createMap();
+
+            map.on('style.load', onLoad);
+            map.setStyle({version: 7, sources: {}, layers: []});
+
+            function onLoad() {
+                map.off('style.load', onLoad);
+
+                var style = map.style;
+                map.setStyle({version: 7, sources: {}, layers: []});
+                t.ok(map.style === style, 'style is updated');
+
+                t.end();
+            }
+        });
+
+        t.test('falls back to new style for incompatible changes', function(t) {
+            var map = createMap();
+
+            map.on('style.load', onLoad);
+            map.setStyle({
+                version: 7,
+                sources: {},
+                layers: [
+                    { id: 'background', type: 'background' }
+                ]
+            });
+
+            function onLoad() {
+                map.off('style.load', onLoad);
+
+                var style = map.style;
+                map.setStyle({
+                    version: 7,
+                    sources: {},
+                    layers: [
+                        {
+                            id: 'background',
+                            type: 'background',
+                            'paint.light': {
+                                'background-color': '#EEE'
+                            }
+                        }
+                    ]
+                });
+                t.notOk(map.style === style, 'style is replaced');
+
+                t.end();
+            }
+        });
     });
 
     t.test('#resize', function(t) {