Rub21
1/31/2013 - 4:39 AM
index.html
<!DOCTYPE html>
<html>
<head>
<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.4/mapbox.js'></script>
<link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.4/mapbox.css' rel='stylesheet' />
<title>VTIrene recap</title>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
#sidebar {
position:absolute;
top:0px;
left:0px;
background:#fff;
z-index:999;
overflow:auto;
opacity:0.6;
}
#sidebar:hover { opacity:1; }
#timeline {
padding:10px;
}
#timeline a {
font-size:15px;
text-decoration:none;
}
#timeline #controls {
position:absolute;
top:15px;
right:15px;
}
#timeline #controls a {
font-size:20px;
color:#DC1438;
margin-left:10px;
}
a.year-active {
color:#f2f2f2;
background-color : #494184;
border: 1px solid #008000;
border-radius: 5px;
padding: 3px 3px 3px 3px;
}
</style>
<div id='sidebar'>
<div id='timeline'>
<div id='controls'></div>
<h2>Reaction to Tropical Storm Irene in VT, August 28 - September 29, 2011<br/><a>These alerts and updates were originally posted to </a><a href="http://vtresponse.wordpress.com/" target="_blank">VTResponse.com </a><a>and to </a><a href="http://vtirene.crowdmap.com/" target="_blank">the VTIrene crowdmap</a></h2>
</div>
</div>
<div id='map'></div>
<script>
var m = mapbox.map('map');
m.addLayer(mapbox.layer().id('landplanner.map-vi0lcisy'));
var timeline = document.getElementById('timeline'),
controls = document.getElementById('controls');
var markerLayer = mapbox.markers.layer()
// this is a quick optimization - otherwise all markers are briefly displayed
// before filtering to August 28th
.filter(function() { return false })
.url('http://geosprocket.cartodb.com/api/v2/sql?q=SELECT%20*%20FROM%20vtirene_082212%20&format=geojson&foo=geojsonp', function(err, features) {
// A closure for clicking years. You give it a year, and it returns a function
// that, when run, clicks that year. It's this way in order to be used as both an
// event handler and run manually.
function click_year(y) {
return function() {
var active = document.getElementsByClassName('year-active');
if (active.length) active[0].className = '';
document.getElementById('y' + y).className = 'year-active';
markerLayer.filter(function(f) {
return f.properties.incident_date == y;
});
return false;
};
}
var years = {},
yearlist = [],
year_links = [];
for (var i = 0; i < features.length; i++) {
years[features[i].properties.incident_date] = true;
features[i].properties['marker-symbol'] = features[i].properties['markersymbol'];
features[i].properties['marker-color'] = features[i].properties['markercolor'];
}
for (var y in years) yearlist.push(y);
yearlist.sort();
for (var i = 0; i < yearlist.length; i++) {
var a = timeline.appendChild(document.createElement('a'));
a.innerHTML = yearlist[i] + ' ';
a.id = 'y' + yearlist[i];
a.href = '#';
a.onclick = click_year(yearlist[i]);
}
var stop = controls.appendChild(document.createElement('a')),
play = controls.appendChild(document.createElement('a')),
playStep;
stop.innerHTML = 'STOP <img style="vertical-align:bottom;" src="stop1.png" width="30" height="30">';
play.innerHTML = 'PLAY <img style="vertical-align:bottom;" src="play1.png" width="30" height="30">';
play.onclick = function() {
var step = 0;
playStep = window.setInterval(function() {
if (step < yearlist.length) {
click_year(yearlist[step])();
step++;
} else {
window.clearInterval(playStep);
}
}, 1000);
};
stop.onclick = function() {
window.clearInterval(playStep);
};
click_year('2011-08-28')();
});
//Add interactivity:
//mapbox.markers.interaction(markerLayer);
//Add layer to the map:
var interaction = mapbox.markers.interaction(markerLayer);
m.addLayer(markerLayer);
interaction.formatter(function(feature) {
var o = '<img src="' + 'vtstrong1.jpg' + '">' +
'<p>' + feature.properties.incident_title + '</p>' +
'<p style="font-size:12px;word-wrap: break-word;">' + feature.properties.description + '</p>' +
'</a>';
return o;
});
//m.ui.attribution.add();
m.zoom(8).center({ lat: 44.11914151643737, lon: -72.79541015625 });
</script>
</body>
</html>