andy-esch · February 14, 2015 18:50
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>CartoDB</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="http://cartodb.com/assets/favicon.ico" />

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.12/themes/css/cartodb.css" />

    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      #layers {
          position: absolute;
          top: 20px;
          right: 55px;
      }
      .layer_selector {
          background: rgba(255,255,255,0.9);
          border-radius: 5px;
          padding: 0;
          border: 1px solid #999;
          width: 250px;
      }
      
      .layer_selector > p {
          padding: 15px 30px;
          border-bottom: 1px solid #999;
      }
      
      .layer_selector ul {
          padding: 0; margin: 0;
          list-style-type: none;
      }
      .layer_selector li {
          padding: 15px 30px;
          font-family: Helvetica, Arial;
          font-size: 13px;
          color: #444;
          cursor: pointer;
      }
      .layer_selector li:not(:last-child) {
          border-bottom: 1px solid #999;
      }
      .layer_selector li:hover {
          background-color: #F0F0F0;
          cursor: pointer;
      }
      .layer_selector li.selected {
          background-color: #A6CEE3;
      }
    </style>

  </head>
  <body>
    <div id="map"></div>
    <div id="layers" class="layer_selector">
        <p>Meteor Mass Selector</p>
        <ul>
            <li data="2">Show/hide Torque Layer
            </li>
            <li data="1">Show/hide Static Layer
            </li>
        </ul>
    </div>

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

    <!-- Place your code in the script tags below -->
    <script>
    window.onload = function () {

        function createSelector(layers) {
            var layerchosen = "";
            var $options = $(".layer_selector").find("li");
            var on = true;

            $options.click(function(e) {
                var $li = $(e.target);
                var selected = +$li.attr('data');

                $options.removeClass('selected');
                $li.addClass('selected');
                
                if (selected === 1) {
                    // toggle static layer
                    layers[selected].toggle();
                } else {
                    if (on) {
                        layers[selected].hide();
                        on = false;
                    } else {
                        layers[selected].show();
                        on = true;
                    }
                }
            });
        }

        cartodb.createVis('map','http://team.cartodb.com/api/v2/viz/e5cf3150-b474-11e4-a6b3-0e0c41326911/viz.json')
            .done(function(vis, layers) {
                // do stuff here
                var torqueLayer = layers[2];
                console.log(layers.length);
                
                createSelector(layers);
                
            })
            .error(function(err) {
                console.log("error: " + err);
            });
        }
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>CartoDB</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="http://cartodb.com/assets/favicon.ico" />

	<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.12/themes/css/cartodb.css" />

	<style>
	html, body, #map {
	height: 100%;
	padding: 0;
	margin: 0;
	}
	#layers {
	position: absolute;
	top: 20px;
	right: 55px;
	}
	.layer_selector {
	background: rgba(255,255,255,0.9);
	border-radius: 5px;
	padding: 0;
	border: 1px solid #999;
	width: 250px;
	}

	.layer_selector > p {
	padding: 15px 30px;
	border-bottom: 1px solid #999;
	}

	.layer_selector ul {
	padding: 0; margin: 0;
	list-style-type: none;
	}
	.layer_selector li {
	padding: 15px 30px;
	font-family: Helvetica, Arial;
	font-size: 13px;
	color: #444;
	cursor: pointer;
	}
	.layer_selector li:not(:last-child) {
	border-bottom: 1px solid #999;
	}
	.layer_selector li:hover {
	background-color: #F0F0F0;
	cursor: pointer;
	}
	.layer_selector li.selected {
	background-color: #A6CEE3;
	}
	</style>

	</head>
	<body>
	<div id="map"></div>
	<div id="layers" class="layer_selector">
	<p>Meteor Mass Selector</p>
	<ul>
	<li data="2">Show/hide Torque Layer
	</li>
	<li data="1">Show/hide Static Layer
	</li>
	</ul>
	</div>

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

	<!-- Place your code in the script tags below -->
	<script>
	window.onload = function () {

	function createSelector(layers) {
	var layerchosen = "";
	var $options = $(".layer_selector").find("li");
	var on = true;

	$options.click(function(e) {
	var $li = $(e.target);
	var selected = +$li.attr('data');

	$options.removeClass('selected');
	$li.addClass('selected');

	if (selected === 1) {
	// toggle static layer
	layers[selected].toggle();
	} else {
	if (on) {
	layers[selected].hide();
	on = false;
	} else {
	layers[selected].show();
	on = true;
	}
	}
	});
	}

	cartodb.createVis('map','http://team.cartodb.com/api/v2/viz/e5cf3150-b474-11e4-a6b3-0e0c41326911/viz.json')
	.done(function(vis, layers) {
	// do stuff here
	var torqueLayer = layers[2];
	console.log(layers.length);

	createSelector(layers);

	})
	.error(function(err) {
	console.log("error: " + err);
	});
	}
	</script>
	</body>
	</html>