andrewxhill/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
     <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
     <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <style>
      html, body, #map {
        height: 700px;
        width: 100%;
        padding: 0;
        margin: 0;
        background-color: #3E7BB6;
      }

      #map {
         background-color: #9abae0;
         box-shadow: inset 1px 1px 5px 1px;
      }
      .selected {
        background-color: #ff8a87;
      }

      h1,
      #tool-tip,
      #layer_selector li {
          font-family: 'Montserrat', sans-serif;
          font-weight: 400;
      }
      h1 {
        text-align: center;
        color: white;
      }


      #layer_selector {
        position: absolute;
        top: 70px;
        right: 350px;
        padding: 0;
      }

      #layer_selector ul {
        padding: 0; margin: 0;
        list-style-type: none;
      }

      #show_cities {cursor: pointer;}
      #hide_cities {cursor: pointer;}

      #layer_selector li {
        border-bottom: 1px solid #999;
        padding-left: 5px;
        padding-right: 5px;
        font-size: 13px;
        color: #444;
        cursor: pointer;
        display: inline;
        -webkit-transition: color 2s; /* For Safari 3.1 to 6.0 */
        transition: color 2s;
      }

      #layer_selector2 {
        position: absolute;
        top: 70px;
        right: 150px;
        padding: 0;
      }

      #layer_selector2 ul {
        padding: 0; margin: 0;
        list-style-type: none;
      }

      #layer_selector2 li {
        border-bottom: 1px solid #999;
        padding-left: 15px;
        padding-right: 5px;
        font-size: 13px;
        color: #444;
        cursor: pointer;
        display: inline;
        -webkit-transition: color 2s; /* For Safari 3.1 to 6.0 */
        transition: color 2s;
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
      }

      #layer_selector li:hover {
        color: #3E7BB6;
        cursor: pointer;
      }

      #layer_selector li.selected {
        color: white;
      }
      #tool-tip {
        position: absolute;
        width: auto;
        height: 55px;
        background-color: white;
        opacity: .9;
        z-index: 50;
        border-radius: 15px;
        text-align: center;
        color: #3E7BB6;
        vertical-align: bottom;
        font-size: 20px;
        padding: 5px;
      }


      #tool-tip p {
        margin-top: 5px;
      }

      #header_container { opacity: .7; height:60px; left:0; position:fixed; width:100%; top:0; }
      #header{ margin:0 auto; width:940px; text-align:center; }
    </style>
  </head>

  <body>
    <h1>Pollution Over Time</h1>
    <div id="map"></div>
    <div id="tool-tip"></div>

    <div id="header_container">
      <div id="header">
        <div id="layer_selector" class="cartodb-infobox">
          <ul>
            <li data="2000" class="selected">2000</li>
            <li data="2001">2001</li>
            <li data="2002">2002</li>
            <li data="2003">2003</li>
            <li data="2004">2004</li>
            <li data="2005">2005</li>
            <li data="2006">2006</li>
            <li data="2007">2007</li>
            <li data="2008">2008</li>
            <li data="2009">2009</li>
            <li data="2010">2010</li>
            <li data="2011">2011</li>
            <li data="2012">2012</li>
          </ul>

        </div>
        <div id="layer_selector2" class="cartodb-infobox">
          <ul>
              <li data="pm_2_5" id="show_cities">Show Cities</li>
              <li  id="hide_cities" class="selected">Hide Cities</li>
          </ul>
        </div>

      </div>


  </body>
  <script type="cartocss/html" id="cities">
#who_georeferenced_clean{
  marker-fill-opacity: 0.8;
  marker-line-color: #FFF;
  marker-line-width: 1.5;
  marker-line-opacity: 1;
  marker-width: 10;
  marker-fill: #FFFFB2;
  marker-allow-overlap: true;
}
#who_georeferenced_clean [ pm_2_5 <= 153] {
  marker-fill: #B10026;
}
#who_georeferenced_clean [ pm_2_5 <= 90] {
  marker-fill: #E31A1C;
}
#who_georeferenced_clean [ pm_2_5 <= 69] {
  marker-fill: #FC4E2A;
}
#who_georeferenced_clean [ pm_2_5 <= 55] {
  marker-fill: #FD8D3C;
}
#who_georeferenced_clean [ pm_2_5 <= 41] {
  marker-fill: #FEB24C;
}
#who_georeferenced_clean [ pm_2_5 <= 28] {
  marker-fill: #FED976;
}
#who_georeferenced_clean [ pm_2_5 <= 15] {
  marker-fill: #FFFFB2;
}

  </script>

   <script type="cartocss/html" id="pm25_na">
   /*City Styles*/

#pm25_na{
  polygon-fill: #FFFFB2;
  polygon-opacity: 0.8;
  line-color: #FFF;
  line-width: 1;
  line-opacity: 1;
}
#pm25_na [ {0} <= 32.54] {
   polygon-fill: #B10026;
}
#pm25_na [ {0} <= 25.17] {
   polygon-fill: #e34444;
}
#pm25_na [ {0} <= 15.17] {
   polygon-fill: #E31A1C;
}
#pm25_na [ {0} <= 10.85] {
   polygon-fill: #FC4E2A;
}
#pm25_na [ {0} <= 9.15] {
   polygon-fill: #fd6f27;
}
#pm25_na [ {0} <= 8.15] {
   polygon-fill: #FD8D3C;
}
#pm25_na [ {0} <= 6.06] {
   polygon-fill: #FEB24C;
}
#pm25_na [ {0} <= 4.62] {
   polygon-fill: #FED976;
}
#pm25_na [ {0} <= 2.98] {
   polygon-fill: #fffde2;
}
    </script>

    <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>

     <script>
          $('#layer_selector li').click(function() {
            $('#layer_select li').addClass('selected');
          });
          var col1 = 'pm25_2000';
          var col2 = '';
          var country = 'country';
          var city = 'city_station';
          var pm = 'pm_2_5';

          //Formats the columns for us into css
          String.prototype.format = (function (i, safe, arg) {
            function format() {
                var str = this,
                    len = arguments.length + 1;

                for (i = 0; i < len; arg = arguments[i++]) {
                    safe = typeof arg === 'object' ? JSON.stringify(arg) : arg;
                    str = str.replace(RegExp('\\{' + (i - 1) + '\\}', 'g'), safe);
                }
                return str;
            }

            //format.native = String.prototype.format;
            return format;

        })();

      // create layer selector
    function main() {
        var map = new L.Map('map', {
          zoomControl: true,
          center: [43, 0],
          zoom: 2,
          scrollWheelZoom: true,
          searchControl: true
        });


        // create our layers
        cartodb.createLayer(map, {
          user_name: 'dmonay',
          type: 'cartodb',
          sublayers: [{
            sql: "SELECT * FROM bathymetry_layers",
            cartocss: "#bathymetry_layers{ polygon-fill: #598cdb;polygon-opacity: 0.2;line-color: #FFF;line-width: 0;line-opacity: 1;}"
            },{
            sql: "SELECT * FROM pm25_na",
            cartocss: $('#pm25_na').html().format('pm25_2000'),
            interactivity: "cartodb_id, the_geom, pm25_2000, pm25_2001, pm25_2002, pm25_2003, pm25_2004, pm25_2005, pm25_2006, pm25_2007, pm25_2008, pm25_2009, pm25_2010, pm25_2011, pm25_2012, country"
            },{
            sql: "SELECT * FROM who_georeferenced_clean",
            cartocss: $('#cities').html().format('city_station'),
            interactivity: "city_station, pm_2_5, country"

            }]

        }).done(function(layer) {
          // add the layers to our map
          map.addLayer(layer);
          sublayer_country = layer.getSubLayer(1);
          sublayer_country.setInteraction(true);
          sublayer_city = layer.getSubLayer(2);
          sublayer_city.setInteraction(true);
          createSelector(sublayer_country);
          createSelector(sublayer_city);
          sublayer_city.hide();

          //create infowindow
          //  sublayer_city.infowindow.set('template', $('#infowindow_template').html()).on('error', function() {
          //  console.log("some error occurred");
          //});

          //Make Tool-tip follow the mouse.
          var event = function(e){
                  $('#tool-tip').css({
                     left:  e.pageX,
                     top:   e.pageY
                  });
              };
//Retrieve data to the tooltip on countries
          sublayer_country.on('featureOver', function(e, pos, latlng, data) {
            $('#tool-tip').html('<p>'  +data[country]+'<br>'+ data[col1] + '&mu;g/mm<sub>3</sub></p>');
            $(document).bind('mousemove', event);
            $('#tool-tip').show();

          });
            sublayer_country.on('featureOut', function(e, pos, latlng, data) {
           //Make the tooltip go away when off countries
            $('#tool-tip').hide();
            $(document).unbind('mousemove', event, false);
          });
//Retrieve data to the tooltip on cities
            sublayer_city.on('featureOver', function(e, pos, latlng, data) {
            $('#tool-tip').html('<p>'  +data[city]+', '+data[country]+  '<br>'+data[pm]+ '&mu;g/mm<sub>3</sub></p>');
            $(document).bind('mousemove', event);
            $('#tool-tip').show();

          });
            sublayer_city.on('featureOut', function(e, pos, latlng, data) {
           //Make the tooltip go away when off cities
            $('#tool-tip').hide();
            $(document).unbind('mousemove', event, false);
          });


    });
  }


      window.onload = main;

/*Selection process          ------------------------------------------                       */

     var styles = {}, selectedStyle;
      // create layer selector
      function createSelector(layer) {


        var $options = $('#layer_selector li');
        $options.click(function(e) {
          // get the area of the selected layer
          var $li = $(e.target);
          var year = $li.attr('data');

          // deselect all and select the clicked one
          $options.removeClass('selected');
          $li.addClass('selected');


          col1 = 'pm25_' + year;
          var style = $('#pm25_na').html().format(col1);
            layer.setCartoCSS(style);
            sublayer_city.hide();


          $('#show_cities').removeClass();
          $('#hide_cities').addClass('selected');
          });
        }

        //show and hide cities
          var $options2 = $('#layer_selector2 li');
          $options2.on("click", function(e) {
          // get the area of the selected layer
          var $li = $(e.target);
          // deselect all and select the clicked one
          $options2.removeClass('selected');
          $li.addClass('selected');
          });

  $("#show_cities").on("click", function(){
            //Set the column to the city_station from our cities table
            col2 = 'city_station';
            //create a local variable named style and convert our cities script above to html and run the format function defined above to render some CSS.
             var style = $('#cities').html().format(col2);
            //Attached the CSS to the layer
            sublayer_city.setCartoCSS(style);
             sublayer_city.show();
           });
          //Hide the cities on click
          $("#hide_cities").on("click", function(){
             sublayer_city.hide();
              var year = $('#layer_selector li.selected').attr('data');
              col1 = 'pm25_' + year;
             console.log(col1);
           });

    </script>

</script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
	<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
	<style>
	html, body, #map {
	height: 700px;
	width: 100%;
	padding: 0;
	margin: 0;
	background-color: #3E7BB6;
	}

	#map {
	background-color: #9abae0;
	box-shadow: inset 1px 1px 5px 1px;
	}
	.selected {
	background-color: #ff8a87;
	}

	h1,
	#tool-tip,
	#layer_selector li {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	}
	h1 {
	text-align: center;
	color: white;
	}



	#layer_selector {
	position: absolute;
	top: 70px;
	right: 350px;
	padding: 0;
	}

	#layer_selector ul {
	padding: 0; margin: 0;
	list-style-type: none;
	}

	#show_cities {cursor: pointer;}
	#hide_cities {cursor: pointer;}

	#layer_selector li {
	border-bottom: 1px solid #999;
	padding-left: 5px;
	padding-right: 5px;
	font-size: 13px;
	color: #444;
	cursor: pointer;
	display: inline;
	-webkit-transition: color 2s; /* For Safari 3.1 to 6.0 */
	transition: color 2s;
	}

	#layer_selector2 {
	position: absolute;
	top: 70px;
	right: 150px;
	padding: 0;
	}

	#layer_selector2 ul {
	padding: 0; margin: 0;
	list-style-type: none;
	}

	#layer_selector2 li {
	border-bottom: 1px solid #999;
	padding-left: 15px;
	padding-right: 5px;
	font-size: 13px;
	color: #444;
	cursor: pointer;
	display: inline;
	-webkit-transition: color 2s; /* For Safari 3.1 to 6.0 */
	transition: color 2s;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	}

	#layer_selector li:hover {
	color: #3E7BB6;
	cursor: pointer;
	}

	#layer_selector li.selected {
	color: white;
	}
	#tool-tip {
	position: absolute;
	width: auto;
	height: 55px;
	background-color: white;
	opacity: .9;
	z-index: 50;
	border-radius: 15px;
	text-align: center;
	color: #3E7BB6;
	vertical-align: bottom;
	font-size: 20px;
	padding: 5px;
	}


	#tool-tip p {
	margin-top: 5px;
	}

	#header_container { opacity: .7; height:60px; left:0; position:fixed; width:100%; top:0; }
	#header{ margin:0 auto; width:940px; text-align:center; }
	</style>
	</head>

	<body>
	<h1>Pollution Over Time</h1>
	<div id="map"></div>
	<div id="tool-tip"></div>

	<div id="header_container">
	<div id="header">
	<div id="layer_selector" class="cartodb-infobox">
	<ul>
	<li data="2000" class="selected">2000</li>
	<li data="2001">2001</li>
	<li data="2002">2002</li>
	<li data="2003">2003</li>
	<li data="2004">2004</li>
	<li data="2005">2005</li>
	<li data="2006">2006</li>
	<li data="2007">2007</li>
	<li data="2008">2008</li>
	<li data="2009">2009</li>
	<li data="2010">2010</li>
	<li data="2011">2011</li>
	<li data="2012">2012</li>
	</ul>

	</div>
	<div id="layer_selector2" class="cartodb-infobox">
	<ul>
	<li data="pm_2_5" id="show_cities">Show Cities</li>
	<li id="hide_cities" class="selected">Hide Cities</li>
	</ul>
	</div>

	</div>



	</body>
	<script type="cartocss/html" id="cities">
	#who_georeferenced_clean{
	marker-fill-opacity: 0.8;
	marker-line-color: #FFF;
	marker-line-width: 1.5;
	marker-line-opacity: 1;
	marker-width: 10;
	marker-fill: #FFFFB2;
	marker-allow-overlap: true;
	}
	#who_georeferenced_clean [ pm_2_5 <= 153] {
	marker-fill: #B10026;
	}
	#who_georeferenced_clean [ pm_2_5 <= 90] {
	marker-fill: #E31A1C;
	}
	#who_georeferenced_clean [ pm_2_5 <= 69] {
	marker-fill: #FC4E2A;
	}
	#who_georeferenced_clean [ pm_2_5 <= 55] {
	marker-fill: #FD8D3C;
	}
	#who_georeferenced_clean [ pm_2_5 <= 41] {
	marker-fill: #FEB24C;
	}
	#who_georeferenced_clean [ pm_2_5 <= 28] {
	marker-fill: #FED976;
	}
	#who_georeferenced_clean [ pm_2_5 <= 15] {
	marker-fill: #FFFFB2;
	}

	</script>

	<script type="cartocss/html" id="pm25_na">
	/City Styles/

	#pm25_na{
	polygon-fill: #FFFFB2;
	polygon-opacity: 0.8;
	line-color: #FFF;
	line-width: 1;
	line-opacity: 1;
	}
	#pm25_na [ {0} <= 32.54] {
	polygon-fill: #B10026;
	}
	#pm25_na [ {0} <= 25.17] {
	polygon-fill: #e34444;
	}
	#pm25_na [ {0} <= 15.17] {
	polygon-fill: #E31A1C;
	}
	#pm25_na [ {0} <= 10.85] {
	polygon-fill: #FC4E2A;
	}
	#pm25_na [ {0} <= 9.15] {
	polygon-fill: #fd6f27;
	}
	#pm25_na [ {0} <= 8.15] {
	polygon-fill: #FD8D3C;
	}
	#pm25_na [ {0} <= 6.06] {
	polygon-fill: #FEB24C;
	}
	#pm25_na [ {0} <= 4.62] {
	polygon-fill: #FED976;
	}
	#pm25_na [ {0} <= 2.98] {
	polygon-fill: #fffde2;
	}
	</script>

	<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>

	<script>
	$('#layer_selector li').click(function() {
	$('#layer_select li').addClass('selected');
	});
	var col1 = 'pm25_2000';
	var col2 = '';
	var country = 'country';
	var city = 'city_station';
	var pm = 'pm_2_5';

	//Formats the columns for us into css
	String.prototype.format = (function (i, safe, arg) {
	function format() {
	var str = this,
	len = arguments.length + 1;

	for (i = 0; i < len; arg = arguments[i++]) {
	safe = typeof arg === 'object' ? JSON.stringify(arg) : arg;
	str = str.replace(RegExp('\\{' + (i - 1) + '\\}', 'g'), safe);
	}
	return str;
	}

	//format.native = String.prototype.format;
	return format;

	})();

	// create layer selector
	function main() {
	var map = new L.Map('map', {
	zoomControl: true,
	center: [43, 0],
	zoom: 2,
	scrollWheelZoom: true,
	searchControl: true
	});


	// create our layers
	cartodb.createLayer(map, {
	user_name: 'dmonay',
	type: 'cartodb',
	sublayers: [{
	sql: "SELECT * FROM bathymetry_layers",
	cartocss: "#bathymetry_layers{ polygon-fill: #598cdb;polygon-opacity: 0.2;line-color: #FFF;line-width: 0;line-opacity: 1;}"
	},{
	sql: "SELECT * FROM pm25_na",
	cartocss: $('#pm25_na').html().format('pm25_2000'),
	interactivity: "cartodb_id, the_geom, pm25_2000, pm25_2001, pm25_2002, pm25_2003, pm25_2004, pm25_2005, pm25_2006, pm25_2007, pm25_2008, pm25_2009, pm25_2010, pm25_2011, pm25_2012, country"
	},{
	sql: "SELECT * FROM who_georeferenced_clean",
	cartocss: $('#cities').html().format('city_station'),
	interactivity: "city_station, pm_2_5, country"

	}]

	}).done(function(layer) {
	// add the layers to our map
	map.addLayer(layer);
	sublayer_country = layer.getSubLayer(1);
	sublayer_country.setInteraction(true);
	sublayer_city = layer.getSubLayer(2);
	sublayer_city.setInteraction(true);
	createSelector(sublayer_country);
	createSelector(sublayer_city);
	sublayer_city.hide();

	//create infowindow
	// sublayer_city.infowindow.set('template', $('#infowindow_template').html()).on('error', function() {
	// console.log("some error occurred");
	//});

	//Make Tool-tip follow the mouse.
	var event = function(e){
	$('#tool-tip').css({
	left: e.pageX,
	top: e.pageY
	});
	};
	//Retrieve data to the tooltip on countries
	sublayer_country.on('featureOver', function(e, pos, latlng, data) {
	$('#tool-tip').html('<p>' +data[country]+'<br>'+ data[col1] + 'μg/mm<sub>3</sub></p>');
	$(document).bind('mousemove', event);
	$('#tool-tip').show();

	});
	sublayer_country.on('featureOut', function(e, pos, latlng, data) {
	//Make the tooltip go away when off countries
	$('#tool-tip').hide();
	$(document).unbind('mousemove', event, false);
	});
	//Retrieve data to the tooltip on cities
	sublayer_city.on('featureOver', function(e, pos, latlng, data) {
	$('#tool-tip').html('<p>' +data[city]+', '+data[country]+ '<br>'+data[pm]+ 'μg/mm<sub>3</sub></p>');
	$(document).bind('mousemove', event);
	$('#tool-tip').show();

	});
	sublayer_city.on('featureOut', function(e, pos, latlng, data) {
	//Make the tooltip go away when off cities
	$('#tool-tip').hide();
	$(document).unbind('mousemove', event, false);
	});




	});
	}


	window.onload = main;

	/Selection process ------------------------------------------ /

	var styles = {}, selectedStyle;
	// create layer selector
	function createSelector(layer) {


	var $options = $('#layer_selector li');
	$options.click(function(e) {
	// get the area of the selected layer
	var $li = $(e.target);
	var year = $li.attr('data');

	// deselect all and select the clicked one
	$options.removeClass('selected');
	$li.addClass('selected');


	col1 = 'pm25_' + year;
	var style = $('#pm25_na').html().format(col1);
	layer.setCartoCSS(style);
	sublayer_city.hide();


	$('#show_cities').removeClass();
	$('#hide_cities').addClass('selected');
	});
	}

	//show and hide cities
	var $options2 = $('#layer_selector2 li');
	$options2.on("click", function(e) {
	// get the area of the selected layer
	var $li = $(e.target);
	// deselect all and select the clicked one
	$options2.removeClass('selected');
	$li.addClass('selected');
	});

	$("#show_cities").on("click", function(){
	//Set the column to the city_station from our cities table
	col2 = 'city_station';
	//create a local variable named style and convert our cities script above to html and run the format function defined above to render some CSS.
	var style = $('#cities').html().format(col2);
	//Attached the CSS to the layer
	sublayer_city.setCartoCSS(style);
	sublayer_city.show();
	});
	//Hide the cities on click
	$("#hide_cities").on("click", function(){
	sublayer_city.hide();
	var year = $('#layer_selector li.selected').attr('data');
	col1 = 'pm25_' + year;
	console.log(col1);
	});

	</script>

	</script>
	</html>