javisantana/index.html

## index.html
<html>
<head>
  <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" />
  <link rel="stylesheet" href="http://geosprocket.com/assets/bootstrap/css/bootstrap-cosmo.css" />
   <!--[if lte IE 8]>
        <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.ie.css" />
    <![endif]-->

	<style>
    html, body {width:100%; height:100%; padding: 0; margin: 0;}
    #map {width: 100%; height:100%; background: black; z-index:1;}
    #menu { position: absolute; top: 5px; right: 10px; width: 400px; height:60px; background: transparent; z-index:10;}
    #menu a {
              margin: 15px 10px 0 0;
              float: right;
              vertical-align: baseline;
              width: 70px;
              padding: 10px;
              text-align: center;
              font: bold 15px;
              line-height: normal;
              color: #555;
              border-radius: 6px;
              border: 1px solid #777777;
              background: #ffffff;
              text-decoration: none;
              cursor: pointer;
            }
    #menu a.selected,
    #menu a:hover {
              color: #F84F40;
            }
    #footer {
        position:absolute;
        bottom:0px;
        left:0px;
        right:0px;
        background:#fff;
        z-index:999;
        overflow:auto;
        /*height:160px;*/
        padding:15px;
        opacity:0.9;

    }
	</style>
	<script>
  var map;
  function init(){
    // initiate leaflet map
    map = new L.Map('map', {
      center: [43.784,-72.358],
      zoom: 8
    });
    var hash = new L.Hash(map);

    L.tileLayer('http://a.tiles.mapbox.com/v3/landplanner.map-6j8z2bjk/{z}/{x}/{y}.png', {
      attribution: 'MapBox'
    }).addTo(map);

    var layerUrl = 'http://geosprocket.cartodb.com/api/v1/viz/2134/viz.json';
    var layerOptions = {
      query: "SELECT * FROM {{table_name}}"//,
      //tile_style: "#{{table_name}}{marker-fill: #F84F40; marker-width: 8; marker-line-color: white; marker-line-width: 2; marker-clip: false; marker-allow-overlap: true;} "
    }

    var layers = [];
    var LayerActions = {
      all: function(){
        layers[0].setQuery("SELECT * FROM {{table_name}}");
        return true;
      },
      farm: function(){
        layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%Farm%';");
        return true;
      },
      vote: function(){
        layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%Vot%';");
        return true;
      },
      liquor: function(){
        layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%Liquor%';");
        return true;
      },
      ski: function(){
        layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%Ski%';");
        return true;
      },
      housing: function(){
        layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%Housing%';");
        return true;
      },
      wind: function(){
        layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%Turbine%';");
        return true;
      },
      yankee: function(){
        layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%Yankee%';");
        return true;
      },
      rural: function(){
        layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%Rural%';");
        return true;
      },
      city: function(){
        layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%City%';");
        return true;
      },
      horse: function(){
        layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%Horse%';");
        return true;
      },
      cow: function(){
        layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%Cow%';");
        return true;
      },
      climate: function(){
        layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%Climate%';");
        return true;
      },
      irene: function(){
        layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%Irene%';");
        return true;
      },
      fema: function(){
        layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%FEMA%';");
        return true;
      },
      hockey: function(){
        layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%Hockey%';");
        return true;
      },
      gun: function(){
        layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%Gun%';");
        return true;
      }
    }

    cartodb.createLayer(map, layerUrl, layerOptions)
      .on('done', function(layer) {
        //layer.infowindow.set('template', $('#infowindow_template').html());
        map.addLayer(layer);
        layers.push(layer);
      }).on('error', function() {
        //log the error
      });


       L.tileLayer('http://a.tiles.mapbox.com/v3/landplanner.map-008pcvum/{z}/{x}/{y}.png', {
        //attribution: 'Openstreetmap Contributors'
      }).addTo(map);

    $('.button').click(function(){
    $('.button').removeClass('selected');
    $(this).addClass('selected');
    LayerActions[$(this).attr('id')]();
    })

  }
	</script>
</head>
<body onload="init()">
  <div id='map'></div>
  <div id='menu'>
      <a href="#farm" id="farm" class="button farm">Farm</a>
      <a href="#vote" id="vote" class="button vote">Vote</a>
      <a href="#liquor" id="liquor" class="button liquor">Liquor</a>
      <a href="#ski" id="ski" class="button ski">Ski</a>
      <a href="#yankee" id="yankee" class="button yankee">Yankee</a>
      <a href="#gun" id="gun" class="button gun">Gun</a>
      <a href="#wind" id="wind" class="button wind">Turbine</a>
      <a href="#housing" id="housing" class="button housing">Housing</a>
      <a href="#rural" id="rural" class="button rural">Rural</a>
      <a href="#city" id="city" class="button city">City</a>
      <a href="#horse" id="horse" class="button horse">Horse</a>
      <a href="#cow" id="cow" class="button cow">Cow</a>
      <a href="#climate" id="climate" class="button climate">Climate</a>
      <a href="#irene" id="irene" class="button irene">Irene</a>
      <a href="#fema" id="fema" class="button fema">FEMA</a>
      <a href="#hockey" id="hockey" class="button hockey">Hockey</a>
      <a href="#all" id="all" class="button all">All Records</a>
  </div>
  <!--<div id="footer">
      <div class="container">
             <div class="featurette">
                 <h1><img src="public-post-520x34.png"></h1><h4>Explore Vermont Public Radio's 14,000 Public Post records by geography.</h4>
             </div>
         </div>
  </div>-->


</body>
<script src="http://libs.cartocdn.com/cartodb.js/v2/cartodb.uncompressed.js"></script>
<script src="http://geosprocket.com/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="http://geosprocket.com/assets/stamen/leaflet-hash.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="infowindow/html" id="infowindow_template">
    <div class="cartodb-popup">
       <a href="#close" class="cartodb-popup-close-button close">x</a>
       <div class="cartodb-popup-content-wrapper">
         <div class="cartodb-popup-content">
           <!-- content.data contains the field info -->
           <h2>{{content.data.town}}</h2>
           <hr>
           <h4>{{content.data.classifica}}, {{content.data.date2}</h4><hr>
         </div>
       </div>
       <div class="cartodb-popup-tip-container"></div>
    </div>
  </script>
</html>
	<html>
	<head>
	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" />
	<link rel="stylesheet" href="http://geosprocket.com/assets/bootstrap/css/bootstrap-cosmo.css" />
	<!--[if lte IE 8]>
	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.ie.css" />
	<![endif]-->

	<style>
	html, body {width:100%; height:100%; padding: 0; margin: 0;}
	#map {width: 100%; height:100%; background: black; z-index:1;}
	#menu { position: absolute; top: 5px; right: 10px; width: 400px; height:60px; background: transparent; z-index:10;}
	#menu a {
	margin: 15px 10px 0 0;
	float: right;
	vertical-align: baseline;
	width: 70px;
	padding: 10px;
	text-align: center;
	font: bold 15px;
	line-height: normal;
	color: #555;
	border-radius: 6px;
	border: 1px solid #777777;
	background: #ffffff;
	text-decoration: none;
	cursor: pointer;
	}
	#menu a.selected,
	#menu a:hover {
	color: #F84F40;
	}
	#footer {
	position:absolute;
	bottom:0px;
	left:0px;
	right:0px;
	background:#fff;
	z-index:999;
	overflow:auto;
	/height:160px;/
	padding:15px;
	opacity:0.9;

	}
	</style>
	<script>
	var map;
	function init(){
	// initiate leaflet map
	map = new L.Map('map', {
	center: [43.784,-72.358],
	zoom: 8
	});
	var hash = new L.Hash(map);

	L.tileLayer('http://a.tiles.mapbox.com/v3/landplanner.map-6j8z2bjk/{z}/{x}/{y}.png', {
	attribution: 'MapBox'
	}).addTo(map);

	var layerUrl = 'http://geosprocket.cartodb.com/api/v1/viz/2134/viz.json';
	var layerOptions = {
	query: "SELECT * FROM {{table_name}}"//,
	//tile_style: "#{{table_name}}{marker-fill: #F84F40; marker-width: 8; marker-line-color: white; marker-line-width: 2; marker-clip: false; marker-allow-overlap: true;} "
	}

	var layers = [];
	var LayerActions = {
	all: function(){
	layers[0].setQuery("SELECT * FROM {{table_name}}");
	return true;
	},
	farm: function(){
	layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%Farm%';");
	return true;
	},
	vote: function(){
	layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%Vot%';");
	return true;
	},
	liquor: function(){
	layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%Liquor%';");
	return true;
	},
	ski: function(){
	layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%Ski%';");
	return true;
	},
	housing: function(){
	layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%Housing%';");
	return true;
	},
	wind: function(){
	layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%Turbine%';");
	return true;
	},
	yankee: function(){
	layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%Yankee%';");
	return true;
	},
	rural: function(){
	layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%Rural%';");
	return true;
	},
	city: function(){
	layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%City%';");
	return true;
	},
	horse: function(){
	layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%Horse%';");
	return true;
	},
	cow: function(){
	layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%Cow%';");
	return true;
	},
	climate: function(){
	layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%Climate%';");
	return true;
	},
	irene: function(){
	layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%Irene%';");
	return true;
	},
	fema: function(){
	layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%FEMA%';");
	return true;
	},
	hockey: function(){
	layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%Hockey%';");
	return true;
	},
	gun: function(){
	layers[0].setQuery("SELECT * FROM {{table_name}} WHERE entities LIKE '%Gun%';");
	return true;
	}
	}

	cartodb.createLayer(map, layerUrl, layerOptions)
	.on('done', function(layer) {
	//layer.infowindow.set('template', $('#infowindow_template').html());
	map.addLayer(layer);
	layers.push(layer);
	}).on('error', function() {
	//log the error
	});


	L.tileLayer('http://a.tiles.mapbox.com/v3/landplanner.map-008pcvum/{z}/{x}/{y}.png', {
	//attribution: 'Openstreetmap Contributors'
	}).addTo(map);

	$('.button').click(function(){
	$('.button').removeClass('selected');
	$(this).addClass('selected');
	LayerActions[$(this).attr('id')]();
	})

	}
	</script>
	</head>
	<body onload="init()">
	<div id='map'></div>
	<div id='menu'>
	<a href="#farm" id="farm" class="button farm">Farm</a>
	<a href="#vote" id="vote" class="button vote">Vote</a>
	<a href="#liquor" id="liquor" class="button liquor">Liquor</a>
	<a href="#ski" id="ski" class="button ski">Ski</a>
	<a href="#yankee" id="yankee" class="button yankee">Yankee</a>
	<a href="#gun" id="gun" class="button gun">Gun</a>
	<a href="#wind" id="wind" class="button wind">Turbine</a>
	<a href="#housing" id="housing" class="button housing">Housing</a>
	<a href="#rural" id="rural" class="button rural">Rural</a>
	<a href="#city" id="city" class="button city">City</a>
	<a href="#horse" id="horse" class="button horse">Horse</a>
	<a href="#cow" id="cow" class="button cow">Cow</a>
	<a href="#climate" id="climate" class="button climate">Climate</a>
	<a href="#irene" id="irene" class="button irene">Irene</a>
	<a href="#fema" id="fema" class="button fema">FEMA</a>
	<a href="#hockey" id="hockey" class="button hockey">Hockey</a>
	<a href="#all" id="all" class="button all">All Records</a>
	</div>
	<!--<div id="footer">
	<div class="container">
	<div class="featurette">
	<h1><img src="public-post-520x34.png"></h1><h4>Explore Vermont Public Radio's 14,000 Public Post records by geography.</h4>
	</div>
	</div>
	</div>-->


	</body>
	<script src="http://libs.cartocdn.com/cartodb.js/v2/cartodb.uncompressed.js"></script>
	<script src="http://geosprocket.com/assets/bootstrap/js/bootstrap.min.js"></script>
	<script src="http://geosprocket.com/assets/stamen/leaflet-hash.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script type="infowindow/html" id="infowindow_template">
	<div class="cartodb-popup">
	<a href="#close" class="cartodb-popup-close-button close">x</a>
	<div class="cartodb-popup-content-wrapper">
	<div class="cartodb-popup-content">
	<!-- content.data contains the field info -->
	<h2>{{content.data.town}}</h2>
	<hr>
	<h4>{{content.data.classifica}}, {{content.data.date2}</h4><hr>
	</div>
	</div>
	<div class="cartodb-popup-tip-container"></div>
	</div>
	</script>
	</html>