small multiples using many maps by andrewxhill

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet multilayer example | 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="//cartodb.com/assets/favicon.ico" />
    <style>
      html, body {
        height: 100%;
        padding: 0;
        margin: 0;
        background: white;
      }
      .map{
        height: 100px; width: 10%; min-width: 50px;
        padding: 0;
        margin: 0;
        float: left;
        background: white;
        border: 1px solid #eee;
      }
    </style>

    <link rel="stylesheet" href="//libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="//libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" />
    <![endif]-->

  </head>
  <body>

    <!-- include cartodb.js library -->
    <script src="//libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
    <script>
      var username = 'andrew';

      function main() {
        var sql = cartodb.SQL({ user: username });
        sql.execute("SELECT cartodb_id, name, ST_XMin(the_geom) wx, ST_XMax(the_geom) ex,ST_YMin(the_geom) sy,ST_YMax(the_geom) ny FROM ne_110m_admin_0_countries ORDER BY name ASC").done(function(data) {
          data.rows.map(function(r) {
            var id = "map_"+r.cartodb_id;
            var m = $('<div></div>').attr('id', id).attr('class', 'map').css('background','white')
            $('body').append(m)
            var map = L.map(id, { 
              zoomControl: false,
              center: [43, 0],
              zoom: 3,
              attributionControl: false
            })

            map.fitBounds([
                [r.ny, r.wx],
                [r.sy, r.ex]
            ]);



            var polygons = {};

            function geometryHover(username, map, layer, cartodb_id, options) {

                options = options || {}
                var HIGHLIGHT_STYLE = {
                  weight: 3,
                  color: '#FFFFFF',
                  opacity: 1,
                  fillColor: '#FFFFFF',
                  fillOpacity: 0.3
                };
                style = options.style || HIGHLIGHT_STYLE;
                var polygonsHighlighted = [];


                // fetch the geometry
                var sql = new cartodb.SQL({ user: username, format: 'geojson' });
                sql.execute("select cartodb_id, ST_Simplify(the_geom, 0.1) as the_geom from (" + layer.getSQL() + ") as _wrap WHERE cartodb_id = "+cartodb_id).done(function(geojson) {
                  var features = geojson.features;
                  for(var i = 0; i < features.length; ++i) {
                    var f = geojson.features[i];
                    var key = f.properties.cartodb_id

                    // generate geometry
                    var geo = L.GeoJSON.geometryToLayer(features[i].geometry);
                    geo.setStyle(style);

                    // add to polygons
                    polygons[key] = polygons[key] ||  [];
                    polygons[key].push(geo);
                  }
                });

                function featureOver(e, pos, latlng, data) {
                  featureOut();
                  var pol = polygons[data.cartodb_id] || [];
                  for(var i = 0; i < pol.length; ++i) {
                    map.addLayer(pol[i]);
                    polygonsHighlighted.push(pol[i]);
                  }
                }

                function featureOut() {
                  var pol = polygonsHighlighted;
                  for(var i = 0; i < pol.length; ++i) {
                    map.removeLayer(pol[i]);
                  }
                  polygonsHighlighted = [];
                }

                layer.on('featureOver', featureOver);
                layer.on('featureOut', featureOut);
                layer.setInteraction(true);

            }

            cartodb.createLayer(map, {
              user_name: username,
              type: 'cartodb',
              cartodb_logo: false,
              sublayers: [{
                 sql: 'select * from ne_110m_admin_0_countries',
                 cartocss: '#ne_110m_admin_0_countries { polygon-fill: #000; polygon-opacity: 0.1; line-color: #000; line-width:0; } #ne_110m_admin_0_countries [cartodb_id = '+r.cartodb_id+'] { polygon-fill: #F00; polygon-opacity: 0.3; line-color: #F00; }',
                 interactivity: 'cartodb_id'
              }]
            })
            .addTo(map)
            .done(function(layer){
              geometryHover(username, map, layer.getSubLayer(0), r.cartodb_id);
            })

          })
        })
      }
      function tw() {

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

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

        // add cartodb layer with one sublayer
        cartodb.createLayer(map, {
          user_name: 'examples',
          type: 'cartodb',
          sublayers: [{
             sql: 'select * from country_boundaries',
             cartocss: '#layer { polygon-fill: #F00; polygon-opacity: 0.3; line-color: #F00; }',
             interactivity: 'cartodb_id'
          }]
        })
        .addTo(map)
        .done(function(layer) {
          cdb.vis.Vis.addInfowindow(map, layer.getSubLayer(0), ['cartodb_id'])
        });


      }

      // you could use $(window).load(main);
      window.onload = main; 

    </script>

  </body>
</html>