<div id="map"></div>
    <div id="layer_selector" class="cartodb-infobox">
      <ul>
        <li id="2011">2011</li>
        <li id="2012">2012</li>
        <li id="2013">2013</li>
        <li id="2014">2014</li>
      </ul>
    </div>
 
html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
 
      #layer_selector {
        position: absolute;
        top: 20px;
        right: 20px;
        padding: 0;
      }
 
      #layer_selector ul {
        padding: 0; margin: 0;
        list-style-type: none;
      }
 
      #layer_selector li {
        border-bottom: 1px solid #999;
        padding: 15px 30px;
        font-family: "Helvetica", Arial;
        font-size: 13px;
        color: #444;
        cursor: auto;
      }
 
      #layer_selector li:hover {
        background-color: #F0F0F0;
        cursor: pointer;
      }
 var selectedLayer;
      // create layer selector
      function createSelector(layers) {
        var sql = new cartodb.SQL({ user: 'documentarion'});
 
        var $options = $('#layer_selector li');
        $options.click(function(e) {
          // get the area of the selected layer
          var $li = $(e.target);
          var layer = $li.attr('id');
          if(selectedLayer != layer ){
            // definitely more elegant ways to do this, but went for
            // ease of understanding
            if (layer == '2011'){
              layers.getSubLayer(0).show(); // 2011
              layers.getSubLayer(1).hide(); // 2012
              layers.getSubLayer(2).hide(); // 2013 places
              layers.getSubLayer(3).hide(); // 2014
            }
            else if (layer == '2012') {
              layers.getSubLayer(0).hide();
              layers.getSubLayer(1).show();
              layers.getSubLayer(2).hide();
              layers.getSubLayer(3).hide(); 
            }
            else if (layer == '2013') {
              layers.getSubLayer(0).hide();
              layers.getSubLayer(1).hide();
              layers.getSubLayer(2).show();
              layers.getSubLayer(3).hide();
            }
            else {
              layers.getSubLayer(0).hide();
              layers.getSubLayer(1).hide();
              layers.getSubLayer(2).hide();
              layers.getSubLayer(3).show();
            }
          }
        });
      }

      //cartodb.createVis('map', 'http://pennywang.cartodb.com/api/v2/viz/9f37517a-a11c-11e4-8f64-0e853d047bba/viz.json');


      var layerN = {};
      function main() {
        var map = L.map('map', { 
          zoomControl: true,
          center: [41.8337329,-87.7321555],
          zoom: 11
        });
        // get the currently selected style
        selectedStyle = $('li.selected').attr('id');
 
        //add base map
        L.tileLayer('https://api.tiles.mapbox.com/v4/mapbox.high-contrast/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoicGVubnl3YW5nIiwiYSI6Ik80Z3o0X28ifQ.XYOTT3DKCSl7qcORJ6THcA', {
          attribution: 'Mapbox <a href="https://mapbox.com/about/maps" target="_blank">Terms &amp; Feedback</a>'
        }).addTo(map);
        
        //add data layer
        cartodb.createLayer(map, 'http://pennywang.cartodb.com/api/v2/viz/9f37517a-a11c-11e4-8f64-0e853d047bba/viz.json')
        .addTo(map)
        .done(function(layers) {
          createSelector(layers);
        })
        .error(function(err) {
          console.log(err);
        });
      } 
		    
        window.onload = main

External CSS

  1. https://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css

External JavaScript

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