Created
August 24, 2012 16:18
-
-
Save tmcw/3452458 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment