question-mark
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:closed
  • Created 8 years ago
  • Comments:9 (6 by maintainers)

github_iconTop 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

Read more comments on GitHub >

github_iconTop Results From Across the Web

hide certain sublayer on Layerlist widget - Esri Community
I have a Grouplayer and try to hide certain sublayer on Layerlist widget. ... Leave it, and it is removed, but remains in...
Read more >
sublayer.hide() doesn't behave as expected with a ... - GitHub
Neither sublayer.toggle() nor sublayer.hide() work as expected with named maps. I tried the same code with a normal map in CartoDB.js and it...
Read more >
Hide Show Fusion Map Layer - javascript - Stack Overflow
I am trying to find out which layers are on and if they are, hide them. can't I just disable the whole map...
Read more >
Organize layers (Map Viewer)—ArcGIS Online Help
Click Options Options on the layer and click Rename. Type a new name for the layer and click OK. · Click Options on...
Read more >
How to customize or hide label text in a map style ... - YouTube
To modify a place name, you can apply a data condition to the layer where the label appears. To hide a place name,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found