CartoDB - can we overlay 2 visualizations

Question

Suppose we make two map visualizations from a loaded polygon shapefile in the CartoDB free online system. Could we overlay these 2 maps on top of each other in a web page using the CartoDB.js API? The reason is, we need to make about 28 maps but in some cases the user will want to combine several maps. Instead of making even more combinations we'd like to have transparent maps that could be overlaid.

Answer 1

this is pretty easy! You can use the createLayer function of CartoDB.js two times and add those layers to your map object.

Documentation here: http://docs.cartodb.com/cartodb-platform/cartodb-js.html#cartodbcreatelayermap-layersource--options--callback

Sample code here (I nested the creation of both layers, but it's not needed):

<div id="map"></div>

<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.11/cartodb.js"></script>

<script>
  function main() {
    var map = new L.Map('map', {
      zoomControl: false,
      center: [43, 0],
      zoom: 3
    });
    L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
      attribution: 'Stamen, OSM'
    }).addTo(map);
    cartodb.createLayer(map, 'http://team.cartodb.com/api/v2/viz/a81c28aa-7e6d-11e4-a6e3-0e9d821ea90d/viz.json')
     .addTo(map)
     .on('done', function(layer) {         
         cartodb.createLayer(map, 'http://team.cartodb.com/api/v2/viz/905d8b64-8868-11e4-ad0e-0e0c41326911/viz.json')
     .addTo(map)
      })
     .on('error', function() {
      cartodb.log.log("some error occurred");
    });
  }
  // you could use $(window).load(main);
  window.onload = main;
</script>