Style selector menu for CartoDB by andrewxhill

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Style selector 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, #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;
      }

      #layer_selector li.selected {
        background-color: #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]-->

    <script type="cartocss/html" id="cartocss_area_template">
      /** choropleth visualization */

      #tl_2013_us_zcta510_001{
        line-color: #FFF;
        line-opacity: 1;
        line-width: 1;
        polygon-opacity: 0.8;
      }
      #tl_2013_us_zcta510_001 [ aland10 <= 34785906652.01] {
         polygon-fill: #ff4d4d;
      }
      #tl_2013_us_zcta510_001 [ aland10 <= 366219966] {
         polygon-fill: #ff7a7a;
      }
      #tl_2013_us_zcta510_001 [ aland10 <= 199228941] {
         polygon-fill: #ffa6a6;
      }
      #tl_2013_us_zcta510_001 [ aland10 <= 119576077] {
         polygon-fill: #fff2cc;
      }
      #tl_2013_us_zcta510_001 [ aland10 <= 69445753] {
         polygon-fill: #7fbfff;
      }
      #tl_2013_us_zcta510_001 [ aland10 <= 30445142] {
         polygon-fill: #40a0ff;
      }
      #tl_2013_us_zcta510_001 [ aland10 <= 8726850] {
         polygon-fill: #0080ff;
      }
    </script>
  </head>
  <body>
    <div id="map"></div>
    <div id="layer_selector" class="cartodb-infobox">
      <ul>
        <li id="red" class="selected">Red</li>
        <li id="bw">Black & White</li>
        <li id="area">Area</li>
      </ul>
    </div>

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

    <script>
      var styles = {}, selectedStyle;
      // create layer selector
      function createSelector(layer) {
        var sql = new cartodb.SQL({ user: 'documentation' });

        var $options = $('#layer_selector li');
        $options.click(function(e) {
          // get the area of the selected layer
          var $li = $(e.target);
          var style = $li.attr('id');
          if(selectedStyle != style ){
            // change the style in the layer to update the map
            layer.setCartoCSS(styles[style]);
            selectedStyle = style;
          }
        });
      }

      function main() {
        // get the currently selected style
        selectedStyle = $('li.selected').attr('id');

        cartodb.createVis('map', '//viz2.cartodb.com/api/v2/viz/b88571fe-78a3-11e3-a0a2-0e49973114de/viz.json')
        .done(function(vis, layers) {

          // create a new assoc array of styles
          // key values must mach ids of menu list in HTML
          styles['red'] = "#tl_2013_us_zcta510_001{ polygon-fill: #F84F40; polygon-opacity: 0.7; line-width: 0.5; line-color: #FFFFFF;line-opacity: 0.5;}";
          styles['bw'] = "#tl_2013_us_zcta510_001{ polygon-fill: #000; polygon-opacity: 0.7; line-width: 0.5; line-color: #FFF;line-opacity: 0.5;}";
          styles['area'] = $('#cartocss_area_template').html();


          // layer 0 is the base layer, layer 1 is cartodb layer
          var subLayer = layers[1].getSubLayer(0);
          createSelector(subLayer);
        })
        .error(function(err) {
          console.log(err);
        });
      }

      window.onload = main;
    </script>
  </body>
</html>