index.html
<html>
<head>
<link rel="stylesheet" href="//libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" />
<link rel="stylesheet" href="//geosprocket.com/assets/bootstrap/css/bootstrap-cosmo.css" />
<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;
padding:15px;
opacity:0.9;
}
</style>
<script>
var map;
function init(){
map = new L.Map('map', {
center: [43.784,-72.358],
zoom: 8
});
var hash = new L.Hash(map);
L.tileLayer('//a.tiles.mapbox.com/v3/landplanner.map-6j8z2bjk/{z}/{x}/{y}.png', {
attribution: 'MapBox'
}).addTo(map);
var layerUrl = '//geosprocket.cartodb.com/api/v1/viz/2134/viz.json';
var layerOptions = {
query: "SELECT * FROM {{table_name}}"
}
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) {
map.addLayer(layer);
layers.push(layer);
}).on('error', function() {
});
L.tileLayer('//a.tiles.mapbox.com/v3/landplanner.map-008pcvum/{z}/{x}/{y}.png', {
}).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>
</body>
<script src="//libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script>
<script src="//geosprocket.com/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="//geosprocket.com/assets/stamen/leaflet-hash.js"></script>
<script src="//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">
<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>