clhenrick/index.html

## index.html
<!DOCTYPE html>
    <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
    <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
    <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
    <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>CartoDB.JS Demo</title>
        <meta name="description" content="">
        <meta name="HandheldFriendly" content="True">
        <meta name="MobileOptimized" content="320">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="cleartype" content="on">
        <style type="text/css">

          html, body, #map {
            height: 100%;
            padding: 0;
            margin: 0;
          }

          ul {
            position: absolute;
            top: 5%; right: 5%;
          }

          li {
            margin: -1px;
            padding: 10px;
            border: 1px solid #fff;
            background: #000;
            list-style: none;
            font: bold 16pt helvetica;
            color: #fff;
            text-align: center;
            letter-spacing: 1px;
          }

          a {
            text-decoration: none;
            color: #fff;
          }

          #bike-routes {

          }

          #truck-routes {

          }

        </style>
        <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
    </head>
    <body>

        <div id="map"></div>
        <div id="layer-control">
          <ul>
            <li id="bike-routes"><a href="#">Bicycle Routes</a></li>
            <li id="truck-routes"><a href="#">Truck Routes</a></li>
          </ul>
        </div>
        <!-- Javascripts -->
        <!-- include cartodb.js library -->
        <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
        <script type="text/javascript">

          // set up the leaflet map object
          var map = new L.Map('map', {
            center: [40.7127, -74.0059],
            zoom: 12
          });

          // variables to store cartodb layers in later
          var bike_routes = null,
                truck_routes = null;

          /* add the Stamen Toner basemap layer */
          L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
            attribution: 'Stamen'
          }).addTo(map);

          // instantiate some cartodb layers
          var cartodbLayers = cartodb.createLayer(map, {
            user_name: 'chenrick',
            type: 'cartodb',
            sublayers: [{
              sql : 'SELECT * FROM nyc_bike_routes_4326',
              cartocss : '#nyc_bike_routes_4326 { line-width: 2; line-color: #00a9ff; }'
            }, {
              sql : 'SELECT * FROM all_truck_routes_nyc_2011_april',
              cartocss : '#all_truck_routes_nyc_2011_april { line-width: 2; line-color: #ff0098; }'
            }]
          })
            .on('done', function(layer){
              bike_routes = layer.getSubLayer(0); // assign the bike routes layer
              truck_routes = layer.getSubLayer(1); // assign the truck routes layer
            })
           .addTo(map); // add them to the map

          /* UI interaction*/
          // state variable for layer visibility
          var visible = {
            bikes : true,
            trucks : true
          };

          // bike button toggle
          $('#bike-routes').on('click', function(e) {
            if (visible.bikes){
              bike_routes.hide();
              visible.bikes = false;
            } else if (!visible.bikes){
              bike_routes.show();
              visible.bikes = true;
            }
            return false;
          });

          // truck button toggle
          $('#truck-routes').on('click', function(e) {
            if (visible.trucks) {
              truck_routes.hide();
              visible.trucks = false;
            } else if (!visible.trucks) {
              truck_routes.show();
              visible.trucks = true;
            }
            return false;
          });

        </script>


    </body>
</html>
	<!DOCTYPE html>
	<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
	<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
	<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
	<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>CartoDB.JS Demo</title>
	<meta name="description" content="">
	<meta name="HandheldFriendly" content="True">
	<meta name="MobileOptimized" content="320">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="cleartype" content="on">
	<style type="text/css">

	html, body, #map {
	height: 100%;
	padding: 0;
	margin: 0;
	}

	ul {
	position: absolute;
	top: 5%; right: 5%;
	}

	li {
	margin: -1px;
	padding: 10px;
	border: 1px solid #fff;
	background: #000;
	list-style: none;
	font: bold 16pt helvetica;
	color: #fff;
	text-align: center;
	letter-spacing: 1px;
	}

	a {
	text-decoration: none;
	color: #fff;
	}

	#bike-routes {

	}

	#truck-routes {

	}

	</style>
	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
	</head>
	<body>

	<div id="map"></div>
	<div id="layer-control">
	<ul>
	<li id="bike-routes"><a href="#">Bicycle Routes</a></li>
	<li id="truck-routes"><a href="#">Truck Routes</a></li>
	</ul>
	</div>
	<!-- Javascripts -->
	<!-- include cartodb.js library -->
	<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
	<script type="text/javascript">

	// set up the leaflet map object
	var map = new L.Map('map', {
	center: [40.7127, -74.0059],
	zoom: 12
	});

	// variables to store cartodb layers in later
	var bike_routes = null,
	truck_routes = null;

	/* add the Stamen Toner basemap layer */
	L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
	attribution: 'Stamen'
	}).addTo(map);

	// instantiate some cartodb layers
	var cartodbLayers = cartodb.createLayer(map, {
	user_name: 'chenrick',
	type: 'cartodb',
	sublayers: [{
	sql : 'SELECT * FROM nyc_bike_routes_4326',
	cartocss : '#nyc_bike_routes_4326 { line-width: 2; line-color: #00a9ff; }'
	}, {
	sql : 'SELECT * FROM all_truck_routes_nyc_2011_april',
	cartocss : '#all_truck_routes_nyc_2011_april { line-width: 2; line-color: #ff0098; }'
	}]
	})
	.on('done', function(layer){
	bike_routes = layer.getSubLayer(0); // assign the bike routes layer
	truck_routes = layer.getSubLayer(1); // assign the truck routes layer
	})
	.addTo(map); // add them to the map

	/* UI interaction*/
	// state variable for layer visibility
	var visible = {
	bikes : true,
	trucks : true
	};

	// bike button toggle
	$('#bike-routes').on('click', function(e) {
	if (visible.bikes){
	bike_routes.hide();
	visible.bikes = false;
	} else if (!visible.bikes){
	bike_routes.show();
	visible.bikes = true;
	}
	return false;
	});

	// truck button toggle
	$('#truck-routes').on('click', function(e) {
	if (visible.trucks) {
	truck_routes.hide();
	visible.trucks = false;
	} else if (!visible.trucks) {
	truck_routes.show();
	visible.trucks = true;
	}
	return false;
	});

	</script>


	</body>
	</html>