cartodb.js: named maps, toggle layers and hover infowindow

forked from oriolbx's block: cartodb.js: named maps, toggle layers and hover infowindow

<!DOCTYPE html>
<html>
  <head>
 
    <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="https://cartodb.com/assets/favicon.ico" />
    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      .buttons {
          height: 50px;
          width: 100px;
          background: rgba(0,255,255,0.8);
          position: absolute;
          top: 20px;
          right: 20px;
          padding: 5px;
          border: 1px solid #FFF;
          border-radius: 5px;
          cursor: pointer;
      }
    </style>

</head>
  <body>
    <div id="map"></div>
    <div id="layer0" class="buttons" data="0">Show/hide Europe</div>
    <div id="layer1" class="buttons" data="1" style="top: 102px; background: rgba(0,255,0,0.8);">Show/hide World</div>
    <div id="layer1" class="buttons" data="2" style="top: 160px; background: rgba(255,0,0,0.8);">Show/hide China</div>

<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
    <script>

function main() {

// create leaflet map
        var map = L.map('map', { 
          zoomControl: false,
          scrollWheelZoom: false,
          center: [43, 0],
          zoomControl: true,
          zoom: 2
        })

// add a base layer
        L.tileLayer('https://tile.stamen.com/toner/{z}/{x}/{y}.png', {
          attribution: 'Stamen'
        }).addTo(map);

var namedLayerSource = {
          user_name: 'oboix',
          type: 'namedmap',
          named_map: {
             name: "toggle_named_maps_multilayer",
               layers: [{
                 layer_name: "europe"

},
                {
                  layer_name: "world"
                  
                },
                {
                  layer_name: "world_1"
                  
                }
                ]
              }
        }

// add cartodb layer with one sublayer
        cartodb.createLayer(map, namedLayerSource)
          .addTo(map)
          .done(function(layer) {
              
              // Enable interactions events for all sublayers
              for (var i = 0; i < layer.getSubLayerCount(); ++i ) {

layer.getSubLayer(i).on('featureOver', function(e, pos, pixel, data) {
                      console.log("Event #" + data.cartodb_id + ", name " + data.admin);
                  });
                  // infowindow
                  cdb.vis.Vis.addInfowindow(map,layer.getSubLayer(i),['cartodb_id','name']);
                  // tooltip definition with createLayer
                           var testTooltip = layer.leafletMap.viz.addOverlay({
                              type: 'tooltip',
                              layer: layer.getSubLayer(i),
                              template: '<div class="cartodb-tooltip-content-wrapper"><p>{{cartodb_id}}</p></div>', 
                              width: 200,
                              position: 'bottom|right',
                              fields: [{ name: 'cartodb_id' }]
                            });
                            $('body').append(testTooltip.render().el);

}
            console.log(layer.getSubLayerCount());
            var toggle = false;

$(".buttons").on('click', function(e) {
                var layerNum = $(e.target).attr('data');
                toggle = layer.getSubLayer(layerNum).toggle();
                console.log("layer " + layerNum + " toggled: " + toggle);
            });
        })
        .error(function(err) {
            console.log("error: " + err);
        });
      }

window.onload = main;

</script>

</body>
</html>

Modified http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js to a secure url

https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js