Merge pull request #568 from CartoDB/567-show-hide-named-maps

Show & hide support in named maps

HOWTO_RELEASE

@@ -1,5 +1,5 @@
 1. Test (make clean all check), fix if broken before proceeding
-2. Ensure proper version in package.json 
+2. Ensure proper version in package.json
 3. Ensure NEWS section exists for the new version, review it, add release date
 4. Recreate npm-shrinkwrap.json with: `npm install --no-shrinkwrap && npm shrinkwrap`
 5. Commit package.json, npm-shrinwrap.json, NEWS

docs/named_maps.md

@@ -1,10 +1,10 @@
 # Named Maps
 
-Named Maps are essentially the same as Anonymous Maps except the MapConfig is stored on the server, and the map is given a unique name. You can create Named Maps from private data, and users without an API Key can view your Named Map (while keeping your data private). 
+Named Maps are essentially the same as Anonymous Maps except the MapConfig is stored on the server, and the map is given a unique name. You can create Named Maps from private data, and users without an API Key can view your Named Map (while keeping your data private).
 
-The Named Map workflow consists of uploading a MapConfig file to CARTO servers, to select data from your CARTO user database by using SQL, and specifying the CartoCSS for your map. 
+The Named Map workflow consists of uploading a MapConfig file to CARTO servers, to select data from your CARTO user database by using SQL, and specifying the CartoCSS for your map.
 
-The response back from the API provides the template_id of your Named Map as the `name` (the identifier of your Named Map), which is the name that you specified in the MapConfig. You can  which you can then use to create your Named Map details, or [fetch XYZ tiles](#fetching-xyz-tiles-for-named-maps) directly for Named Maps. 
+The response back from the API provides the template_id of your Named Map as the `name` (the identifier of your Named Map), which is the name that you specified in the MapConfig. You can  which you can then use to create your Named Map details, or [fetch XYZ tiles](#fetching-xyz-tiles-for-named-maps) directly for Named Maps.
 
 **Tip:** You can also use a Named Map that you created (which is defined by its `name`), to create a map using CARTO.js. This is achieved by adding the [`namedmap` type](http://docs.carto.com/carto-engine/carto-js/layer-source-object/#named-maps-layer-source-object-type-namedmap) layer source object to draw the Named Map.
 
@@ -73,6 +73,10 @@ The `name` argument defines how to name this "template_name".json. Note that the
       }
     ]
   },
+  "preview_layers": {
+    "0": true,
+    "layer1": false
+  },
   "view": {
     "zoom": 4,
     "center": {
@@ -95,7 +99,7 @@ Params | Description
 --- | ---
 name | There can only be _one_ template with the same name for any user. Valid names start with a letter or a number, and only contain letters, numbers, dashes (-), or underscores (_). _This is specific to the name of your Named Map that is specified in the `name` property of the template file_.
 
-auth | 
+auth |
 --- | ---
 |_ method | `"token"` or `"open"` (`"open"` is the default if no method is specified. Use `"token"` to password-protect your map)
 |_ valid_tokens | when `"method"` is set to `"token"`, the values listed here allow you to instantiate the Named Map. See this [example](http://docs.carto.com/faqs/manipulating-your-data/#how-to-create-a-password-protected-named-map) for how to create a password-protected map.
@@ -105,12 +109,12 @@ view (optional) | extra keys to specify the view area for the map. It can be use
 --- | ---
 |_ zoom | The zoom level to use
 
-|_ center | 
+|_ center |
 --- | ---
 |_ |_ lng | The longitude to use for the center
 |_ |_ lat | The latitude to use for the center
 
-|_ bounds | 
+|_ bounds |
 --- | ---
 |_ |_ west | LowerCorner longitude for the bounding box, in decimal degrees (aka most western)
 |_ |_ south | LowerCorner latitude for the bounding box, in decimal degrees (aka most southern)
@@ -160,7 +164,7 @@ curl -X POST \
 
 #### Response
 
-The response back from the API provides the name of your MapConfig as a template, enabling you to edit the Named Map details by inserting your variables into the template where placeholders are defined, and create custom queries using SQL. 
+The response back from the API provides the name of your MapConfig as a template, enabling you to edit the Named Map details by inserting your variables into the template where placeholders are defined, and create custom queries using SQL.
 
 ```javascript
 {
@@ -516,7 +520,7 @@ If you are creating a Torque layer in a Named Map without using the Torque.js li
     })
     .addTo(map)
     .done(function(layer) {
-  
+
     });
 }
 ```
@@ -535,7 +539,7 @@ Optionally, authenticated users can fetch projected tiles (XYZ tiles or Mapnik R
 
 ### Fetch XYZ Tiles Directly with a URL
 
-Authenticated users, with an auth token, can use XYZ-based URLs to fetch tiles directly, and instantiate the Named Map as part of the request to your application. You do not have to do any other steps to initialize your map. 
+Authenticated users, with an auth token, can use XYZ-based URLs to fetch tiles directly, and instantiate the Named Map as part of the request to your application. You do not have to do any other steps to initialize your map.
 
 To call a template_id in a URL:
 

lib/cartodb/controllers/named_maps.js

@@ -137,9 +137,15 @@ NamedMapsController.prototype.staticMap = function(req, res) {
                 this
             );
         },
-        function prepareImageOptions(err, _namedMapProvider) {
+        function prepareLayerVisibility(err, _namedMapProvider) {
             assert.ifError(err);
+
             namedMapProvider = _namedMapProvider;
+
+            self.prepareLayerFilterFromPreviewLayers(cdbUser, req, namedMapProvider, this);
+        },
+        function prepareImageOptions(err) {
+            assert.ifError(err);
             self.getStaticImageOptions(cdbUser, req.params, namedMapProvider, this);
         },
         function getImage(err, imageOpts) {
@@ -184,6 +190,45 @@ NamedMapsController.prototype.staticMap = function(req, res) {
     );
 };
 
+NamedMapsController.prototype.prepareLayerFilterFromPreviewLayers = function (user, req, namedMapProvider, callback) {
+    var self = this;
+    namedMapProvider.getTemplate(function (err, template) {
+        if (err) {
+            return callback(err);
+        }
+
+        if (!template || !template.view || !template.view.preview_layers) {
+           return callback();
+        }
+
+        var previewLayers = template.view.preview_layers;
+        var layerVisibilityFilter = [];
+
+        template.layergroup.layers.forEach(function (layer, index) {
+            if (previewLayers[''+index] !== false && previewLayers[layer.id] !== false) {
+                layerVisibilityFilter.push(''+index);
+            }
+        });
+
+        if (!layerVisibilityFilter.length) {
+            return callback();
+        }
+
+        // overwrites 'all' default filter
+        req.params.layer = layerVisibilityFilter.join(',');
+
+        // recreates the provider
+        self.namedMapProviderCache.get(
+            user,
+            req.params.template_id,
+            req.query.config,
+            req.query.auth_token,
+            req.params,
+            callback
+        );
+    });
+};
+
 var DEFAULT_ZOOM_CENTER = {
     zoom: 1,
     center: {

test/acceptance/named_layers_visibility.js

@@ -0,0 +1,210 @@
+var step = require('step');
+var test_helper = require('../support/test_helper');
+
+var assert = require('../support/assert');
+var CartodbWindshaft = require(__dirname + '/../../lib/cartodb/server');
+var serverOptions = require(__dirname + '/../../lib/cartodb/server_options');
+var server = new CartodbWindshaft(serverOptions);
+
+var RedisPool = require('redis-mpool');
+var TemplateMaps = require('../../lib/cartodb/backends/template_maps.js');
+var mapnik = require('windshaft').mapnik;
+
+var IMAGE_TOLERANCE = 20;
+
+describe('layers visibility for previews', function() {
+    // configure redis pool instance to use in tests
+    var redisPool = new RedisPool(global.environment.redis);
+    var templateMaps = new TemplateMaps(redisPool, {
+        max_user_templates: global.environment.maxUserTemplates
+    });
+
+    var username = 'localhost';
+
+    function createLayer (color, layerId) {
+        var mod;
+
+        if (color === 'red') {
+            mod = 0;
+        } else if (color === 'orange') {
+            mod = 1;
+        } else if (color === 'blue') {
+            mod = 2;
+        } else {
+            mod = 0;
+        }
+
+        return {
+            type: 'mapnik',
+            id: layerId,
+            options: {
+                sql: 'select * from populated_places_simple_reduced where cartodb_id % 3 = ' + mod,
+                cartocss: '#layer { marker-fill: ' + color + '; }',
+                cartocss_version: '2.3.0'
+            }
+        };
+    }
+
+    function createTemplate(scenario) {
+        return {
+            version: '0.0.1',
+            name: scenario.name,
+            auth: {
+                method: 'open'
+            },
+            view: {
+                bounds: {
+                    west: 0,
+                    south: 0,
+                    east: 45,
+                    north: 45
+                },
+                zoom: 4,
+                center: {
+                    lng: 40,
+                    lat: 20
+                },
+                preview_layers: scenario.layerPerview
+            },
+            layergroup: {
+                layers: scenario.layers
+            }
+        };
+    }
+
+    afterEach(function (done) {
+        test_helper.deleteRedisKeys({
+            'user:localhost:mapviews:global': 5
+        }, done);
+    });
+
+    function previewFixture(version) {
+        return './test/fixtures/previews/populated_places_simple_reduced-' + version + '.png';
+    }
+
+    var threeLayerPointDistintColor = [
+        createLayer('red'),
+        createLayer('orange'),
+        createLayer('blue', 'layer2')
+    ];
+
+    var scenarios = [{
+        name: 'preview_layers_red',
+        layerPerview: {
+            '0': true,
+            '1': false,
+            'layer2': false
+        },
+        layers: threeLayerPointDistintColor
+    }, {
+        name: 'preview_layers_orange',
+        layerPerview: {
+            '0': false,
+            '1': true,
+            'layer2': false
+        },
+        layers: threeLayerPointDistintColor
+    }, {
+        name: 'preview_layers_blue',
+        layerPerview: {
+            '0': false,
+            '1': false,
+            'layer2': true
+        },
+        layers: threeLayerPointDistintColor
+    }, {
+        name: 'preview_layers_red_orange',
+        layerPerview: {
+            '0': true,
+            '1': true,
+            'layer2': false
+        },
+        layers: threeLayerPointDistintColor
+    }, {
+        name: 'preview_layers_red_blue',
+        layerPerview: {
+            '0': true,
+            '1': false,
+            'layer2': true
+        },
+        layers: threeLayerPointDistintColor
+    }, {
+        name: 'preview_layers_orange_blue',
+        layerPerview: {
+            '0': false,
+            '1': true,
+            'layer2': true
+        },
+        layers: threeLayerPointDistintColor
+    }, {
+        name: 'preview_layers_red_orange_blue',
+        layerPerview: {
+            '0': true,
+            '1': true,
+            'layer2': true
+        },
+        layers: threeLayerPointDistintColor
+    }, {
+        name: 'preview_layers_all',
+        layerPerview: {},
+        layers: threeLayerPointDistintColor
+    },  {
+        name: 'preview_layers_undefined',
+        layerPerview: undefined,
+        layers: threeLayerPointDistintColor
+    }];
+
+    scenarios.forEach(function (scenario) {
+        it('should filter layers for template: ' + scenario.name, function (done) {
+            step(
+                function addTemplate () {
+                    var next = this;
+                    var template = createTemplate(scenario);
+
+                    templateMaps.addTemplate(username, template, next);
+                },
+                function requestPreview (err) {
+                    assert.ifError(err);
+
+                    var next = this;
+
+                    assert.response(server, {
+                        url: '/api/v1/map/static/named/' + scenario.name + '/640/480.png',
+                        method: 'GET',
+                        headers: {
+                            host: 'localhost'
+                        },
+                        encoding: 'binary'
+                    }, {
+                        status: 200,
+                        headers: {
+                            'content-type': 'image/png'
+                        }
+                    }, function (res, err) {
+                        next(err, res);
+                    });
+                },
+                function checkPreview (err, res) {
+                    assert.ifError(err);
+
+                    var next = this;
+                    var img = mapnik.Image.fromBytes(new Buffer(res.body, 'binary'));
+                    var previewFixturePath = previewFixture(scenario.name);
+
+                    assert.imageIsSimilarToFile(img, previewFixturePath, IMAGE_TOLERANCE, next);
+                },
+                function deleteTemplate(err) {
+                    assert.ifError(err);
+
+                    var next = this;
+
+                    templateMaps.delTemplate(username, scenario.name, next);
+                },
+                function finish (err) {
+                    done(err);
+                }
+            );
+        });
+    });
+
+});