diff --git a/.travis.yml b/.travis.yml
index 3e8ffcb38e..33357ac1a1 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,7 +1,7 @@
 cache: false
 language: node_js
 node_js:
-  - "4.1"
+  - "6.9.2"
 
 install:
   - npm install
diff --git a/examples/leaflet-layergroup-vector.html b/examples/leaflet-layergroup-vector.html
index 68740c8233..e7437058f9 100644
--- a/examples/leaflet-layergroup-vector.html
+++ b/examples/leaflet-layergroup-vector.html
@@ -25,7 +25,7 @@
 
     <script>
       function main() {
-      	var vizjson = {
+        var vizjson = {
           "id":"2b13c956-e7c1-11e2-806b-5404a6a683d5",
           "version":"0.1.0",
           "title":"european_countries_e 0",
@@ -33,21 +33,10 @@
           "description":null,
           "scrollwheel":true,
           "legends":true,
-          "vector":true,
           "url":null,
           "map_provider":"leaflet",
-          "bounds":[
-            [
-              -18.979025953255253,
-              -155.7421875
-            ],
-            [
-              80.58972691308571,
-              261.2109375
-            ]
-          ],
           "center":"[52.5897007687178, 52.734375]",
-          "zoom":2,
+          "zoom":4,
           "updated_at":"2015-03-13T11:24:37+00:00",
           "datasource": {
             "user_name": "documentation",
@@ -80,181 +69,130 @@
               "type":"tiled"
             },
             {
-              "type":"layergroup",
+              "id":"923b7812-2d56-41c6-ac15-3ce430db090f",
+              "type":"CartoDB",
+              "infowindow":{
+                "fields":[
+                  {
+                    "name":"name",
+                    "title":true,
+                    "position":4
+                  }
+                ],
+                "template": '' +
+                  '<div class="CDB-infowindow CDB-infowindow--custom js-infowindow" style="max-width: 200px;">' +
+                    '<div class="CDB-infowindow-close js-close"></div>' +
+                    '<div class="CDB-infowindow-container">' +
+                      '<div class="CDB-infowindow-header CDB-infowindow-headerBg CDB-infowindow-headerBg--dark">' +
+                        '<div class="CDB-infowindow-list">' +
+                          '<div class="CDB-infowindow-listItem">' +
+                            '<h4 class="CDB-infowindow-title">{{ name }}</h4>' +
+                          '</div>' +
+                        '</div>' +
+                      '</div>' +
+                      '<div class="CDB-hook CDB-hook--white">' +
+                        '<div class="CDB-hook-inner">' +
+                        '</div>' +
+                      '</div>' +
+                    '</div>' +
+                  '</div>',
+                "alternative_names":{},
+                "width":226,
+                "maxHeight":180
+              },
+              "tooltip":{
+                "fields": [
+                  {
+                    "name": "name",
+                    "title": true,
+                    "position": 1
+                  }
+                ],
+                "template_name":"tooltip_light",
+                "template": ' '+
+                    '<div class="CDB-Tooltip CDB-Tooltip--isDark js-content">'+
+                      '<ul class="CDB-Tooltip-list">'+
+                        '{{#fields}}'+
+                        '<li class="CDB-Tooltip-listItem">'+
+                          '<h3 class="CDB-Tooltip-listTitle">NAME</h3>'+
+                          '<h4 class="CDB-Tooltip-listText">{{value}}</h4>'+
+                        '</li>'+
+                        '{{/fields}}'+
+                      '</ul>'+
+                    '</div>',
+                "alternative_names":{},
+                "maxHeight":180
+              },
+              "legend":{
+                "type":"choropleth",
+                "show_title":false,
+                "title":"",
+                "template":"",
+                "items":[
+                  {
+                    "name":"Left label",
+                    "visible":true,
+                    "value":"5592.00",
+                    "type":"text"
+                  },
+                  {
+                    "name":"Right label",
+                    "visible":true,
+                    "value":"1638094.00",
+                    "type":"text"
+                  },
+                  {
+                    "name":"Color",
+                    "visible":true,
+                    "value":"#FFFFB2",
+                    "type":"color"
+                  },
+                  {
+                    "name":"Color",
+                    "visible":true,
+                    "value":"#FED976",
+                    "type":"color"
+                  },
+                  {
+                    "name":"Color",
+                    "visible":true,
+                    "value":"#FEB24C",
+                    "type":"color"
+                  },
+                  {
+                    "name":"Color",
+                    "visible":true,
+                    "value":"#FD8D3C",
+                    "type":"color"
+                  },
+                  {
+                    "name":"Color",
+                    "visible":true,
+                    "value":"#FC4E2A",
+                    "type":"color"
+                  },
+                  {
+                    "name":"Color",
+                    "visible":true,
+                    "value":"#E31A1C",
+                    "type":"color"
+                  },
+                  {
+                    "name":"Color",
+                    "visible":true,
+                    "value":"#B10026",
+                    "type":"color"
+                  }
+                ]
+              },
+              "order":1,
+              "visible":true,
               "options":{
-                "layer_definition":{
-                  "layers":[
-                    {
-                      "id":"923b7812-2d56-41c6-ac15-3ce430db090f",
-                      "type":"CartoDB",
-                      "infowindow":{
-                        "fields":[
-                          {
-                            "name":"area",
-                            "title":true,
-                            "position":0
-                          },
-                          {
-                            "name":"gmi_cntry",
-                            "title":true,
-                            "position":1
-                          },
-                          {
-                            "name":"iso_2_code",
-                            "title":true,
-                            "position":2
-                          },
-                          {
-                            "name":"iso_3_code",
-                            "title":true,
-                            "position":3
-                          },
-                          {
-                            "name":"name",
-                            "title":true,
-                            "position":4
-                          },
-                          {
-                            "name":"name_1",
-                            "title":true,
-                            "position":5
-                          },
-                          {
-                            "name":"name_12",
-                            "title":true,
-                            "position":6
-                          },
-                          {
-                            "name":"pop2005",
-                            "title":true,
-                            "position":7
-                          },
-                          {
-                            "name":"region",
-                            "title":true,
-                            "position":8
-                          }
-                        ],
-                        "template_name":"table/views/infowindow_light",
-                        "template": " " +
-                          '<div class="CDB-infowindow CDB-infowindow--custom js-infowindow" style="max-width: 200px;">' +
-                            '<div class="CDB-infowindow-container">' +
-                              '<div class="CDB-infowindow-header CDB-infowindow-headerBg CDB-infowindow-headerBg--dark" style="background: #98E0A8;">' +
-                                '<div class="CDB-infowindow-list">' +
-                                  '<div class="CDB-infowindow-listItem">' +
-                                    '<h4 class="CDB-infowindow-title">{{ name }}</h4>' +
-                                  '</div>' +
-                                '</div>' +
-                              '</div>' +
-                              '<div class="CDB-hook CDB-hook--green">' +
-                                '<div class="CDB-hook-inner" style="background: #98E0A8;">' +
-                                '</div>' +
-                              '</div>' +
-                            '</div>' +
-                          '</div>',
-                        "alternative_names":{},
-                        "width":226,
-                        "maxHeight":180
-                      },
-                      "tooltip":{
-                        "fields": [
-                          {
-                            "name": "iso_2_code",
-                            "title": true,
-                            "position": 1
-                          }
-                        ],
-                        "template_name":"tooltip_light",
-                        "template": ' '+
-                            '<div class="CDB-Tooltip CDB-Tooltip--isDark js-content">'+
-                              '<ul class="CDB-Tooltip-list">'+
-                                '{{#fields}}'+
-                                '<li class="CDB-Tooltip-listItem">'+
-                                  '<h3 class="CDB-Tooltip-listTitle">ISO CODE</h3>'+
-                                  '<h4 class="CDB-Tooltip-listText">{{value}}</h4>'+
-                                '</li>'+
-                                '{{/fields}}'+
-                              '</ul>'+
-                            '</div>',
-                        "alternative_names":{},
-                        "maxHeight":180
-                      },
-                      "legend":{
-                        "type":"choropleth",
-                        "show_title":false,
-                        "title":"",
-                        "template":"",
-                        "items":[
-                          {
-                            "name":"Left label",
-                            "visible":true,
-                            "value":"5592.00",
-                            "type":"text"
-                          },
-                          {
-                            "name":"Right label",
-                            "visible":true,
-                            "value":"1638094.00",
-                            "type":"text"
-                          },
-                          {
-                            "name":"Color",
-                            "visible":true,
-                            "value":"#FFFFB2",
-                            "type":"color"
-                          },
-                          {
-                            "name":"Color",
-                            "visible":true,
-                            "value":"#FED976",
-                            "type":"color"
-                          },
-                          {
-                            "name":"Color",
-                            "visible":true,
-                            "value":"#FEB24C",
-                            "type":"color"
-                          },
-                          {
-                            "name":"Color",
-                            "visible":true,
-                            "value":"#FD8D3C",
-                            "type":"color"
-                          },
-                          {
-                            "name":"Color",
-                            "visible":true,
-                            "value":"#FC4E2A",
-                            "type":"color"
-                          },
-                          {
-                            "name":"Color",
-                            "visible":true,
-                            "value":"#E31A1C",
-                            "type":"color"
-                          },
-                          {
-                            "name":"Color",
-                            "visible":true,
-                            "value":"#B10026",
-                            "type":"color"
-                          }
-                        ]
-                      },
-                      "order":1,
-                      "visible":true,
-                      "options":{
-                        "sql":"select * from european_countries_e",
-                        "layer_name":"european_countries_e",
-                        "cartocss":"/** choropleth visualization */\n\n#european_countries_e{\n  polygon-fill: #FFFFB2;\n  polygon-opacity: 0.8;\n  line-color: #FFF;\n  line-width: 1;\n  line-opacity: 0.5;\n}\n#european_countries_e [ area <= 1638094] {\n   polygon-fill: #B10026;\n}\n#european_countries_e [ area <= 55010] {\n   polygon-fill: #E31A1C;\n}\n#european_countries_e [ area <= 34895] {\n   polygon-fill: #FC4E2A;\n}\n#european_countries_e [ area <= 12890] {\n   polygon-fill: #FD8D3C;\n}\n#european_countries_e [ area <= 10025] {\n   polygon-fill: #FEB24C;\n}\n#european_countries_e [ area <= 9150] {\n   polygon-fill: #FED976;\n}\n#european_countries_e [ area <= 5592] {\n   polygon-fill: #FFFFB2;\n}",
-                        "cartocss_version":"2.1.1",
-                        "interactivity":"cartodb_id",
-                        "table_name":"\"\"."
-                      }
-                    }
-                  ]
-                },
-                "attribution":""
+                "sql":"select * from european_countries_e",
+                "layer_name":"european_countries_e",
+                "cartocss":"/** choropleth visualization */\n\n#european_countries_e{\n  polygon-fill: #FFFFB2;\n  polygon-opacity: 0.8;\n  line-color: #FFF;\n  line-width: 1;\n  line-opacity: 0.5;\n}\n#european_countries_e [ area <= 1638094] {\n   polygon-fill: #B10026;\n}\n#european_countries_e [ area <= 55010] {\n   polygon-fill: #E31A1C;\n}\n#european_countries_e [ area <= 34895] {\n   polygon-fill: #FC4E2A;\n}\n#european_countries_e [ area <= 12890] {\n   polygon-fill: #FD8D3C;\n}\n#european_countries_e [ area <= 10025] {\n   polygon-fill: #FEB24C;\n}\n#european_countries_e [ area <= 9150] {\n   polygon-fill: #FED976;\n}\n#european_countries_e [ area <= 5592] {\n   polygon-fill: #FFFFB2;\n}",
+                "cartocss_version":"2.1.1",
+                "table_name":"\"\"."
               }
             },
             {
@@ -266,7 +204,7 @@
                 "subdomains": "abcd",
                 "minZoom": "0",
                 "maxZoom": "18",
-                "attribution":"&copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
+                "attribution": "&copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
                 "urlTemplate": "http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png",
                 "name": "Positron Labels",
                 "id": "bc054932-1ae8-4d4a-96d6-d49ce4247a59",
@@ -279,7 +217,6 @@
               "order": 3,
               "type": "tiled"
             }
-
           ],
           "overlays":[
             {
diff --git a/examples/leaflet-layergroup.html b/examples/leaflet-layergroup.html
index f72c39511c..e7437058f9 100644
--- a/examples/leaflet-layergroup.html
+++ b/examples/leaflet-layergroup.html
@@ -25,7 +25,7 @@
 
     <script>
       function main() {
-      	var vizjson = {
+        var vizjson = {
           "id":"2b13c956-e7c1-11e2-806b-5404a6a683d5",
           "version":"0.1.0",
           "title":"european_countries_e 0",
diff --git a/package.json b/package.json
index f225998a0f..7fe8856974 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "leaflet": "1.0.3",
     "mustache": "1.1.0",
     "perfect-scrollbar": "git://github.com/CartoDB/perfect-scrollbar.git#master",
+    "tangram-cartocss": "cartodb/tangram-carto#master",
     "torque.js": "CartoDB/torque#master",
     "underscore": "1.8.3"
   },
diff --git a/src/core/profiler.js b/src/core/profiler.js
index a8f92e63be..0b4de3d5d4 100644
--- a/src/core/profiler.js
+++ b/src/core/profiler.js
@@ -64,7 +64,7 @@ Profiler.new_value = function (name, value, type, defer) {
   if (!defer) {
     Profiler._backend && Profiler._backend([type, name, value]);
   } else {
-    var n = new Date().getTime()
+    var n = performance.now();
     // don't allow to send stats quick
     if (n - t.last > 1000) {
       Profiler._backend && Profiler._backend([type, name, t.avg]);
@@ -97,13 +97,13 @@ Metric.prototype = {
   // start a time measurement
   //
   start: function() {
-    this.t0 = +new Date();
+    this.t0 = performance.now();
     return this;
   },
 
   // elapsed time since start was called
   _elapsed: function() {
-    return +new Date() - this.t0;
+    return performance.now() - this.t0;
   },
 
   //
diff --git a/src/core/util.js b/src/core/util.js
index 38734696f3..90f0d2b0d6 100644
--- a/src/core/util.js
+++ b/src/core/util.js
@@ -127,6 +127,10 @@ util.isMobileDevice = function () {
   return /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
 };
 
+util.isWebGLSupported = function () {
+  return !!window.WebGLRenderingContext;
+};
+
 /**
  * Returns true if the string ends with provided suffix
  */
diff --git a/src/geo/cartodb-layer-group.js b/src/geo/cartodb-layer-group.js
index 89e51f9622..514135358b 100644
--- a/src/geo/cartodb-layer-group.js
+++ b/src/geo/cartodb-layer-group.js
@@ -39,6 +39,10 @@ var CartoDBLayerGroup = Backbone.Model.extend({
     return this._getGroupedLayers()[index];
   },
 
+  getCartoLayerById: function (id) {
+    return this._layersCollection.get(id);
+  },
+
   isEqual: function () {
     return false;
   },
diff --git a/src/geo/gmaps/gmaps-layer-view-factory.js b/src/geo/gmaps/gmaps-layer-view-factory.js
index 272d892079..a86e54d4ce 100644
--- a/src/geo/gmaps/gmaps-layer-view-factory.js
+++ b/src/geo/gmaps/gmaps-layer-view-factory.js
@@ -27,13 +27,13 @@ if (typeof (google) !== 'undefined' && typeof (google.maps) !== 'undefined') {
 
 GMapsLayerViewFactory.prototype._constructors = constructors;
 
-GMapsLayerViewFactory.prototype.createLayerView = function (layerModel, mapModel) {
+GMapsLayerViewFactory.prototype.createLayerView = function (layerModel, nativeMap) {
   var layerType = layerModel.get('type').toLowerCase();
   var LayerViewClass = this._constructors[layerType];
 
   if (LayerViewClass) {
     try {
-      return new LayerViewClass(layerModel, mapModel);
+      return new LayerViewClass(layerModel, nativeMap);
     } catch (e) {
       log.error("Error creating an instance of layer view for '" + layerType + "' layer -> " + e.message);
       throw e;
diff --git a/src/geo/gmaps/gmaps-map-view.js b/src/geo/gmaps/gmaps-map-view.js
index a01605c2cc..1e58843665 100644
--- a/src/geo/gmaps/gmaps-map-view.js
+++ b/src/geo/gmaps/gmaps-map-view.js
@@ -83,9 +83,7 @@ var GoogleMapsMapView = MapView.extend({
   },
 
   _getLayerViewFactory: function () {
-    this._layerViewFactory = this._layerViewFactory || new GMapsLayerViewFactory({
-      vector: this.map.get('vector')
-    });
+    this._layerViewFactory = this._layerViewFactory || new GMapsLayerViewFactory();
 
     return this._layerViewFactory;
   },
@@ -104,16 +102,25 @@ var GoogleMapsMapView = MapView.extend({
     this._gmapsMap.setOptions({ scrollwheel: z });
   },
 
-  _setZoom: function (model, z) {
+  _setZoom: function (z) {
     z = z || 0;
     this._gmapsMap.setZoom(z);
   },
 
-  _setCenter: function (model, center) {
+  _setCenter: function (center) {
     var c = new google.maps.LatLng(center[0], center[1]);
     this._gmapsMap.setCenter(c);
   },
 
+  _setView: function () {
+    if (this.map.hasChanged('zoom')) {
+      this._setZoom(this.map.get('zoom'));
+    }
+    if (this.map.hasChanged('center')) {
+      this._setCenter(this.map.get('center'));
+    }
+  },
+
   _getNativeMap: function () {
     return this._gmapsMap;
   },
diff --git a/src/geo/gmaps/gmaps-torque-layer-view.js b/src/geo/gmaps/gmaps-torque-layer-view.js
index 92411548fe..6407a00d3a 100644
--- a/src/geo/gmaps/gmaps-torque-layer-view.js
+++ b/src/geo/gmaps/gmaps-torque-layer-view.js
@@ -28,36 +28,6 @@ _.extend(
       this.setMap(null);
     },
 
-    _onModelUpdated: function () {
-      var changed = this.model.changedAttributes();
-      if (changed === false) return;
-
-      if ('visible' in changed) {
-        this.model.get('visible') ? this.show() : this.hide();
-      }
-
-      if ('cartocss' in changed) {
-        this.setCartoCSS(this.model.get('cartocss'));
-      }
-
-      if ('tileURLTemplates' in changed) {
-        // REAL HACK
-        this.provider.templateUrl = this.model.getTileURLTemplate();
-        this.provider.options.subdomains = this.model.get('subdomains');
-        // set meta
-        _.extend(this.provider.options, this.model.get('meta'));
-        this.model.set(this.model.get('meta'));
-        // this needs to be deferred in order to break the infinite loop
-        // of setReady changing keys and keys updating the model
-        // If we do this in the next iteration 'urls' will not be in changedAttributes
-        // so this will not pass through this code
-        setTimeout(function () {
-          this.provider._setReady(true);
-          this._reloadTiles();
-        }.bind(this), 0);
-      }
-    },
-
     onAdd: function () {
       torque.GMapsTorqueLayer.prototype.onAdd.apply(this);
     },
@@ -70,7 +40,6 @@ _.extend(
     onTilesLoading: function () {
       Backbone.Events.trigger.call(this, 'loading');
     }
-
   });
 
 module.exports = GMapsTorqueLayerView;
diff --git a/src/geo/leaflet/leaflet-cartodb-webgl-layer-group-view.js b/src/geo/leaflet/leaflet-cartodb-webgl-layer-group-view.js
index b3ac80a75e..7f03a2b2a8 100644
--- a/src/geo/leaflet/leaflet-cartodb-webgl-layer-group-view.js
+++ b/src/geo/leaflet/leaflet-cartodb-webgl-layer-group-view.js
@@ -2,24 +2,86 @@ var _ = require('underscore');
 var L = require('leaflet');
 var TC = require('tangram.cartodb');
 var LeafletLayerView = require('./leaflet-layer-view');
+var Profiler = require('../../core/profiler');
 
 var LeafletCartoDBWebglLayerGroupView = function (layerGroupModel, leafletMap) {
+  var self = this;
   LeafletLayerView.apply(this, arguments);
+  var metric = Profiler.metric('tangram.rendering');
 
-  layerGroupModel.bind('change:urls',
-    this._onURLsChanged(layerGroupModel)
-  );
+  metric.start();
 
-  this.tangram = new TC(leafletMap);
+  this.trigger('loading');
 
-  layerGroupModel.forEachGroupedLayer(this._onLayerAdded, this);
-  layerGroupModel.onLayerAdded(this._onLayerAdded.bind(this));
+  this.tangram = new TC(leafletMap, this.initConfig.bind(this, layerGroupModel));
+
+  this.tangram.onLoaded(function () {
+    if (metric) {
+      self.trigger('load');
+      metric.end();
+      metric = void 0;
+    }
+  });
+
+  this.layerGroupModel = layerGroupModel;
 };
 
 LeafletCartoDBWebglLayerGroupView.prototype = _.extend(
   {},
   LeafletLayerView.prototype,
   {
+    initConfig: function (layerGroupModel) {
+      var onURLsChanged = this._onURLsChanged(layerGroupModel);
+
+      layerGroupModel.bind('change:urls', onURLsChanged);
+
+      layerGroupModel.forEachGroupedLayer(this._onLayerAdded, this);
+      layerGroupModel.onLayerAdded(this._onLayerAdded.bind(this));
+
+      this._addInteractiveEvents();
+    },
+
+    _addInteractiveEvents: function () {
+      var hovered = false;
+      var self = this;
+      this.tangram.layer.setSelectionEvents({
+        hover: function (e) {
+          if (e.feature) {
+            hovered = true;
+            self.trigger('featureOver', self._getFeatureObject(e));
+          } else if (hovered) {
+            hovered = false;
+            self.trigger('featureOut', self._getFeatureObject(e));
+          }
+        },
+        click: function (e) {
+          if (e.feature) {
+            self.trigger('featureClick', self._getFeatureObject(e));
+          }
+        }
+      });
+    },
+    _getFeatureObject: function (e) {
+      var layer = this.layerGroupModel.getCartoLayerById(e.feature && e.feature.source_layer);
+      if (layer) {
+        var index = this.layerGroupModel.getIndexOfLayerInLayerGroup(layer);
+        this.lastLayer = layer;
+        this.lastLayerIndex = index;
+        return {
+          layer: layer,
+          layerIndex: index,
+          latlng: e.leaflet_event.latlng,
+          position: e.pixel,
+          feature: e.feature.properties
+        };
+      } else {
+        return {
+          layer: this.lastLayer,
+          layerIndex: this.lastLayerIndex
+        };
+      }
+    },
+
     _createLeafletLayer: function () {
       var leafletLayer = new L.Layer();
       leafletLayer.onAdd = function () {};
@@ -33,10 +95,15 @@ LeafletCartoDBWebglLayerGroupView.prototype = _.extend(
       layer.bind('change:meta change:visible', function (e) {
         self.tangram.addLayer(e.attributes, (i + 1));
       });
+
+      self.tangram.addLayer(layer.attributes, (i + 1));
     },
 
     _onURLsChanged: function (layerGroupModel) {
       var self = this;
+
+      self.tangram.addDataSource(layerGroupModel.getTileURLTemplate('mvt'), layerGroupModel.getSubdomains());
+
       return function () {
         self.tangram.addDataSource(layerGroupModel.getTileURLTemplate('mvt'), layerGroupModel.getSubdomains());
       };
diff --git a/src/geo/leaflet/leaflet-layer-view-factory.js b/src/geo/leaflet/leaflet-layer-view-factory.js
index 40c9430f1c..ede6f6023c 100644
--- a/src/geo/leaflet/leaflet-layer-view-factory.js
+++ b/src/geo/leaflet/leaflet-layer-view-factory.js
@@ -1,3 +1,4 @@
+var _ = require('underscore');
 var log = require('cdb.log');
 var LeafletTiledLayerView = require('./leaflet-tiled-layer-view');
 var LeafletWMSLayerView = require('./leaflet-wms-layer-view');
@@ -5,20 +6,54 @@ var LeafletPlainLayerView = require('./leaflet-plain-layer-view');
 var LeafletCartoDBLayerGroupView = require('./leaflet-cartodb-layer-group-view');
 var LeafletTorqueLayerView = require('./leaflet-torque-layer-view');
 var LeafletCartoDBWebglLayerGroupView = require('./leaflet-cartodb-webgl-layer-group-view');
+var TangramCartoCSS = require('tangram-cartocss');
+var RenderModes = require('../../geo/render-modes');
+var util = require('../../core/util');
 
-var LayerGroupViewConstructor = function (layerGroupModel, mapModel, options) {
-  if (options.vector) {
-    return new LeafletCartoDBWebglLayerGroupView(layerGroupModel, mapModel);
+var MAX_NUMBER_OF_FEATURES_FOR_WEBGL = 10e4;
+
+var LayerGroupViewConstructor = function (layerGroupModel, nativeMap, mapModel) {
+  if (canMapBeRenderedClientSide(mapModel)) {
+    return new LeafletCartoDBWebglLayerGroupView(layerGroupModel, nativeMap);
   }
-  return new LeafletCartoDBLayerGroupView(layerGroupModel, mapModel);
+
+  return new LeafletCartoDBLayerGroupView(layerGroupModel, nativeMap);
 };
 
-var LeafletLayerViewFactory = function (options) {
-  options = options || {};
-  this._vector = options.vector;
-  this._webgl = options.webgl;
+var canMapBeRenderedClientSide = function (mapModel) {
+  var mapRenderMode = mapModel.get('renderMode');
+
+  if (mapRenderMode === RenderModes.VECTOR && util.isWebGLSupported()) {
+    return true;
+  }
+
+  if (mapRenderMode === RenderModes.RASTER) {
+    return false;
+  }
+
+  // RenderModes.AUTO
+  var estimatedFeatureCount = mapModel.getEstimatedFeatureCount();
+  return util.isWebGLSupported() &&
+    estimatedFeatureCount && estimatedFeatureCount < MAX_NUMBER_OF_FEATURES_FOR_WEBGL &&
+    _.all(mapModel.layers.getCartoDBLayers(), canLayerBeRenderedClientSide);
 };
 
+var canLayerBeRenderedClientSide = function (layerModel) {
+  var cartoCSS = layerModel.get('meta').cartocss;
+
+  try {
+    TangramCartoCSS.carto2Draw(cartoCSS);
+  } catch (e) {
+    e.message = '[Tangram] Unable to render layer with the following cartoCSS:\n' + cartoCSS + '\nError: ' + e.message;
+    log.error(e);
+    return false;
+  }
+
+  return true;
+};
+
+var LeafletLayerViewFactory = function () {};
+
 LeafletLayerViewFactory.prototype._constructors = {
   'tiled': LeafletTiledLayerView,
   'wms': LeafletWMSLayerView,
@@ -27,15 +62,13 @@ LeafletLayerViewFactory.prototype._constructors = {
   'torque': LeafletTorqueLayerView
 };
 
-LeafletLayerViewFactory.prototype.createLayerView = function (layerModel, mapModel) {
+LeafletLayerViewFactory.prototype.createLayerView = function (layerModel, nativeMap, mapModel) {
   var layerType = layerModel.get('type').toLowerCase();
   var LayerViewClass = this._constructors[layerType];
 
   if (LayerViewClass) {
     try {
-      return new LayerViewClass(layerModel, mapModel, {
-        vector: this._vector
-      });
+      return new LayerViewClass(layerModel, nativeMap, mapModel);
     } catch (e) {
       log.error("Error creating an instance of layer view for '" + layerType + "' layer -> " + e.message);
       throw e;
diff --git a/src/geo/leaflet/leaflet-map-view.js b/src/geo/leaflet/leaflet-map-view.js
index 96d422ae71..6bb3ce6da1 100644
--- a/src/geo/leaflet/leaflet-map-view.js
+++ b/src/geo/leaflet/leaflet-map-view.js
@@ -49,11 +49,6 @@ var LeafletMapView = MapView.extend({
       self.trigger('zoomend');
     }, this);
 
-    this._leafletMap.on('move', function () {
-      var c = self._leafletMap.getCenter();
-      self._setModelProperty({ center: [c.lat, c.lng] });
-    });
-
     this._leafletMap.on('dragend', function () {
       var c = self._leafletMap.getCenter();
       this.trigger('dragend', [c.lat, c.lng]);
@@ -61,6 +56,9 @@ var LeafletMapView = MapView.extend({
 
     this._leafletMap.on('moveend', function () {
       var c = self._leafletMap.getCenter();
+      self._setModelProperty({
+        center: [c.lat, c.lng]
+      });
       self.map.trigger('moveend', [c.lat, c.lng]);
     }, this);
 
@@ -86,10 +84,7 @@ var LeafletMapView = MapView.extend({
   },
 
   _getLayerViewFactory: function () {
-    this._layerViewFactory = this._layerViewFactory || new LeafletLayerViewFactory({
-      vector: this.map.get('vector'),
-      webgl: this.map.get('webgl')
-    });
+    this._layerViewFactory = this._layerViewFactory || new LeafletLayerViewFactory();
 
     return this._layerViewFactory;
   },
@@ -173,7 +168,9 @@ var LeafletMapView = MapView.extend({
   },
 
   _setView: function () {
-    this._leafletMap.setView(this.map.get('center'), this.map.get('zoom') || 0);
+    if (this.map.hasChanged('zoom') || this.map.hasChanged('center')) {
+      this._leafletMap.flyTo(this.map.get('center'), this.map.get('zoom') || 0);
+    }
   },
 
   _getNativeMap: function () {
diff --git a/src/geo/leaflet/leaflet-torque-layer-view.js b/src/geo/leaflet/leaflet-torque-layer-view.js
index d65f910b30..eabfd1e0fd 100644
--- a/src/geo/leaflet/leaflet-torque-layer-view.js
+++ b/src/geo/leaflet/leaflet-torque-layer-view.js
@@ -28,37 +28,6 @@ LeafletTorqueLayer.prototype = _.extend(
       });
 
       return new L.TorqueLayer(attrs);
-    },
-
-    _modelUpdated: function () {
-      var model = this.model;
-
-      if (!model.changedAttributes()) return;
-
-      if (model.hasChanged('visible')) {
-        model.get('visible') ? this.leafletLayer.show() : this.leafletLayer.hide();
-      }
-
-      if (model.hasChanged('cartocss')) {
-        this.leafletLayer.setCartoCSS(model.get('cartocss'));
-      }
-
-      if (model.hasChanged('tileURLTemplates')) {
-        this.leafletLayer.provider.templateUrl = model.getTileURLTemplates()[0];
-        this.leafletLayer.provider.options.subdomains = model.get('subdomains');
-        // set meta
-        var meta = model.get('meta');
-        _.extend(this.leafletLayer.provider.options, meta);
-        model.set(meta);
-        // this needs to be deferred in order to break the infinite loop
-        // of setReady changing keys and keys updating the model
-        // If we do this in the next iteration 'tileURLTemplates' will not be in changedAttributes
-        // so this will not pass through this code
-        setTimeout(function () {
-          this.leafletLayer.provider._setReady(true);
-          this.leafletLayer._reloadTiles();
-        }.bind(this), 0);
-      }
     }
   }
 );
diff --git a/src/geo/map-view.js b/src/geo/map-view.js
index c7b5477444..90303900e9 100644
--- a/src/geo/map-view.js
+++ b/src/geo/map-view.js
@@ -154,20 +154,18 @@ var MapView = View.extend({
     this._unbindModel();
     this.map.bind('change:view_bounds_sw', this._changeBounds, this);
     this.map.bind('change:view_bounds_ne', this._changeBounds, this);
-    this.map.bind('change:zoom', this._setZoom, this);
+    this.map.bind('change', this._setView, this);
     this.map.bind('change:scrollwheel', this._setScrollWheel, this);
     this.map.bind('change:keyboard', this._setKeyboard, this);
-    this.map.bind('change:center', this._setCenter, this);
   },
 
   /** unbind model properties */
   _unbindModel: function () {
     this.map.unbind('change:view_bounds_sw', this._changeBounds, this);
     this.map.unbind('change:view_bounds_ne', this._changeBounds, this);
-    this.map.unbind('change:zoom', this._setZoom, this);
+    this.map.unbind('change', this._setView, this);
     this.map.unbind('change:scrollwheel', this._setScrollWheel, this);
     this.map.unbind('change:keyboard', this._setKeyboard, this);
-    this.map.unbind('change:center', this._setCenter, this);
     this.map.unbind('change:attribution', null, this);
   },
 
@@ -248,7 +246,7 @@ var MapView = View.extend({
   },
 
   _createLayerView: function (layerModel) {
-    return this._getLayerViewFactory().createLayerView(layerModel, this.getNativeMap());
+    return this._getLayerViewFactory().createLayerView(layerModel, this.getNativeMap(), this.map);
   },
 
   _removeLayers: function () {
diff --git a/src/geo/map.js b/src/geo/map.js
index f6768aac34..ae7dfeda83 100644
--- a/src/geo/map.js
+++ b/src/geo/map.js
@@ -19,8 +19,6 @@ var Map = Model.extend({
     drag: true,
     keyboard: true,
     provider: 'leaflet',
-    // enforce client-side rendering using GeoJSON vector tiles
-    vector: false,
     popupsEnabled: true,
     isFeatureInteractivityEnabled: false
   },
@@ -502,8 +500,22 @@ var Map = Model.extend({
 
   getMapViewSize: function () {
     return this._mapViewSize;
-  }
+  },
 
+  getEstimatedFeatureCount: function () {
+    if (this.hasEstimatedFeatureCount()) {
+      return _.reduce(this.layers.getCartoDBLayers(), function (memo, layerModel) {
+        return memo + layerModel.getEstimatedFeatureCount();
+      }, 0);
+    }
+  },
+
+  hasEstimatedFeatureCount: function () {
+    return _.every(this.layers.getCartoDBLayers(), function (layerModel) {
+      var estimatedFeatureCount = layerModel.getEstimatedFeatureCount();
+      return estimatedFeatureCount && estimatedFeatureCount >= 0;
+    });
+  }
 }, {
   PROVIDERS: {
     GMAPS: 'googlemaps',
diff --git a/src/geo/map/cartodb-layer.js b/src/geo/map/cartodb-layer.js
index 34d9dd29e9..dce747fd1f 100644
--- a/src/geo/map/cartodb-layer.js
+++ b/src/geo/map/cartodb-layer.js
@@ -114,6 +114,16 @@ var CartoDBLayer = LayerModelBase.extend({
 
   getDataProvider: function () {
     return this._dataProvider;
+  },
+
+  getEstimatedFeatureCount: function () {
+    if (this.isHidden()) {
+      return 0;
+    }
+
+    var meta = this.get('meta');
+    var stats = meta && meta.stats;
+    return stats && stats.estimatedFeatureCount;
   }
 });
 
diff --git a/src/geo/map/layer-model-base.js b/src/geo/map/layer-model-base.js
index 995414c35c..407195acde 100644
--- a/src/geo/map/layer-model-base.js
+++ b/src/geo/map/layer-model-base.js
@@ -44,6 +44,10 @@ var MapLayer = Model.extend({
     return !!this.get('visible');
   },
 
+  isHidden: function () {
+    return !this.isVisible();
+  },
+
   toggle: function () {
     this.set('visible', !this.get('visible'));
   },
diff --git a/src/geo/render-modes.js b/src/geo/render-modes.js
new file mode 100644
index 0000000000..df42c8e8c2
--- /dev/null
+++ b/src/geo/render-modes.js
@@ -0,0 +1,5 @@
+module.exports = {
+  AUTO: 'auto',
+  RASTER: 'raster',
+  VECTOR: 'vector'
+};
diff --git a/src/geo/torque-layer-view-base.js b/src/geo/torque-layer-view-base.js
index 3423cf2e01..1a3fe6285d 100644
--- a/src/geo/torque-layer-view-base.js
+++ b/src/geo/torque-layer-view-base.js
@@ -109,6 +109,7 @@ var TorqueLayerViewBase = {
     this.listenTo(this.model, 'change:step', this._stepChanged);
     this.listenTo(this.model, 'change:steps', this._stepsChanged);
     this.listenTo(this.model, 'change:renderRange', this._renderRangeChanged);
+    this.listenTo(this.model, 'change', this._onModelChanged);
   },
 
   _unonModel: function () {
@@ -117,6 +118,7 @@ var TorqueLayerViewBase = {
     this.stopListening(this.model, 'change:step', this._stepChanged);
     this.stopListening(this.model, 'change:steps', this._stepsChanged);
     this.stopListening(this.model, 'change:renderRange', this._renderRangeChanged);
+    this.stopListening(this.model, 'change', this._onModelChanged);
   },
 
   _isRunningChanged: function (m, isRunning) {
@@ -147,6 +149,34 @@ var TorqueLayerViewBase = {
     }
   },
 
+  // TODO: This could be "exploded" into different bindings / methods
+  _onModelChanged: function () {
+    if (!this.model.hasChanged()) return;
+
+    if (this.model.hasChanged('visible')) {
+      this.model.get('visible') ? this.nativeTorqueLayer.show() : this.nativeTorqueLayer.hide();
+    }
+
+    if (this.model.hasChanged('cartocss')) {
+      this.nativeTorqueLayer.setCartoCSS(this.model.get('cartocss'));
+    }
+
+    if (this.model.hasChanged('tileURLTemplates')) {
+      // REAL HACK
+      this.nativeTorqueLayer.provider.templateUrl = this.model.getTileURLTemplates()[0];
+      this.nativeTorqueLayer.provider.options.subdomains = this.model.get('subdomains');
+      _.extend(this.nativeTorqueLayer.provider.options, this.model.get('meta'));
+      // this needs to be deferred in order to break the infinite loop
+      // of setReady changing keys and keys updating the model
+      // If we do this in the next iteration 'urls' will not be in changedAttributes
+      // so this will not pass through this code
+      setTimeout(function () {
+        this.nativeTorqueLayer.provider._setReady(true);
+        this.nativeTorqueLayer._reloadTiles();
+      }.bind(this), 0);
+    }
+  },
+
   _getQuery: function (layerModel) {
     var query = layerModel.get('query');
     var qw = layerModel.get('query_wrapper');
diff --git a/src/geo/ui/legends/legends-view.js b/src/geo/ui/legends/legends-view.js
index dae96f2956..f18193939e 100644
--- a/src/geo/ui/legends/legends-view.js
+++ b/src/geo/ui/legends/legends-view.js
@@ -76,13 +76,15 @@ var LegendsView = View.extend({
 
   _showOrHideShadows: function () {
     var $el = $(this._container());
-    var currentPos = $el.scrollTop();
-    var max = $el.get(0).scrollHeight;
-    var height = $el.outerHeight();
-    var maxPos = max - height;
-
-    this.$shadowTop.toggleClass('is-visible', currentPos > 0);
-    this.$shadowBottom.toggleClass('is-visible', currentPos < maxPos);
+    if ($el.length) {
+      var currentPos = $el.scrollTop();
+      var max = $el.get(0).scrollHeight;
+      var height = $el.outerHeight();
+      var maxPos = max - height;
+
+      this.$shadowTop.toggleClass('is-visible', currentPos > 0);
+      this.$shadowBottom.toggleClass('is-visible', currentPos < maxPos);
+    }
   },
 
   _onScrollBottom: function () {
diff --git a/src/vis/vis-view.js b/src/vis/vis-view.js
index aeda3ff60c..bc475c4de9 100644
--- a/src/vis/vis-view.js
+++ b/src/vis/vis-view.js
@@ -10,7 +10,7 @@ var OverlaysView = require('../geo/ui/overlays-view');
  */
 var Vis = View.extend({
   initialize: function (options) {
-    this.model.once('load', this.render, this);
+    this.model.once('reloaded', this.render, this);
     this.model.on('invalidateSize', this._invalidateSize, this);
 
     this._overlaysCollection = this.model.overlaysCollection;
diff --git a/src/vis/vis.js b/src/vis/vis.js
index 7e61afaf96..0d8ca71823 100644
--- a/src/vis/vis.js
+++ b/src/vis/vis.js
@@ -15,6 +15,7 @@ var AnalysisPoller = require('../analysis/analysis-poller');
 var LayersFactory = require('./layers-factory');
 var SettingsModel = require('./settings');
 var whenAllDataviewsFetched = require('./dataviews-tracker');
+var RenderModes = require('../geo/render-modes');
 
 var STATE_INIT = 'init'; // vis hasn't been sent to Windshaft
 var STATE_OK = 'ok'; // vis has been sent to Windshaft and everything is ok
@@ -141,28 +142,6 @@ var VisModel = Backbone.Model.extend({
 
     var windshaftClient = new WindshaftClient(windshaftSettings);
 
-    var modelUpdater = new ModelUpdater({
-      visModel: this,
-      layerGroupModel: this.layerGroupModel,
-      dataviewsCollection: this._dataviewsCollection,
-      layersCollection: this._layersCollection,
-      analysisCollection: this._analysisCollection
-    });
-
-    // Create the WindshaftMap
-    this._windshaftMap = new WindshaftMapClass({
-      apiKey: this.get('apiKey'),
-      authToken: this.get('authToken'),
-      statTag: datasource.stat_tag
-    }, {
-      client: windshaftClient,
-      modelUpdater: modelUpdater,
-      windshaftSettings: windshaftSettings,
-      dataviewsCollection: this._dataviewsCollection,
-      layersCollection: this._layersCollection,
-      analysisCollection: this._analysisCollection
-    });
-
     var layersFactory = new LayersFactory({
       visModel: this,
       windshaftSettings: windshaftSettings
@@ -171,6 +150,13 @@ var VisModel = Backbone.Model.extend({
     // Create the Map
     var allowDragging = util.isMobileDevice() || vizjson.hasZoomOverlay() || vizjson.scrollwheel;
 
+    var renderMode = RenderModes.AUTO;
+    if (vizjson.vector === true) {
+      renderMode = RenderModes.VECTOR;
+    } else if (vizjson.vector === false) {
+      renderMode = RenderModes.RASTER;
+    }
+
     this.map = new Map({
       title: vizjson.title,
       description: vizjson.description,
@@ -180,9 +166,8 @@ var VisModel = Backbone.Model.extend({
       scrollwheel: !!this.scrollwheel,
       drag: allowDragging,
       provider: vizjson.map_provider,
-      vector: vizjson.vector,
-      webgl: vizjson.webgl,
-      isFeatureInteractivityEnabled: this.get('interactiveFeatures')
+      isFeatureInteractivityEnabled: this.get('interactiveFeatures'),
+      renderMode: renderMode
     }, {
       layersCollection: this._layersCollection,
       layersFactory: layersFactory
@@ -190,6 +175,29 @@ var VisModel = Backbone.Model.extend({
 
     this.listenTo(this.map, 'cartodbLayerMoved', this.reload);
 
+    var modelUpdater = new ModelUpdater({
+      visModel: this,
+      mapModel: this.map,
+      layerGroupModel: this.layerGroupModel,
+      dataviewsCollection: this._dataviewsCollection,
+      layersCollection: this._layersCollection,
+      analysisCollection: this._analysisCollection
+    });
+
+    // Create the WindshaftMap
+    this._windshaftMap = new WindshaftMapClass({
+      apiKey: this.get('apiKey'),
+      authToken: this.get('authToken'),
+      statTag: datasource.stat_tag
+    }, {
+      client: windshaftClient,
+      modelUpdater: modelUpdater,
+      windshaftSettings: windshaftSettings,
+      dataviewsCollection: this._dataviewsCollection,
+      layersCollection: this._layersCollection,
+      analysisCollection: this._analysisCollection
+    });
+
     // Reset the collection of overlays
     this.overlaysCollection.reset(vizjson.overlays);
 
diff --git a/src/windshaft-integration/model-updater.js b/src/windshaft-integration/model-updater.js
index f2e398b5c0..3cc775fa5d 100644
--- a/src/windshaft-integration/model-updater.js
+++ b/src/windshaft-integration/model-updater.js
@@ -13,23 +13,15 @@ function getSubdomain (subdomains, resource) {
  * CartoDB.js models that are linked to a "resource" in the Maps API.
  */
 var ModelUpdater = function (deps) {
-  if (!deps.visModel) {
-    throw new Error('visModel is required');
-  }
-  if (!deps.layerGroupModel) {
-    throw new Error('layerGroupModel is required');
-  }
-  if (!deps.layersCollection) {
-    throw new Error('layersCollection is required');
-  }
-  if (!deps.dataviewsCollection) {
-    throw new Error('dataviewsCollection is required');
-  }
-  if (!deps.analysisCollection) {
-    throw new Error('analysisCollection is required');
-  }
+  if (!deps.visModel) throw new Error('visModel is required');
+  if (!deps.mapModel) throw new Error('mapModel is required');
+  if (!deps.layerGroupModel) throw new Error('layerGroupModel is required');
+  if (!deps.layersCollection) throw new Error('layersCollection is required');
+  if (!deps.dataviewsCollection) throw new Error('dataviewsCollection is required');
+  if (!deps.analysisCollection) throw new Error('analysisCollection is required');
 
   this._visModel = deps.visModel;
+  this._mapModel = deps.mapModel;
   this._layerGroupModel = deps.layerGroupModel;
   this._layersCollection = deps.layersCollection;
   this._dataviewsCollection = deps.dataviewsCollection;
@@ -37,11 +29,14 @@ var ModelUpdater = function (deps) {
 };
 
 ModelUpdater.prototype.updateModels = function (windshaftMap, sourceId, forceFetch) {
-  this._updateLayerGroupModel(windshaftMap);
+  this._updateVisModel(windshaftMap);
   this._updateLayerModels(windshaftMap);
+  this._updateLayerGroupModel(windshaftMap);
   this._updateDataviewModels(windshaftMap, sourceId, forceFetch);
   this._updateAnalysisModels(windshaftMap);
+};
 
+ModelUpdater.prototype._updateVisModel = function (windshaftMap) {
   this._visModel.setOk();
 };
 
@@ -132,7 +127,10 @@ ModelUpdater.prototype._updateLayerModels = function (windshaftMap) {
   var indexesOfTorqueLayers = windshaftMap.getLayerIndexesByType('torque');
   _.each(this._layersCollection.getTorqueLayers(), function (layerModel, localLayerIndex) {
     var windshaftMapLayerIndex = indexesOfTorqueLayers[localLayerIndex];
-    layerModel.set('meta', windshaftMap.getLayerMetadata(windshaftMapLayerIndex));
+    var meta = windshaftMap.getLayerMetadata(windshaftMapLayerIndex);
+    layerModel.set('meta', meta);
+    // deep-insight.js expects meta attributes as attributes for some reason
+    layerModel.set(meta);
     layerModel.set('subdomains', windshaftMap.getSupportedSubdomains());
     layerModel.set('tileURLTemplates', this._calculateTileURLTemplatesForTorqueLayers(windshaftMap));
     this._updateLegendModels(layerModel, windshaftMapLayerIndex, windshaftMap);
diff --git a/src/windshaft/anonymous-map.js b/src/windshaft/anonymous-map.js
index 28794883af..337e3acb6e 100644
--- a/src/windshaft/anonymous-map.js
+++ b/src/windshaft/anonymous-map.js
@@ -93,6 +93,7 @@ var sharedOptionsForMapnikAndTorqueLayers = function (layerModel) {
 var AnonymousMap = MapBase.extend({
   toJSON: function () {
     return {
+      buffersize: {mvt: 0},
       layers: this._calculateLayersSection(),
       dataviews: this._calculateDataviewsSection(),
       analyses: this._calculateAnalysesSection()
diff --git a/src/windshaft/named-map.js b/src/windshaft/named-map.js
index c9bca9da62..61a73c3408 100644
--- a/src/windshaft/named-map.js
+++ b/src/windshaft/named-map.js
@@ -4,7 +4,11 @@ var LayerTypes = require('../geo/map/layer-types');
 
 var NamedMap = MapBase.extend({
   toJSON: function () {
-    var json = {};
+    var json = {
+      buffersize: {
+        mvt: 0
+      }
+    };
 
     // Named map templates include both http, cartodb and torque layers
     // so we need to iterate through all the layers in the collection to
diff --git a/test/spec/api/create-vis.spec.js b/test/spec/api/create-vis.spec.js
index 98bb4d8d7b..817254e34e 100644
--- a/test/spec/api/create-vis.spec.js
+++ b/test/spec/api/create-vis.spec.js
@@ -10,9 +10,21 @@ describe('src/api/create-vis', function () {
     this.container = $('<div id="map">').css('height', '200px');
     this.containerId = this.container[0].id;
     $('body').append(this.container);
+
+    this.$ajax = $.ajax;
+    spyOn($, 'ajax').and.callFake(function (options) {
+      if (options.url.indexOf(options.url.indexOf('http://cdb.localhost.lan:8181/api/v1/map/named/tpl_6a31d394_7c8e_11e5_8e42_080027880ca6/jsonp?') === 0)) {
+        options.success && options.success({
+          layergroupid: '1234567890'
+        });
+      }
+
+      this.$ajax(options);
+    }.bind(this));
   });
 
   afterEach(function () {
+    $.ajax = this.$ajax;
     this.container.remove();
   });
 
@@ -43,7 +55,7 @@ describe('src/api/create-vis', function () {
     var vis = createVis(this.containerId, 'http://example.com/vizjson', {
       skipMapInstantiation: true
     });
-    spyOn(vis, 'load');
+    spyOn(vis, 'load').and.callThrough();
 
     // Simulate a successful response from Loader.get
     var loaderCallback = Loader.get.calls.mostRecent().args[1];
@@ -255,10 +267,6 @@ describe('src/api/create-vis', function () {
   };
 
   describe('map instantiation', function () {
-    beforeEach(function () {
-      spyOn($, 'ajax');
-    });
-
     it('should instantiate map using a GET request', function (done) {
       this.vis = createVis(this.containerId, fakeVizJSON, {});
 
diff --git a/test/spec/geo/leaflet/leaflet-cartodb-webgl-layer-group-view.spec.js b/test/spec/geo/leaflet/leaflet-cartodb-webgl-layer-group-view.spec.js
index 2f4fe3bccb..f4be26b258 100644
--- a/test/spec/geo/leaflet/leaflet-cartodb-webgl-layer-group-view.spec.js
+++ b/test/spec/geo/leaflet/leaflet-cartodb-webgl-layer-group-view.spec.js
@@ -17,7 +17,7 @@ describe('src/geo/leaflet/leaflet-cartodb-webgl-layer-group-view.js', function (
       layersCollection: this.layersCollection
     });
 
-    this.layerGroupModel.set('urls', { tiles: [], subdomains: ['a', 'b', 'c'] });
+    this.layerGroupModel.set('urls', { tiles: 'http://0.ashbu.cartocdn.com/documentation/api/v1/map/90e64f1b9145961af7ba36d71b887dd2:0/{layerIndexes}/{z}/{x}/{y}.{format}', subdomains: ['a', 'b', 'c'] });
 
     this.vis = new VisModel();
 
@@ -27,7 +27,9 @@ describe('src/geo/leaflet/leaflet-cartodb-webgl-layer-group-view.js', function (
     this.layersCollection.reset([ this.layer1, this.layer2 ]);
 
     this.view = new LeafletCartoDBWebGLLayerGroupView(this.layerGroupModel, this.leafletMap); // eslint-disable-line
-    this.view.tangram = {addLayer: function () {}, addDataSource: function () {}};
+    this.view.tangram = {addLayer: function () {}, addDataSource: function () {}, layer: {setSelectionEvents: function () {}}};
+
+    this.view.initConfig(this.layerGroupModel);
   });
 
   afterEach(function () {
@@ -53,9 +55,9 @@ describe('src/geo/leaflet/leaflet-cartodb-webgl-layer-group-view.js', function (
   it('should set a new tile template URL when urls change', function () {
     spyOn(this.view.tangram, 'addDataSource');
 
-    this.layerGroupModel.set('urls', { tiles: 'http://0.ashbu.cartocdn.com/documentation/api/v1/map/90e64f1b9145961af7ba36d71b887dd2:0/{layerIndexes}/{z}/{x}/{y}.{format}', subdomains: ['a', 'b', 'c'] });
+    this.layerGroupModel.set('urls', { tiles: 'http://0.ashbu.cartocdn.com/documentation/api/v1/map/90e64f1b9145961af7bas36d71b887dd2:0/{layerIndexes}/{z}/{x}/{y}.{format}', subdomains: ['a', 'b', 'c'] });
 
-    expect(this.view.tangram.addDataSource).toHaveBeenCalledWith('http://0.ashbu.cartocdn.com/documentation/api/v1/map/90e64f1b9145961af7ba36d71b887dd2:0/mapnik/{z}/{x}/{y}.mvt', ['a', 'b', 'c']);
+    expect(this.view.tangram.addDataSource).toHaveBeenCalledWith('http://0.ashbu.cartocdn.com/documentation/api/v1/map/90e64f1b9145961af7bas36d71b887dd2:0/mapnik/{z}/{x}/{y}.mvt', ['a', 'b', 'c']);
   });
 
   it('should set a new tile with token when URL changes', function () {
@@ -63,8 +65,8 @@ describe('src/geo/leaflet/leaflet-cartodb-webgl-layer-group-view.js', function (
 
     spyOn(this.view.tangram, 'addDataSource');
 
-    this.layerGroupModel.set('urls', { tiles: 'http://0.ashbu.cartocdn.com/documentation/api/v1/map/90e64f1b9145961af7ba36d71b887dd2:0/{layerIndexes}/{z}/{x}/{y}.{format}', subdomains: ['a', 'b', 'c'] });
+    this.layerGroupModel.set('urls', { tiles: 'http://0.ashbu.cartocdn.com/documentation/api/v1/map/90e64f1b9145961af7ba36d71sd87dd2:0/{layerIndexes}/{z}/{x}/{y}.{format}', subdomains: ['a', 'b', 'c'] });
 
-    expect(this.view.tangram.addDataSource).toHaveBeenCalledWith('http://0.ashbu.cartocdn.com/documentation/api/v1/map/90e64f1b9145961af7ba36d71b887dd2:0/mapnik/{z}/{x}/{y}.mvt?auth_token=hahskdfasd', ['a', 'b', 'c']);
+    expect(this.view.tangram.addDataSource).toHaveBeenCalledWith('http://0.ashbu.cartocdn.com/documentation/api/v1/map/90e64f1b9145961af7ba36d71sd87dd2:0/mapnik/{z}/{x}/{y}.mvt?auth_token=hahskdfasd', ['a', 'b', 'c']);
   });
 });
diff --git a/test/spec/geo/leaflet/leaflet-map-view.spec.js b/test/spec/geo/leaflet/leaflet-map-view.spec.js
index d5923231d0..bb3cb3957a 100644
--- a/test/spec/geo/leaflet/leaflet-map-view.spec.js
+++ b/test/spec/geo/leaflet/leaflet-map-view.spec.js
@@ -71,24 +71,6 @@ describe('geo/leaflet/leaflet-map-view', function () {
     expect(map.getViewBounds).not.toHaveBeenCalled();
   });
 
-  it('should change center and zoom when bounds are changed', function (done) {
-    var spy = jasmine.createSpy('change:center');
-    mapView.getSize = function () { return {x: 200, y: 200}; };
-    map.bind('change:center', spy);
-    spyOn(mapView, '_setCenter');
-    mapView._bindModel();
-
-    map.set({
-      'view_bounds_ne': [1, 1],
-      'view_bounds_sw': [-0.3, -1.2]
-    });
-
-    setTimeout(function () {
-      expect(mapView._setCenter).toHaveBeenCalled();
-      done();
-    }, 1000);
-  });
-
   it('should allow adding a layer', function () {
     map.addLayer(layer);
     expect(map.layers.length).toEqual(1);
@@ -145,8 +127,8 @@ describe('geo/leaflet/leaflet-map-view', function () {
   });
 
   it('should remove all layers when map view is cleaned', function () {
-    var cartoDBLayer1 = new CartoDBLayer({}, { vis: this.vis });
-    var cartoDBLayer2 = new CartoDBLayer({}, { vis: this.vis });
+    var cartoDBLayer1 = new CartoDBLayer({ meta: { cartocss: '#layer {}' } }, { vis: this.vis });
+    var cartoDBLayer2 = new CartoDBLayer({ meta: { cartocss: '#layer {}' } }, { vis: this.vis });
     var tileLayer = new TileLayer({ urlTemplate: 'test' }, { vis: {} });
 
     map.addLayer(cartoDBLayer1);
diff --git a/test/spec/geo/map-view.spec.js b/test/spec/geo/map-view.spec.js
index f4ddb39a05..000de7921d 100644
--- a/test/spec/geo/map-view.spec.js
+++ b/test/spec/geo/map-view.spec.js
@@ -85,6 +85,15 @@ describe('core/geo/map-view', function () {
     });
   });
 
+  describe('bindings to map', function () {
+    it('should fitBounds when view bounds change', function () {
+      spyOn(this.map, 'fitBounds');
+
+      this.map.setBounds([ [0, 0], [180, 180] ]);
+      expect(this.map.fitBounds).toHaveBeenCalled();
+    });
+  });
+
   describe('bindings to map.layers', function () {
     describe('when layers of map.layers are resetted', function () {
       it('should group CartoDB layers into a single layerView and add one layerView for each non-CartoDB layer', function () {
diff --git a/test/spec/geo/shared-tests-for-torque-layer.js b/test/spec/geo/shared-tests-for-torque-layer.js
index 0b2d19154d..1cd1173317 100644
--- a/test/spec/geo/shared-tests-for-torque-layer.js
+++ b/test/spec/geo/shared-tests-for-torque-layer.js
@@ -149,4 +149,21 @@ module.exports = function () {
       expect(this.nativeTorqueLayer.setCartoCSS).toHaveBeenCalledWith('some shiny new cartocss');
     });
   });
+
+  describe('when tileURLTemplates and subdomains attrs change on model', function () {
+    beforeEach(function () {
+      this.nativeTorqueLayer = this.view.nativeTorqueLayer;
+      this.nativeTorqueLayer.provider = {
+        subdomains: [ '0', '1', '2' ],
+        options: {},
+        _setReady: function () {}
+      };
+    });
+
+    it('should set the new urlTemplate and subdomains on the torque provider', function () {
+      this.view.model.set('tileURLTemplates', [ 'http://example.com/{z}/{x}/{y}.torque' ]);
+      expect(this.nativeTorqueLayer.provider.templateUrl).toEqual('http://example.com/{z}/{x}/{y}.torque');
+      expect(this.nativeTorqueLayer.provider.subdomains).toEqual([ '0', '1', '2' ]);
+    });
+  });
 };
diff --git a/test/spec/vis/model-updater.spec.js b/test/spec/vis/model-updater.spec.js
new file mode 100644
index 0000000000..fff2419d34
--- /dev/null
+++ b/test/spec/vis/model-updater.spec.js
@@ -0,0 +1,722 @@
+var _ = require('underscore');
+var VisModel = require('../../../src/vis/vis');
+var MapModel = require('../../../src/geo/map');
+var CartoDBLayer = require('../../../src/geo/map/cartodb-layer');
+var TorqueLayer = require('../../../src/geo/map/torque-layer');
+var LayersCollection = require('../../../src/geo/map/layers');
+var Backbone = require('backbone');
+var ModelUpdater = require('../../../src/windshaft-integration/model-updater');
+var WindshaftError = require('../../../src/windshaft/error');
+var CartoDBLayerGroup = require('../../../src/geo/cartodb-layer-group');
+var WindshaftMap = require('../../../src/windshaft/map-base.js');
+
+var MyWindshaftMap = WindshaftMap.extend({
+});
+
+describe('src/vis/model-updater', function () {
+  beforeEach(function () {
+    this.fakeVis = jasmine.createSpyObj('vis', ['reload']);
+
+    this.windshaftMap = new MyWindshaftMap({
+      urlTemplate: 'http://{user}.carto.com:80',
+      userName: 'documentation'
+    }, {
+      client: {},
+      layersCollection: {},
+      dataviewsCollection: {},
+      analysisCollection: {},
+      modelUpdater: {},
+      windshaftSettings: {
+        urlTemplate: 'http://{user}.cartodb.com:80',
+        userName: 'rambo'
+      }
+    });
+
+    spyOn(this.windshaftMap, 'getBaseURL').and.callFake(function (subdomain) {
+      return 'http://' + (subdomain ? subdomain + '.' : '') + 'documentation.carto.com';
+    });
+    spyOn(this.windshaftMap, 'getLayerIndexesByType').and.returnValue([0]);
+    spyOn(this.windshaftMap, 'getSupportedSubdomains').and.returnValue(['']);
+
+    this.visModel = new VisModel();
+    spyOn(this.visModel, 'setOk');
+    spyOn(this.visModel, 'setError');
+    this.layersCollection = new LayersCollection();
+    this.mapModel = new MapModel(null, {
+      layersFactory: {},
+      layersCollection: this.LayersCollection
+    });
+
+    this.layerGroupModel = new CartoDBLayerGroup({}, {
+      layersCollection: this.layersCollection
+    });
+    this.analysisCollection = new Backbone.Collection();
+    this.dataviewsCollection = new Backbone.Collection();
+
+    this.modelUpdater = new ModelUpdater({
+      mapModel: this.mapModel,
+      visModel: this.visModel,
+      layerGroupModel: this.layerGroupModel,
+      layersCollection: this.layersCollection,
+      dataviewsCollection: this.dataviewsCollection,
+      analysisCollection: this.analysisCollection
+    });
+
+    // _getProtocol uses window.location.protocol internally, and that returns "file:"
+    // when running the test suite using the jasmine test runner, so we need to fake it
+    spyOn(this.modelUpdater, '_getProtocol').and.returnValue('http');
+  });
+
+  describe('.updateModels', function () {
+    beforeEach(function () {
+      this.windshaftMap.getBaseURL.and.returnValue('http://{s}.documentation.carto.com/api/v1/map/90e64f1b9145961af7ba36d71b887dd2:0');
+    });
+
+    it('should set vis state to ok', function () {
+      this.modelUpdater.updateModels(this.windshaftMap);
+      expect(this.visModel.setOk).toHaveBeenCalled();
+    });
+
+    describe('layerGroupModel', function () {
+      beforeEach(function () {
+        var layer1 = new CartoDBLayer({}, { vis: this.visModel });
+        var layer2 = new CartoDBLayer({}, { vis: this.visModel });
+
+        this.layersCollection.reset([ layer1, layer2 ]);
+
+        this.windshaftMap.getLayerIndexesByType.and.callFake(function (layerType) {
+          if (layerType === 'mapnik') {
+            return ([1, 2]);
+          }
+        });
+      });
+
+      it('should set indexOfLayersInWindshaft', function () {
+        this.modelUpdater.updateModels(this.windshaftMap);
+        expect(this.layerGroupModel.get('indexOfLayersInWindshaft')).toEqual([1, 2]);
+      });
+
+      var testCases = [{
+        name: 'with subdomains',
+        baseURL: 'http://{s}.documentation.carto.com/api/v1/map/90e64f1b9145961af7ba36d71b887dd2:0',
+        supportedSubdomains: ['0', '1', '2', '3'],
+        expectedTileURLTemplate: 'http://{s}.documentation.carto.com/api/v1/map/90e64f1b9145961af7ba36d71b887dd2:0/1,2/{z}/{x}/{y}.png',
+        expectedGridURLTemplatesWithSubdomains: {
+          0: [
+            'http://0.documentation.carto.com/api/v1/map/90e64f1b9145961af7ba36d71b887dd2:0/1/{z}/{x}/{y}.grid.json',
+            'http://1.documentation.carto.com/api/v1/map/90e64f1b9145961af7ba36d71b887dd2:0/1/{z}/{x}/{y}.grid.json',
+            'http://2.documentation.carto.com/api/v1/map/90e64f1b9145961af7ba36d71b887dd2:0/1/{z}/{x}/{y}.grid.json',
+            'http://3.documentation.carto.com/api/v1/map/90e64f1b9145961af7ba36d71b887dd2:0/1/{z}/{x}/{y}.grid.json'
+          ],
+          1: [
+            'http://0.documentation.carto.com/api/v1/map/90e64f1b9145961af7ba36d71b887dd2:0/2/{z}/{x}/{y}.grid.json',
+            'http://1.documentation.carto.com/api/v1/map/90e64f1b9145961af7ba36d71b887dd2:0/2/{z}/{x}/{y}.grid.json',
+            'http://2.documentation.carto.com/api/v1/map/90e64f1b9145961af7ba36d71b887dd2:0/2/{z}/{x}/{y}.grid.json',
+            'http://3.documentation.carto.com/api/v1/map/90e64f1b9145961af7ba36d71b887dd2:0/2/{z}/{x}/{y}.grid.json'
+          ]
+        },
+        expectedAttributesBaseURL: {
+          0: /http:\/\/[0-3]\.documentation\.carto\.com\/api\/v1\/map\/90e64f1b9145961af7ba36d71b887dd2:0\/1\/attributes/,
+          1: /http:\/\/[0-3]\.documentation\.carto\.com\/api\/v1\/map\/90e64f1b9145961af7ba36d71b887dd2:0\/2\/attributes/
+        }
+      }, {
+        name: 'with no subdomains',
+        baseURL: 'http://documentation.carto.com/api/v1/map/90e64f1b9145961af7ba36d71b887dd2:0',
+        supportedSubdomains: [],
+        expectedTileURLTemplate: 'http://documentation.carto.com/api/v1/map/90e64f1b9145961af7ba36d71b887dd2:0/1,2/{z}/{x}/{y}.png',
+        expectedGridURLTemplatesWithSubdomains: {
+          0: [
+            'http://documentation.carto.com/api/v1/map/90e64f1b9145961af7ba36d71b887dd2:0/1/{z}/{x}/{y}.grid.json'
+          ],
+          1: [
+            'http://documentation.carto.com/api/v1/map/90e64f1b9145961af7ba36d71b887dd2:0/2/{z}/{x}/{y}.grid.json'
+          ]
+        },
+        expectedAttributesBaseURL: {
+          0: /http:\/\/documentation\.carto\.com\/api\/v1\/map\/90e64f1b9145961af7ba36d71b887dd2:0\/1\/attributes/,
+          1: /http:\/\/documentation\.carto\.com\/api\/v1\/map\/90e64f1b9145961af7ba36d71b887dd2:0\/2\/attributes/
+        }
+      }];
+
+      _.each(testCases, function (testCase) {
+        describe(testCase.name, function () {
+          beforeEach(function () {
+            this.windshaftMap.getBaseURL.and.returnValue(testCase.baseURL);
+            this.windshaftMap.getSupportedSubdomains.and.returnValue(testCase.supportedSubdomains);
+            this.modelUpdater.updateModels(this.windshaftMap);
+          });
+
+          describe('tile urls', function () {
+            it('should generate tile URLs', function () {
+              expect(this.layerGroupModel.getTileURLTemplate()).toEqual(testCase.expectedTileURLTemplate);
+            });
+          });
+
+          describe('grid urls', function () {
+            it('should generate grid URLs', function () {
+              expect(this.layerGroupModel.getGridURLTemplatesWithSubdomains(0)).toEqual(testCase.expectedGridURLTemplatesWithSubdomains[0]);
+              expect(this.layerGroupModel.getGridURLTemplatesWithSubdomains(1)).toEqual(testCase.expectedGridURLTemplatesWithSubdomains[1]);
+            });
+          });
+
+          describe('attribute urls', function () {
+            it('should generate attribute URLs', function () {
+              expect(this.layerGroupModel.getAttributesBaseURL(0)).toMatch(testCase.expectedAttributesBaseURL[0]);
+              expect(this.layerGroupModel.getAttributesBaseURL(1)).toMatch(testCase.expectedAttributesBaseURL[1]);
+            });
+          });
+        });
+      });
+    });
+
+    describe('layer models', function () {
+      it('should mark CartoDB and torque layer models as ok', function () {
+        var layer0 = new Backbone.Model({ type: 'Tiled' });
+        var layer1 = new CartoDBLayer({}, { vis: this.visModel });
+        spyOn(layer1, 'setOk');
+        var layer2 = new TorqueLayer({}, { vis: this.visModel });
+        spyOn(layer2, 'setOk');
+        this.layersCollection.reset([ layer0, layer1, layer2 ]);
+
+        this.modelUpdater.updateModels(this.windshaftMap);
+
+        expect(layer1.setOk).toHaveBeenCalled();
+        expect(layer2.setOk).toHaveBeenCalled();
+      });
+
+      it('should set tileURLTemplates attribute of torque layer models', function () {
+        var layer0 = new Backbone.Model({ type: 'Tiled' });
+        var layer1 = new CartoDBLayer({}, { vis: this.visModel });
+        var layer2 = new TorqueLayer({}, { vis: this.visModel });
+        this.layersCollection.reset([ layer0, layer1, layer2 ]);
+
+        this.modelUpdater.updateModels(this.windshaftMap);
+
+        expect(layer2.get('tileURLTemplates')).toEqual([
+          'http://{s}.documentation.carto.com/api/v1/map/90e64f1b9145961af7ba36d71b887dd2:0/0/{z}/{x}/{y}.json.torque'
+        ]);
+      });
+    });
+
+    describe('legend models', function () {
+      it('should "mark" all legend models as success', function () {
+        var layer = new CartoDBLayer({}, { vis: this.visModel });
+        this.layersCollection.reset([ layer ]);
+
+        this.modelUpdater.updateModels(this.windshaftMap, 'sourceId', 'forceFetch');
+
+        expect(layer.legends.choropleth.isSuccess()).toBeTruthy();
+        expect(layer.legends.bubble.isSuccess()).toBeTruthy();
+        expect(layer.legends.category.isSuccess()).toBeTruthy();
+      });
+
+      it('should update model for choropleth legends', function () {
+        this.windshaftMap.set('metadata', {
+          layers: [
+            {
+              type: 'mapnik',
+              id: '923b7812-2d56-41c6-ac15-3ce430db090f',
+              meta: {
+                stats: [],
+                cartocss: 'cartocss',
+                'cartocss_meta': {
+                  rules: [
+                    {
+                      'selector': '#layer',
+                      'prop': 'polygon-fill',
+                      'mapping': '>',
+                      'buckets': [
+                        {
+                          'filter': {
+                            'type': 'range',
+                            'start': 0,
+                            'end': 1000
+                          },
+                          'value': '#AAAAAA'
+                        },
+                        {
+                          'filter': {
+                            'type': 'range',
+                            'start': 1000,
+                            'end': 2000
+                          },
+                          'value': '#BBBBBB'
+                        },
+                        {
+                          'filter': {
+                            'type': 'range',
+                            'start': 2000,
+                            'end': 3000
+                          },
+                          'value': '#CCCCCC'
+                        }
+                      ],
+                      'stats': {
+                        'filter_avg': 1975
+                      }
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        });
+
+        var layer = new CartoDBLayer({}, { vis: this.visModel });
+
+        this.layersCollection.reset([ layer ]);
+
+        this.modelUpdater.updateModels(this.windshaftMap, 'sourceId', 'forceFetch');
+
+        expect(layer.legends.choropleth.get('colors')).toEqual([
+          { label: '0', value: '#AAAAAA' },
+          { label: '', value: '#BBBBBB' },
+          { label: '3000', value: '#CCCCCC' }
+        ]);
+        expect(layer.legends.choropleth.isSuccess()).toBeTruthy();
+      });
+
+      it('should update model for category legends', function () {
+        this.windshaftMap.set('metadata', {
+          layers: [
+            {
+              'type': 'mapnik',
+              'id': '923b7812-2d56-41c6-ac15-b090f3ce430d',
+              'meta': {
+                'stats': [],
+                'cartocss': 'cartocss',
+                'cartocss_meta': {
+                  'rules': [
+                    {
+                      'selector': '#layer',
+                      'prop': 'marker-fill',
+                      'mapping': '=',
+                      'buckets': [
+                        {
+                          'filter': {
+                            'type': 'category',
+                            'name': 'Category 1'
+                          },
+                          'value': '#AAAAAA'
+                        },
+                        {
+                          'filter': {
+                            'type': 'category',
+                            'name': 'Category 2'
+                          },
+                          'value': '#BBBBBB'
+                        },
+                        {
+                          'filter': {
+                            'type': 'default'
+                          },
+                          'value': '#CCCCCC'
+                        }
+                      ],
+                      'stats': {
+                        'filter_avg': 3500
+                      }
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        });
+
+        var layer = new CartoDBLayer({}, { vis: this.visModel });
+
+        this.layersCollection.reset([ layer ]);
+
+        this.modelUpdater.updateModels(this.windshaftMap, 'sourceId', 'forceFetch');
+
+        expect(layer.legends.category.get('categories')).toEqual([
+          { label: 'Category 1', value: '#AAAAAA' },
+          { label: 'Category 2', value: '#BBBBBB' }
+        ]);
+        expect(layer.legends.choropleth.isSuccess()).toBeTruthy();
+      });
+
+      it('should update model for bubble legends', function () {
+        this.windshaftMap.set('metadata', {
+          layers: [
+            {
+              'type': 'mapnik',
+              'id': '923b7812-2d56-41c6-ac15-b090f3ce430d',
+              'meta': {
+                'stats': [],
+                'cartocss': 'cartocss',
+                'cartocss_meta': {
+                  'rules': [
+                    {
+                      'selector': '#layer',
+                      'prop': 'marker-width',
+                      'mapping': '>',
+                      'buckets': [
+                        {
+                          'filter': {
+                            'type': 'range',
+                            'start': 10,
+                            'end': 1000
+                          },
+                          'value': 10
+                        },
+                        {
+                          'filter': {
+                            'type': 'range',
+                            'start': 1000,
+                            'end': 2000
+                          },
+                          'value': 14
+                        },
+                        {
+                          'filter': {
+                            'type': 'range',
+                            'start': 2000,
+                            'end': 3000
+                          },
+                          'value': 20
+                        },
+                        {
+                          'filter': {
+                            'type': 'range',
+                            'start': 3000,
+                            'end': 4000
+                          },
+                          'value': 26
+                        },
+                        {
+                          'filter': {
+                            'type': 'range',
+                            'start': 4000,
+                            'end': 5000
+                          },
+                          'value': 32
+                        }
+                      ],
+                      'stats': {
+                        'filter_avg': 3500
+                      }
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        });
+
+        var layer = new CartoDBLayer({}, { vis: this.visModel });
+
+        this.layersCollection.reset([ layer ]);
+
+        this.modelUpdater.updateModels(this.windshaftMap, 'sourceId', 'forceFetch');
+
+        expect(layer.legends.bubble.get('values')).toEqual([
+          10, 1000, 2000, 3000, 4000, 5000
+        ]);
+        expect(layer.legends.bubble.get('sizes')).toEqual([
+          10, 14, 20, 26, 32
+        ]);
+        expect(layer.legends.bubble.get('avg')).toEqual(3500);
+        expect(layer.legends.bubble.isSuccess()).toBeTruthy();
+      });
+
+      it('should set legend state to "error" if adapter fails to generate attrs from rule', function () {
+        this.windshaftMap.set('metadata', {
+          layers: [
+            {
+              'type': 'mapnik',
+              'id': '923b7812-2d56-41c6-ac15-b090f3ce430d',
+              'meta': {
+                'stats': [],
+                'cartocss': 'cartocss',
+                'cartocss_meta': {
+                  'rules': [
+                    {
+                      'prop': 'marker-width',
+                      'mapping': '>'
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        });
+
+        var layer = new CartoDBLayer({}, { vis: this.visModel });
+
+        this.layersCollection.reset([ layer ]);
+
+        this.modelUpdater.updateModels(this.windshaftMap, 'sourceId', 'forceFetch');
+
+        expect(layer.legends.bubble.isError()).toBeTruthy();
+      });
+    });
+
+    describe('dataview models', function () {
+      it('should update dataview models', function () {
+        var dataview1 = new Backbone.Model({ id: 'a1' });
+        var dataview2 = new Backbone.Model({ id: 'a2' });
+        this.dataviewsCollection.reset([ dataview1, dataview2 ]);
+
+        this.windshaftMap.getDataviewMetadata = function (dataviewId) {
+          if (dataviewId === 'a1') {
+            return {
+              url: {
+                http: 'http://example1.com',
+                https: 'https://example1.com'
+              }
+            };
+          }
+          if (dataviewId === 'a2') {
+            return {
+              url: {
+                http: 'http://example2.com',
+                https: 'https://example2.com'
+              }
+            };
+          }
+        };
+
+        spyOn(dataview1, 'set').and.callThrough();
+
+        this.modelUpdater.updateModels(this.windshaftMap, 'sourceId', 'forceFetch');
+
+        expect(dataview1.set).toHaveBeenCalledWith({
+          url: 'http://example1.com'
+        }, {
+          sourceId: 'sourceId',
+          forceFetch: 'forceFetch'
+        });
+
+        expect(dataview1.get('url')).toEqual('http://example1.com');
+        expect(dataview2.get('url')).toEqual('http://example2.com');
+      });
+    });
+
+    describe('analysis models', function () {
+      it('should update analysis models and set analysis state to "ok"', function () {
+        var getParamNames = function () { return []; };
+        var analysis1 = new Backbone.Model({ id: 'a1' });
+        analysis1.setOk = jasmine.createSpy('setOk');
+        var analysis2 = new Backbone.Model({ id: 'a2' });
+        analysis2.setOk = jasmine.createSpy('setOk');
+        this.analysisCollection.reset([ analysis1, analysis2 ]);
+        analysis1.getParamNames = analysis2.getParamNames = getParamNames;
+
+        this.windshaftMap.getAnalysisNodeMetadata = function (analysisId) {
+          if (analysisId === 'a1') {
+            return {
+              status: 'status_a1',
+              query: 'query_a1',
+              url: {
+                http: 'url_a1'
+              }
+            };
+          }
+          if (analysisId === 'a2') {
+            return {
+              status: 'status_a2',
+              query: 'query_a2',
+              url: {
+                http: 'url_a2'
+              }
+            };
+          }
+        };
+
+        this.modelUpdater.updateModels(this.windshaftMap);
+
+        expect(analysis1.get('status')).toEqual('status_a1');
+        expect(analysis1.get('query')).toEqual('query_a1');
+        expect(analysis1.get('url')).toEqual('url_a1');
+        expect(analysis1.setOk).toHaveBeenCalled();
+        expect(analysis2.get('status')).toEqual('status_a2');
+        expect(analysis2.get('query')).toEqual('query_a2');
+        expect(analysis2.get('url')).toEqual('url_a2');
+        expect(analysis2.setOk).toHaveBeenCalled();
+      });
+
+      it('should update analysis models and set status to "failed"', function () {
+        var getParamNames = function () { return []; };
+        var analysis1 = new Backbone.Model({ id: 'a1' });
+        this.analysisCollection.reset([ analysis1 ]);
+        analysis1.getParamNames = getParamNames;
+
+        this.windshaftMap.getAnalysisNodeMetadata = function (analysisId) {
+          if (analysisId === 'a1') {
+            return {
+              error_message: 'wadus',
+              status: 'failed',
+              query: 'query_a1',
+              url: {
+                http: 'url_a1'
+              }
+            };
+          }
+        };
+
+        this.modelUpdater.updateModels(this.windshaftMap);
+
+        expect(analysis1.get('status')).toEqual('failed');
+        expect(analysis1.get('error')).toEqual({message: 'wadus'});
+      });
+
+      it('should not update attributes that are original params (eg: query)', function () {
+        var analysis1 = new Backbone.Model({ id: 'a1', query: 'original_query' });
+        analysis1.getParamNames = function () { return ['query']; };
+        analysis1.setOk = jasmine.createSpy('setOk');
+        this.analysisCollection.reset([ analysis1 ]);
+
+        this.windshaftMap.getAnalysisNodeMetadata = function (analysisId) {
+          if (analysisId === 'a1') {
+            return {
+              status: 'new_status',
+              query: 'new_query',
+              url: {
+                http: 'new_url'
+              }
+            };
+          }
+        };
+
+        this.modelUpdater.updateModels(this.windshaftMap);
+
+        expect(analysis1.get('status')).toEqual('new_status');
+        expect(analysis1.get('query')).toEqual('original_query');
+        expect(analysis1.get('url')).toEqual('new_url');
+      });
+    });
+  });
+
+  describe('.setErrors', function () {
+    it('should set vis state to error', function () {
+      this.modelUpdater.setErrors([
+        new WindshaftError({
+          type: 'unknown',
+          message: 'something went wrong!'
+        })
+      ]);
+
+      expect(this.visModel.setError).toHaveBeenCalled();
+      var error = this.visModel.setError.calls.argsFor(0)[0];
+
+      expect(error.type).toBeUndefined();
+      expect(error.message).toEqual('something went wrong!');
+      expect(error.context).toBeUndefined();
+    });
+
+    it('should set analysis status to "error"', function () {
+      var analysis = new Backbone.Model({
+        id: 'ANALYSIS_NODE_ID'
+      });
+      analysis.setError = jasmine.createSpy('setError');
+
+      this.analysisCollection.reset([ analysis ]);
+
+      this.modelUpdater.setErrors([
+        new WindshaftError({
+          type: 'analysis',
+          message: 'Missing required param "radius"',
+          analysis: {
+            id: 'ANALYSIS_ID',
+            node_id: 'ANALYSIS_NODE_ID',
+            context: {
+              something: 'else'
+            }
+          }
+        })
+      ]);
+
+      expect(analysis.setError).toHaveBeenCalled();
+      var error = analysis.setError.calls.argsFor(0)[0];
+
+      expect(error.type).toBeUndefined();
+      expect(error.analysisId).toEqual('ANALYSIS_NODE_ID');
+      expect(error.message).toEqual('Missing required param "radius"');
+      expect(error.context).toEqual({
+        something: 'else'
+      });
+    });
+
+    it('should "mark" layer as erroroneus', function () {
+      var layer = new Backbone.Model({
+        id: 'LAYER_ID'
+      });
+      layer.setError = jasmine.createSpy('setError');
+
+      this.layersCollection.reset([ layer ]);
+
+      this.modelUpdater.setErrors([
+        new WindshaftError({
+          type: 'layer',
+          subtype: 'turbo-carto',
+          message: 'turbo-carto: something went wrong',
+          layer: {
+            index: 0,
+            id: 'LAYER_ID',
+            type: 'cartodb',
+            context: {
+              selector: '#layer',
+              source: {
+                start: {
+                  line: 1,
+                  column: 10
+                },
+                end: {
+                  line: 1,
+                  column: 61
+                }
+              }
+            }
+          }
+        })
+      ]);
+
+      expect(layer.setError).toHaveBeenCalled();
+      var error = layer.setError.calls.argsFor(0)[0];
+
+      expect(error.type).toEqual('turbo-carto');
+      expect(error.layerId).toEqual('LAYER_ID');
+      expect(error.message).toEqual('turbo-carto: something went wrong');
+      expect(error.context).toEqual({
+        selector: '#layer',
+        source: {
+          start: {
+            line: 1,
+            column: 10
+          },
+          end: {
+            line: 1,
+            column: 61
+          }
+        }
+      });
+    });
+
+    it('should "mark" legend models as erroroneus', function () {
+      var layer1 = new CartoDBLayer({}, { vis: this.visModel });
+      var layer2 = new CartoDBLayer({}, { vis: this.visModel });
+
+      expect(layer1.legends.bubble.isError()).toBeFalsy();
+      expect(layer1.legends.category.isError()).toBeFalsy();
+      expect(layer1.legends.choropleth.isError()).toBeFalsy();
+
+      expect(layer2.legends.bubble.isError()).toBeFalsy();
+      expect(layer2.legends.category.isError()).toBeFalsy();
+      expect(layer2.legends.choropleth.isError()).toBeFalsy();
+
+      this.layersCollection.reset([ layer1, layer2 ]);
+
+      this.modelUpdater.setErrors();
+
+      expect(layer1.legends.bubble.isError()).toBeTruthy();
+      expect(layer1.legends.category.isError()).toBeTruthy();
+      expect(layer1.legends.choropleth.isError()).toBeTruthy();
+
+      expect(layer2.legends.bubble.isError()).toBeTruthy();
+      expect(layer2.legends.category.isError()).toBeTruthy();
+      expect(layer2.legends.choropleth.isError()).toBeTruthy();
+    });
+  });
+});
diff --git a/test/spec/vis/vis-view.spec.js b/test/spec/vis/vis-view.spec.js
index fa00dbf943..e79388d99a 100644
--- a/test/spec/vis/vis-view.spec.js
+++ b/test/spec/vis/vis-view.spec.js
@@ -21,6 +21,17 @@ VisView = VisView.extend({
   }
 });
 
+var createVisView = function (container, visModel, settingsModel) {
+  var options = {
+    el: container,
+    widgets: new Backbone.Collection(),
+    model: visModel,
+    settingsModel: settingsModel
+  };
+
+  return new VisView(options);
+};
+
 describe('vis/vis-view', function () {
   beforeEach(function () {
     this.container = $('<div>').css('height', '200px');
@@ -52,17 +63,7 @@ describe('vis/vis-view', function () {
       showLayerSelector: true
     });
 
-    this.createNewVis = function (attrs) {
-      attrs.widgets = new Backbone.Collection();
-      attrs.model = this.visModel;
-      attrs.settingsModel = this.settingsModel;
-      this.visView = new VisView(attrs);
-      return this.visView;
-    };
-
-    this.createNewVis({
-      el: this.container
-    });
+    this.visView = createVisView(this.container, this.visModel, this.settingsModel);
 
     this.visModel.load(new VizJSON(this.mapConfig));
     this.visView.render();
@@ -75,78 +76,64 @@ describe('vis/vis-view', function () {
   describe('map provider', function () {
     beforeEach(function () {
       this.fakeMapViewFactory = this.visView._getMapViewFactory();
-      this.fakeMapViewFactory.createMapView.calls.reset();
-
-      this.visView.render();
     });
 
     it('should have created a LeafletMap by default', function () {
       expect(this.fakeMapViewFactory.createMapView.calls.mostRecent().args[0]).toEqual('leaflet');
     });
 
-    it('should create a gmaps when provider changes to leaflet', function () {
-      this.visModel.map.set('provider', 'something');
-      this.visModel.map.set('provider', 'leaflet');
-
-      this.visView.render();
-
-      expect(this.fakeMapViewFactory.createMapView.calls.mostRecent().args[0]).toEqual('leaflet');
-    });
-
-    it('should create a google maps map when provider is googlemaps', function () {
-      this.visModel.map.set('provider', 'something', { silent: true });
+    it('should create a re-create the map view using a new provider when it changes', function () {
       this.visModel.map.set('provider', 'googlemaps');
-
-      this.visView.render();
-
       expect(this.fakeMapViewFactory.createMapView.calls.mostRecent().args[0]).toEqual('googlemaps');
+
+      this.visModel.map.set('provider', 'leaflet');
+      expect(this.fakeMapViewFactory.createMapView.calls.mostRecent().args[0]).toEqual('leaflet');
     });
   });
 
-  it('should bind resize changes when map height is 0', function () {
+  var INVALIDATE_SIZE_WAIT_IN_MS = 160;
+
+  it('should center map to origin once when map height is 0 initially and window is resized', function () {
     jasmine.clock().install();
     spyOn(this.visModel, 'invalidateSize');
 
     var container = $('<div>').css('height', '0');
-    var vis = this.createNewVis({ el: container });
-    spyOn(vis, '_onResize').and.callThrough();
-
-    this.visModel.load(new VizJSON(this.mapConfig));
+    this.visView = createVisView(container, this.visModel, this.settingsModel);
 
-    // Wait until view has been rendered after load
-    jasmine.clock().tick(10);
+    this.visView.render();
 
+    // First time the window is resized -> map is centered to origin
     $(window).trigger('resize');
 
-    expect(vis._onResize).toHaveBeenCalled();
-    vis._onResize.calls.reset();
-
-    jasmine.clock().tick(160);
+    jasmine.clock().tick(INVALIDATE_SIZE_WAIT_IN_MS);
 
     expect(this.visModel.invalidateSize).toHaveBeenCalled();
 
+    this.visModel.invalidateSize.calls.reset();
+
+    // Second time the window is resized -> map is NOT centered to origin
+
     $(window).trigger('resize');
-    expect(vis._onResize).not.toHaveBeenCalled();
+
+    jasmine.clock().tick(INVALIDATE_SIZE_WAIT_IN_MS);
+
+    expect(this.visModel.invalidateSize).not.toHaveBeenCalled();
+    jasmine.clock().uninstall();
   });
 
-  it('should NOT bind resize changes when map height is greater than 0', function () {
+  it('should NOT center map to origin when map height is greated than O initially and window is resized', function () {
     jasmine.clock().install();
     spyOn(this.visModel, 'invalidateSize');
 
-    var container = $('<div>').css('height', '200px');
-    var vis = this.createNewVis({el: container});
-    spyOn(vis, '_onResize').and.callThrough();
+    var container = $('<div>').css('height', '800px');
+    this.visView = createVisView(container, this.visModel, this.settingsModel);
 
-    this.visModel.load(new VizJSON(this.mapConfig));
-
-    // Wait until view has been rendered after load
-    jasmine.clock().tick(10);
+    this.visView.render();
 
+    // Window is resized by map is not centered since height hasn't changed
     $(window).trigger('resize');
 
-    expect(vis._onResize).not.toHaveBeenCalled();
-
-    jasmine.clock().tick(160);
+    jasmine.clock().tick(INVALIDATE_SIZE_WAIT_IN_MS);
 
     expect(this.visModel.invalidateSize).not.toHaveBeenCalled();
   });
diff --git a/test/spec/windshaft/anonymous-map.spec.js b/test/spec/windshaft/anonymous-map.spec.js
index 8a52a59fd3..dae907b8b4 100644
--- a/test/spec/windshaft/anonymous-map.spec.js
+++ b/test/spec/windshaft/anonymous-map.spec.js
@@ -94,6 +94,9 @@ describe('windshaft/anonymous-map', function () {
   describe('.toJSON', function () {
     it('should generate the payload to instantiate the map', function () {
       expect(this.map.toJSON()).toEqual({
+        'buffersize': {
+          'mvt': 0
+        },
         'layers': [
           {
             'id': 'layer1',
@@ -151,6 +154,9 @@ describe('windshaft/anonymous-map', function () {
       this.cartoDBLayer1.infowindow.fields.add({ name: 'something' });
 
       expect(this.map.toJSON()).toEqual({
+        'buffersize': {
+          'mvt': 0
+        },
         'layers': [
           {
             'id': 'layer1',
diff --git a/test/spec/windshaft/named-map.spec.js b/test/spec/windshaft/named-map.spec.js
index 54f886cb98..ed03227c00 100644
--- a/test/spec/windshaft/named-map.spec.js
+++ b/test/spec/windshaft/named-map.spec.js
@@ -70,13 +70,13 @@ describe('windshaft/named-map', function () {
 
   describe('.toJSON', function () {
     it('should generate the payload to instantiate the map', function () {
-      expect(this.map.toJSON()).toEqual({ styles: { 0: 'cartoCSS1', 1: 'cartoCSS2', 2: 'cartoCSS3' } });
+      expect(this.map.toJSON()).toEqual({ buffersize: {mvt: 0}, styles: { 0: 'cartoCSS1', 1: 'cartoCSS2', 2: 'cartoCSS3' } });
     });
 
     it('should mark hidden layers as hidden', function () {
       this.cartoDBLayer1.set('visible', false, { silent: true });
       this.cartoDBLayer3.set('visible', false, { silent: true });
-      expect(this.map.toJSON()).toEqual({ styles: { 0: 'cartoCSS1', 1: 'cartoCSS2', 2: 'cartoCSS3' } });
+      expect(this.map.toJSON()).toEqual({ buffersize: {mvt: 0}, styles: { 0: 'cartoCSS1', 1: 'cartoCSS2', 2: 'cartoCSS3' } });
     });
 
     it('should send styles using the right indexes', function () {