Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't hide a subLayer of a named map

See original GitHub issue

After loading a named map I can’t hide any of the subLayers. Example code, more details below

<!DOCTYPE html>
<html>
<head>
    <title>Named Map with Interactivity | CartoDB.js</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
    <style>
        html, body, #map {
            height: 100%;
            padding: 0;
            margin: 0;
        }
    </style>
    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.uncompressed.js"></script>
<script>
    var myLayer,mySubLayer;
    function main() {
        var map = L.map('map', {
          zoomControl: true,
          center: [0,0],
          zoom: 2
        });

        L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
        }).addTo(map);

        var namedLayerSource = {
            user_name: 'solutions',
            type: 'namedmap',
            auth_token: "cartodb",
            named_map: {
                name: "named_map_test_2"
            }
        };

        // add cartodb layer with one sublayer
        cartodb.createLayer(map, namedLayerSource,{https:true})
          .addTo(map)
          .done(function(layer) {
              myLayer = layer;
              mySubLayer = myLayer.getSubLayer(0);
              mySubLayer.hide();
          })
          .error(function(err) {console.log("error: " + err);});
    }
    window.onload = main;
</script>
</body>
</html>

With the global mySubLayer, when I do a .hide() I can’t see any call to the Maps API, after a .show() it calls it, also with a hide() but no changes occur on the map so not really sure if this is only a problem at the library or also at the API, or maybe elsewhere.

Issue Analytics

State:
Created 8 years ago
Comments:9 (6 by maintainers)

Top GitHub Comments

1reaction

alasarrcommented, Dec 7, 2015

As @jsanz and @ohasselblad pointed out, if you want to use hide/show/toggle methods you need to define an internal placeholder to make it works.

Sublayer visibility methods use an internal placeholder layerX, i.e, layer.getSubLayer(0).show() set the placeholder layer0=1 and layer.getSubLayer(0).hide() set layer0=0.

Thus, if you want to use these methods you need to define the placeholders as follow:

{
  "version": "0.0.1",
  "name": "buques",
  "auth": {
    "method": "token",
    "valid_tokens": []
  },
  "placeholders" : {
    "layer0": {
      "type": "number",
      "default": 1
    },
    "layer1": {
      "type": "number",
      "default": 1
    }
  },
  "layergroup": {
    "version": "1.0.1",
    "layers": [
      {
        "type": "cartodb",
        "options": {
          "cartocss_version": "2.1.1",
          "cartocss": "...",
          "sql": " SELECT * FROM t0 where <%= layer0 %> = 1",
          "interactivity": "..."
        }
      },
      {
        "type": "cartodb",
        "options": {
          "cartocss_version": "2.1.1",
          "cartocss": "...",
          "sql": "SELECT * FROM t1 where <%= layer1 %> = 1",
          "interactivity": "cartodb_id"
        }
      }
    ]
  }
}

0reactions

ztephmcommented, Dec 10, 2015

OK thank you @alonsogarciapablo