Rub21 · January 31, 2013 04:39
diff --git a/index.html b/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>

	<!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>