Merge branch 'develop' of github.com:CartoDB/cartodb.js into develop

doc/API.md

@@ -303,6 +303,8 @@ Promise object. You can listen for the following events:
   + **done**: triggered when the layer is created, the layer is passed as first argument. Each layer type has different options, see layers section.
   + **error**: triggered when the layer couldn't be created. The error string is the first argument.
 
+You can call to addTo(map[, position]) in the promise so when the layer is ready it will be added to the map. 
+
 
 ###### EXAMPLE
 

examples/gmaps_multilayer.html

@@ -25,7 +25,8 @@
     <!-- include google maps library *before* load cartodb.js -->
     <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
     <!-- include cartodb.js library -->
-    <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
+    <!--<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>-->
+    <script src="../src/cartodb.js"></script>
 
     <script>
 
@@ -50,11 +51,11 @@
                sql: 'select * from country_boundaries',
                cartocss: '#layer { polygon-fill: #F00; polygon-opacity: 0.3; line-color: #F00; }'
             }]
-          }).done(function(layer) {
+          })
+          .addTo(map)
+          .done(function(layer) {
             var population;
 
-            map.overlayMapTypes.setAt(0, layer);
-
             // wait a little bit and add the most populated places
             setTimeout(function() {
               population = layer.createSubLayer({
@@ -89,7 +90,10 @@
 
       }
 
-      window.onload = main;
+      window.onload = function() {
+        cdb.load("../src/", main);
+      }
+
 
     </script>
   </body>

examples/leaflet_multilayer.html

@@ -23,7 +23,7 @@
     <div id="map"></div>
 
     <!-- include cartodb.js library -->
-    <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
+    <script src="../src/cartodb.js"></script>
     <script>
 
       function main() {
@@ -48,9 +48,10 @@
              sql: 'select * from country_boundaries',
              cartocss: '#layer { polygon-fill: #F00; polygon-opacity: 0.3; line-color: #F00; }'
           }]
-        }).done(function(layer) {
+        })
+        .addTo(map)
+        .done(function(layer) {
           var population;
-          map.addLayer(layer);
 
           // wait a little bit and add the most populated places
           setTimeout(function() {
@@ -80,10 +81,9 @@
           setTimeout(function() {
             layer.getSubLayer(0).remove();
           }, 10000);
-
-
         });
 
+
       }
 
       // you could use $(window).load(main);

src/api/layers.js

@@ -78,9 +78,16 @@
       callback = fn;
     }
 
+    promise.addTo = function(map, position) {
+      promise.on('done', function() {
+        MapType.addLayerToMap(layerView, map, position);
+      });
+      return promise;
+    };
+
     _getLayerJson(layer, function(visData) {
 
-      var layerData, MapType;
+      var layerData;
 
       if(!visData) {
         promise.trigger('error');
@@ -101,17 +108,6 @@
         return;
       }
 
-      // check map type
-      // TODO: improve checking
-      if(typeof(map.overlayMapTypes) !== "undefined") {
-        MapType = cdb.geo.GoogleMapsMapView;
-        // check if leaflet is loaded globally
-      } else if(map instanceof L.Map || (window.L && map instanceof window.L.Map)) {
-        MapType = cdb.geo.LeafletMapView;
-      } else {
-        promise.trigger('error', "cartodb.js can't guess the map type");
-        return;
-      }
 
       // update options
       if(options && !_.isFunction(options)) {
@@ -124,6 +120,18 @@
         https: false
       })
 
+      // check map type
+      // TODO: improve checking
+      if(typeof(map.overlayMapTypes) !== "undefined") {
+        MapType = cdb.geo.GoogleMapsMapView;
+        // check if leaflet is loaded globally
+      } else if(map instanceof L.Map || (window.L && map instanceof window.L.Map)) {
+        MapType = cdb.geo.LeafletMapView;
+      } else {
+        promise.trigger('error', "cartodb.js can't guess the map type");
+        return promise;
+      }
+
       // create a dummy viz
       var viz = map.viz;
       if(!viz) {

src/geo/gmaps/gmaps.js

@@ -186,6 +186,7 @@ if(typeof(google) != "undefined" && typeof(google.maps) != "undefined") {
 
     },
 
+
     latLonToPixel: function(latlon) {
       return this.projector.latLngToPixel(new google.maps.LatLng(latlon[0], latlon[1]));
     },
@@ -275,6 +276,11 @@ if(typeof(google) != "undefined" && typeof(google.maps) != "undefined") {
 
   }, {
 
+    addLayerToMap: function(layer, map, pos) {
+      pos = pos || 0;
+      map.overlayMapTypes.setAt(pos, layer);
+    },
+
     /**
     * create the view for the geometry model
     */

src/geo/layer_definition.js

@@ -19,6 +19,8 @@ function LayerDefinition(layerDefinition, options) {
   this._timeout = -1;
   this._queue = [];
   this._waiting = false;
+  this.lastTimeUpdated = null;
+  this._refreshTimer = -1;
 }
 
 /**
@@ -167,7 +169,17 @@ LayerDefinition.prototype = {
   },
 
   _requestFinished: function() {
+    var self = this;
     this._waiting = false;
+    this.lastTimeUpdated = new Date().getTime();
+
+    // refresh layer when invalidation time has passed
+    clearTimeout(this._refreshTimer);
+    this._refreshTimer = setTimeout(function() {
+      self.invalidate();
+    }, this.options.refreshTime || (60*5*1000));
+
+    // check request queue
     if(this._queue.length) {
       this._getLayerToken(this._queue.pop());
     }
@@ -239,6 +251,7 @@ LayerDefinition.prototype = {
     var self = this;
     var params = [];
     callback = callback || function() {};
+
     // if the previous request didn't finish, queue it
     if(this._waiting) {
       this._queue.push(callback);

src/geo/leaflet/leaflet.js

@@ -297,8 +297,13 @@
       return layer_view;
     },
 
-    addLayerToMap: function(layer_view, map) {
+    addLayerToMap: function(layer_view, map, pos) {
       map.addLayer(layer_view.leafletLayer);
+      if(pos != undefined) {
+        if(v.setZIndex) {
+          v.setZIndex(pos);
+        }
+      }
     },
 
     /**

src/geo/ui/layer_selector.js

@@ -73,6 +73,11 @@ cdb.geo.ui.LayerSelector = cdb.core.View.extend({
           var m = new cdb.core.Model(l);
           m.set('order', i);
           m.set('type', 'layergroup');
+          if(self.options.layer_names) {
+            m.set('layer_name', self.options.layer_names[i]);
+          } else {
+            m.set('layer_name', l.options.layer_name);
+          }
           var layerView = self._createLayer('LayerViewFromLayerGroup', { model: m, layer_definition: layer_definition });
           layerView.bind('switchChanged', self._setCount, self);
           layerView.bind('layergroupChanged', self._setLayerGroup, self)
@@ -220,7 +225,7 @@ cdb.geo.ui.LayerViewFromLayerGroup = cdb.geo.ui.LayerView.extend({
 
   defaults: {
     template: '\
-      <a class="layer" href="#/change-layer"><%= options.layer_name %></a>\
+      <a class="layer" href="#/change-layer"><%= layer_name %></a>\
       <a href="#switch" class="right <%= visible ? "enabled" : "enabled" %> switch"><span class="handle"></span></a>\
     '
   },
@@ -231,4 +236,4 @@ cdb.geo.ui.LayerViewFromLayerGroup = cdb.geo.ui.LayerView.extend({
 
     this.trigger('layergroupChanged', this.options.layer_definition);
   }
-});
+});

src/vis/overlays.js

@@ -125,7 +125,8 @@ cdb.vis.Overlay.register('layer_selector', function(data, vis) {
   var layerSelector = new cdb.geo.ui.LayerSelector({
     mapView: vis.mapView,
     template: template,
-    dropdown_template: dropdown_template
+    dropdown_template: dropdown_template,
+    layer_names: data.layer_names
   });
 
 

test/spec/api/layers.spec.js

@@ -28,7 +28,7 @@ describe('api.layers', function() {
           err = true;
         });
       })
-      waits(10);
+      waits(100);
       runs(function() {
         expect(err).toEqual(true);
       });
@@ -259,6 +259,37 @@ describe('api.layers', function() {
 
       });
 
+      it("should have addTo", function() {
+        var layer;
+        runs(function() {
+          debugger;
+          cartodb.createLayer(map, {
+            type: 'cartodb',
+            sublayers: [{
+              sql: 'select * from table',
+              cartocss: 'test',
+              interactivity: 'testi'
+            }]
+          })
+          .addTo(map)
+          .done(function(lyr) {
+            layer = lyr;
+          });
+        });
+
+        waits(100);
+
+        runs(function() {
+          expect(layer).not.toEqual(undefined);
+          if(map.overlayMapTypes) {
+            expect(layer).toBe(map.overlayMapTypes.getAt(0));
+          } else {
+            expect(layer).toBe(map._layers[L.stamp(layer)]);
+          }
+        });
+
+      });
+
     //});
 
     });

test/spec/api/layers/cartodb.spec.js

@@ -154,6 +154,29 @@ describe('api.layers.cartodb', function() {
       });
     });
 
+    it("should add to the map when done", function() {
+      runs(function() {
+        cartodb.createLayer(map, { 
+            kind: 'cartodb', 
+            options: { 
+              table_name: 'test',
+              user_name: 'test',
+              tile_style: 'test'
+            },
+            infowindow: { 
+              template: '<div></div>',
+              fields: [{name: 'test', title: true, order: 0}] 
+            }
+        }, {
+          interactivity: 'myname,jaja',
+          interaction: false
+        }, function(l) {
+          addFn(map, l);
+          layer = l;
+        });
+      });
+    });
+
 
   };
 

test/spec/geo/layer_definition.spec.js

@@ -228,6 +228,22 @@ describe("LayerDefinition", function() {
     });
   });
 
+  it("should set refresh timer after being updated", function() {
+    layerDefinition.options.refreshTime = 10;
+    layerDefinition.options.ajax = function(p) { 
+      params = p;
+      p.success({ layergroupid: 'test' });
+    };
+    runs(function() {
+      layerDefinition.getTiles(function(tiles) {});
+    });
+    spyOn(layerDefinition,'invalidate');
+    waits(200);
+    runs(function() {
+      expect(layerDefinition.invalidate).toHaveBeenCalled();
+    });
+  });
+
   describe("sublayers", function() {
 
     it("should create sublayer", function() {